popup.css

1html,2body,3#app,4#pre-lock,5.popup-root {6  width: 320px;7  min-height: 520px;8  height: 520px;9  margin: 0;10}1112body {13  overflow: hidden;14  background: var(--bg);15  color: var(--t0);16  font-family: var(--font-ui);17  font-weight: 300;18  position: relative;19}2021* {22  box-sizing: border-box;23}2425button,26input,27textarea,28select {29  font: inherit;30}3132button {33  border: 0;34}3536#pre-lock {37  position: absolute;38  inset: 0;39  z-index: 10;40}4142#pre-lock[hidden] {43  display: none;44}4546.popup-root {47  position: relative;48  overflow: hidden;49}5051.peach-theme {52  color: var(--peach-t0);53  font-family: var(--font-ui);54  font-weight: 300;55  box-sizing: border-box;56  text-align: left;57}58.peach-theme, .peach-theme * { box-sizing: inherit; }5960.peach-brand-mark {61  width: 14px;62  height: 14px;63  flex-shrink: 0;64}6566.peach-status-pip.is-hidden {67  display: none;68}6970.peach-status-pip.unlocked {71  background: var(--peach-health-ok);72  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);73}7475.peach-status-pip.pulse {76  animation: pip-pulse 400ms var(--peach-curve-settle) both;77}7879/* Shell */80.peach-shell, .peach-screen {81  background:82    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),83    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),84    var(--peach-bg);85  border: 1px solid var(--peach-t3);86  box-shadow:87    0 2px 8px rgba(0,0,0,0.55),88    0 14px 48px rgba(0,0,0,0.7),89    0 0 0 1px rgba(240,232,216,0.04);90  overflow: hidden;91}92.peach-shell {93  display: grid;94  grid-template-rows: auto 1fr;95  min-height: 520px;96  position: relative;97  isolation: isolate;98}99100.peach-shell[data-surface="extension"] {101  width: min(320px, 100vw);102  border-radius: 0;103  height: 520px;104  max-height: 520px;105  overflow: hidden;106}107108/* ── Lock screen – full-window lock/create stage ── */109.lock-screen--vault-stage {110  display: flex;111  flex-direction: column;112  gap: 18px;113  padding: 20px 18px 18px;114  justify-content: flex-start;115}116.lock-screen--vault-stage .peach-lock-panel {117  margin-top: auto;118}119.peach-lock-headline--unlock {120  max-width: 220px;121}122.peach-lock-hero--unlock {123  padding-top: 14px;124}125.peach-lock-panel--unlock {126  gap: 10px;127}128129.peach-lock-restore-link {130  background: transparent;131  border: none;132  cursor: pointer;133  font-family: var(--font-mono);134  font-size: 0.625rem;135  letter-spacing: 0.08em;136  color: var(--t1);137  padding: 5px 0;138  text-align: left;139  transition: color 150ms ease;140}141142.peach-lock-restore-link:hover {143  color: var(--t0);144}145.peach-shell[data-surface="extension"] .peach-stage {146  min-height: 250px;147}148149/* Screen (unlock) */150.peach-screen {151  width: min(320px, 100vw);152  min-height: 100%;153  height: 100%;154  border-radius: 0;155  padding: 16px 20px 18px;156  display: grid;157  gap: 14px;158}159.peach-screen[data-motion-phase="enter"] {160  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;161}162.peach-screen-header { min-height: 20px; }163164/* Wordmark */165.peach-wordmark {166  margin: 0;167  font-family: var(--font-display);168  font-size: 0.9375rem;169  font-style: italic;170  letter-spacing: 0.03em;171  color: var(--peach-t0);172  display: inline-flex;173  min-height: 1em;174}175176/* Motion text / char animation */177.peach-motion-text { display: inline-flex; min-height: 1em; }178.peach-motion-char {179  display: inline-block;180  white-space: pre;181  opacity: 0;182  transform: translateY(0.22em);183  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;184  animation-delay: calc(var(--peach-char-index, 0) * 20ms);185}186187/* Chrome */188.peach-chrome {189  position: relative;190  z-index: 10;191  padding: 16px 20px 0;192  display: flex;193  justify-content: space-between;194  align-items: center;195  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense196     fallback) per §15 regression guard. Without pointer-events:none, the197     empty header strip also sits above `.peach-overlay-view` (z-index:2)198     and swallows clicks meant for an overlay's back button / top search. */199  pointer-events: none;200}201.peach-chrome .peach-btn { pointer-events: auto; }202.peach-chrome.is-hidden-for-overlay,203.peach-search-wrap.is-hidden-for-overlay {204  opacity: 0;205  visibility: hidden;206  pointer-events: none;207}208.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }209.peach-status-pip {210  width: 5px;211  height: 5px;212  border-radius: 50%;213  background: var(--peach-t3);214  display: inline-flex;215  flex-shrink: 0;216  transition: background 400ms ease, box-shadow 400ms ease;217}218.peach-chrome-actions { display: flex; gap: 6px; }219220/* Shell body */221.peach-shell-body {222  position: relative;223  display: grid;224  grid-template-rows: 1fr auto;225  min-height: 0;226  min-width: 0;227  width: 100%;228  overflow: hidden;229  height: 100%;230}231.peach-shell-veil {232  position: absolute; inset: 0;233  background: #000; opacity: 0;234  pointer-events: none; z-index: 1;235}236.peach-shell[data-motion-phase="enter"] .peach-shell-body {237  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;238}239.peach-shell[data-motion-phase="exit"] .peach-shell-veil {240  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;241}242243/* Content frame */244.peach-content-frame {245  display: grid;246  grid-template-rows: 1fr auto;247  grid-template-columns: minmax(0, 1fr);248  align-content: start;249  min-height: 0;250  min-width: 0;251  overflow: hidden;252  transition: opacity 80ms ease, transform 80ms ease;253}254.peach-content-frame.navigating {255  opacity: 0.93;256  transform: translateX(2px);257}258.peach-content-frame[data-content-phase="enter"] {259  animation: peach-content-enter 135ms ease-out both;260}261.peach-content-frame[data-content-phase="exit"] {262  animation: peach-content-exit 95ms ease-in forwards;263}264.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }265266/* Stage */267.peach-stage {268  padding: 10px 20px 12px;269  display: grid;270  gap: 12px;271  align-content: start;272  min-width: 0;273  min-height: 0;274  max-width: 100%;275  overflow-y: auto;276  overflow-x: hidden;277  scrollbar-width: none;278  -ms-overflow-style: none;279  overscroll-behavior: contain;280}281.peach-stage::-webkit-scrollbar { display: none; }282283/* Entry name */284.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }285.peach-entry-header {286  position: relative;287  z-index: 1;288  display: flex;289  align-items: flex-start;290  gap: 6px;291  min-width: 0;292}293.peach-entry-header-name {294  flex: 1;295  min-width: 0;296}297.peach-entry-name {298  margin: 0;299  padding-bottom: 0.12em;300  font-family: var(--font-display);301  font-style: italic; font-weight: 400;302  font-size: 44px; line-height: 0.95;303  color: var(--peach-t0);304  display: -webkit-box;305  -webkit-line-clamp: 2;306  -webkit-box-orient: vertical;307  overflow: hidden;308  text-wrap: balance;309}310.peach-entry-name--lg { font-size: 40px; }311.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }312.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }313.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }314315/* Trash icon in entry header */316.peach-entry-trash-btn {317  flex-shrink: 0;318  padding: 4px;319  margin-top: 4px;320  background: transparent;321  border: none;322  cursor: pointer;323  color: var(--peach-t2);324  border-radius: 4px;325  transition: color 140ms ease, background 140ms ease;326  display: flex;327  align-items: center;328  justify-content: center;329}330.peach-entry-trash-btn:hover {331  color: var(--peach-t1);332  background: var(--peach-t3);333}334.peach-entry-trash-confirm {335  display: flex;336  align-items: center;337  gap: 6px;338  flex-shrink: 0;339  margin-top: 6px;340  flex-wrap: nowrap;341}342.peach-entry-trash-confirm-label {343  font-family: var(--font-mono);344  font-size: 0.5625rem;345  letter-spacing: 0.1em;346  color: var(--peach-t2);347  white-space: nowrap;348}349.peach-entry-name-button {350  padding: 0;351  background: transparent;352  text-align: left;353  cursor: pointer;354  max-width: 100%;355  overflow: hidden;356  display: block;357}358.peach-entry-name-char {359  display: inline-block;360  white-space: pre;361  opacity: 0;362  transform: translateY(0.22em);363  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;364  animation-delay: calc(var(--char-index, 0) * 20ms);365}366367/* Domain */368.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }369.peach-domain-row {370  width: 100%; border: 0; background: transparent; color: inherit;371  padding: 0; display: flex; justify-content: space-between; align-items: baseline;372  cursor: default;373}374.peach-domain-value {375  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;376  font-size: 0.625rem; font-style: italic;377  letter-spacing: 0.12em; color: var(--peach-t1);378}379380/* Fields */381.peach-fields { display: grid; gap: 10px; }382.peach-field-card { display: grid; gap: 7px; }383.peach-label {384  font-family: Inter, system-ui, sans-serif;385  text-transform: uppercase; letter-spacing: 0.2em;386  font-size: 0.5rem; color: var(--peach-t2);387}388.peach-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: 0.8125rem; 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: 1rem; 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: 0.875rem;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: 0.625rem;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: 0.5625rem;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: 0.9375rem;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: 0.5625rem;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: 0.8125rem;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: 0.6875rem;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: 0.6875rem;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: 0.5625rem;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: 0.875rem;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: 0.6875rem;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: 0.6875rem;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: 0.625rem; 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: 0.75rem; 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: 0.6875rem; }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/* Biometric unlock button */875.peach-biometric-btn {876  display: flex;877  align-items: center;878  justify-content: center;879  gap: 6px;880  margin-top: 8px;881  width: 100%;882}883884/* Copy button */885.peach-copy-btn {886  position: relative; overflow: hidden;887  color: var(--peach-t2); border-color: var(--peach-t3);888}889.peach-copy-icon {890  display: inline-flex; align-items: center; justify-content: center;891  position: relative; z-index: 1;892}893.peach-copy-icon-svg { display: block; }894.peach-copy-sheen {895  position: absolute; inset: 0;896  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%);897  opacity: 0; transform: scaleX(0.15); transform-origin: left center;898}899.peach-copy-btn.is-copied {900  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;901  box-shadow:902    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),903    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),904    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);905}906.peach-copy-btn.is-copied .peach-copy-icon {907  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;908}909.peach-copy-btn.is-copied .peach-copy-sheen {910  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;911}912.peach-copy-btn.is-retreat {913  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;914}915.peach-copy-btn.is-retreat .peach-copy-sheen {916  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;917}918.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }919.peach-copy-drain-bar {920  display: block; width: 100%; height: 100%;921  background: var(--peach-accent); opacity: 0.7;922  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;923}924925/* Unlock screen elements */926.peach-unlock-headline {927  margin: 2px 0 0;928  font-family: var(--font-display);929  font-size: 52px; line-height: 0.95;930  font-style: italic; font-weight: 400;931}932.peach-subline {933  margin: 0;934  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;935  font-size: 0.625rem; color: var(--peach-t2); font-style: italic;936}937.peach-subline--lock {938  max-width: 248px;939  line-height: 1.5;940}941.peach-underline-input {942  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);943  padding: 6px 0; background: transparent; color: var(--peach-t0);944  outline: none;945  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;946  font-size: 0.8125rem;947  caret-color: var(--peach-accent);948}949.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }950.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }951.peach-hint {952  margin: 0;953  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;954  font-size: 0.625rem; color: var(--peach-t2);955}956.peach-unlock-footer {957  margin-top: 4px; display: flex; align-items: center; gap: 7px;958  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;959  font-size: 0.625rem; color: var(--peach-t2);960}961.peach-unlock-footer--lock {962  padding-top: 2px;963}964965/* Breach badge */966.peach-breach-badge {967  display: flex;968  position: relative;969  z-index: 1;970  align-items: center;971  gap: 7px;972  font-size: 0.5625rem;973  color: var(--peach-breach);974  padding: 5px 10px;975  margin-bottom: 4px;976  border-radius: 8px;977  background: rgba(220, 80, 60, 0.07);978  border: 1px solid rgba(220, 80, 60, 0.18);979  letter-spacing: 0.04em;980}981982.peach-breach-action {983  margin-left: auto;984  font-size: 0.625rem;985  padding: 3px 8px;986}987988.peach-password-value.is-breached {989  color: rgba(220, 80, 60, 0.75);990  border-bottom: 1px solid rgba(220, 80, 60, 0.22);991}992993/* ── Overlay views ─────────────────────────────────────────────────── */994.peach-overlay-view {995  position: absolute;996  inset: 0;997  display: flex;998  flex-direction: column;999  background:1000    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1001    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1002    var(--peach-bg);1003  z-index: 2;1004  overflow: hidden;1005  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1006}1007@keyframes overlay-in {1008  from { opacity: 0; transform: translateY(8px); }1009  to   { opacity: 1; transform: translateY(0); }1010}1011.peach-overlay-view.ov-enter-up {1012  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1013}1014.peach-overlay-view.ov-exit-up {1015  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1016}1017.peach-overlay-view.ov-enter-right {1018  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1019}1020.peach-overlay-view.ov-exit-right {1021  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1022}10231024@keyframes ov-enter-up {1025  from { opacity: 0; transform: translateY(18px); }1026  to   { opacity: 1; transform: translateY(0); }1027}1028@keyframes ov-exit-up {1029  from { opacity: 1; transform: translateY(0); }1030  to   { opacity: 0; transform: translateY(-12px); }1031}1032@keyframes ov-enter-right {1033  from { opacity: 0; transform: translateX(20px); }1034  to   { opacity: 1; transform: translateX(0); }1035}1036@keyframes ov-exit-right {1037  from { opacity: 1; transform: translateX(0); }1038  to   { opacity: 0; transform: translateX(20px); }1039}10401041/* Overlay shared header */1042.peach-overlay-header {1043  padding: 10px 12px;1044  display: flex;1045  align-items: center;1046  gap: 8px;1047  border-bottom: 1px solid var(--peach-t3);1048  flex-shrink: 0;1049}1050.peach-overlay-title {1051  font-family: "IBM Plex Mono", monospace;1052  font-size: 0.5625rem;1053  text-transform: uppercase;1054  letter-spacing: 0.18em;1055  color: var(--peach-t2);1056  flex: 1;1057  text-align: center;1058}10591060.peach-overlay-card {1061  background: var(--peach-s1);1062  border: 1px solid var(--peach-t3);1063  border-radius: 12px;1064  overflow: hidden;1065  width: 100%;1066}10671068.peach-onboarding-alt-actions {1069  display: flex;1070  flex-direction: column;1071  gap: 4px;1072  padding: 0;1073}10741075.peach-settings-copy {1076  margin: 0 0 10px;1077  font-size: 0.6875rem;1078  line-height: 1.5;1079  color: var(--peach-t2);1080}10811082.peach-settings-copy strong {1083  color: var(--peach-t0);1084}10851086.peach-settings-copy--spacious {1087  margin-bottom: 12px;1088}10891090.peach-settings-copy--result {1091  color: var(--peach-accent);1092  font-size: 0.8125rem;1093  text-align: center;1094  padding: 8px 0;1095}10961097.peach-settings-copy--danger {1098  color: var(--peach-breach);1099}11001101.peach-settings-copy--success {1102  color: var(--peach-accent);1103}11041105.peach-inline-feedback {1106  font-size: 0.6875rem;1107  margin: 10px 0 0;1108}11091110.peach-inline-feedback--ok {1111  color: var(--peach-accent);1112}11131114.peach-inline-feedback--error {1115  color: var(--peach-breach);1116}11171118.peach-inline-feedback--muted {1119  color: var(--peach-t2);1120  font-size: 0.625rem;1121  margin: 4px 0;1122}11231124.peach-inline-feedback--spaced {1125  margin-top: 12px;1126}11271128.peach-settings-actions--row {1129  display: flex;1130  gap: 6px;1131}11321133.peach-settings-actions--end {1134  margin-top: 14px;1135  justify-content: flex-end;1136}11371138.peach-settings-stack {1139  display: flex;1140  flex-direction: column;1141  gap: 6px;1142}11431144.peach-settings-stack--tight {1145  gap: 4px;1146}11471148.peach-settings-stack--spacious {1149  gap: 8px;1150}11511152.peach-settings-input {1153  width: 100%;1154  box-sizing: border-box;1155  padding: 8px 10px;1156  background: rgba(0, 0, 0, 0.22);1157  border: 1px solid transparent;1158  border-radius: 6px;1159  color: var(--peach-t0);1160  font-family: var(--font-ui);1161  font-size: 0.75rem;1162  outline: none;1163  transition: border-color 120ms ease, background 120ms ease;1164}11651166.peach-settings-input:focus {1167  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1168  background: rgba(0, 0, 0, 0.28);1169}11701171.peach-settings-input[type="password"] {1172  font-family: var(--font-mono);1173  letter-spacing: 0.04em;1174}11751176.peach-hidden-file-input {1177  display: none;1178}11791180.peach-checkbox-note {1181  display: flex;1182  align-items: flex-start;1183  gap: 8px;1184  font-size: 0.6875rem;1185  color: var(--peach-t1);1186  cursor: pointer;1187  margin: 12px 0;1188}11891190.peach-checkbox-note input {1191  margin-top: 1px;1192}11931194.peach-danger-notice {1195  background: rgba(220, 80, 60, 0.08);1196  border: 1px solid rgba(220, 80, 60, 0.2);1197  border-radius: 6px;1198  padding: 9px 11px;1199  font-size: 0.6875rem;1200  color: var(--peach-t1);1201  line-height: 1.5;1202}12031204.peach-info-notice {1205  font-size: 0.6875rem;1206  color: var(--peach-t1);1207  line-height: 1.5;1208  background: var(--surface-card);1209  border: 1px solid var(--peach-t3);1210  border-radius: 6px;1211  padding: 8px 10px;1212}12131214.peach-info-notice--warn {1215  border-color: rgba(220, 38, 38, 0.4);1216  background: rgba(220, 38, 38, 0.06);1217  color: rgba(220, 38, 38, 0.92);1218  margin-bottom: 8px;1219}12201221.peach-strength-row {1222  display: flex;1223  align-items: center;1224  gap: 8px;1225  margin-bottom: 10px;1226}12271228.peach-strength-track {1229  flex: 1;1230  height: 4px;1231  background: var(--peach-s2);1232  border-radius: 2px;1233  overflow: hidden;1234}12351236.peach-strength-fill {1237  height: 100%;1238  border-radius: 2px;1239  transition: width 120ms ease, background 120ms ease;1240}12411242/* ── Type selector tabs ── */1243.peach-type-tabs {1244  display: flex;1245  gap: 0;1246  background: var(--peach-t4);1247  border-radius: 8px;1248  padding: 3px;1249}12501251.peach-type-tab {1252  flex: 1;1253  display: flex;1254  align-items: center;1255  justify-content: center;1256  gap: 6px;1257  padding: 6px 10px;1258  border-radius: 6px;1259  border: none;1260  background: transparent;1261  cursor: pointer;1262  font-family: Inter, system-ui, sans-serif;1263  font-size: 0.6875rem;1264  font-weight: 400;1265  letter-spacing: 0.04em;1266  color: var(--peach-t1);1267  transition: background 150ms ease, color 150ms ease;1268}12691270.peach-type-tab.is-active {1271  background: var(--peach-s2);1272  color: var(--peach-t0);1273  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1274}12751276.peach-type-tab:not(.is-active):hover {1277  color: var(--peach-t0);1278}12791280.peach-type-tab svg {1281  opacity: 0.7;1282  flex-shrink: 0;1283}12841285.peach-type-tab.is-active svg {1286  opacity: 1;1287}12881289/* ── List view ───────────────────────────────────────────────────────── */1290.peach-list-top {1291  padding: 0 10px;1292  min-height: 46px;1293  display: flex;1294  align-items: center;1295  gap: 6px;1296  border-bottom: 1px solid var(--peach-t3);1297  flex-shrink: 0;1298  background: var(--peach-s1);1299}1300.peach-vault-list {1301  flex: 1;1302  overflow-y: auto;1303  scrollbar-width: none;1304}1305.peach-vault-list::-webkit-scrollbar { display: none; }13061307/* Scrollbar — vault list */1308.peach-vault-list {1309  scrollbar-width: thin;1310  scrollbar-color: var(--peach-t3) transparent;1311}13121313.peach-vault-list::-webkit-scrollbar {1314  width: 3px;1315}13161317.peach-vault-list::-webkit-scrollbar-thumb {1318  background: var(--peach-t3);1319  border-radius: 2px;1320}13211322.peach-entry-row {1323  width: 100%;1324  display: flex;1325  align-items: center;1326  gap: 10px;1327  padding: 9px 16px;1328  background: transparent;1329  border: none;1330  border-bottom: 1px solid var(--peach-t3);1331  cursor: pointer;1332  color: inherit;1333  text-align: left;1334  transition: background 80ms ease;1335}1336.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1337.peach-entry-row:last-child { border-bottom: none; }1338.peach-entry-row.is-active {1339  box-shadow: inset 2px 0 0 var(--peach-accent);1340  background: rgba(240,232,216,0.03);1341}1342.peach-entry-row:focus-visible {1343  outline: none;1344  box-shadow: 0 0 0 1px var(--peach-border-accent);1345  background: rgba(240,232,216,0.03);1346}1347.peach-entry-row-icon {1348  width: 26px; height: 26px;1349  border-radius: 7px;1350  border: 1px solid var(--peach-t3);1351  display: flex; align-items: center; justify-content: center;1352  color: var(--peach-t2);1353  flex-shrink: 0;1354}1355.peach-entry-row-icon.is-breach {1356  border-color: rgba(220,80,60,0.3);1357  color: rgba(220,80,60,0.7);1358}13591360/* Title-initials chip used as the favicon fallback for login entries whose1361 * real favicon hasn't been cached by the browser yet (freshly-imported,1362 * never-visited domains). Background colour is hashed from the title so1363 * the same entry always shows the same chip. The chip fits the same1364 * 26×26 row icon slot the favicon would take. */1365.peach-favicon-initials {1366  display: inline-flex;1367  align-items: center;1368  justify-content: center;1369  width: 100%;1370  height: 100%;1371  border-radius: 4px;1372  font-family: "IBM Plex Mono", monospace;1373  font-size: 0.5625rem;1374  font-weight: 600;1375  letter-spacing: 0.04em;1376  color: rgba(240, 232, 216, 0.92);1377  text-transform: uppercase;1378  user-select: none;1379}1380.peach-entry-row-info { flex: 1; min-width: 0; }1381.peach-entry-row-name {1382  display: block;1383  font-family: var(--font-display);1384  font-size: 1.0625rem;1385  font-style: italic;1386  font-weight: 400;1387  color: var(--peach-t0);1388  line-height: 1.2;1389  white-space: nowrap;1390  overflow: hidden;1391  text-overflow: ellipsis;1392}1393.peach-entry-row-meta {1394  display: block;1395  font-family: "IBM Plex Mono", monospace;1396  font-size: 0.5625rem;1397  color: var(--peach-t2);1398  margin-top: 1px;1399  letter-spacing: 0.05em;1400}1401.peach-entry-row-dot {1402  width: 5px; height: 5px;1403  border-radius: 50%;1404  background: rgba(220,80,60,0.7);1405  flex-shrink: 0;1406}1407.peach-new-entry-row {1408  display: flex;1409  align-items: center;1410  justify-content: center;1411  gap: 6px;1412  width: 100%;1413  padding: 11px;1414  background: transparent;1415  border: none;1416  border-top: 1px solid var(--peach-t3);1417  color: var(--peach-t2);1418  font-family: "IBM Plex Mono", monospace;1419  font-size: 0.5625rem;1420  text-transform: uppercase;1421  letter-spacing: 0.14em;1422  cursor: pointer;1423  flex-shrink: 0;1424  transition: color 120ms ease, background 120ms ease;1425}1426.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14271428/* ── Multi-select mode ─────────────────────────────────────────────── */14291430/* Select-mode trigger button in sort bar — same shape as trash btn */1431.peach-sort-select-btn {1432  display: flex;1433  align-items: center;1434  justify-content: center;1435  padding: 3px 5px;1436  background: transparent;1437  border: none;1438  cursor: pointer;1439  color: var(--peach-t2);1440  border-radius: 4px;1441  transition: color 140ms ease, background 140ms ease;1442}1443.peach-sort-select-btn:hover {1444  color: var(--peach-t1);1445  background: var(--peach-t3);1446}14471448/* Sort bar in select mode */1449.peach-select-cancel-btn {1450  background: transparent;1451  border: none;1452  padding: 0 4px;1453  cursor: pointer;1454  font-family: "IBM Plex Mono", monospace;1455  font-size: 0.5625rem;1456  letter-spacing: 0.12em;1457  text-transform: uppercase;1458  color: var(--peach-t2);1459  transition: color 140ms ease;1460  flex-shrink: 0;1461}1462.peach-select-cancel-btn:hover { color: var(--peach-t0); }14631464.peach-select-count-label {1465  flex: 1;1466  text-align: center;1467  font-family: "IBM Plex Mono", monospace;1468  font-size: 0.5625rem;1469  letter-spacing: 0.14em;1470  text-transform: uppercase;1471  color: var(--peach-t1);1472}14731474.peach-select-all-btn {1475  background: transparent;1476  border: none;1477  padding: 0 4px;1478  cursor: pointer;1479  font-family: "IBM Plex Mono", monospace;1480  font-size: 0.5625rem;1481  letter-spacing: 0.12em;1482  text-transform: uppercase;1483  color: var(--peach-t2);1484  transition: color 140ms ease;1485  flex-shrink: 0;1486}1487.peach-select-all-btn:hover { color: var(--peach-accent); }14881489/* List in select mode */1490.peach-vault-list.is-selecting .peach-entry-row {1491  cursor: default;1492}1493.peach-vault-list.is-selecting .peach-entry-row:hover {1494  background: rgba(240,232,216,0.02);1495}1496.peach-vault-list.is-selecting .peach-entry-row.is-selected {1497  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1498}1499.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1500  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1501}15021503/* Select indicator circles in icon slot */1504.peach-entry-row-icon.is-select-icon {1505  color: var(--peach-t2);1506}1507.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1508  color: var(--peach-accent);1509}15101511/* Delete action bar at bottom (replaces new-entry row) */1512.peach-select-action-bar {1513  display: flex;1514  align-items: center;1515  justify-content: center;1516  gap: 7px;1517  width: 100%;1518  padding: 11px;1519  background: transparent;1520  border: none;1521  border-top: 1px solid var(--peach-t3);1522  color: var(--peach-t1);1523  font-family: "IBM Plex Mono", monospace;1524  font-size: 0.5625rem;1525  text-transform: uppercase;1526  letter-spacing: 0.14em;1527  cursor: pointer;1528  flex-shrink: 0;1529  transition: color 120ms ease, background 120ms ease;1530}1531.peach-select-action-bar:not(:disabled):hover {1532  color: var(--peach-t0);1533  background: rgba(220,80,60,0.06);1534}1535.peach-select-action-bar:not(:disabled):hover svg {1536  stroke: rgba(220,80,60,0.8);1537}1538.peach-select-action-bar:disabled,1539.peach-select-action-bar.is-empty {1540  color: var(--peach-t2);1541  cursor: default;1542  opacity: 0.5;1543}1544.peach-search-counter-list {1545  white-space: nowrap;1546  flex-shrink: 0;1547}1548.peach-list-empty {1549  min-height: 180px;1550  display: grid;1551  place-items: center;1552  color: var(--peach-t2);1553  font-family: "IBM Plex Mono", monospace;1554  font-size: 0.6875rem;1555}15561557/* ── Settings view ───────────────────────────────────────────────────── */1558.peach-settings-body {1559  flex: 1;1560  overflow-y: auto;1561  min-height: 0;1562  display: flex;1563  flex-direction: column;1564  padding: 2px 0 10px;1565}1566.peach-settings-group {1567  margin: 4px 10px;1568  padding: 9px 14px 11px;1569  border-radius: 12px;1570  border: 1px solid rgba(255, 255, 255, 0.07);1571  background: rgba(26, 20, 16, 0.60);1572  backdrop-filter: blur(10px) saturate(1.3);1573  -webkit-backdrop-filter: blur(10px) saturate(1.3);1574}15751576.peach-settings-group + .peach-settings-group {1577  margin-top: 6px;1578}15791580@supports not (backdrop-filter: blur(1px)) {1581  .peach-settings-group {1582    background: rgba(26, 20, 16, 0.90);1583    border-color: rgba(255, 255, 255, 0.09);1584    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1585  }1586}15871588.light .peach-settings-group,1589[data-theme="light"] .peach-settings-group {1590  background: rgba(253, 248, 244, 0.68);1591  border-color: rgba(0, 0, 0, 0.07);1592  backdrop-filter: blur(10px) saturate(1.2);1593  -webkit-backdrop-filter: blur(10px) saturate(1.2);1594}15951596@supports not (backdrop-filter: blur(1px)) {1597  .light .peach-settings-group,1598  [data-theme="light"] .peach-settings-group {1599    background: rgba(253, 248, 244, 0.95);1600    border-color: rgba(0, 0, 0, 0.09);1601  }1602}1603.peach-export-intro {1604  padding-bottom: 8px;1605}1606.peach-export-card {1607  display: grid;1608  gap: 10px;1609}1610.peach-rune-canvas {1611  border-radius: 8px;1612  background: rgba(0, 0, 0, 0.22);1613  flex: 1;1614  align-self: center;1615}1616.peach-script-input {1617  font-family: "PeachScript", monospace;1618  font-size: 0.6875rem;1619  line-height: 1.9;1620  letter-spacing: 0.06em;1621  color: var(--peach-t0);1622  background: rgba(0, 0, 0, 0.22);1623  border: none;1624  border-radius: 6px;1625  padding: 12px;1626  width: 100%;1627  min-height: 96px;1628  resize: vertical;1629  word-break: break-all;1630  scrollbar-width: none;1631  -ms-overflow-style: none;1632}16331634.peach-script-input::-webkit-scrollbar { display: none; }1635.peach-qr-canvas-wrap {1636  display: flex;1637  justify-content: center;1638  padding: 12px 0 6px;1639}1640.peach-qr-canvas-wrap canvas {1641  display: block;1642  background: #ffffff;1643  border-radius: 6px;1644  max-width: 100%;1645  height: auto;1646}1647.peach-csv-warning {1648  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1649  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1650  color: var(--peach-t0);1651  border-radius: 6px;1652  padding: 10px 12px;1653  margin-bottom: 8px;1654  font-size: 0.75rem;1655  line-height: 1.45;1656}1657.peach-export-card--primary {1658  background:1659    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1660}16611662/* Export menu — distribute the three format cards across the popup. */1663.peach-export-menu {1664  display: flex;1665  flex-direction: column;1666  flex: 1;1667  min-height: 0;1668}1669.peach-export-menu .peach-settings-group {1670  flex: 1;1671  display: flex;1672  flex-direction: column;1673  justify-content: center;1674  gap: 10px;1675}16761677/* Result view — the script-string fills the remaining vertical surface. */1678.peach-export-result-group {1679  flex: 1;1680  display: flex;1681  flex-direction: column;1682  min-height: 0;1683  border-bottom: none;1684}1685.peach-export-result-group .peach-export-card {1686  flex: 1;1687  min-height: 0;1688  display: flex;1689  flex-direction: column;1690  gap: 10px;1691}1692.peach-export-result-group .peach-export-card-copy {1693  flex-shrink: 0;1694}1695.peach-export-result-group .peach-settings-label {1696  flex-shrink: 0;1697}1698.peach-export-result-group button {1699  flex-shrink: 0;1700}1701.peach-export-card-head {1702  display: flex;1703  align-items: center;1704  justify-content: space-between;1705  gap: 10px;1706}1707.peach-export-card-copy {1708  margin: 0;1709  font-size: 0.75rem;1710  line-height: 1.55;1711  color: var(--peach-t1);1712}1713.peach-export-note {1714  margin: 0;1715  font-size: 0.625rem;1716  line-height: 1.5;1717  color: var(--peach-t2);1718}1719.peach-export-pill {1720  display: inline-flex;1721  align-items: center;1722  padding: 4px 8px;1723  border-radius: 999px;1724  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1725  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1726  color: var(--peach-accent);1727  font-family: "IBM Plex Mono", monospace;1728  font-size: 0.5rem;1729  letter-spacing: 0.12em;1730  text-transform: uppercase;1731  white-space: nowrap;1732}1733.peach-export-pill--danger {1734  border-color: rgba(220,80,60,0.22);1735  background: rgba(220,80,60,0.08);1736  color: var(--peach-breach);1737}1738.peach-export-password-stack {1739  gap: 8px;1740}1741.peach-settings-label {1742  margin: 0 0 6px;1743  font-family: "IBM Plex Mono", monospace;1744  font-size: 0.5rem;1745  text-transform: uppercase;1746  letter-spacing: 0.18em;1747  color: var(--peach-t2);1748}1749.peach-settings-row {1750  display: flex;1751  align-items: center;1752  justify-content: space-between;1753  gap: 12px;1754  min-height: 34px;1755  padding: 6px 0;1756  font-size: 0.8125rem;1757  color: var(--peach-t1);1758}1759.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1760.peach-settings-value {1761  font-family: "IBM Plex Mono", monospace;1762  font-size: 0.625rem;1763  color: var(--peach-t2);1764}17651766.peach-settings-value--status {1767  display: flex;1768  align-items: center;1769  gap: 6px;1770}17711772.peach-settings-link {1773  font-family: "IBM Plex Mono", monospace;1774  font-size: 0.625rem;1775  color: var(--peach-accent);1776  text-decoration: none;1777  cursor: pointer;1778}1779.peach-settings-link:hover {1780  text-decoration: underline;1781}17821783.peach-settings-row--stack {1784  flex-direction: column;1785  align-items: stretch;1786  gap: 6px;1787}17881789.peach-settings-row--top {1790  align-items: flex-start;1791}17921793.peach-settings-row-main {1794  display: flex;1795  flex-direction: column;1796  gap: 4px;1797  flex: 1;1798}1799.peach-toggle {1800  width: 28px; height: 16px;1801  border-radius: 999px;1802  background: var(--peach-t3);1803  border: 1px solid var(--peach-t3);1804  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1805  flex-shrink: 0;1806  transition: background 200ms ease, border-color 200ms ease;1807  cursor: pointer;1808}1809.peach-toggle.is-on {1810  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1811  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1812}1813.peach-toggle-knob {1814  width: 10px; height: 10px;1815  border-radius: 50%;1816  background: var(--peach-t2);1817  flex-shrink: 0;1818  transform: translateX(0px);1819  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1820}1821.peach-toggle.is-on .peach-toggle-knob {1822  background: var(--peach-accent);1823  transform: translateX(12px);1824}1825.peach-settings-footer {1826  display: flex;1827  align-items: center;1828  gap: 8px;1829  margin-top: auto;1830  padding: 14px 16px 8px;1831  font-family: "IBM Plex Mono", monospace;1832  font-size: 0.5625rem;1833  color: var(--peach-t2);1834}18351836/* ── Settings home navigation ──────────────────────────────────────────── */1837.peach-settings-nav-label {1838  margin: 0 0 2px;1839  padding: 12px 16px 4px;1840  font-family: "IBM Plex Mono", monospace;1841  font-size: 0.5rem;1842  text-transform: uppercase;1843  letter-spacing: 0.18em;1844  color: var(--peach-t2);1845}18461847.peach-settings-cat-row {1848  display: flex;1849  align-items: center;1850  gap: 10px;1851  width: 100%;1852  padding: 9px 16px;1853  background: none;1854  border: none;1855  border-bottom: 1px solid var(--peach-t3);1856  cursor: pointer;1857  text-align: left;1858  color: inherit;1859  transition: background var(--peach-dur-80) ease;1860}1861.peach-settings-cat-row:hover {1862  background: var(--peach-t3);1863}1864.peach-settings-cat-row:last-child {1865  border-bottom: none;1866}18671868.peach-settings-cat-icon {1869  width: 28px;1870  height: 28px;1871  border-radius: 7px;1872  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1873  color: var(--peach-accent);1874  display: flex;1875  align-items: center;1876  justify-content: center;1877  flex-shrink: 0;1878}1879/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1880   Darken the icon stroke to ink and bump the bg tint so the icon reads1881   sharply while the cell still feels accent-tinted. */1882.light .peach-settings-cat-icon {1883  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1884  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1885}18861887.peach-settings-cat-content {1888  flex: 1;1889  display: flex;1890  flex-direction: column;1891  gap: 2px;1892  min-width: 0;1893}18941895.peach-settings-cat-name {1896  font-size: 0.8125rem;1897  font-weight: 450;1898  color: var(--peach-t0);1899  line-height: 1.2;1900}19011902.peach-settings-cat-desc {1903  font-size: 0.625rem;1904  color: var(--peach-t2);1905  line-height: 1.3;1906  white-space: nowrap;1907  overflow: hidden;1908  text-overflow: ellipsis;1909}19101911.peach-settings-cat-chevron {1912  color: var(--peach-t2);1913  flex-shrink: 0;1914  opacity: 0.5;1915}19161917/* ── Settings sub-view section labels ──────────────────────────────────── */1918.peach-settings-sub-label {1919  margin: 12px 0 4px;1920  font-family: "IBM Plex Mono", monospace;1921  font-size: 0.5rem;1922  text-transform: uppercase;1923  letter-spacing: 0.18em;1924  color: var(--peach-t2);1925}1926.peach-settings-sub-label:first-child {1927  margin-top: 4px;1928}19291930/* ── Settings: collapsible Advanced section ─────────────────────────────── */1931.peach-settings-advanced-toggle {1932  display: flex;1933  align-items: center;1934  justify-content: space-between;1935  width: 100%;1936  background: none;1937  border: none;1938  cursor: pointer;1939  padding: 12px 0 4px;1940  margin: 0;1941  color: inherit;1942}1943.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {1944  color: var(--peach-t1);1945}1946.peach-settings-advanced-chevron {1947  font-size: 0.5625rem;1948  color: var(--peach-t3);1949  letter-spacing: 0;1950  transition: color 120ms ease;1951}19521953/* ── Feedback form ──────────────────────────────────────────────────────── */1954.peach-feedback-group {1955  flex: 1;1956  display: flex;1957  flex-direction: column;1958  border-bottom: none;1959}19601961.peach-feedback-intro {1962  margin: 4px 0 14px;1963  font-size: 0.75rem;1964  line-height: 1.55;1965  color: var(--peach-t1);1966}19671968.peach-feedback-chips {1969  display: flex;1970  flex-wrap: wrap;1971  gap: 6px;1972  margin-bottom: 14px;1973}19741975.peach-feedback-chip {1976  padding: 4px 10px;1977  border-radius: 999px;1978  border: 1px solid var(--peach-t3);1979  background: none;1980  color: var(--peach-t2);1981  font-size: 0.6875rem;1982  font-family: var(--font-ui);1983  cursor: pointer;1984  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,1985    background var(--peach-dur-80) ease;1986}1987.peach-feedback-chip:hover {1988  border-color: var(--peach-t2);1989  color: var(--peach-t1);1990}1991.peach-feedback-chip.is-active {1992  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);1993  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1994  color: var(--peach-accent);1995}19961997.peach-feedback-textarea {1998  flex: 1;1999  width: 100%;2000  min-height: 120px;2001  box-sizing: border-box;2002  background: rgba(0, 0, 0, 0.22);2003  border: 1px solid transparent;2004  border-radius: 6px;2005  color: var(--peach-t0);2006  font-size: 0.75rem;2007  font-family: var(--font-ui);2008  line-height: 1.5;2009  padding: 8px 10px;2010  resize: none;2011  outline: none;2012  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2013}2014.peach-feedback-textarea:focus {2015  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2016  background: rgba(0, 0, 0, 0.28);2017}2018.peach-feedback-textarea:focus {2019  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2020}2021.peach-feedback-textarea::placeholder {2022  color: var(--peach-t2);2023}20242025.peach-feedback-meta {2026  margin: 6px 0 0;2027  font-size: 0.625rem;2028  color: var(--peach-t2);2029  font-family: "IBM Plex Mono", monospace;2030}20312032.peach-feedback-result {2033  margin: 8px 0 0;2034  font-size: 0.6875rem;2035  font-family: "IBM Plex Mono", monospace;2036}2037.peach-feedback-result--ok { color: var(--peach-sync-ok); }2038.peach-feedback-result--err { color: var(--peach-breach); }20392040.peach-feedback-submit {2041  width: 100%;2042  margin-top: 12px;2043  justify-content: center;2044}20452046.peach-feedback-anon {2047  margin: 8px 0 0;2048  font-size: 0.625rem;2049  color: var(--peach-t2);2050  text-align: center;2051}20522053.peach-passkey-badge {2054  margin-left: 8px;2055  font-size: 0.625rem;2056  letter-spacing: 0.06em;2057  text-transform: uppercase;2058  color: var(--peach-t2);2059  font-family: var(--font-ui);2060  vertical-align: middle;2061}20622063.peach-passkey-delete-btn {2064  color: var(--peach-breach);2065  border-color: rgba(229, 85, 85, 0.25);2066}20672068.peach-passkey-delete-confirm {2069  display: flex;2070  align-items: center;2071  gap: 8px;2072  padding: 8px 10px;2073  background: rgba(229, 85, 85, 0.06);2074  border: 1px solid rgba(229, 85, 85, 0.2);2075  border-radius: 6px;2076}20772078.peach-passkey-delete-confirm-copy {2079  flex: 1;2080  font-size: 0.6875rem;2081  color: var(--peach-t1);2082}20832084.peach-passkey-delete-btn--confirm {2085  color: var(--peach-breach);2086  border-color: rgba(229, 85, 85, 0.4);2087}20882089.peach-passkey-activity {2090  flex-direction: column;2091  align-items: flex-start;2092  gap: 4px;2093}20942095.peach-passkey-meta {2096  font-size: 0.6875rem;2097  color: var(--peach-t2);2098}20992100.peach-passkey-actions {2101  position: relative;2102  z-index: 1;2103  margin-top: 14px;2104  display: flex;2105  flex-direction: column;2106  gap: 8px;2107}21082109.peach-passkey-approval {2110  display: flex;2111  flex-direction: column;2112  align-items: center;2113  padding: 22px 20px 18px;2114  gap: 10px;2115  text-align: center;2116}21172118.peach-passkey-approval-icon {2119  width: 46px;2120  height: 46px;2121  border-radius: 12px;2122  background: var(--peach-s2);2123  border: 1px solid var(--peach-t3);2124  display: flex;2125  align-items: center;2126  justify-content: center;2127  flex-shrink: 0;2128  color: var(--peach-accent);2129}21302131.peach-passkey-approval-icon img,2132.peach-passkey-approval-icon svg {2133  width: 28px;2134  height: 28px;2135  border-radius: 6px;2136}21372138.peach-passkey-approval-rp {2139  font-family: var(--font-ui);2140  font-size: 0.75rem;2141  color: var(--peach-t2);2142  letter-spacing: 0.03em;2143}21442145.peach-passkey-approval-action {2146  font-family: var(--font-display);2147  font-style: italic;2148  font-weight: 300;2149  font-size: 22px;2150  color: var(--peach-t0);2151  line-height: 1.1;2152  margin: 2px 0;2153}21542155.peach-passkey-approval-user {2156  font-family: var(--font-mono);2157  font-size: 0.6875rem;2158  color: var(--peach-t1);2159  background: var(--peach-s2);2160  border: 1px solid var(--peach-t3);2161  border-radius: 4px;2162  padding: 3px 8px;2163}21642165.peach-passkey-approval-notice {2166  font-size: 0.625rem;2167  color: var(--peach-t2);2168  line-height: 1.5;2169  max-width: 220px;2170}21712172.peach-passkey-approval-actions {2173  display: flex;2174  gap: 8px;2175  width: 100%;2176  margin-top: 6px;2177}21782179.peach-passkey-approval-actions .peach-btn {2180  flex: 1;2181}21822183/* ── Inline generator drawer ── */2184.peach-generator-drawer {2185  display: grid;2186  grid-template-rows: 0fr;2187  transition: grid-template-rows 320ms var(--peach-curve-arrival);2188  overflow: hidden;2189}2190.peach-generator-drawer.is-open {2191  grid-template-rows: 1fr;2192}2193.peach-generator-drawer-inner {2194  min-height: 0;2195  overflow: hidden;2196}2197.peach-generator-drawer-content {2198  border-top: 1px solid var(--peach-t3);2199  padding: 8px 0 4px;2200  display: flex;2201  flex-direction: column;2202  gap: 8px;2203}22042205/* ── Compact generator (inside entry edit) ── */2206.peach-generator-drawer-content--compact {2207  border-top: 1px solid var(--peach-t3);2208  padding: 8px 0 2px;2209  gap: 7px;2210}2211.peach-pwgen-compact-display-row {2212  display: flex;2213  align-items: center;2214  gap: 6px;2215}2216.peach-pwgen-compact-output {2217  flex: 1;2218  min-width: 0;2219  font-family: "IBM Plex Mono", monospace;2220  font-size: 0.6875rem;2221  font-weight: 400;2222  letter-spacing: 0.04em;2223  color: var(--peach-t0);2224  background: rgba(240, 232, 216, 0.04);2225  border: 1px solid var(--peach-t3);2226  border-radius: 5px;2227  padding: 5px 8px;2228  word-break: break-all;2229  line-height: 1.5;2230}2231.peach-pwgen-compact-controls {2232  display: flex;2233  align-items: center;2234  gap: 6px;2235}2236.peach-pwgen-compact-slider {2237  flex: 1;2238  min-width: 0;2239  height: 2px !important;2240}2241.peach-pwgen-compact-controls .peach-pwgen-len-num {2242  flex-shrink: 0;2243  min-width: 18px;2244  text-align: right;2245}2246.peach-pwgen-compact-pills {2247  display: flex;2248  gap: 3px;2249  flex-shrink: 0;2250}2251.peach-pwgen-compact-pills .peach-pwgen-pill {2252  padding: 2px 7px;2253  font-size: 0.5rem;2254}2255.peach-pwgen-compact-use {2256  flex-shrink: 0;2257  font-size: 0.625rem !important;2258  padding: 3px 9px !important;2259  min-height: 22px !important;2260  border-radius: 5px !important;2261}22622263/* ── Password edit row (input + eye toggle side-by-side) ── */2264.peach-password-edit-row {2265  display: flex;2266  align-items: center;2267  gap: 6px;2268}2269.peach-password-edit-row .peach-inline-input {2270  flex: 1;2271  min-width: 0;2272}22732274/* ── Generate toggle link ── */2275.peach-generate-toggle-link {2276  display: inline-flex;2277  align-items: center;2278  gap: 5px;2279  background: none;2280  border: none;2281  padding: 0;2282  cursor: pointer;2283  font-family: "IBM Plex Mono", monospace;2284  font-size: 0.625rem;2285  color: var(--peach-t2);2286  letter-spacing: 0.04em;2287  transition: color 120ms ease;2288  align-self: flex-start;2289}2290.peach-generate-toggle-link:hover {2291  color: var(--peach-accent);2292}22932294/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2295.peach-entry-body {2296  flex: 1;2297  overflow-y: auto;2298  overflow-x: hidden;2299  scrollbar-width: none;2300  -ms-overflow-style: none;2301  overscroll-behavior: contain;2302  display: grid;2303  gap: 10px;2304  align-content: start;2305  padding: 10px 20px 14px;2306  min-width: 0;2307  min-height: 0;2308}2309.peach-entry-body::-webkit-scrollbar { display: none; }23102311/* Type-toggle pills + inline note toolbar */2312.peach-new-type-row {2313  display: flex;2314  align-items: center;2315  gap: 6px;2316  margin-bottom: 2px;2317}2318.peach-new-type-btn {2319  background: transparent;2320  border: 1px solid var(--peach-t3);2321  border-radius: 12px;2322  padding: 3px 10px;2323  font-family: "IBM Plex Mono", monospace;2324  font-size: 0.5625rem;2325  letter-spacing: 0.12em;2326  text-transform: uppercase;2327  color: var(--peach-t2);2328  cursor: pointer;2329  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2330}2331.peach-new-type-btn.is-active {2332  color: var(--peach-t0);2333  border-color: var(--peach-accent);2334  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2335}2336.peach-new-type-btn:not(.is-active):hover {2337  color: var(--peach-t1);2338  border-color: var(--peach-t2);2339}23402341/* Editable title */2342.peach-new-title-wrap { margin: 0 0 2px; }2343.peach-new-title-input {2344  background: transparent;2345  border: none;2346  outline: none;2347  width: 100%;2348  color: var(--peach-t0);2349  font-family: var(--font-display);2350  font-style: italic;2351  font-weight: 400;2352  font-size: 40px;2353  line-height: 0.95;2354  caret-color: var(--peach-accent);2355}2356.peach-new-title-input::placeholder { color: var(--peach-t2); }23572358/* Editable domain field */2359.peach-domain-value--edit {2360  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2361  font-size: 0.625rem;2362  font-style: italic;2363  letter-spacing: 0.12em;2364  color: var(--peach-t1);2365  background: transparent;2366  border: none;2367  border-bottom: 1px solid var(--peach-t3);2368  outline: none;2369  width: 100%;2370  padding: 2px 0;2371  caret-color: var(--peach-accent);2372  transition: border-color 140ms ease, color 140ms ease;2373}2374.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2375.peach-domain-value--edit:focus {2376  border-bottom-color: rgba(240, 232, 216, 0.28);2377  color: var(--peach-t0);2378}23792380/* Editable field values (username, password, totp) */2381.peach-field-value--edit {2382  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2383  font-size: 0.8125rem;2384  color: var(--peach-t0);2385  background: transparent;2386  border: none;2387  border-bottom: 1px solid var(--peach-t3);2388  outline: none;2389  flex: 1;2390  min-width: 0;2391  padding: 3px 0;2392  caret-color: var(--peach-accent);2393  transition: border-color 140ms ease, color 140ms ease;2394}2395.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2396.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2397.peach-field-value--edit:focus {2398  border-bottom-color: rgba(240, 232, 216, 0.28);2399  color: var(--peach-t0);2400}24012402/* "+ add optional field" links */2403.peach-entry-add-links {2404  display: flex;2405  gap: 12px;2406  flex-wrap: wrap;2407  margin-top: -2px;2408}2409.peach-add-field-link {2410  background: transparent;2411  border: none;2412  padding: 0;2413  cursor: pointer;2414  font-family: "IBM Plex Mono", monospace;2415  font-size: 0.5625rem;2416  letter-spacing: 0.1em;2417  text-transform: uppercase;2418  color: var(--peach-t2);2419  transition: color 140ms ease;2420}2421.peach-add-field-link:hover { color: var(--peach-accent); }24222423/* ── New entry form (legacy classes) ────────────────────────────────── */2424.peach-new-body {2425  flex: 1;2426  overflow-y: auto;2427  padding: 10px 20px 14px;2428}2429.peach-new-name-input {2430  background: transparent;2431  border: none;2432  outline: none;2433  width: 100%;2434  color: var(--peach-t0);2435  font-family: var(--font-display);2436  font-style: italic;2437  font-weight: 400;2438  font-size: 40px;2439  line-height: 0.95;2440  caret-color: var(--peach-accent);2441}2442.peach-new-name-input::placeholder { color: var(--peach-t2); }2443.peach-new-field-input {2444  background: transparent;2445  border: none;2446  outline: none;2447  flex: 1;2448  min-width: 0;2449  caret-color: var(--peach-accent);2450}2451.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }24522453/* ── Canary card ── */2454.peach-canary-card {2455  border: 1px solid rgba(217, 160, 48, 0.2);2456  background: rgba(217, 160, 48, 0.03);2457  border-radius: 8px;2458  padding: 12px;2459}24602461.peach-canary-settings-header {2462  display: flex;2463  align-items: center;2464  justify-content: space-between;2465  cursor: pointer;2466  user-select: none;2467}24682469.peach-canary-card .peach-label {2470  color: rgba(217, 160, 48, 0.85);2471}24722473.peach-canary-card .peach-new-field-input {2474  border-color: rgba(217, 160, 48, 0.25);2475}24762477.peach-canary-card .peach-new-field-input:focus {2478  border-color: rgba(217, 160, 48, 0.5);2479}24802481.peach-canary-body {2482  margin-top: 12px;2483  display: flex;2484  flex-direction: column;2485  gap: 10px;2486}24872488.peach-canary-explainer {2489  display: flex;2490  gap: 10px;2491  padding: 10px 12px;2492  border-radius: 10px;2493  background: rgba(217, 160, 48, 0.06);2494  border: 1px solid rgba(217, 160, 48, 0.22);2495  margin-bottom: 4px;2496}24972498.peach-canary-explainer-icon {2499  font-size: 1rem;2500  flex-shrink: 0;2501  line-height: 1.2;2502}25032504.peach-canary-explainer-title {2505  font-family: var(--font-ui);2506  font-size: 0.6875rem;2507  font-weight: 500;2508  color: rgba(217, 160, 48, 0.9);2509  margin: 0 0 3px;2510}25112512.peach-canary-explainer-copy {2513  font-family: var(--font-ui);2514  font-size: 0.625rem;2515  color: var(--peach-t2);2516  line-height: 1.55;2517  margin: 0;2518}25192520.peach-canary-hint {2521  font-size: 0.625rem;2522  color: var(--peach-t2);2523  font-family: Inter, system-ui, sans-serif;2524  line-height: 1.5;2525  margin-top: 4px;2526}25272528.peach-canary-actions-row {2529  display: flex;2530  align-items: center;2531  gap: 8px;2532}25332534.peach-canary-test-btn {2535  border-color: rgba(217, 160, 48, 0.3);2536  color: rgba(217, 160, 48, 0.85);2537}25382539.peach-canary-test-result {2540  font-size: 0.625rem;2541  font-family: Inter, system-ui, sans-serif;2542}25432544.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2545.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }25462547.peach-canary-badge {2548  display: flex;2549  position: relative;2550  z-index: 1;2551  align-items: center;2552  gap: 5px;2553  padding: 4px 10px;2554  background: rgba(217, 160, 48, 0.12);2555  border: 1px solid rgba(217, 160, 48, 0.35);2556  border-radius: 6px;2557  margin-bottom: 6px;2558  width: fit-content;2559}25602561.peach-canary-badge-label {2562  font-size: 0.625rem;2563  letter-spacing: 0.06em;2564  color: rgba(217, 160, 48, 0.9);2565  font-family: var(--font-ui);2566  text-transform: uppercase;2567}25682569.peach-canary-badge-icon {2570  font-size: 0.6875rem;2571}25722573.peach-canary-suppress-row {2574  display: flex;2575  align-items: center;2576  gap: 8px;2577  padding: 6px 10px;2578  background: rgba(217, 160, 48, 0.08);2579  border-radius: 6px;2580  margin-bottom: 8px;2581}25822583.peach-canary-suppress-label {2584  font-size: 0.6875rem;2585  color: rgba(217, 160, 48, 0.85);2586  cursor: pointer;2587  font-family: var(--font-ui);2588  letter-spacing: 0.04em;2589}25902591.peach-regen-panel {2592  position: relative;2593  z-index: 1;2594  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2595  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2596  border-radius: 8px;2597  padding: 12px;2598  margin-bottom: 8px;2599}26002601.peach-regen-panel-header {2602  display: flex;2603  align-items: center;2604  justify-content: space-between;2605  margin-bottom: 10px;2606}26072608.peach-regen-panel-title {2609  font-size: 0.6875rem;2610  font-weight: 600;2611  letter-spacing: 0.06em;2612  text-transform: uppercase;2613  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2614}26152616.peach-regen-output {2617  background: rgba(0, 0, 0, 0.2);2618  border-radius: 6px;2619  padding: 10px;2620  margin-bottom: 10px;2621  font-family: var(--font-mono);2622  font-size: 0.8125rem;2623  word-break: break-all;2624  color: var(--peach-t1);2625}26262627.peach-regen-actions {2628  display: flex;2629  gap: 6px;2630}26312632.peach-regen-actions--spaced {2633  margin-bottom: 8px;2634}26352636.peach-regen-action-grow {2637  flex: 1;2638}26392640.peach-regen-copy-btn {2641  padding: 0 8px;2642}26432644.peach-regen-success {2645  position: relative;2646  z-index: 1;2647  background: rgba(40, 180, 80, 0.1);2648  border: 1px solid rgba(40, 180, 80, 0.3);2649  border-radius: 8px;2650  padding: 10px 12px;2651  margin-bottom: 8px;2652  display: flex;2653  align-items: center;2654  gap: 8px;2655  font-size: 0.6875rem;2656  color: rgba(40, 180, 80, 0.9);2657}26582659/* ── Note editor overlay ── */2660.peach-note-editor {2661  position: absolute;2662  inset: 0;2663  z-index: 200;2664  display: flex;2665  flex-direction: column;2666  background:2667    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2668    var(--peach-bg);2669  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2670}26712672.peach-note-editor-header {2673  display: flex;2674  align-items: center;2675  gap: 10px;2676  padding: 14px 16px 10px;2677  border-bottom: 1px solid var(--peach-t3);2678  flex-shrink: 0;2679}26802681.peach-note-editor-back {2682  background: transparent;2683  border: none;2684  cursor: pointer;2685  color: var(--peach-t2);2686  padding: 4px 6px;2687  border-radius: 6px;2688  display: flex;2689  align-items: center;2690  transition: color 120ms ease, background 120ms ease;2691  flex-shrink: 0;2692}2693.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }26942695.peach-note-editor-label {2696  flex: 1;2697  font-family: var(--font-display);2698  font-style: italic;2699  font-size: 0.9375rem;2700  color: var(--peach-t1);2701  letter-spacing: 0.02em;2702}27032704.peach-note-editor-save-btn {2705  background: transparent;2706  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2707  border-radius: 8px;2708  color: var(--peach-accent);2709  font-family: "IBM Plex Mono", monospace;2710  font-size: 0.625rem;2711  letter-spacing: 0.06em;2712  text-transform: uppercase;2713  padding: 3px 10px;2714  cursor: pointer;2715  transition: background 120ms ease, border-color 120ms ease;2716}2717.peach-note-editor-save-btn:hover:not(:disabled) {2718  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2719  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2720}2721.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }27222723.peach-note-toolbar {2724  display: flex;2725  align-items: center;2726  gap: 3px;2727  padding: 6px 14px 5px;2728  border-bottom: 1px solid var(--peach-t3);2729  flex-shrink: 0;2730}27312732.peach-note-tool-btn {2733  background: transparent;2734  border: 1px solid transparent;2735  border-radius: 5px;2736  color: var(--peach-t2);2737  font-family: "IBM Plex Mono", monospace;2738  font-size: 0.625rem;2739  letter-spacing: 0.04em;2740  padding: 2px 8px;2741  cursor: pointer;2742  line-height: 1.6;2743  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2744}2745.peach-note-tool-btn:hover {2746  background: var(--peach-t4);2747  color: var(--peach-t0);2748  border-color: var(--peach-t3);2749}27502751.peach-note-tool-icon {2752  padding: 3px 7px;2753  display: inline-flex;2754  align-items: center;2755  justify-content: center;2756}27572758.peach-note-tool-divider {2759  width: 1px;2760  height: 14px;2761  background: var(--peach-t3);2762  margin: 0 4px;2763  flex-shrink: 0;2764}27652766.peach-note-editor-body {2767  flex: 1;2768  overflow-y: auto;2769  padding: 16px 20px 20px;2770  outline: none;2771  font-family: var(--font-display);2772  font-size: 1rem;2773  line-height: 1.75;2774  color: var(--peach-t0);2775  scrollbar-width: none;2776  word-break: break-word;2777}2778.peach-note-editor-body:empty::before {2779  content: "write your note…";2780  color: var(--peach-t3);2781  font-style: italic;2782  pointer-events: none;2783}27842785/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2786.peach-note-editor-inline {2787  display: flex;2788  flex-direction: column;2789  flex: 1;2790  min-height: 0;2791}2792.peach-note-editor-body--inline {2793  flex: 1;2794  min-height: 0;2795  font-size: 0.9375rem;2796  padding: 10px 20px 14px;2797}27982799/* Full-width toolbar row inside the body (Add.tsx note type).2800   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2801.peach-note-toolbar-body {2802  display: flex;2803  align-items: center;2804  gap: 3px;2805  padding: 5px 20px 4px;2806  margin: 2px -20px 0;2807  border-bottom: 1px solid var(--peach-t3);2808  flex-shrink: 0;2809}28102811/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2812   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2813   and .peach-note-tool-divider button-level styles. */2814.peach-note-toolbar-inline {2815  display: flex;2816  align-items: center;2817  gap: 3px;2818  margin-left: auto;2819  padding-left: 10px;2820  border-left: 1px solid var(--peach-t3);2821  min-height: 22px;2822}28232824/* Entry.tsx toolbar row (no tabs, toolbar only) */2825.peach-entry-note-toolbar-row {2826  display: flex;2827  align-items: center;2828  margin: 4px 0 6px;2829  position: relative;2830  z-index: 1;2831}2832.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2833  border-left: none;2834  padding-left: 0;2835  margin-left: 0;2836}28372838/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2839.peach-note-body {2840  display: flex;2841  flex-direction: column;2842  flex: 1;2843  min-height: 0;2844  margin: 4px 0 0;2845}2846.peach-entry-body--new .peach-note-body {2847  margin: 8px -20px 0;2848}28492850/* Add.tsx body is a grid by default; swap to a flex column when a note is2851   active so the note body can stretch and pin the tags row to the bottom. */2852.peach-entry-body--new:has(.peach-note-body) {2853  display: flex;2854  flex-direction: column;2855}28562857/* Rich content element styles (editor + display) */2858.peach-note-editor-body h2,2859.peach-note-content h2 {2860  font-family: var(--font-display);2861  font-size: 20px;2862  font-weight: 600;2863  font-style: italic;2864  color: var(--peach-t0);2865  margin: 6px 0 2px;2866  line-height: 1.3;2867}2868.peach-note-editor-body ul,2869.peach-note-content ul {2870  padding-left: 18px;2871  margin: 3px 0;2872  list-style: disc;2873}2874.peach-note-editor-body ol,2875.peach-note-content ol {2876  padding-left: 18px;2877  margin: 3px 0;2878  list-style: decimal;2879}2880.peach-note-editor-body li,2881.peach-note-content li { margin: 2px 0; }2882.peach-note-editor-body hr,2883.peach-note-content hr {2884  border: none;2885  border-top: 1px solid var(--peach-t3);2886  margin: 10px 0;2887}28882889/* font size elements from execCommand */2890.peach-note-editor-body font[size="1"],2891.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }2892.peach-note-editor-body font[size="2"],2893.peach-note-content font[size="2"] { font-size: 0.8125rem; }2894.peach-note-editor-body font[size="3"],2895.peach-note-content font[size="3"] { font-size: 1rem; }2896.peach-note-editor-body font[size="4"],2897.peach-note-content font[size="4"] { font-size: 20px; }2898.peach-note-editor-body font[size="5"],2899.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }29002901/* bold / italic inside the editor and note display */2902.peach-note-editor-body b, .peach-note-editor-body strong,2903.peach-note-content b, .peach-note-content strong { font-weight: 700; }2904.peach-note-editor-body em, .peach-note-editor-body i,2905.peach-note-content em, .peach-note-content i { font-style: italic; }29062907/* note display — rendered HTML, no pre-wrap */2908.peach-note-content {2909  overflow: auto;2910  max-height: 340px;2911  word-break: break-word;2912}29132914/* ── Note textarea ── */2915.peach-note-textarea {2916  width: 100%;2917  min-height: 180px;2918  max-height: 280px;2919  resize: vertical;2920  background: var(--peach-t4);2921  border: 1px solid var(--peach-t3);2922  border-radius: 8px;2923  padding: 10px 12px;2924  font-family: "IBM Plex Mono", monospace;2925  font-size: 0.75rem;2926  line-height: 1.7;2927  color: var(--peach-t1);2928  outline: none;2929  transition: border-color 150ms ease;2930}29312932.peach-note-textarea:focus {2933  border-color: var(--peach-t2);2934}29352936.peach-note-char-count {2937  font-family: "IBM Plex Mono", monospace;2938  font-size: 0.5625rem;2939  color: var(--peach-t3);2940  text-align: right;2941  margin-top: 4px;2942  letter-spacing: 0.1em;2943}29442945/* ── Field input baseline ── */2946.peach-new-field-input {2947  width: 100%;2948  background: transparent;2949  border: none;2950  border-bottom: 1px solid var(--peach-t3);2951  padding: 4px 0;2952  color: var(--peach-t1);2953  font-family: "IBM Plex Mono", monospace;2954  font-size: 0.8125rem;2955  outline: none;2956  transition: border-color 150ms ease;2957}29582959.peach-new-field-input:focus {2960  border-bottom-color: var(--peach-t0);2961  color: var(--peach-t0);2962}29632964.peach-new-name-input {2965  width: 100%;2966  background: transparent;2967  border: none;2968  border-bottom: 1px solid var(--peach-t3);2969  padding: 6px 0;2970  font-family: var(--font-display);2971  font-style: italic;2972  font-size: 28px;2973  color: var(--peach-t0);2974  outline: none;2975  transition: border-color 150ms ease;2976}29772978.peach-new-name-input:focus {2979  border-bottom-color: var(--peach-t1);2980}29812982.peach-new-name-input::placeholder {2983  color: var(--peach-t2);2984  font-style: italic;2985}29862987.peach-new-field-input::placeholder {2988  color: var(--peach-t3);2989}29902991/* ── Demo entrance animation ── */2992#hd-shell {2993  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;2994}2995@keyframes hd-shell-enter {2996  from { opacity: 0; transform: scale(0.96) translateY(16px); }2997  to   { opacity: 1; transform: scale(1) translateY(0); }2998}29993000/* ── Keyframes ── */3001@keyframes peach-char-enter {3002  from { opacity: 0; transform: translateY(0.22em); }3003  to   { opacity: 1; transform: translateY(0); }3004}3005@keyframes peach-content-enter {3006  from { opacity: 0.96; transform: translateY(4px); }3007  to   { opacity: 1; transform: translateY(0); }3008}3009@keyframes peach-content-exit {3010  from { opacity: 1; transform: translateY(0); }3011  to   { opacity: 0.92; transform: translateY(-3px); }3012}3013@keyframes peach-screen-enter {3014  from { opacity: 0; transform: translateY(14px); }3015  to   { opacity: 1; transform: translateY(0); }3016}3017@keyframes peach-shell-fade-in {3018  from { opacity: 0; }3019  to   { opacity: 1; }3020}3021@keyframes peach-veil-in {3022  from { opacity: 0; }3023  to   { opacity: 1; }3024}3025@keyframes peach-lock-settle {3026  0%   { transform: scale(0.9); }3027  65%  { transform: scale(1.08); }3028  100% { transform: scale(1); }3029}3030@keyframes peach-copy-confirm {3031  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3032  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); }3033}3034@keyframes peach-copy-retreat {3035  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); }3036  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3037}3038@keyframes peach-copy-flood {3039  from { opacity: 0; transform: scaleX(0.15); }3040  to   { opacity: 1; transform: scaleX(1); }3041}3042@keyframes peach-copy-icon-settle {3043  from  { transform: scale(0.84); }3044  70%   { transform: scale(1.08); }3045  to    { transform: scale(1); }3046}3047@keyframes peach-copy-sheen-retreat {3048  from { opacity: 1; transform: scaleX(1); }3049  to   { opacity: 0; transform: scaleX(0.15); }3050}3051@keyframes peach-copy-drain {3052  from { width: 100%; }3053  to   { width: 0; }3054}3055@keyframes peach-shake {3056  0%, 100% { transform: translateX(0); }3057  20%      { transform: translateX(-6px); }3058  40%      { transform: translateX(6px); }3059  60%      { transform: translateX(-4px); }3060  80%      { transform: translateX(4px); }3061}30623063@keyframes pip-pulse {3064  0% { transform: scale(1); }3065  40% { transform: scale(2.2); }3066  100% { transform: scale(1); }3067}306830693070/* ── Password generator ── */3071.peach-pwgen-body {3072  flex: 1; overflow-y: auto;3073  display: flex; flex-direction: column;3074}3075.peach-policy-badge {3076  display: flex; align-items: center;3077  padding: 6px 20px 0;3078  font-size: 0.625rem; font-family: Inter, sans-serif;3079  color: var(--peach-t2); letter-spacing: 0.04em;3080}3081.peach-pwgen-display {3082  padding: 14px 20px 12px;3083  border-bottom: 1px solid var(--peach-t3);3084  display: flex; align-items: flex-start; gap: 10px;3085}3086.peach-pwgen-display-row {3087  display: flex;3088  align-items: flex-start;3089  gap: 8px;3090  padding-bottom: 8px;3091  border-bottom: 1px solid var(--peach-t3);3092}3093.peach-pwgen-output {3094  flex: 1; min-width: 0; margin: 0;3095  font-family: "IBM Plex Mono", monospace;3096  font-size: 0.8125rem; color: var(--peach-t0);3097  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3098  white-space: normal;3099  padding: 10px 12px;3100  background: var(--peach-t4);3101  border-radius: 6px;3102  min-height: 36px;3103}3104.peach-pwgen-output-display {3105  flex: 1;3106  min-width: 0;3107  margin: 0;3108  font-family: var(--font-display);3109  font-style: italic;3110  font-weight: 300;3111  font-size: 32px;3112  line-height: 1.05;3113  color: var(--peach-t0);3114  word-break: break-all;3115  overflow-wrap: break-word;3116  white-space: normal;3117  letter-spacing: 0.02em;3118}3119.peach-pwgen-display-actions {3120  display: flex;3121  flex-direction: column;3122  gap: 4px;3123  flex-shrink: 0;3124  margin-top: 2px;3125}3126.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3127.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3128.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3129.peach-pwgen-len-num {3130  font-family: "IBM Plex Mono", monospace;3131  font-size: 0.75rem; color: var(--peach-accent);3132}3133.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3134.peach-pwgen-toggles { display: flex; flex-direction: column; }3135.peach-pwgen-charset-pills {3136  display: flex;3137  gap: 6px;3138  flex-wrap: wrap;3139}3140.peach-pwgen-pill {3141  padding: 4px 11px;3142  border-radius: 999px;3143  border: 1px solid var(--peach-t3);3144  background: transparent;3145  color: var(--peach-t2);3146  font-family: "IBM Plex Mono", monospace;3147  font-size: 0.5625rem;3148  letter-spacing: 0.08em;3149  cursor: pointer;3150  transition: all 150ms ease;3151}3152.peach-pwgen-pill.is-on {3153  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3154  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3155  color: var(--peach-accent);3156}3157.peach-pwgen-pill:not(.is-on):hover {3158  color: var(--peach-t1);3159  border-color: var(--peach-t2);3160}3161.peach-pwgen-use-btn {3162  width: 100%;3163  min-height: 34px;3164  border-radius: 8px;3165  margin-top: 2px;3166}3167.peach-pwgen-toggle-row {3168  display: flex; align-items: center; justify-content: space-between;3169  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3170}3171.peach-pwgen-toggle-row:last-child { border-bottom: none; }3172.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }31733174.peach-screen-prelock {3175  z-index: 10;3176}31773178.prelock-form {3179  display: grid;3180  gap: 12px;3181}31823183/* Peach popup should not expose native scrollbars on internal panels. */3184.peach-settings-body,3185.peach-new-body,3186.peach-pwgen-body,3187.lock-screen,3188.peach-import-preview {3189  scrollbar-width: none;3190  -ms-overflow-style: none;3191  overscroll-behavior: contain;3192}3193.peach-settings-body::-webkit-scrollbar,3194.peach-new-body::-webkit-scrollbar,3195.peach-pwgen-body::-webkit-scrollbar,3196.lock-screen::-webkit-scrollbar,3197.peach-import-preview::-webkit-scrollbar {3198  width: 0;3199  height: 0;3200  display: none;3201}32023203.lock-screen {3204  height: 100%;3205  min-height: 100%;3206  overflow-y: auto;3207  padding: 18px 18px 16px;3208  gap: 14px;3209  grid-template-rows: auto auto auto 1fr auto;3210  align-content: stretch;3211  position: relative;3212  isolation: isolate;3213}3214.peach-screen.lock-screen--vault-stage {3215  display: flex;3216  flex-direction: column;3217  justify-content: flex-start;3218  gap: 18px;3219  padding: 20px 18px 18px;3220  overflow: hidden;3221}3222.peach-screen.lock-screen--vault-stage .peach-lock-panel {3223  margin-top: 0;3224}3225.lock-screen--onboarding {3226  display: flex;3227  flex-direction: column;3228  gap: 12px;3229  justify-content: flex-start;3230}32313232.lock-screen::before {3233  content: "";3234  position: absolute;3235  inset: 12px 18px auto auto;3236  width: 160px;3237  height: 160px;3238  border-radius: 999px;3239  background:3240    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%);3241  filter: blur(6px);3242  opacity: 0.7;3243  pointer-events: none;3244  z-index: 0;3245}32463247.peach-lock-rune-string {3248  flex: 1;3249  display: flex;3250  align-items: center;3251  justify-content: center;3252  gap: 6px;3253  font-family: PeachScript, monospace;3254  font-size: 0.8125rem;3255  letter-spacing: 0.05em;3256  pointer-events: none;3257  user-select: none;3258  position: relative;3259  z-index: 1;3260}32613262.peach-lock-rune-string span {3263  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3264  text-shadow:3265    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3266    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3267  transition: color 0.9s ease, text-shadow 0.9s ease;3268}32693270.peach-lock-rune-string span.is-glowing {3271  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3272  text-shadow:3273    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3274    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3275}32763277.lock-screen-header {3278  display: flex;3279  align-items: center;3280  justify-content: space-between;3281  position: relative;3282  z-index: 1;3283}32843285.lock-password-input.shake {3286  animation: peach-shake 300ms ease-in-out;3287}32883289.peach-hint-error {3290  color: rgba(220, 80, 60, 0.92);3291}32923293.peach-onboarding-headline {3294  margin: 0;3295  font-family: var(--font-display);3296  font-size: 35px;3297  line-height: 0.88;3298  font-style: italic;3299  font-weight: 400;3300  max-width: 252px;3301}33023303.peach-lock-copy {3304  display: grid;3305  gap: 8px;3306  position: relative;3307  z-index: 1;3308}33093310.peach-lock-copy--onboarding {3311  gap: 10px;3312}33133314.peach-lock-hero {3315  position: relative;3316  z-index: 1;3317  display: grid;3318  gap: 8px;3319  min-height: 0;3320  padding: 4px 2px 0;3321  border: none;3322  border-radius: 0;3323  background: transparent;3324  box-shadow: none;3325}3326.peach-lock-hero-art {3327  position: absolute;3328  right: -8px;3329  top: -6px;3330  width: 120px;3331  height: 120px;3332  display: flex;3333  align-items: center;3334  justify-content: center;3335  pointer-events: none;3336  opacity: 0.12;3337  filter: saturate(0.9);3338}3339.peach-lock-hero-mark {3340  width: 100%;3341  height: 100%;3342}3343/* Peach body stays brand-peach across every accent — we don't want a3344   green or blue peach when sage/sky is selected. Leaf + stem keep the3345   sage tint because a real peach has a sage leaf. */3346.peach-lock-hero-mark path:nth-child(2),3347.peach-lock-hero-mark path:nth-child(3) {3348  stroke: rgba(123, 144, 96, 0.88);3349  fill: rgba(123, 144, 96, 0.88);3350}3351.peach-lock-hero > *:not(.peach-lock-hero-art) {3352  position: relative;3353  z-index: 1;3354}33553356.peach-lock-eyebrow {3357  display: inline-flex;3358  align-items: center;3359  width: fit-content;3360  padding: 4px 9px;3361  border-radius: 999px;3362  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3363  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3364  color: var(--peach-t0);3365  font-family: "IBM Plex Mono", monospace;3366  font-size: 0.5rem;3367  letter-spacing: 0.18em;3368  text-transform: uppercase;3369}33703371.peach-lock-label-row {3372  display: flex;3373  align-items: center;3374  justify-content: space-between;3375  margin-bottom: 0;3376}33773378.peach-lock-reveal-btn {3379  display: inline-flex;3380  align-items: center;3381  gap: 4px;3382  background: none;3383  border: none;3384  cursor: pointer;3385  font-family: "IBM Plex Mono", monospace;3386  font-size: 0.5625rem;3387  letter-spacing: 0.06em;3388  color: var(--peach-t2);3389  padding: 2px 0;3390  transition: color 150ms ease;3391}33923393.peach-lock-reveal-btn:hover {3394  color: var(--peach-t1);3395}33963397.peach-lock-warning {3398  color: rgba(220, 80, 60, 0.85) !important;3399  line-height: 1.5;3400}34013402.peach-onboarding-cards {3403  display: grid;3404  gap: 8px;3405  position: relative;3406  z-index: 1;3407}34083409.peach-lock-panel {3410  position: relative;3411  z-index: 1;3412  display: grid;3413  gap: 9px;3414  padding: 14px 16px 15px;3415  border-radius: 18px;3416  border: 1px solid var(--peach-t3);3417  background:3418    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3419  box-shadow:3420    inset 0 1px 0 rgba(240, 232, 216, 0.04),3421    0 12px 28px rgba(0, 0, 0, 0.12);3422}34233424/* Glass surface — lock panel and settings groups */3425.peach-glass {3426  background: rgba(26, 20, 16, 0.65);3427  border: 1px solid rgba(255, 255, 255, 0.08);3428  border-radius: 12px;3429  backdrop-filter: blur(12px) saturate(1.4);3430  -webkit-backdrop-filter: blur(12px) saturate(1.4);3431}34323433@supports not (backdrop-filter: blur(1px)) {3434  .peach-glass {3435    background: rgba(26, 20, 16, 0.92);3436    border: 1px solid rgba(255, 255, 255, 0.10);3437    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3438  }3439}34403441.light .peach-glass,3442[data-theme="light"] .peach-glass {3443  background: rgba(253, 248, 244, 0.70);3444  border: 1px solid rgba(0, 0, 0, 0.07);3445  backdrop-filter: blur(12px) saturate(1.2);3446  -webkit-backdrop-filter: blur(12px) saturate(1.2);3447}34483449@supports not (backdrop-filter: blur(1px)) {3450  .light .peach-glass,3451  [data-theme="light"] .peach-glass {3452    background: rgba(253, 248, 244, 0.95);3453    border: 1px solid rgba(0, 0, 0, 0.09);3454  }3455}34563457/* Lock panel keeps its own border-radius over the generic glass token */3458.peach-lock-panel.peach-glass {3459  border-radius: 18px;3460  background: rgba(26, 20, 16, 0.65);3461  border: 1px solid rgba(255, 255, 255, 0.08);3462  box-shadow:3463    inset 0 1px 0 rgba(255, 255, 255, 0.05),3464    0 12px 28px rgba(0, 0, 0, 0.3);3465}34663467.light .peach-lock-panel.peach-glass,3468[data-theme="light"] .peach-lock-panel.peach-glass {3469  background: rgba(238, 227, 204, 0.75);3470  border: 1px solid rgba(34, 24, 9, 0.10);3471  box-shadow:3472    inset 0 1px 0 rgba(255, 255, 255, 0.5),3473    0 8px 24px rgba(80, 56, 32, 0.15);3474}34753476@supports not (backdrop-filter: blur(1px)) {3477  .peach-lock-panel.peach-glass {3478    background: rgba(26, 20, 16, 0.92);3479    box-shadow:3480      inset 0 1px 0 rgba(255, 255, 255, 0.05),3481      0 12px 28px rgba(0, 0, 0, 0.4);3482  }3483  .light .peach-lock-panel.peach-glass,3484  [data-theme="light"] .peach-lock-panel.peach-glass {3485    background: rgba(238, 227, 204, 0.96);3486  }3487}34883489.peach-lock-panel--secondary {3490  gap: 12px;3491}34923493.peach-lock-panel-header {3494  display: flex;3495  align-items: baseline;3496  justify-content: space-between;3497  gap: 12px;3498}34993500.peach-lock-option-grid {3501  display: grid;3502  gap: 10px;3503}35043505.peach-lock-option {3506  width: 100%;3507  display: grid;3508  gap: 6px;3509  padding: 14px 15px;3510  border-radius: 16px;3511  border: 1px solid rgba(240, 232, 216, 0.08);3512  background: rgba(240, 232, 216, 0.02);3513  color: var(--peach-t0);3514  text-align: left;3515  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3516}35173518.peach-lock-option:hover {3519  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3520  background: rgba(240, 232, 216, 0.04);3521  transform: translateY(-1px);3522}35233524.peach-lock-option-title {3525  font-size: 0.75rem;3526  color: var(--peach-t0);3527}35283529.peach-lock-option-copy {3530  font-size: 0.6875rem;3531  line-height: 1.55;3532  color: var(--peach-t1);3533}35343535.peach-onboarding-stack {3536  margin-top: 2px;3537}3538.peach-lock-panel-footer {3539  display: grid;3540  gap: 6px;3541  margin-top: 2px;3542  padding-top: 10px;3543  border-top: 1px solid rgba(240, 232, 216, 0.06);3544}35453546/* ── Restore tab view ─────────────────────────────────────────────────────3547   Tab-based restore screen replacing the old three-card picker. */35483549.peach-restore-tabview {3550  overflow: hidden;3551}35523553.peach-restore-tabcard {3554  flex: 1;3555  display: flex;3556  flex-direction: column;3557  gap: 0;3558  padding: 0;3559  overflow: hidden;3560  cursor: default;3561  user-select: none;3562  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3563}35643565/* ── Tab selector ─────────────────────────────────────────────────────── */35663567.peach-restore-tabs {3568  display: flex;3569  justify-content: space-around;3570  padding: 14px 10px 10px;3571  border-bottom: 1px solid var(--peach-t3);3572  gap: 2px;3573  overflow: hidden;3574  scrollbar-width: none;3575}3576.peach-restore-tabs::-webkit-scrollbar { display: none; }35773578.peach-restore-tab {3579  background: none;3580  border: none;3581  cursor: pointer;3582  padding: 3px 2px;3583  font-family: 'Cormorant Garamond', Georgia, serif;3584  font-style: italic;3585  font-size: 11px;3586  color: var(--peach-t2);3587  transition: color 150ms ease, text-shadow 150ms ease;3588  flex: 1;3589  min-width: 0;3590  text-align: center;3591  white-space: nowrap;3592  overflow: hidden;3593  text-overflow: ellipsis;3594}3595.peach-restore-tab:hover {3596  color: var(--peach-accent);3597  text-shadow:3598    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3599    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3600}3601.peach-restore-tab.is-active {3602  color: var(--peach-accent);3603  text-shadow:3604    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3605    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3606}36073608/* ── Content area ─────────────────────────────────────────────────────── */36093610.peach-restore-content {3611  padding: 16px 16px 14px;3612  display: flex;3613  flex-direction: column;3614  gap: 8px;3615  overflow: hidden;3616  scrollbar-width: none;3617  flex: 1;3618}3619.peach-restore-content::-webkit-scrollbar { display: none; }3620.peach-restore-content > * {3621  overflow: hidden;3622  scrollbar-width: none;3623}3624.peach-restore-content > *::-webkit-scrollbar { display: none; }36253626/* ── Shared tab inner layout ──────────────────────────────────────────── */36273628.peach-rt-symbols,3629.peach-rt-mayan,3630.peach-rt-csv,3631.peach-rt-phone {3632  display: flex;3633  flex-direction: column;3634  gap: 8px;3635  overflow: hidden;3636}36373638.peach-rt-submit {3639  width: 100%;3640}36413642.peach-rt-error {3643  margin: 0;3644  font-size: 0.6875rem;3645  color: var(--peach-breach);3646  line-height: 1.4;3647}36483649/* ── PeachScript tab ──────────────────────────────────────────────────── */36503651.peach-restore-symbols-textarea {3652  font-family: 'PeachScript', monospace;3653  font-size: 13px;3654  line-height: 1.9;3655  letter-spacing: 0.1em;3656  word-break: break-all;3657  resize: none;3658  width: 100%;3659  min-height: 56px;3660  max-height: 72px;3661  overflow: hidden;3662  scrollbar-width: none;3663  -ms-overflow-style: none;3664  box-sizing: border-box;3665  padding: 6px 8px;3666  border-radius: 8px;3667  border: 1px solid var(--peach-t3);3668  background: rgba(240, 232, 216, 0.03);3669  color: var(--peach-t0);3670}3671.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3672.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }36733674.peach-restore-symbols-pass {3675  width: 100%;3676  box-sizing: border-box;3677  padding: 7px 10px;3678  border-radius: 8px;3679  border: 1px solid var(--peach-t3);3680  background: rgba(240, 232, 216, 0.03);3681  color: var(--peach-t0);3682  font-size: 0.8125rem;3683}3684.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3685.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }36863687.peach-rt-divider {3688  text-align: center;3689  font-size: 0.6875rem;3690  color: var(--peach-t2);3691  font-style: italic;3692}36933694.peach-rt-file-label {3695  width: 100%;3696  justify-content: center;3697}36983699.peach-rt-anim-canvas {3700  width: 100%;3701  height: 180px;3702  border-radius: 10px;3703  overflow: hidden;3704  display: block;3705}37063707/* ── Mayan Code tab ───────────────────────────────────────────────────── */37083709.peach-rt-upload-zone {3710  display: flex;3711  align-items: center;3712  justify-content: center;3713  height: 64px;3714  border-radius: 10px;3715  border: 1px dashed var(--peach-t3);3716  background: rgba(240, 232, 216, 0.02);3717  cursor: pointer;3718  transition: border-color 150ms ease, background 150ms ease;3719  overflow: hidden;3720}3721.peach-rt-upload-zone:hover {3722  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3723  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);3724}3725.peach-rt-upload-zone.is-busy {3726  cursor: default;3727  opacity: 0.6;3728}37293730.peach-rt-upload-label {3731  font-size: 0.75rem;3732  color: var(--peach-t2);3733  font-style: italic;3734}37353736.peach-rt-entry-line {3737  margin: 0;3738  font-size: 0.75rem;3739  color: var(--peach-t1);3740  font-style: italic;3741  text-align: center;3742}37433744/* ── CSV tab ──────────────────────────────────────────────────────────── */37453746.peach-rt-csv-sources {3747  margin: 0;3748  font-size: 0.6875rem;3749  color: var(--peach-t2);3750  line-height: 1.5;3751  text-align: center;3752}37533754.peach-rt-csv-warning {3755  margin: 0;3756  font-family: "IBM Plex Mono", monospace;3757  font-size: 0.5625rem;3758  letter-spacing: 0.12em;3759  color: var(--peach-breach);3760  text-align: center;3761}37623763/* ── From Phone tab ───────────────────────────────────────────────────── */37643765.peach-rt-phone-code {3766  margin: 0;3767  text-align: center;3768  font-family: "IBM Plex Mono", monospace;3769  font-size: 22px;3770  letter-spacing: 0.18em;3771  color: var(--peach-t0);3772}37733774.peach-rt-phone-qr {3775  display: block;3776  width: 96px;3777  height: 96px;3778  margin: 0 auto;3779  border-radius: 6px;3780  image-rendering: pixelated;3781  overflow: hidden;3782}37833784.peach-rt-phone-hint {3785  margin: 0;3786  font-size: 0.6875rem;3787  color: var(--peach-t2);3788  line-height: 1.55;3789  text-align: center;3790}37913792.peach-rt-phone-gate-text {3793  margin: 0;3794  font-size: 0.8125rem;3795  color: var(--peach-t1);3796  text-align: center;3797}37983799/* ── Intro popup ──────────────────────────────────────────────────────── */38003801.peach-restore-intro-overlay {3802  position: absolute;3803  inset: 0;3804  z-index: 100;3805  display: flex;3806  align-items: center;3807  justify-content: center;3808  padding: 20px;3809  background: rgba(12, 10, 6, 0.7);3810  backdrop-filter: blur(4px);3811  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3812}38133814.peach-restore-intro-card {3815  width: 100%;3816  display: flex;3817  flex-direction: column;3818  gap: 12px;3819  padding: 22px 20px 20px;3820  border-radius: 16px;3821  border: 1px solid var(--peach-t3);3822  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3823  backdrop-filter: blur(4px);3824  -webkit-backdrop-filter: blur(4px);3825  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3826}38273828.peach-restore-intro-headline {3829  margin: 0;3830  font-family: var(--font-display);3831  font-style: italic;3832  font-size: 20px;3833  font-weight: 400;3834  color: var(--peach-t0);3835}38363837.peach-restore-intro-body {3838  display: flex;3839  flex-direction: column;3840  gap: 8px;3841}3842.peach-restore-intro-body p {3843  margin: 0;3844  font-size: 0.75rem;3845  color: var(--peach-t1);3846  line-height: 1.5;3847}38483849.peach-restore-intro-btn {3850  width: 100%;3851  margin-top: 4px;3852}38533854/* Snapshot restore panel */3855.peach-snapshot-panel {3856  gap: 10px;3857  overflow-y: auto;3858  max-height: 340px;3859}3860.peach-snapshot-list {3861  display: flex;3862  flex-direction: column;3863  gap: 4px;3864}3865.peach-snapshot-row {3866  display: flex;3867  align-items: center;3868  justify-content: space-between;3869  width: 100%;3870  padding: 8px 10px;3871  border-radius: 8px;3872  border: 1px solid rgba(240, 232, 216, 0.07);3873  background: transparent;3874  cursor: pointer;3875  transition: border-color 120ms, background 120ms;3876  text-align: left;3877  gap: 8px;3878}3879.peach-snapshot-row:hover {3880  border-color: rgba(240, 232, 216, 0.14);3881  background: rgba(240, 232, 216, 0.03);3882}3883.peach-snapshot-row.is-selected {3884  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3885  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3886}3887.peach-snapshot-time {3888  font-size: 11.5px;3889  color: var(--peach-t0);3890  flex: 1;3891}3892.peach-snapshot-count {3893  font-family: "IBM Plex Mono", monospace;3894  font-size: 0.625rem;3895  color: var(--peach-t2);3896  flex-shrink: 0;3897}3898.peach-snapshot-confirm {3899  display: flex;3900  flex-direction: column;3901  gap: 8px;3902  padding-top: 10px;3903  border-top: 1px solid rgba(240, 232, 216, 0.06);3904}3905.peach-snapshot-warning {3906  display: flex;3907  align-items: flex-start;3908  gap: 6px;3909  font-size: 10.5px;3910  color: rgba(220, 80, 60, 0.85);3911  line-height: 1.55;3912}3913.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3914.peach-snapshot-confirm-row {3915  display: flex;3916  gap: 6px;3917  align-items: center;3918}3919.peach-snapshot-restore-btn {3920  width: 100%;3921}3922.peach-lock-hero--unlock .peach-lock-hero-art {3923  width: 112px;3924  height: 112px;3925  right: 0;3926  top: 2px;3927  opacity: 0.1;3928}39293930.peach-card {3931  border: 1px solid var(--peach-t3);3932  border-radius: 18px;3933  background:3934    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3935  box-shadow:3936    inset 0 0 0 1px var(--peach-border-accent),3937    inset 0 1px 0 rgba(240, 232, 216, 0.04),3938    0 12px 32px rgba(0, 0, 0, 0.14);3939  overflow: hidden;3940}39413942.peach-card-active {3943  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3944  box-shadow:3945    inset 0 1px 0 rgba(240, 232, 216, 0.05),3946    0 16px 38px rgba(0, 0, 0, 0.18),3947    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);3948}39493950.peach-card-disabled {3951  opacity: 0.72;3952}39533954.peach-card-header {3955  width: 100%;3956  padding: 13px 16px 11px;3957  background: transparent;3958  color: var(--peach-t0);3959  display: flex;3960  justify-content: space-between;3961  align-items: center;3962  text-align: left;3963  font-size: 0.75rem;3964}39653966.peach-card-body {3967  padding: 0 16px 16px;3968  display: grid;3969  gap: 9px;3970}39713972.peach-card-tag {3973  color: var(--peach-t2);3974  font-family: "IBM Plex Mono", monospace;3975  font-size: 0.5625rem;3976  letter-spacing: 0.12em;3977  text-transform: uppercase;3978}39793980.peach-empty-copy {3981  display: grid;3982  gap: 6px;3983  color: var(--peach-t1);3984  font-size: 0.8125rem;3985}39863987.peach-lock-submit {3988  width: 100%;3989  box-shadow:3990    0 1px 0 rgba(255,255,255,0.10) inset,3991    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),3992    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),3993    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);3994}39953996.peach-lock-secondary {3997  width: 100%;3998  border-color: var(--peach-t3);3999  background: rgba(240, 232, 216, 0.02);4000}40014002.peach-lock-secondary:hover {4003  background: rgba(240, 232, 216, 0.04);4004}40054006.peach-lock-note {4007  max-width: none;4008  line-height: 1.55;4009  margin: 0;4010}40114012.peach-overlay-action {4013  font-size: 0.625rem;4014  padding: 4px 8px;4015  letter-spacing: 0.06em;4016  min-width: 44px;4017  text-align: center;4018}40194020.peach-overlay-spacer {4021  width: 32px;4022}40234024.peach-inline-action {4025  flex-shrink: 0;4026  font-size: 0.5625rem;4027  letter-spacing: 0.1em;4028  text-transform: uppercase;4029  padding: 4px 7px;4030}4031.peach-password-toggle-btn {4032  display: inline-flex;4033  align-items: center;4034  justify-content: center;4035  min-width: 30px;4036  min-height: 26px;4037  padding: 0 7px;4038  border: 1px solid var(--peach-t3);4039  border-radius: 999px;4040  background: rgba(240, 232, 216, 0.04);4041  color: var(--peach-t2);4042  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4043}4044.peach-password-toggle-btn:hover {4045  border-color: var(--peach-t2);4046  color: var(--peach-t0);4047  background: rgba(240, 232, 216, 0.06);4048}40494050.peach-new-textarea {4051  width: 100%;4052  min-height: 88px;4053  resize: vertical;4054  border: 0;4055  outline: none;4056  background: transparent;4057  color: var(--peach-t1);4058  font-family: "IBM Plex Mono", monospace;4059  font-size: 0.75rem;4060  line-height: 1.65;4061  caret-color: var(--peach-accent);4062}40634064.peach-new-textarea::placeholder {4065  color: var(--peach-t2);4066  opacity: 0.7;4067}40684069.peach-settings-actions {4070  display: grid;4071  gap: 8px;4072}40734074.peach-sync-section-label {4075  font-size: 0.6875rem;4076  color: var(--peach-t2);4077  text-transform: uppercase;4078  letter-spacing: 0.05em;4079}40804081.peach-sync-device-row {4082  display: flex;4083  justify-content: space-between;4084  align-items: center;4085  padding: 6px 0;4086  border-bottom: 1px solid var(--peach-t3);4087}40884089.peach-sync-device-info {4090  display: flex;4091  flex-direction: column;4092  gap: 2px;4093}40944095.peach-sync-device-name {4096  font-size: 0.8125rem;4097  color: var(--peach-t0);4098}40994100.peach-sync-device-meta {4101  font-size: 0.6875rem;4102  color: var(--peach-t2);4103}41044105.peach-sync-status-dot {4106  display: inline-block;4107  width: 8px;4108  height: 8px;4109  border-radius: 50%;4110  vertical-align: middle;4111}41124113.peach-sync-remove-btn {4114  color: var(--peach-breach);4115}41164117.peach-sync-advanced-row {4118  display: flex;4119  justify-content: space-between;4120  align-items: center;4121  padding: 6px 0;4122  gap: 12px;4123}41244125.peach-sync-advanced-info {4126  display: flex;4127  flex-direction: column;4128  gap: 2px;4129  flex: 1;4130}41314132.peach-sync-advanced-name {4133  font-size: 0.8125rem;4134  color: var(--peach-t0);4135}41364137.peach-sync-reset-confirm {4138  display: flex;4139  flex-direction: column;4140  gap: 8px;4141  padding: 10px;4142  border: 1px solid var(--peach-breach);4143  border-radius: 10px;4144  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4145}41464147.peach-sync-reset-confirm-headline {4148  font-size: 0.8125rem;4149  font-weight: 600;4150  color: var(--peach-t0);4151  margin: 0;4152}41534154.peach-sync-reset-confirm-body {4155  font-size: 0.75rem;4156  color: var(--peach-t1);4157  margin: 0;4158  line-height: 1.4;4159}41604161.peach-btn--danger {4162  background: var(--peach-breach);4163  color: #fff;4164  border-color: var(--peach-breach);4165}4166.peach-btn--danger:hover:not(:disabled) {4167  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4168}4169.peach-btn--danger:disabled {4170  opacity: 0.55;4171  cursor: not-allowed;4172}41734174.peach-sync-hero-icon {4175  color: var(--peach-t1);4176  opacity: 0.85;4177}41784179.peach-import-preview {4180  margin-bottom: 12px;4181  max-height: 152px;4182  overflow-y: auto;4183  border: 1px solid var(--peach-t3);4184  border-radius: 10px;4185  padding: 8px 10px;4186  display: grid;4187  gap: 8px;4188  background: rgba(240, 232, 216, 0.02);4189}41904191.peach-import-preview-row {4192  display: flex;4193  justify-content: space-between;4194  gap: 10px;4195  font-size: 0.6875rem;4196  color: var(--peach-t1);4197}41984199.peach-import-preview-title {4200  color: var(--peach-t0);4201  flex: 1;4202  min-width: 0;4203  overflow: hidden;4204  text-overflow: ellipsis;4205  white-space: nowrap;4206}42074208.peach-import-preview-meta {4209  color: var(--peach-t2);4210  flex-shrink: 0;4211  max-width: 42%;4212  overflow: hidden;4213  text-overflow: ellipsis;4214  white-space: nowrap;4215}42164217.peach-import-preview-more {4218  color: var(--peach-t2);4219  font-size: 0.625rem;4220}42214222.peach-restore-copy {4223  margin: 0;4224  color: var(--peach-t1);4225  font-size: 0.6875rem;4226  line-height: 1.6;4227}42284229.peach-restore-warning {4230  padding: 10px 12px;4231  border-radius: 12px;4232  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4233  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4234  color: var(--peach-t0);4235  font-size: 0.6875rem;4236  line-height: 1.55;4237}42384239.peach-provider-chips {4240  display: flex;4241  flex-wrap: wrap;4242  gap: 6px;4243}42444245.peach-provider-chip {4246  display: inline-flex;4247  align-items: center;4248  padding: 5px 8px;4249  border-radius: 999px;4250  border: 1px solid var(--peach-t3);4251  background: rgba(240, 232, 216, 0.02);4252  color: var(--peach-t1);4253  font-family: "IBM Plex Mono", monospace;4254  font-size: 0.5rem;4255  letter-spacing: 0.08em;4256  text-transform: uppercase;4257}42584259.peach-restore-file,4260.peach-restore-input {4261  width: 100%;4262  border-radius: 10px;4263  border: 1px solid var(--peach-t3);4264  background: var(--peach-s2);4265  color: var(--peach-t0);4266  font-size: 0.75rem;4267}42684269.peach-restore-file {4270  padding: 9px 10px;4271}42724273.peach-restore-file::file-selector-button {4274  margin-right: 10px;4275  padding: 7px 10px;4276  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4277  border-radius: 999px;4278  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4279  color: var(--peach-t0);4280  font-size: 0.625rem;4281  letter-spacing: 0.08em;4282  text-transform: uppercase;4283  cursor: pointer;4284}42854286.peach-restore-input {4287  padding: 10px 12px;4288}42894290.peach-auth-grid {4291  display: grid;4292  gap: 10px;4293}42944295.peach-import-summary {4296  color: var(--peach-t1);4297  font-size: 0.75rem;4298  line-height: 1.6;4299  margin-bottom: 12px;4300}43014302.peach-restore-error {4303  color: rgba(220, 80, 60, 0.95);4304  font-size: 0.75rem;4305  line-height: 1.55;4306}43074308.peach-passkey-card {4309  max-width: 400px;4310  margin: auto 16px;4311  align-self: center;4312  width: calc(100% - 32px);4313}43144315/* Center the approval card vertically inside the overlay-view (which sets4316 * flex-direction: column without justify-content). Without this, the card4317 * sits at the top with a tall empty band below — looks unfinished on the4318 * 320px popup. */4319.peach-overlay-view:has(.peach-passkey-card) {4320  justify-content: center;4321}43224323.peach-pro-badge {4324  padding: 2px 6px;4325  border-radius: 999px;4326  font-family: var(--font-ui);4327  font-size: 0.625rem;4328  letter-spacing: 0.08em;4329  text-transform: uppercase;4330  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4331  color: var(--peach-accent);4332}43334334/* ── Shortcuts rebind table ─────────────────────────────────── */4335.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4336.peach-shortcut-row {4337  display: flex;4338  align-items: center;4339  gap: 10px;4340  padding: 6px 0;4341}4342.peach-shortcut-row-label {4343  flex: 1;4344  font-size: 0.75rem;4345  color: var(--peach-t0);4346}4347.peach-shortcut-chip {4348  min-width: 64px;4349  padding: 4px 10px;4350  border-radius: 6px;4351  border: 1px solid var(--peach-t3);4352  background: var(--peach-input-bg, var(--surface-card));4353  color: var(--peach-t0);4354  font-family: var(--font-mono);4355  font-size: 0.6875rem;4356  letter-spacing: 0.04em;4357  cursor: pointer;4358  text-align: center;4359  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4360}4361.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4362.peach-shortcut-chip.is-custom {4363  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4364  color: var(--peach-accent);4365}4366.peach-shortcut-chip.is-capturing {4367  border-color: var(--peach-accent);4368  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4369  color: var(--peach-accent);4370  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4371}4372@keyframes peach-shortcut-capture-pulse {4373  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4374  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4375}4376.peach-shortcut-reset {4377  background: transparent;4378  border: none;4379  cursor: pointer;4380  color: var(--peach-t2);4381  padding: 4px 6px;4382  border-radius: 5px;4383  font-size: 0.875rem;4384  line-height: 1;4385  transition: color 120ms ease, background 120ms ease;4386}4387.peach-shortcut-reset:hover {4388  color: var(--peach-t0);4389  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4390}4391.peach-shortcuts-conflict {4392  margin: 4px 0 0;4393  padding: 8px 10px;4394  border-radius: 7px;4395  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4396  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4397  font-family: var(--font-mono);4398  font-size: 0.6875rem;4399  color: var(--peach-t0);4400}44014402/* ── Help dialog overlay (? to open) ────────────────────────── */4403.peach-shortcuts-help-backdrop {4404  position: fixed;4405  inset: 0;4406  background: rgba(0, 0, 0, 0.55);4407  backdrop-filter: blur(2px);4408  display: flex;4409  align-items: center;4410  justify-content: center;4411  z-index: 1000;4412  animation: peach-help-fade-in 140ms ease forwards;4413}4414@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4415.peach-shortcuts-help-card {4416  width: min(320px, 92vw);4417  max-height: 80vh;4418  overflow-y: auto;4419  border-radius: 14px;4420  border: 1px solid var(--peach-t3);4421  background: var(--peach-bg);4422  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4423  padding: 16px 18px 18px;4424  display: flex;4425  flex-direction: column;4426  gap: 12px;4427}4428.peach-shortcuts-help-head {4429  display: flex; align-items: center; justify-content: space-between;4430}4431.peach-shortcuts-help-head h3 {4432  margin: 0;4433  font-family: var(--font-display);4434  font-style: italic;4435  font-weight: 400;4436  font-size: 22px;4437  color: var(--peach-t0);4438}4439.peach-shortcuts-help-close {4440  background: transparent;4441  border: none;4442  color: var(--peach-t2);4443  cursor: pointer;4444  font-size: 0.875rem;4445  padding: 4px 8px;4446  border-radius: 5px;4447}4448.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4449.peach-shortcuts-help-body ul {4450  list-style: none; padding: 0; margin: 4px 0 12px;4451  display: grid; gap: 8px;4452}4453.peach-shortcuts-help-body li {4454  display: flex; align-items: center; justify-content: space-between; gap: 12px;4455  font-size: 0.75rem; color: var(--peach-t0);4456}4457.peach-shortcuts-help-body kbd {4458  font-family: var(--font-mono);4459  font-size: 0.6875rem;4460  padding: 3px 8px;4461  border-radius: 6px;4462  background: var(--surface-card);4463  border: 1px solid var(--peach-t3);4464  color: var(--peach-accent);4465  letter-spacing: 0.04em;4466}44674468/* ── Pro promo on Account screen ────────────────────────────── */4469.peach-pro-promo {4470  position: relative;4471  border-radius: 14px;4472  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4473  background:4474    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4475    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4476    var(--surface-card);4477  overflow: hidden;4478  margin-bottom: 14px;4479}4480.peach-pro-promo-glow {4481  position: absolute;4482  inset: -40% -20% auto auto;4483  width: 220px; height: 220px;4484  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4485  pointer-events: none;4486  filter: blur(8px);4487}4488.peach-pro-promo-inner {4489  position: relative;4490  padding: 18px 18px 16px;4491}4492.peach-pro-promo-title {4493  font-family: var(--font-display);4494  font-style: italic;4495  font-weight: 400;4496  font-size: 28px;4497  line-height: 1;4498  letter-spacing: -0.005em;4499  color: var(--peach-t0);4500  margin: 0 0 4px;4501}4502.peach-pro-promo-tagline {4503  font-family: var(--font-mono);4504  font-size: 0.625rem;4505  letter-spacing: 0.06em;4506  color: var(--peach-t2);4507  margin: 0 0 14px;4508}4509.peach-pro-promo-list {4510  list-style: none;4511  margin: 0 0 16px;4512  padding: 0;4513  display: grid;4514  gap: 9px;4515}4516.peach-pro-promo-list li {4517  display: flex;4518  align-items: flex-start;4519  gap: 9px;4520  font-size: 0.75rem;4521  color: var(--peach-t1);4522  line-height: 1.4;4523}4524.peach-pro-promo-list svg {4525  width: 14px;4526  height: 14px;4527  flex-shrink: 0;4528  color: var(--peach-accent);4529  margin-top: 2px;4530}4531.peach-pro-promo-list span {4532  color: var(--peach-t0);4533}4534.peach-pro-promo-cta {4535  width: 100%;4536  background: var(--peach-accent);4537  color: #fff;4538  border: none;4539  padding: 9px 12px;4540  border-radius: 9px;4541  font-size: 0.75rem;4542  font-weight: 500;4543  font-family: var(--font-ui);4544  letter-spacing: 0.02em;4545  text-decoration: none;4546  display: inline-flex;4547  align-items: center;4548  justify-content: center;4549  cursor: pointer;4550  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4551  box-shadow: 0 2px 16px var(--peach-glow);4552}4553.peach-pro-promo-cta:hover {4554  filter: brightness(1.07);4555  box-shadow: 0 4px 24px var(--peach-glow);4556  transform: translateY(-1px);4557}4558.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }45594560.peach-pro-or-divider {4561  display: flex;4562  align-items: center;4563  gap: 10px;4564  margin: 4px 0 12px;4565  font-family: var(--font-mono);4566  font-size: 0.625rem;4567  letter-spacing: 0.06em;4568  color: var(--peach-t2);4569  text-transform: uppercase;4570}4571.peach-pro-or-divider::before,4572.peach-pro-or-divider::after {4573  content: "";4574  flex: 1;4575  height: 1px;4576  background: var(--peach-t3);4577}45784579.peach-loading {4580  position: absolute;4581  inset: 0;4582  display: flex;4583  align-items: center;4584  justify-content: center;4585  background: var(--bg);4586  animation: peach-loading-pulse 1.2s ease-in-out infinite;4587}45884589@keyframes peach-loading-pulse {4590  0%, 100% { opacity: 0.6; }4591  50% { opacity: 1; }4592}45934594/* ── Health Dashboard ─────────────────────────────────────────────────── */4595.peach-health-body {4596  flex: 1;4597  overflow-y: auto;4598  display: flex;4599  flex-direction: column;4600  /* Hide the platform scrollbar — every other scrollable surface in the4601   * popup hides it; the Health view was the one outlier and it ruined the4602   * polish. Behavior unchanged, just no rail rendered. */4603  scrollbar-width: none;4604  -ms-overflow-style: none;4605}4606.peach-health-body::-webkit-scrollbar { display: none; }46074608/* Loading screen for the Vault Health view. The advanced report computation4609 * can run for a few seconds on a large vault — without a clear loading4610 * screen the surface looked broken (the entry view bleeds through the4611 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4612.peach-health-loading-screen {4613  flex: 1;4614  display: flex;4615  flex-direction: column;4616  align-items: center;4617  justify-content: center;4618  gap: 14px;4619  padding: 32px 28px;4620  text-align: center;4621}46224623.peach-health-loading-glyph {4624  width: 48px;4625  height: 48px;4626  display: flex;4627  align-items: center;4628  justify-content: center;4629  border-radius: 14px;4630  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4631  color: var(--peach-accent);4632}46334634.peach-health-loading-title {4635  margin: 0;4636  font-family: var(--font-display);4637  font-style: italic;4638  font-weight: 300;4639  font-size: 19px;4640  line-height: 1.2;4641  color: var(--peach-t0);4642}46434644.peach-health-loading-copy {4645  margin: 0;4646  max-width: 240px;4647  font-size: 0.75rem;4648  line-height: 1.55;4649  color: var(--peach-t2);4650}46514652.peach-health-loading-track {4653  width: 200px;4654  height: 3px;4655  margin-top: 6px;4656  border-radius: 999px;4657  background: rgba(240, 232, 216, 0.06);4658  overflow: hidden;4659}46604661.peach-health-loading-fill {4662  width: 40%;4663  height: 100%;4664  border-radius: inherit;4665  background: linear-gradient(4666    90deg,4667    transparent 0%,4668    var(--peach-accent) 50%,4669    transparent 100%4670  );4671  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4672}46734674@keyframes peach-health-loading-sweep {4675  0%   { transform: translateX(-100%); }4676  100% { transform: translateX(350%); }4677}46784679[data-motion="reduce"] .peach-health-loading-fill,4680[data-motion="reduce"] .peach-health-loading-glyph svg path {4681  animation: none;4682}46834684.peach-health-summary {4685  padding: 10px 16px 6px;4686  font-family: "IBM Plex Mono", monospace;4687  font-size: 0.6875rem;4688}4689.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4690.peach-health-summary-ok { color: var(--peach-t2); }46914692.peach-health-check-row {4693  padding: 0 16px 10px;4694}4695.peach-health-check-btn {4696  width: 100%;4697  display: flex;4698  align-items: center;4699  justify-content: center;4700}47014702.peach-health-sections {4703  flex: 1;4704  display: flex;4705  flex-direction: column;4706}47074708.peach-health-section {4709  border-bottom: 1px solid var(--peach-t3);4710}47114712.peach-health-section-header {4713  width: 100%;4714  display: flex;4715  align-items: center;4716  justify-content: space-between;4717  padding: 9px 16px;4718  background: transparent;4719  cursor: pointer;4720  color: var(--peach-t0);4721}47224723.peach-health-section-title-row {4724  display: flex;4725  align-items: center;4726  gap: 8px;4727}47284729.peach-health-count-badge {4730  display: inline-flex;4731  align-items: center;4732  justify-content: center;4733  min-width: 20px;4734  height: 18px;4735  padding: 0 5px;4736  border-radius: 999px;4737  background: rgba(220,80,60,0.15);4738  border: 1px solid rgba(220,80,60,0.25);4739  font-family: "IBM Plex Mono", monospace;4740  font-size: 0.5625rem;4741  color: rgba(220,80,60,0.9);4742}47434744.peach-health-section-title {4745  font-family: "IBM Plex Mono", monospace;4746  font-size: 0.6875rem;4747  text-transform: uppercase;4748  letter-spacing: 0.1em;4749  color: var(--peach-t1);4750}47514752.peach-health-chevron {4753  color: var(--peach-t2);4754  transition: transform 200ms ease;4755  flex-shrink: 0;4756}4757.peach-health-chevron.is-expanded {4758  transform: rotate(180deg);4759}47604761.peach-health-section-body {4762  padding: 0 16px 10px;4763  display: flex;4764  flex-direction: column;4765  gap: 4px;4766}47674768.peach-health-row {4769  display: flex;4770  align-items: flex-start;4771  justify-content: space-between;4772  gap: 8px;4773  padding: 6px 8px;4774  border-radius: 8px;4775  background: rgba(240,232,216,0.02);4776}47774778.peach-health-row-info {4779  flex: 1;4780  min-width: 0;4781  display: flex;4782  flex-direction: column;4783  gap: 2px;4784}47854786.peach-health-row-name {4787  font-family: var(--font-display);4788  font-size: 0.9375rem;4789  font-style: italic;4790  font-weight: 400;4791  color: var(--peach-t0);4792  white-space: nowrap;4793  overflow: hidden;4794  text-overflow: ellipsis;4795}47964797.peach-health-row-meta {4798  font-family: "IBM Plex Mono", monospace;4799  font-size: 0.5625rem;4800  color: var(--peach-t2);4801  letter-spacing: 0.05em;4802}48034804.peach-health-fix-btn {4805  font-size: 0.5625rem;4806  letter-spacing: 0.08em;4807  text-transform: uppercase;4808  padding: 4px 7px;4809  flex-shrink: 0;4810  display: flex;4811  align-items: center;4812}48134814.peach-health-empty {4815  font-family: "IBM Plex Mono", monospace;4816  font-size: 0.625rem;4817  color: var(--peach-t2);4818  padding: 6px 0;4819}48204821.peach-health-loading {4822  font-family: "IBM Plex Mono", monospace;4823  font-size: 0.625rem;4824  color: var(--peach-t2);4825  padding: 6px 0;4826  display: flex;4827  align-items: center;4828  gap: 6px;4829}48304831.peach-health-loading::before {4832  content: "";4833  width: 10px;4834  height: 10px;4835  border: 1.5px solid var(--peach-t3);4836  border-top-color: var(--peach-accent);4837  border-radius: 50%;4838  animation: peach-spin 600ms linear infinite;4839}48404841@keyframes peach-spin {4842  to { transform: rotate(360deg); }4843}48444845.peach-spinner {4846  width: 32px;4847  height: 32px;4848  border: 2px solid var(--peach-s2);4849  border-top-color: var(--peach-accent);4850  border-radius: 50%;4851  margin: 0 auto 16px;4852  animation: peach-spin 0.8s linear infinite;4853}48544855.peach-progress-screen {4856  text-align: center;4857  padding: 32px 16px;4858}48594860.peach-progress-screen-title {4861  font-size: 0.8125rem;4862  color: var(--peach-t0);4863  margin-bottom: 16px;4864}48654866.peach-progress-screen-stage {4867  font-size: 0.6875rem;4868  color: var(--peach-t2);4869  min-height: 14px;4870}48714872.peach-progress-screen-note {4873  font-size: 0.625rem;4874  color: var(--peach-t2);4875  margin-top: 8px;4876}48774878.peach-pairing-body {4879  flex: 1;4880  overflow-y: auto;4881  display: flex;4882  flex-direction: column;4883}48844885.peach-pairing-content {4886  flex: 1;4887  display: flex;4888  flex-direction: column;4889  align-items: center;4890  justify-content: center;4891  gap: 14px;4892  padding: 28px 20px;4893  text-align: center;4894}48954896.peach-pairing-code-screen {4897  gap: 18px;4898}48994900.peach-pairing-headline {4901  font-family: var(--font-display);4902  font-style: italic;4903  font-weight: 300;4904  font-size: 28px;4905  color: var(--peach-t0);4906  margin: 0;4907  line-height: 1;4908}49094910.peach-pairing-subline {4911  font-size: 0.75rem;4912  color: var(--peach-t2);4913  max-width: 220px;4914  line-height: 1.5;4915  margin: 0;4916}49174918.peach-pairing-subline--center {4919  text-align: center;4920}49214922/* 6-digit pairing code — both display (.peach-pairing-code) and entry4923   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking4924   so the two modes feel like the same surface. */4925.peach-pairing-code {4926  font-family: "IBM Plex Mono", monospace;4927  font-size: 36px;4928  letter-spacing: 0.25em;4929  color: var(--peach-t0);4930  text-align: center;4931  padding: 24px 0;4932  text-shadow:4933    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),4934    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);4935  background: transparent;4936  border: 0;4937  cursor: default;4938  user-select: text;4939}49404941.peach-pairing-code--loading,4942.peach-pairing-code--expired {4943  font-size: 18px;4944  letter-spacing: 0.04em;4945  color: var(--peach-t2);4946  cursor: pointer;4947  text-shadow: none;4948}49494950.peach-pairing-code-input {4951  font-family: "IBM Plex Mono", monospace;4952  font-size: 36px;4953  letter-spacing: 0.25em;4954  color: var(--peach-t0);4955  background: transparent;4956  border: 0;4957  border-bottom: 1px solid var(--peach-t3);4958  outline: none;4959  text-align: center;4960  padding: 18px 0;4961  width: 220px;4962  caret-color: var(--peach-accent);4963  transition: border-color 160ms ease;4964}49654966.peach-pairing-code-input::placeholder {4967  color: var(--peach-t3);4968}49694970.peach-pairing-code-input:focus {4971  border-bottom-color: var(--peach-accent);4972}49734974.peach-pairing-toggle {4975  background: transparent;4976  border: 0;4977  color: var(--peach-t2);4978  font-size: 0.75rem;4979  padding: 8px 4px;4980  cursor: pointer;4981  transition: color 120ms ease;4982}49834984.peach-pairing-toggle:hover:not(:disabled) {4985  color: var(--peach-t1);4986}49874988.peach-pairing-toggle:disabled {4989  opacity: 0.5;4990  cursor: default;4991}49924993.peach-pairing-hint {4994  font-size: 0.6875rem;4995  color: var(--peach-t2);4996  margin: 0;4997  text-align: center;4998}49995000.peach-pairing-status {5001  display: flex;5002  align-items: center;5003  gap: 8px;5004  margin: 0;5005  font-size: 0.75rem;5006  color: var(--peach-t1);5007}50085009.peach-pairing-error {5010  margin: 0;5011  font-size: 0.6875rem;5012  color: var(--peach-breach);5013}50145015.peach-pairing-error--muted {5016  color: var(--peach-t2);5017}50185019.peach-pairing-spinner {5020  width: 12px;5021  height: 12px;5022  border: 1.5px solid var(--peach-t3);5023  border-top-color: var(--peach-accent);5024  border-radius: 50%;5025  animation: peach-spin 0.8s linear infinite;5026}50275028.peach-pairing-success-icon,5029.peach-pairing-error-icon,5030.peach-pairing-hero {5031  display: inline-flex;5032  align-items: center;5033  justify-content: center;5034}50355036/* Tag chips */5037.peach-tag-chip {5038  display: inline-flex;5039  align-items: center;5040  gap: 4px;5041  padding: 3px 8px;5042  border-radius: 999px;5043  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5044  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5045  color: var(--peach-t0);5046  font-family: "IBM Plex Mono", monospace;5047  font-size: 0.625rem;5048  letter-spacing: 0.04em;5049}50505051.peach-tag-chip-remove {5052  background: transparent;5053  border: none;5054  color: inherit;5055  opacity: 0.6;5056  cursor: pointer;5057  padding: 0;5058  font-size: 0.75rem;5059  line-height: 1;5060}50615062.peach-tag-chip-remove:hover {5063  opacity: 1;5064}50655066/* Tag input */5067.peach-tag-input-wrap {5068  border-bottom: 1px solid var(--peach-t3);5069}50705071.peach-tag-suggestions {5072  display: flex;5073  flex-wrap: wrap;5074  gap: 4px;5075  padding: 6px 0;5076}50775078.peach-tag-suggestion {5079  padding: 2px 8px;5080  border-radius: 999px;5081  border: 1px solid var(--peach-t3);5082  background: var(--peach-s2);5083  color: var(--peach-t1);5084  font-family: "IBM Plex Mono", monospace;5085  font-size: 0.625rem;5086  cursor: pointer;5087  transition: border-color 80ms ease, background 80ms ease;5088}50895090.peach-tag-suggestion:hover {5091  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5092  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5093}50945095/* Tag filter strip */5096.peach-tag-filter-strip {5097  border-bottom: 1px solid var(--peach-t3);5098  flex-shrink: 0;5099}51005101.peach-tag-filter-chip {5102  display: inline-flex;5103  align-items: center;5104  padding: 4px 10px;5105  border-radius: 999px;5106  border: 1px solid var(--peach-t3);5107  background: transparent;5108  color: var(--peach-t2);5109  font-family: "IBM Plex Mono", monospace;5110  font-size: 0.5625rem;5111  letter-spacing: 0.06em;5112  text-transform: uppercase;5113  cursor: pointer;5114  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5115  white-space: nowrap;5116}51175118.peach-tag-filter-chip:hover {5119  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5120  color: var(--peach-t1);5121}51225123.peach-tag-filter-chip.is-selected {5124  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5125  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5126  color: var(--peach-t0);5127}51285129/* ─────────────────────────────────────────────────────────────────────────5130   v1.4.12 additions5131   ─────────────────────────────────────────────────────────────────────── */51325133/* Sort bar */5134.peach-sort-bar {5135  display: flex;5136  align-items: center;5137  gap: 4px;5138  padding: 5px 12px;5139  border-bottom: 1px solid var(--peach-t3);5140  flex-shrink: 0;5141  overflow-x: auto;5142  scrollbar-width: none;5143}51445145.peach-sort-btn {5146  padding: 2px 9px;5147  border-radius: 999px;5148  border: 1px solid transparent;5149  background: transparent;5150  color: var(--peach-t2);5151  font-family: "IBM Plex Mono", monospace;5152  font-size: 0.5625rem;5153  letter-spacing: 0.07em;5154  text-transform: uppercase;5155  cursor: pointer;5156  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5157  white-space: nowrap;5158}51595160.peach-sort-btn:hover {5161  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5162  color: var(--peach-t1);5163}51645165.peach-sort-btn.is-active {5166  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5167  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5168  color: var(--peach-t0);5169}51705171.peach-sort-domain-hint {5172  margin-left: auto;5173  font-family: "IBM Plex Mono", monospace;5174  font-size: 0.5625rem;5175  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5176  white-space: nowrap;5177  overflow: hidden;5178  text-overflow: ellipsis;5179  max-width: 110px;5180}51815182/* Tab-match badge on entry rows */5183.peach-tab-match-badge {5184  display: inline-block;5185  width: 6px;5186  height: 6px;5187  border-radius: 50%;5188  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5189  margin-left: 5px;5190  vertical-align: middle;5191  flex-shrink: 0;5192  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5193}51945195.peach-entry-row.is-tab-match {5196  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5197  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5198}51995200.peach-entry-row.is-tab-match:hover {5201  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5202}52035204/* Entry list stagger entrance */5205@keyframes peach-entry-fadein {5206  from { opacity: 0; transform: translateY(4px); }5207  to   { opacity: 1; transform: translateY(0); }5208}52095210.peach-vault-list .peach-entry-row {5211  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5212  content-visibility: auto;5213  contain-intrinsic-size: auto 44px;5214}52155216/* Button press micro-interaction */5217.peach-btn:active {5218  transform: scale(0.95);5219  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5220}52215222.peach-sort-btn:active,5223.peach-tag-filter-chip:active {5224  transform: scale(0.93);5225  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5226}52275228/* Password strength bar (Lock view + shared) */5229.peach-password-strength {5230  display: flex;5231  align-items: center;5232  gap: 8px;5233  margin-top: 6px;5234}52355236.peach-strength-bar {5237  flex: 1;5238  height: 3px;5239  border-radius: 2px;5240  background: var(--peach-t3);5241  overflow: hidden;5242}52435244.peach-strength-fill {5245  height: 100%;5246  border-radius: 2px;5247  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5248              background 300ms ease;5249}52505251.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5252.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5253.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5254.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }52555256.peach-strength-label {5257  font-family: "IBM Plex Mono", monospace;5258  font-style: italic;5259  font-size: 0.5625rem;5260  font-weight: 300;5261  letter-spacing: 0.06em;5262  color: var(--peach-t2);5263  min-width: 36px;5264  text-align: right;5265}52665267.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5268.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5269.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5270.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }52715272/* Duress form */5273.peach-duress-status {5274  padding: 2px 8px;5275  border-radius: 999px;5276  border: 1px solid var(--peach-t3);5277  font-family: "IBM Plex Mono", monospace;5278  font-size: 0.5625rem;5279  letter-spacing: 0.07em;5280  text-transform: uppercase;5281  color: var(--peach-t2);5282  flex-shrink: 0;5283}52845285.peach-duress-status.is-active {5286  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5287  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5288  color: var(--peach-t0);5289}52905291.peach-duress-form {5292  padding: 8px 0 4px;5293  display: flex;5294  flex-direction: column;5295  gap: 6px;5296}52975298.peach-duress-form .peach-label {5299  margin-top: 4px;5300}53015302.peach-duress-actions {5303  display: flex;5304  gap: 6px;5305  align-items: center;5306  margin-top: 4px;5307}53085309.peach-duress-actions .peach-btn:first-child {5310  margin-right: auto;5311}53125313/* Improved overlay spring entrance */5314.peach-overlay-view.ov-enter-up {5315  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5316}53175318@keyframes ov-enter-up-spring {5319  from { opacity: 0; transform: translateY(16px) scale(0.98); }5320  to   { opacity: 1; transform: translateY(0) scale(1); }5321}53225323.peach-overlay-view.ov-enter-right {5324  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5325}53265327@keyframes ov-enter-right-spring {5328  from { opacity: 0; transform: translateX(18px) scale(0.98); }5329  to   { opacity: 1; transform: translateX(0) scale(1); }5330}53315332/* ── Onboarding-mode restore screens (file import) ── */5333/* Used when MainImportView renders during onboarding (no vault yet).5334   Animates like a lock-screen transition. */5335.peach-lock-view {5336  position: absolute;5337  inset: 0;5338  display: flex;5339  flex-direction: column;5340  background:5341    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5342    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5343    var(--peach-bg);5344  z-index: 2;5345  overflow: hidden;5346  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5347}53485349.peach-lock-view-header {5350  display: flex;5351  align-items: center;5352  justify-content: space-between;5353  padding: 16px 18px 12px;5354  flex-shrink: 0;5355}53565357/* ───────── Settings: auto-lock select ───────── */5358.peach-settings-select {5359  font-family: "IBM Plex Mono", monospace;5360  font-size: 0.6875rem;5361  background: transparent;5362  border: 1px solid var(--peach-t3);5363  border-radius: 4px;5364  color: var(--peach-t1);5365  padding: 3px 6px;5366  cursor: pointer;5367  outline: none;5368}5369.peach-settings-select:focus {5370  border-color: var(--peach-accent);5371}53725373/* ───────── Duress status pill (new polished) ───────── */5374.peach-duress-status-pill {5375  font-family: "IBM Plex Mono", monospace;5376  font-size: 0.5625rem;5377  text-transform: uppercase;5378  letter-spacing: 0.12em;5379  padding: 2px 8px;5380  border-radius: 12px;5381  background: var(--peach-t3);5382  color: var(--peach-t2);5383  flex-shrink: 0;5384}5385.peach-duress-status-pill.is-active {5386  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5387  color: var(--peach-accent);5388}53895390/* ───────── Entry advanced disclosure (canary) ───────── */5391.peach-entry-advanced {5392  margin-top: 12px;5393  border-top: 1px solid var(--peach-t3);5394  padding-top: 10px;5395  position: relative;5396  z-index: 1;5397}5398.peach-entry-advanced-toggle {5399  display: flex;5400  align-items: center;5401  justify-content: space-between;5402  width: 100%;5403  background: transparent;5404  border: none;5405  cursor: pointer;5406  padding: 0;5407  color: var(--peach-t2);5408}5409.peach-canary-section {5410  margin-top: 10px;5411  display: grid;5412  gap: 6px;5413}54145415/* ───────── Import: merge/replace radio choices ───────── */5416.peach-import-choice {5417  display: flex;5418  align-items: flex-start;5419  gap: 10px;5420  padding: 8px 10px;5421  border: 1px solid var(--peach-t3);5422  border-radius: 10px;5423  cursor: pointer;5424  margin-bottom: 6px;5425  transition: border-color 120ms ease, background 120ms ease;5426}5427.peach-import-choice:hover {5428  border-color: var(--peach-accent);5429}5430.peach-import-choice input[type="radio"] {5431  margin-top: 3px;5432  accent-color: var(--peach-accent);5433  flex-shrink: 0;5434}5435.peach-import-choice-main {5436  display: flex;5437  flex-direction: column;5438  gap: 2px;5439  min-width: 0;5440}5441.peach-import-choice-label {5442  font-size: 0.75rem;5443  color: var(--peach-t0);5444}5445.peach-import-choice-sub {5446  font-size: 0.6875rem;5447  color: var(--peach-t2);5448  line-height: 1.5;5449}54505451/* ───────── Export: success confirmation strip ───────── */5452.peach-export-success {5453  display: flex;5454  align-items: flex-start;5455  gap: 10px;5456  padding: 12px;5457  border-radius: 12px;5458  border: 1px solid rgba(150, 175, 110, 0.3);5459  background: rgba(150, 175, 110, 0.08);5460  color: var(--peach-t0);5461  font-size: 0.75rem;5462  line-height: 1.55;5463}5464.peach-export-success-check {5465  color: rgba(150, 175, 110, 0.9);5466  font-size: 0.875rem;5467  flex-shrink: 0;5468}54695470/* ── Trash view ──────────────────────────────────────────────────────── */5471.peach-trash-entry-row {5472  display: flex;5473  align-items: center;5474  justify-content: space-between;5475  gap: 8px;5476  padding: 8px 0;5477  border-bottom: 1px solid var(--peach-border);5478}5479.peach-trash-entry-info {5480  flex: 1;5481  min-width: 0;5482  display: flex;5483  flex-direction: column;5484  gap: 2px;5485}5486.peach-trash-entry-title {5487  font-size: 0.8125rem;5488  color: var(--peach-t0);5489  overflow: hidden;5490  text-overflow: ellipsis;5491  white-space: nowrap;5492}5493.peach-trash-entry-meta {5494  font-family: var(--font-mono);5495  font-size: 0.5625rem;5496  color: var(--peach-t2);5497  letter-spacing: 0.04em;5498}5499.peach-trash-entry-actions {5500  display: flex;5501  align-items: center;5502  gap: 4px;5503  flex-shrink: 0;5504}5505.peach-trash-delete-btn {5506  background: transparent;5507  border: 0;5508  color: var(--peach-t3);5509  font-size: 1rem;5510  line-height: 1;5511  cursor: pointer;5512  padding: 2px 5px;5513  transition: color 0.15s;5514}5515.peach-trash-delete-btn:hover { color: var(--peach-breach); }5516.peach-trash-list {5517  overflow-y: auto;5518}5519.peach-trash-footer {5520  display: flex;5521  align-items: center;5522  gap: 8px;5523  padding: 8px 0 0;5524  border-top: 1px solid var(--peach-border);5525  margin-top: 4px;5526}5527.peach-trash-purge-all {5528  background: transparent;5529  border: 0;5530  color: var(--peach-t3);5531  font-size: 0.625rem;5532  cursor: pointer;5533  padding: 4px 0;5534  letter-spacing: 0.03em;5535  transition: color 0.2s;5536}5537.peach-trash-purge-all:hover { color: var(--peach-breach); }5538.peach-trash-purge-confirm-label {5539  font-size: 0.625rem;5540  color: var(--peach-t1);5541  flex: 1;5542}55435544/* ── Settings shortcuts grid ─────────────────────────────────────────── */5545.peach-shortcuts-grid {5546  display: grid;5547  grid-template-columns: auto 1fr;5548  gap: 6px 12px;5549  align-items: center;5550  padding: 4px 0;5551}5552.peach-shortcut-key {5553  font-family: var(--font-mono);5554  font-size: 0.625rem;5555  color: var(--peach-t0);5556  background: var(--peach-t3);5557  border-radius: 4px;5558  padding: 2px 6px;5559  white-space: nowrap;5560  text-align: center;5561}5562.peach-shortcut-desc {5563  font-size: 0.6875rem;5564  color: var(--peach-t1);5565}55665567/* ── Sort bar trash button ───────────────────────────────────────────── */5568.peach-sort-trash-btn {5569  display: flex;5570  align-items: center;5571  justify-content: center;5572  padding: 3px 5px;5573  background: transparent;5574  border: none;5575  cursor: pointer;5576  color: var(--peach-t2);5577  border-radius: 4px;5578  transition: color 140ms ease, background 140ms ease;5579}5580.peach-sort-trash-btn:hover {5581  color: var(--peach-t1);5582  background: var(--peach-t3);5583}5584.peach-sort-trash-btn.is-active {5585  color: var(--peach-accent);5586}55875588/* Accent color picker */5589.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5590.peach-accent-picker {5591  display: flex;5592  flex-wrap: wrap;5593  gap: 7px;5594  padding: 2px 0;5595}5596.peach-accent-swatch {5597  width: 22px;5598  height: 22px;5599  border-radius: 50%;5600  border: 2px solid transparent;5601  cursor: pointer;5602  padding: 0;5603  transition: transform 100ms;5604  outline-offset: 2px;5605}5606.peach-accent-swatch:hover { transform: scale(1.15); }5607.peach-accent-swatch.is-active {5608  border-color: var(--peach-t0);5609  transform: scale(1.1);5610}56115612/* Display font picker — swatch shows an "Aa" preview rendered with each5613   font option so the user can see what they're picking before they pick. */5614.peach-settings-row--font { align-items: flex-start; padding-top: 10px; }5615.peach-font-picker {5616  display: flex;5617  flex-wrap: wrap;5618  gap: 6px;5619  padding: 2px 0;5620  flex: 1;5621  justify-content: flex-end;5622}5623.peach-font-swatch {5624  display: flex;5625  flex-direction: column;5626  align-items: center;5627  gap: 2px;5628  padding: 4px 8px;5629  background: transparent;5630  border: 1px solid var(--peach-t3);5631  border-radius: 6px;5632  cursor: pointer;5633  transition: border-color 100ms, background 100ms;5634  min-width: 56px;5635}5636.peach-font-swatch:hover {5637  border-color: var(--peach-accent-dim);5638  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5639}5640.peach-font-swatch.is-active {5641  border-color: var(--peach-accent);5642  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5643}5644.peach-font-swatch-glyph {5645  font-size: 18px;5646  line-height: 1;5647  color: var(--peach-t0);5648}5649.peach-font-swatch[data-font-preview="cormorant-italic"] .peach-font-swatch-glyph {5650  font-family: "Cormorant Garamond", serif;5651  font-style: italic;5652  font-weight: 400;5653}5654.peach-font-swatch[data-font-preview="cormorant"] .peach-font-swatch-glyph {5655  font-family: "Cormorant Garamond", serif;5656  font-style: normal;5657  font-weight: 400;5658}5659.peach-font-swatch[data-font-preview="inter"] .peach-font-swatch-glyph {5660  font-family: "Inter Variable", "Inter", sans-serif;5661  font-style: normal;5662  font-weight: 400;5663}5664.peach-font-swatch[data-font-preview="system"] .peach-font-swatch-glyph {5665  font-family: system-ui, -apple-system, sans-serif;5666  font-style: normal;5667  font-weight: 400;5668}5669.peach-font-swatch-name {5670  font-family: var(--font-mono);5671  font-size: 0.5rem;5672  letter-spacing: 0.06em;5673  color: var(--peach-t2);5674  text-transform: lowercase;5675}56765677.peach-pill-group {5678  display: flex;5679  gap: 6px;5680}5681.peach-pill-group .peach-btn.is-active {5682  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5683  border-color: var(--peach-accent);5684  color: var(--peach-t0);5685}56865687/* ── Card entry styles ───────────────────────────────────────── */5688.peach-card-number {5689  font-family: var(--peach-mono);5690  letter-spacing: 0.08em;5691}56925693.peach-card-network-badge {5694  font-size: 0.625rem;5695  padding: 1px 5px;5696  border-radius: 4px;5697  border: 0.5px solid var(--peach-border);5698  color: var(--peach-text-dim);5699  margin-left: 6px;5700  vertical-align: middle;5701}57025703.peach-card-expiry-row {5704  display: flex;5705  align-items: center;5706  gap: 8px;5707}57085709.peach-card-expiry-sep {5710  color: var(--peach-text-dim);5711}57125713/* ── Pro tier — upgrade screen ──────────────────────────────── */5714.peach-pro-mark {5715  font-size: 0.5625rem;5716  color: var(--peach-accent);5717  margin-left: 6px;5718  vertical-align: super;5719  opacity: 0.7;5720}57215722.peach-pro-mini-badge {5723  display: block;5724  font-size: 0.625rem;5725  font-style: italic;5726  color: var(--peach-accent);5727  letter-spacing: 0.04em;5728  margin-top: -2px;5729  padding-left: 2px;5730  opacity: 0.85;5731  text-align: center;5732}57335734.peach-wordmark-stack {5735  display: inline-flex;5736  flex-direction: column;5737  align-items: center;5738}57395740/* ── Pro tier — upgrade page ─────────────────────────────────── */5741.peach-pro-upgrade {5742  display: flex;5743  flex-direction: column;5744  align-items: stretch;5745  gap: 10px;5746  padding: 0 4px 8px;5747}57485749.peach-pro-upgrade-hero {5750  display: flex;5751  flex-direction: column;5752  align-items: center;5753  gap: 4px;5754  padding: 10px 0 6px;5755}57565757.peach-pro-upgrade-mark-wrap {5758  display: flex;5759  align-items: center;5760  justify-content: center;5761  margin-bottom: 2px;5762}57635764.peach-pro-upgrade-mark {5765  width: 38px;5766  height: 38px;5767  opacity: 0.9;5768}57695770.peach-pro-upgrade-title {5771  font-family: var(--font-display, var(--font-ui));5772  font-size: 22px;5773  margin: 0;5774  color: var(--peach-t0);5775  letter-spacing: 0.01em;5776}57775778.peach-pro-upgrade-tagline {5779  margin: 0;5780  font-style: italic;5781  color: var(--peach-t2);5782  font-size: 0.6875rem;5783}57845785.peach-pro-features {5786  display: flex;5787  flex-direction: column;5788  gap: 8px;5789  border-top: 1px solid var(--peach-border);5790  border-bottom: 1px solid var(--peach-border);5791  padding: 10px 4px;5792}57935794.peach-pro-feature {5795  display: flex;5796  gap: 9px;5797  align-items: baseline;5798}57995800.peach-pro-feature-mark {5801  color: var(--peach-accent);5802  font-size: 0.6875rem;5803  flex-shrink: 0;5804  display: inline-block;5805  transform-origin: center;5806  opacity: 0.8;5807}58085809.peach-pro-feature-text {5810  display: flex;5811  flex-direction: column;5812  gap: 1px;5813}58145815.peach-pro-feature-name {5816  font-size: 0.75rem;5817  color: var(--peach-t0);5818}58195820.peach-pro-feature-desc {5821  font-size: 0.625rem;5822  color: var(--peach-t2);5823}58245825.peach-pro-feature.is-highlighted .peach-pro-feature-mark {5826  animation: peach-pulse-accent 600ms ease-out forwards;5827}58285829@keyframes peach-pulse-accent {5830  0%   { opacity: 1; transform: scale(1.4); }5831  100% { opacity: 0.7; transform: scale(1); }5832}58335834.peach-pro-upgrade-actions {5835  display: flex;5836  flex-direction: column;5837  align-items: center;5838  gap: 8px;5839  padding-top: 2px;5840}58415842.peach-pro-pricing {5843  margin: 0;5844  text-align: center;5845  font-size: 0.6875rem;5846  color: var(--peach-t2);5847  letter-spacing: 0.04em;5848}58495850.peach-pro-upgrade-cta {5851  align-self: center;5852  text-align: center;5853  text-decoration: none;5854  display: block;5855  padding: 9px 32px;5856  font-size: 0.8125rem;5857  min-width: 180px;5858}58595860.peach-pro-key-divider {5861  display: flex;5862  align-items: center;5863  gap: 8px;5864  width: 100%;5865  color: var(--peach-t3);5866  font-size: 0.625rem;5867  letter-spacing: 0.08em;5868}58695870.peach-pro-key-divider::before,5871.peach-pro-key-divider::after {5872  content: "";5873  flex: 1;5874  height: 1px;5875  background: var(--peach-border);5876}58775878.peach-pro-key-link {5879  background: transparent;5880  border: 1px solid var(--peach-border);5881  border-radius: 8px;5882  color: var(--peach-t1);5883  font-size: 0.75rem;5884  cursor: pointer;5885  align-self: stretch;5886  padding: 8px 12px;5887  text-align: center;5888  transition: border-color 0.2s, color 0.2s;5889}58905891.peach-pro-key-link:hover {5892  border-color: var(--peach-accent);5893  color: var(--peach-accent);5894}58955896/* ── Pro tier — key ceremony ─────────────────────────────────── */5897.peach-pro-key-ceremony {5898  display: flex;5899  flex-direction: column;5900  align-items: center;5901  gap: 12px;5902  padding: 20px 4px 16px;5903}59045905.peach-pro-key-ceremony .peach-lock-rune-string {5906  font-size: 1rem;5907  gap: 12px;5908  flex: 0;5909  justify-content: center;5910}59115912.peach-pro-key-ceremony-label {5913  margin: 0;5914  font-size: 0.6875rem;5915  color: var(--peach-t2);5916  font-style: italic;5917  letter-spacing: 0.04em;5918}59195920.peach-pro-key-input {5921  font-family: var(--font-mono, monospace);5922  letter-spacing: 0.06em;5923  text-align: center;5924  width: 100%;5925  box-sizing: border-box;5926}59275928.peach-pro-key-error {5929  margin: 0;5930  font-size: 0.75rem;5931  text-align: center;5932  color: var(--peach-breach, #e55);5933  padding: 0;5934}59355936.peach-pro-key-activate {5937  width: 100%;5938  text-align: center;5939  box-sizing: border-box;5940  padding: 10px 20px;5941  font-size: 0.8125rem;5942}59435944.peach-pro-key-cancel {5945  background: transparent;5946  border: 0;5947  color: var(--peach-t2);5948  font-size: 0.6875rem;5949  cursor: pointer;5950  padding: 2px 8px;5951  transition: color 0.2s;5952}59535954.peach-pro-key-cancel:hover { color: var(--peach-accent); }59555956/* ── Pro tier — active state ─────────────────────────────────── */5957.peach-pro-active {5958  display: flex;5959  flex-direction: column;5960  align-items: center;5961  gap: 0;5962  padding: 8px 4px 16px;5963  min-height: 280px;5964}59655966.peach-pro-active-hero {5967  display: flex;5968  flex-direction: column;5969  align-items: center;5970  gap: 6px;5971  padding: 20px 0 22px;5972}59735974.peach-pro-active-mark-wrap {5975  display: flex;5976  align-items: center;5977  justify-content: center;5978  margin-bottom: 4px;5979}59805981.peach-pro-active-mark {5982  width: 60px;5983  height: 60px;5984  filter:5985    drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 55%, transparent))5986    drop-shadow(0 0 26px color-mix(in srgb, var(--peach-accent) 22%, transparent));5987}59885989.peach-pro-active-title {5990  font-family: var(--font-display, var(--font-ui));5991  font-size: 26px;5992  margin: 0;5993  color: var(--peach-t0);5994  letter-spacing: 0.01em;5995}59965997.peach-pro-active-since {5998  margin: 0;5999  font-size: 0.6875rem;6000  color: var(--peach-t2);6001  font-style: italic;6002}60036004.peach-pro-active-features {6005  display: flex;6006  flex-direction: column;6007  gap: 8px;6008  width: 100%;6009  padding: 14px 8px 0;6010  border-top: 1px solid var(--peach-border);6011  flex: 1;6012}60136014.peach-pro-active-feature {6015  display: flex;6016  align-items: center;6017  gap: 9px;6018}60196020.peach-pro-active-feature-mark {6021  color: var(--peach-accent);6022  font-size: 0.625rem;6023  opacity: 0.65;6024  flex-shrink: 0;6025}60266027.peach-pro-active-feature-name {6028  font-size: 0.75rem;6029  color: var(--peach-t1);6030}60316032.peach-pro-deactivate {6033  align-self: center;6034  background: transparent;6035  border: 0;6036  color: var(--peach-t3);6037  font-size: 0.625rem;6038  cursor: pointer;6039  padding: 8px 0 0;6040  margin-top: 16px;6041  letter-spacing: 0.03em;6042  transition: color 0.2s;6043}60446045.peach-pro-deactivate:hover { color: var(--peach-t2); }60466047.peach-pro-deactivate:disabled {6048  opacity: 0.5;6049  cursor: default;6050}60516052/* ── Pro advanced health remediation queue ──────────────────── */6053.peach-health-pro-queue {6054  display: flex;6055  flex-direction: column;6056  gap: 10px;6057  padding: 12px;6058  margin: 0 0 12px;6059  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6060  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6061  border-radius: 10px;6062}60636064.peach-health-pro-queue-head {6065  display: flex;6066  justify-content: space-between;6067  align-items: baseline;6068}60696070.peach-health-pro-queue-title {6071  font-size: 0.75rem;6072  font-weight: 500;6073  letter-spacing: 0.04em;6074  text-transform: uppercase;6075  color: var(--peach-accent);6076}60776078.peach-health-pro-queue-score {6079  font-size: 0.6875rem;6080  color: var(--peach-t2);6081}60826083.peach-health-pro-row {6084  display: flex;6085  gap: 10px;6086  align-items: center;6087  padding: 8px 0;6088  border-top: 1px solid var(--peach-border);6089}60906091.peach-health-pro-row-info {6092  flex: 1;6093  display: flex;6094  flex-direction: column;6095  gap: 4px;6096  min-width: 0;6097}60986099.peach-health-pro-row-name {6100  font-size: 0.8125rem;6101  color: var(--peach-t0);6102  overflow: hidden;6103  text-overflow: ellipsis;6104  white-space: nowrap;6105}61066107.peach-health-pro-row-meta {6108  font-size: 0.6875rem;6109  color: var(--peach-t2);6110}61116112.peach-health-pro-bar {6113  height: 2px;6114  background: var(--peach-border);6115  border-radius: 2px;6116  overflow: hidden;6117  margin-top: 2px;6118}61196120.peach-health-pro-bar-fill {6121  height: 100%;6122  background: var(--peach-accent);6123  transition: width 200ms ease-out;6124}61256126/* ── Pro activation celebration ── */6127@keyframes peach-pro-bloom {6128  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6129  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6130                 drop-shadow(0 0 48px var(--peach-glow)); }6131  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6132}61336134@keyframes peach-pro-wordmark-in {6135  from { opacity: 0; transform: translateY(4px); }6136  to   { opacity: 1; transform: translateY(0); }6137}61386139@keyframes peach-pro-fade-out {6140  from { opacity: 1; }6141  to   { opacity: 0; }6142}61436144.peach-pro-celebration {6145  background:6146    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6147    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6148    var(--peach-bg);6149  border: 1px solid var(--peach-t3);6150  box-shadow:6151    0 2px 8px rgba(0,0,0,0.55),6152    0 14px 48px rgba(0,0,0,0.7),6153    0 0 0 1px rgba(240,232,216,0.04);6154  overflow: hidden;6155  width: 320px;6156  height: 520px;6157  display: flex;6158  flex-direction: column;6159  align-items: center;6160  justify-content: center;6161  gap: 8px;6162  padding: 32px 24px;6163  text-align: center;6164}61656166.peach-pro-celebration.is-leaving {6167  animation: peach-pro-fade-out 400ms ease forwards;6168}61696170.peach-pro-bloom-target {6171  display: flex;6172  align-items: center;6173  justify-content: center;6174  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6175  margin-bottom: 12px;6176}61776178.peach-pro-bloom-icon {6179  width: 48px;6180  height: 48px;6181}61826183.peach-pro-wordmark {6184  font-family: var(--font-display);6185  font-size: 22px;6186  font-style: italic;6187  font-weight: 400;6188  color: var(--peach-accent);6189  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6190}61916192.peach-pro-thankyou {6193  font-size: 0.75rem;6194  font-style: italic;6195  color: var(--peach-t2);6196  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6197}619861996200/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6201.peach-pro-notice-banner {6202  display: flex;6203  align-items: center;6204  gap: 8px;6205  padding: 7px 12px;6206  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6207  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6208  font-size: 0.6875rem;6209  color: var(--peach-t2);6210  font-family: "IBM Plex Mono", monospace;6211  flex-shrink: 0;6212}62136214.peach-pro-notice-link {6215  background: none;6216  border: none;6217  padding: 0;6218  cursor: pointer;6219  font-size: 0.6875rem;6220  color: var(--peach-accent);6221  font-family: "IBM Plex Mono", monospace;6222  margin-left: auto;6223  white-space: nowrap;6224}62256226.peach-pro-notice-close {6227  background: none;6228  border: none;6229  padding: 0 0 0 4px;6230  cursor: pointer;6231  font-size: 0.625rem;6232  color: var(--peach-t3);6233  line-height: 1;6234}62356236/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6237   Renders over whatever view is showing. 60-second expiry; the popup ticks6238   the countdown each second and clears the banner when it hits zero. */6239.peach-pair-request-banner {6240  display: flex;6241  flex-direction: column;6242  gap: 8px;6243  padding: 10px 12px;6244  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6245  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6246  font-family: "IBM Plex Mono", monospace;6247  flex-shrink: 0;6248}62496250.peach-pair-toast {6251  padding: 8px 12px;6252  font-family: "IBM Plex Mono", monospace;6253  font-size: 0.75rem;6254  color: var(--peach-t1);6255  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6256  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6257  flex-shrink: 0;6258  text-align: center;6259}62606261.peach-pair-toast strong {6262  color: var(--peach-t0);6263  font-weight: 500;6264}62656266.peach-pair-request-header {6267  display: flex;6268  align-items: center;6269  gap: 8px;6270  font-size: 0.75rem;6271  color: var(--peach-t1);6272}62736274.peach-pair-request-mark {6275  font-size: 0.875rem;6276  display: inline-flex;6277  align-items: center;6278}62796280.peach-pair-request-icon {6281  width: 1em;6282  height: 1em;6283}62846285.peach-pair-request-title {6286  font-weight: 600;6287  color: var(--peach-t0);6288}62896290.peach-pair-request-countdown {6291  margin-left: auto;6292  font-variant-numeric: tabular-nums;6293  color: var(--peach-t2);6294  font-size: 0.6875rem;6295}62966297.peach-pair-request-body {6298  margin: 0;6299  font-size: 0.75rem;6300  color: var(--peach-t1);6301  line-height: 1.4;6302}63036304.peach-pair-request-body strong {6305  color: var(--peach-t0);6306  font-weight: 600;6307}63086309.peach-pair-request-actions {6310  display: flex;6311  gap: 8px;6312  justify-content: flex-end;6313}63146315/* ─── First-run onboarding ──────────────────────────────────────────────6316   Three-card welcome shown once before vault creation. The PeachScript6317   rune background drifts behind everything at very low opacity — it's6318   atmosphere, not focus. The cards themselves use the same panel6319   language as the rest of the popup so the transition into NewVault is6320   continuous, not a jarring switch of visual register. */63216322.peach-onboarding {6323  position: relative;6324  display: flex;6325  flex-direction: column;6326  width: 100%;6327  height: 100%;6328  padding: 16px 16px 18px;6329  box-sizing: border-box;6330  overflow: hidden;6331  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6332}63336334.peach-onboarding.is-completing {6335  animation: peach-onboard-exit 200ms ease-out forwards;6336}63376338.peach-rune-background {6339  position: absolute;6340  inset: 0;6341  width: 100%;6342  height: 100%;6343  pointer-events: none;6344  z-index: 0;6345  transition: opacity 500ms ease-out;6346}63476348.peach-onboarding.is-completing .peach-rune-background {6349  opacity: 0;6350}63516352.peach-onboarding-header {6353  position: relative;6354  z-index: 1;6355  display: flex;6356  align-items: center;6357  margin-bottom: 14px;6358}63596360.peach-onboarding-card {6361  position: relative;6362  z-index: 1;6363  flex: 1;6364  display: flex;6365  flex-direction: column;6366  gap: 10px;6367  padding: 22px 20px;6368  border-radius: 16px;6369  border: 1px solid var(--peach-t3);6370  background:6371    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6372  backdrop-filter: blur(3px);6373  -webkit-backdrop-filter: blur(3px);6374  box-shadow:6375    inset 0 1px 0 rgba(240, 232, 216, 0.04),6376    0 12px 28px rgba(0, 0, 0, 0.12);6377  cursor: pointer;6378  user-select: none;6379  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6380}63816382.peach-onboarding-card.is-exiting {6383  animation: peach-card-out 120ms ease-in forwards;6384  pointer-events: none;6385}63866387.peach-onboarding-card-headline {6388  margin: 0;6389  font-family: var(--font-display);6390  font-style: italic;6391  font-weight: 400;6392  font-size: 22px;6393  line-height: 1.05;6394  color: var(--peach-t0);6395  white-space: pre-line;6396}63976398.peach-onboarding-divider {6399  margin: 4px 0 6px;6400  border: 0;6401  border-top: 1px solid var(--peach-t3);6402  width: 100%;6403}64046405.peach-onboarding-body {6406  margin: 0;6407  font-size: 0.8125rem;6408  line-height: 1.6;6409  color: var(--peach-t1);6410}64116412.peach-onboarding-warning {6413  display: flex;6414  align-items: flex-start;6415  gap: 8px;6416  margin: 6px 0 0;6417  padding-top: 8px;6418  border-top: 1px dashed var(--peach-t3);6419  font-size: 0.8125rem;6420  line-height: 1.5;6421  color: var(--peach-t1);6422}64236424.peach-onboarding-warning-icon {6425  color: var(--peach-accent);6426  font-size: 0.8125rem;6427  line-height: 1.5;6428  flex: 0 0 auto;6429}64306431.peach-onboarding-nav {6432  position: relative;6433  z-index: 1;6434  display: flex;6435  align-items: center;6436  justify-content: space-between;6437  margin-top: 12px;6438  padding: 0 4px;6439}64406441.peach-onboarding-dots {6442  display: flex;6443  align-items: center;6444  gap: 6px;6445}64466447.peach-onboarding-dot {6448  width: 6px;6449  height: 6px;6450  border-radius: 50%;6451  background: var(--peach-t2);6452  transition: width 200ms ease, height 200ms ease, background 200ms ease;6453}64546455.peach-onboarding-dot.is-active {6456  width: 8px;6457  height: 8px;6458  background: var(--peach-accent);6459}64606461.peach-onboarding-next {6462  background: none;6463  border: none;6464  padding: 4px 0;6465  cursor: pointer;6466  font-family: "IBM Plex Mono", monospace;6467  font-size: 0.6875rem;6468  letter-spacing: 0.04em;6469  color: var(--peach-t1);6470  transition: color 150ms ease;6471}64726473.peach-onboarding-next:hover {6474  color: var(--peach-t0);6475}64766477.peach-onboarding-next:disabled {6478  opacity: 0.5;6479  cursor: default;6480}64816482.peach-onboarding-mobile-card-buttons {6483  display: flex;6484  flex-direction: column;6485  gap: 8px;6486  margin-top: 16px;6487}64886489@keyframes peach-onboard-enter {6490  from { opacity: 0; transform: translateY(20px); }6491  to   { opacity: 1; transform: translateY(0); }6492}64936494@keyframes peach-onboard-exit {6495  from { opacity: 1; }6496  to   { opacity: 0; }6497}64986499@keyframes peach-card-in {6500  from { opacity: 0; transform: translateX(12px); }6501  to   { opacity: 1; transform: translateX(0); }6502}65036504@keyframes peach-card-out {6505  from { opacity: 1; transform: translateX(0); }6506  to   { opacity: 0; transform: translateX(-12px); }6507}65086509/* ─── New vault screen — matched to onboarding card language ─────────── */65106511.peach-newvault {6512  position: relative;6513  display: flex;6514  flex-direction: column;6515  gap: 12px;6516  padding: 16px 16px 18px;6517  overflow: hidden;6518}65196520/* Suppress the warm-blob ambient art inherited from .lock-screen — the6521   new vault card now carries the visual weight. */6522.peach-newvault::before {6523  content: none;6524}65256526.peach-newvault-header {6527  position: relative;6528  z-index: 2;6529  display: flex;6530  align-items: center;6531  gap: 10px;6532  margin-bottom: 2px;6533}65346535.peach-newvault-back {6536  display: inline-flex;6537  align-items: center;6538  gap: 4px;6539  background: transparent;6540  border: none;6541  color: var(--peach-t2);6542  font-family: "IBM Plex Mono", monospace;6543  font-size: 0.625rem;6544  letter-spacing: 0.06em;6545  cursor: pointer;6546  padding: 4px 6px;6547  border-radius: 6px;6548  transition: color 120ms ease, background 120ms ease;6549}65506551.peach-newvault-back:hover {6552  color: var(--peach-t0);6553  background: rgba(240, 232, 216, 0.04);6554}65556556.peach-newvault-mark {6557  position: absolute;6558  right: -12px;6559  top: 6px;6560  width: 110px;6561  height: 110px;6562  pointer-events: none;6563  opacity: 0.10;6564  filter: saturate(0.9);6565  z-index: 0;6566}6567.peach-newvault-mark-art {6568  width: 100%;6569  height: 100%;6570}6571.peach-newvault-mark-art path:nth-child(2),6572.peach-newvault-mark-art path:nth-child(3) {6573  stroke: rgba(123, 144, 96, 0.88);6574  fill: rgba(123, 144, 96, 0.88);6575}65766577.peach-newvault-card {6578  position: relative;6579  z-index: 1;6580  display: flex;6581  flex-direction: column;6582  gap: 12px;6583  padding: 22px 20px 18px;6584  border-radius: 16px;6585  border: 1px solid var(--peach-t3);6586  background:6587    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6588  backdrop-filter: blur(3px);6589  -webkit-backdrop-filter: blur(3px);6590  box-shadow:6591    inset 0 1px 0 rgba(240, 232, 216, 0.04),6592    0 12px 28px rgba(0, 0, 0, 0.12);6593  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6594}65956596.peach-newvault-headline {6597  margin: 0;6598  font-family: var(--font-display);6599  font-style: italic;6600  font-weight: 400;6601  font-size: 24px;6602  line-height: 1.05;6603  color: var(--peach-t0);6604  white-space: pre-line;6605}66066607.peach-newvault-divider {6608  margin: 2px 0 4px;6609  border: 0;6610  border-top: 1px solid var(--peach-t3);6611  width: 100%;6612}66136614.peach-newvault-field {6615  display: flex;6616  flex-direction: column;6617  gap: 4px;6618}66196620.peach-newvault-label-row {6621  display: flex;6622  align-items: center;6623  justify-content: space-between;6624}66256626/* Monospace input scaled to the card. Replaces the 22px unlock-input6627   so the placeholder no longer overflows and the field reads as part6628   of the same surface as the body copy. */6629.peach-newvault-input {6630  font-size: 0.875rem;6631  letter-spacing: 0.18em;6632  padding: 8px 0;6633}6634.peach-newvault-input::placeholder {6635  letter-spacing: 0.18em;6636  color: var(--peach-t2);6637}66386639.peach-newvault-hint {6640  margin: 2px 0 0;6641  font-family: "IBM Plex Mono", monospace;6642  font-size: 0.625rem;6643  color: var(--peach-t2);6644  letter-spacing: 0.04em;6645}66466647.peach-newvault-submit {6648  margin-top: 4px;6649}66506651.peach-newvault-warning {6652  display: flex;6653  align-items: flex-start;6654  gap: 8px;6655  margin: 4px 0 0;6656  padding-top: 10px;6657  border-top: 1px dashed var(--peach-t3);6658  font-size: 0.75rem;6659  line-height: 1.5;6660  color: var(--peach-t1);6661}66626663.peach-newvault-warning-icon {6664  color: var(--peach-accent);6665  font-size: 0.8125rem;6666  line-height: 1.4;6667  flex: 0 0 auto;6668}66696670.peach-newvault-footer {6671  position: relative;6672  z-index: 1;6673  display: flex;6674  flex-direction: column;6675  gap: 4px;6676  padding: 4px 4px 0;6677}66786679/* Settings body — warm accent gradient gives the glass something to blur against */6680.peach-settings-body {6681  background:6682    radial-gradient(6683      ellipse at 30% 20%,6684      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6685      transparent 60%6686    );6687}66886689/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6690/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6691 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6692 * (replacing the vault from a backup file) and "hazard" for actions that6693 * are absolutely irreversible (Panic). Both use the same card scaffold so6694 * they read as a pair, but the colour family signals the severity at a6695 * glance — yellow for caution, red for don't.6696 */6697.peach-danger-card {6698  --danger-tint: 235, 158, 52; /* amber */6699  display: flex;6700  flex-direction: column;6701  gap: 8px;6702  padding: 14px;6703  margin-top: 10px;6704  border-radius: 12px;6705  border: 1px solid rgba(var(--danger-tint), 0.32);6706  background:6707    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6708    rgba(var(--danger-tint), 0.04);6709  box-shadow:6710    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6711    0 0 24px rgba(var(--danger-tint), 0.04);6712  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6713}67146715.peach-danger-card:hover {6716  border-color: rgba(var(--danger-tint), 0.55);6717  box-shadow:6718    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6719    0 0 36px rgba(var(--danger-tint), 0.10);6720}67216722.peach-danger-card--hazard {6723  --danger-tint: 220, 38, 38; /* red */6724}67256726.peach-danger-card-head {6727  display: flex;6728  align-items: center;6729  gap: 10px;6730}67316732.peach-danger-card-glyph {6733  width: 28px;6734  height: 28px;6735  flex-shrink: 0;6736  display: flex;6737  align-items: center;6738  justify-content: center;6739  border-radius: 8px;6740  background: rgba(var(--danger-tint), 0.12);6741  color: rgba(var(--danger-tint), 0.95);6742  font-size: 1rem;6743  line-height: 1;6744}67456746.peach-danger-card-title {6747  margin: 0;6748  font-size: 0.8125rem;6749  font-weight: 600;6750  color: rgba(var(--danger-tint), 0.92);6751  letter-spacing: 0.01em;6752}67536754.peach-danger-card-copy {6755  margin: 0;6756  font-size: 0.6875rem;6757  line-height: 1.5;6758  color: var(--peach-t2);6759}67606761.peach-danger-card-button {6762  width: 100%;6763  padding: 9px;6764  margin-top: 4px;6765  background: transparent;6766  border: 1px solid rgba(var(--danger-tint), 0.45);6767  border-radius: 8px;6768  color: rgba(var(--danger-tint), 0.9);6769  font-size: 0.75rem;6770  font-weight: 500;6771  letter-spacing: 0.02em;6772  cursor: pointer;6773  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6774}67756776.peach-danger-card-button:hover {6777  background: rgba(var(--danger-tint), 0.10);6778  border-color: rgba(var(--danger-tint), 0.75);6779  color: rgb(var(--danger-tint));6780}67816782/* ── Panic flow (three-step destruction) ───────────────────────────────── */6783.peach-panic {6784  display: flex;6785  flex-direction: column;6786  flex: 1;6787  min-height: 0;6788  padding: 28px 20px 20px;6789  gap: 18px;6790  overflow-y: auto;6791  scrollbar-width: none;6792  -ms-overflow-style: none;6793}67946795.peach-panic::-webkit-scrollbar { display: none; }67966797.peach-panic-step2 {6798  background: rgba(220, 38, 38, 0.04);6799}68006801.peach-panic-step3 {6802  position: relative;6803  background: #0f0505;6804  color: #ffffff;6805  overflow: hidden;6806}68076808.peach-panic-rune-bg {6809  position: absolute;6810  inset: 0;6811  opacity: 0.22;6812  pointer-events: none;6813  overflow: hidden;6814}68156816.peach-panic-rune-bg canvas {6817  width: 100% !important;6818  height: 100% !important;6819}68206821.peach-panic-icon {6822  font-size: 32px;6823  color: rgb(220, 38, 38);6824  line-height: 1;6825}68266827.peach-panic-title {6828  margin: 0;6829  font-size: 18px;6830  font-weight: 500;6831  color: var(--peach-t1);6832}68336834.peach-panic-title--severe {6835  font-size: 20px;6836  font-weight: 700;6837  color: rgb(220, 38, 38);6838}68396840.peach-panic-body {6841  margin: 0;6842  font-size: 0.8125rem;6843  line-height: 1.55;6844  color: var(--peach-t2);6845}68466847.peach-panic-body--severe {6848  color: rgba(220, 38, 38, 0.85);6849}68506851.peach-panic-body--final {6852  font-size: 1rem;6853  font-weight: 700;6854  color: rgb(255, 80, 80);6855  line-height: 1.4;6856}68576858.peach-panic-body--final-intro {6859  font-size: 1rem;6860  color: #ffffff;6861  font-weight: 400;6862}68636864.peach-panic-divider {6865  height: 1px;6866  background: rgba(255, 255, 255, 0.08);6867  margin: 4px 0;6868}68696870.peach-panic-confirm-input {6871  width: 100%;6872  padding: 10px 12px;6873  background: rgba(255, 255, 255, 0.02);6874  border: 1px solid rgba(220, 38, 38, 0.4);6875  border-radius: 8px;6876  color: var(--peach-t1);6877  font-family: "IBM Plex Mono", monospace;6878  font-size: 0.875rem;6879  letter-spacing: 0.12em;6880  text-transform: uppercase;6881}68826883.peach-panic-confirm-input:focus {6884  outline: none;6885  border-color: rgb(220, 38, 38);6886}68876888.peach-panic-confirm-input--match {6889  border-color: rgb(220, 38, 38);6890  color: rgb(220, 38, 38);6891}68926893.peach-panic-confirm-label {6894  font-size: 0.6875rem;6895  color: var(--peach-t2);6896  margin: 0 0 -8px;6897  letter-spacing: 0.06em;6898}68996900.peach-panic-actions {6901  display: flex;6902  flex-direction: column;6903  gap: 10px;6904  margin-top: auto;6905}69066907.peach-panic-button {6908  width: 100%;6909  padding: 12px;6910  border-radius: 8px;6911  font-size: 0.8125rem;6912  cursor: pointer;6913  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6914}69156916.peach-panic-button--primary {6917  background: var(--peach-accent);6918  border: 1px solid var(--peach-accent);6919  color: #ffffff;6920  font-weight: 600;6921}69226923.peach-panic-button--primary:hover {6924  background: color-mix(in srgb, var(--peach-accent) 88%, white);6925}69266927.peach-panic-button--danger {6928  background: rgb(220, 38, 38);6929  border: 1px solid rgb(220, 38, 38);6930  color: #ffffff;6931  font-weight: 600;6932}69336934.peach-panic-button--danger:disabled {6935  opacity: 0.35;6936  cursor: not-allowed;6937}69386939.peach-panic-button--ghost {6940  background: transparent;6941  border: 1px solid rgba(255, 255, 255, 0.18);6942  color: var(--peach-t2);6943}69446945.peach-panic-button--ghost:hover {6946  border-color: rgba(255, 255, 255, 0.32);6947  color: var(--peach-t1);6948}69496950.peach-panic-link {6951  background: transparent;6952  border: none;6953  padding: 4px 0;6954  color: rgba(220, 38, 38, 0.65);6955  font-size: 0.75rem;6956  cursor: pointer;6957  text-align: left;6958  text-decoration: underline;6959  text-underline-offset: 3px;6960}69616962.peach-panic-link:hover {6963  color: rgb(220, 38, 38);6964}69656966.peach-panic-bar {6967  background: rgb(220, 38, 38);6968  padding: 16px 20px;6969  margin: -28px -20px 0;6970  text-align: center;6971  font-size: 0.8125rem;6972  font-weight: 700;6973  letter-spacing: 0.12em;6974  color: #ffffff;6975}69766977.peach-panic-final-button {6978  width: 100%;6979  padding: 14px;6980  background: rgb(220, 38, 38);6981  border: none;6982  border-radius: 8px;6983  color: #ffffff;6984  font-size: 0.875rem;6985  font-weight: 700;6986  letter-spacing: 0.08em;6987  text-transform: uppercase;6988  cursor: pointer;6989  animation: peach-panic-pulse 2s ease-in-out infinite;6990}69916992.peach-settings-license {6993  margin-top: 10px;6994  padding-top: 10px;6995  border-top: 1px solid var(--peach-t3);6996}69976998.peach-settings-label {6999  font-size: 0.625rem;7000  letter-spacing: 0.08em;7001  color: var(--peach-t3);7002  display: block;7003  margin-bottom: 6px;7004}70057006.peach-settings-license-row {7007  display: flex;7008  align-items: center;7009  justify-content: space-between;7010  gap: 8px;7011}70127013.peach-settings-license-key {7014  font-family: 'IBM Plex Mono', monospace;7015  font-size: 0.75rem;7016  color: var(--peach-t0);7017  letter-spacing: 0.04em;7018  word-break: break-all;7019}70207021.peach-settings-license-copy {7022  font-size: 0.6875rem;7023  color: var(--peach-accent);7024  background: transparent;7025  border: none;7026  cursor: pointer;7027  padding: 4px 8px;7028  border-radius: 4px;7029  flex-shrink: 0;7030  transition: opacity 150ms ease;7031}70327033.peach-settings-license-copy:hover {7034  opacity: 0.75;7035}70367037@keyframes peach-panic-pulse {7038  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7039  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7040}70417042[data-motion="reduce"] .peach-panic-final-button {7043  animation: none;7044}70457046/* Vault History — Settings → Vault sub-view */70477048.peach-history-list {7049  border: 1px solid var(--peach-border);7050  border-radius: 8px;7051  overflow: hidden;7052  margin: 8px 0 4px;7053}70547055.peach-history-row {7056  display: flex;7057  align-items: center;7058  justify-content: space-between;7059  padding: 9px 12px;7060  gap: 10px;7061  border-bottom: 1px solid var(--peach-border);7062}70637064.peach-history-row:last-child {7065  border-bottom: none;7066}70677068.peach-history-meta {7069  display: flex;7070  flex-direction: column;7071  gap: 2px;7072  min-width: 0;7073  flex: 1;7074}70757076.peach-history-time {7077  font-size: 0.75rem;7078  font-family: 'IBM Plex Mono', ui-monospace, monospace;7079  color: var(--peach-t0);7080  white-space: nowrap;7081  overflow: hidden;7082  text-overflow: ellipsis;7083}70847085.peach-history-sub {7086  font-size: 0.625rem;7087  color: var(--peach-t2);7088  letter-spacing: 0.06em;7089  text-transform: uppercase;7090  white-space: nowrap;7091  overflow: hidden;7092  text-overflow: ellipsis;7093}70947095.peach-history-btn {7096  flex-shrink: 0;7097  white-space: nowrap;7098  min-width: 56px;7099  text-align: center;7100}71017102.peach-history-btn.is-busy {7103  opacity: 0.65;7104}71057106.peach-history-footer {7107  font-size: 0.625rem;7108  color: var(--peach-t3);7109  letter-spacing: 0.05em;7110  text-align: right;7111  margin: 0;7112  padding: 2px 0 0;7113}71147115/* ── Context menu + swipe-copy flash ─────────────────────── */7116.peach-context-menu-backdrop {7117  position: fixed;7118  inset: 0;7119  background: rgba(0, 0, 0, 0.45);7120  z-index: 100;7121  display: flex;7122  align-items: flex-end;7123  justify-content: center;7124  animation: peach-ctx-fade 140ms ease both;7125}7126.peach-context-menu {7127  width: min(360px, calc(100vw - 24px));7128  margin-bottom: max(env(safe-area-inset-bottom), 12px);7129  background: var(--peach-bg);7130  border: 1px solid var(--peach-t3);7131  border-radius: 14px;7132  padding: 6px;7133  display: flex;7134  flex-direction: column;7135  gap: 2px;7136  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7137  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7138}7139@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7140@keyframes peach-ctx-rise {7141  from { transform: translateY(16px); opacity: 0; }7142  to   { transform: translateY(0);    opacity: 1; }7143}7144.peach-context-menu-item {7145  background: transparent;7146  color: var(--peach-t0);7147  border: 0;7148  border-radius: 10px;7149  padding: 12px 14px;7150  text-align: left;7151  font: inherit;7152  cursor: pointer;7153}7154.peach-context-menu-item:hover,7155.peach-context-menu-item:focus-visible {7156  background: var(--peach-t3);7157}7158.peach-context-menu-item--danger {7159  color: var(--peach-health-bad, #d96868);7160}7161.peach-context-menu-item--cancel {7162  color: var(--peach-t2);7163  margin-top: 4px;7164  border-top: 1px solid var(--peach-t3);7165  border-radius: 0 0 10px 10px;7166}71677168/* Swipe-to-copy flash */7169.peach-entry-row.is-copy-flash {7170  animation: peach-copy-flash 600ms ease both;7171}7172@keyframes peach-copy-flash {7173  0%   { background: transparent; }7174  20%  { background: rgba(217, 153, 51, 0.32); }7175  100% { background: transparent; }7176}71777178html { font-size: 16px; }