popup.css

96.6 KB · raw

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%, rgba(217,104,48,0.08) 0%, transparent 65%),83    radial-gradient(85% 100% at 100% 100%, rgba(217,104,48,0.06) 0%, transparent 70%),84    var(--peach-bg);85  border: 1px solid var(--peach-t3);86  box-shadow:87    0 2px 8px rgba(0,0,0,0.55),88    0 14px 48px rgba(0,0,0,0.7),89    0 0 0 1px rgba(240,232,216,0.04);90  overflow: hidden;91}92.peach-shell {93  display: grid;94  grid-template-rows: auto 1fr;95  min-height: 520px;96  position: relative;97  isolation: isolate;98}99100.peach-shell[data-surface="extension"] {101  width: min(320px, 100vw);102  border-radius: 0;103  height: 520px;104  max-height: 520px;105  overflow: hidden;106}107108/* ── Lock screen – full-window lock/create stage ── */109.lock-screen--vault-stage {110  display: flex;111  flex-direction: column;112  gap: 18px;113  padding: 20px 18px 18px;114  justify-content: flex-start;115}116.lock-screen--vault-stage .peach-lock-panel {117  margin-top: auto;118}119.peach-lock-headline--unlock {120  max-width: 220px;121}122.peach-lock-hero--unlock {123  padding-top: 14px;124}125.peach-lock-panel--unlock {126  gap: 10px;127}128129.peach-lock-restore-link {130  background: transparent;131  border: none;132  cursor: pointer;133  font-family: var(--font-mono);134  font-size: 10px;135  letter-spacing: 0.08em;136  color: var(--t1);137  padding: 5px 0;138  text-align: left;139  transition: color 150ms ease;140}141142.peach-lock-restore-link:hover {143  color: var(--t0);144}145.peach-shell[data-surface="extension"] .peach-stage {146  min-height: 250px;147}148149/* Screen (unlock) */150.peach-screen {151  width: min(320px, 100vw);152  min-height: 100%;153  height: 100%;154  border-radius: 0;155  padding: 16px 20px 18px;156  display: grid;157  gap: 14px;158}159.peach-screen[data-motion-phase="enter"] {160  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;161}162.peach-screen-header { min-height: 20px; }163164/* Wordmark */165.peach-wordmark {166  margin: 0;167  font-family: "Cormorant Garamond", "Times New Roman", serif;168  font-size: 15px;169  font-style: italic;170  letter-spacing: 0.03em;171  color: var(--peach-t0);172  display: inline-flex;173  min-height: 1em;174}175176/* Motion text / char animation */177.peach-motion-text { display: inline-flex; min-height: 1em; }178.peach-motion-char {179  display: inline-block;180  white-space: pre;181  opacity: 0;182  transform: translateY(0.22em);183  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;184  animation-delay: calc(var(--peach-char-index, 0) * 20ms);185}186187/* Chrome */188.peach-chrome {189  position: relative;190  z-index: 10;191  padding: 16px 20px 0;192  display: flex;193  justify-content: space-between;194  align-items: center;195  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense196     fallback) per §15 regression guard. Without pointer-events:none, the197     empty header strip also sits above `.peach-overlay-view` (z-index:2)198     and swallows clicks meant for an overlay's back button / top search. */199  pointer-events: none;200}201.peach-chrome .peach-btn { pointer-events: auto; }202.peach-chrome.is-hidden-for-overlay,203.peach-search-wrap.is-hidden-for-overlay {204  opacity: 0;205  visibility: hidden;206  pointer-events: none;207}208.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }209.peach-status-pip {210  width: 5px;211  height: 5px;212  border-radius: 50%;213  background: var(--peach-t3);214  display: inline-flex;215  flex-shrink: 0;216  transition: background 400ms ease, box-shadow 400ms ease;217}218.peach-chrome-actions { display: flex; gap: 6px; }219220/* Shell body */221.peach-shell-body {222  position: relative;223  display: grid;224  grid-template-rows: 1fr auto;225  min-height: 0;226  min-width: 0;227  width: 100%;228  overflow: hidden;229  height: 100%;230}231.peach-shell-veil {232  position: absolute; inset: 0;233  background: #000; opacity: 0;234  pointer-events: none; z-index: 1;235}236.peach-shell[data-motion-phase="enter"] .peach-shell-body {237  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;238}239.peach-shell[data-motion-phase="exit"] .peach-shell-veil {240  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;241}242243/* Content frame */244.peach-content-frame {245  display: grid;246  grid-template-rows: 1fr auto;247  grid-template-columns: minmax(0, 1fr);248  align-content: start;249  min-height: 0;250  min-width: 0;251  overflow: hidden;252  transition: opacity 80ms ease, transform 80ms ease;253}254.peach-content-frame.navigating {255  opacity: 0.93;256  transform: translateX(2px);257}258.peach-content-frame[data-content-phase="enter"] {259  animation: peach-content-enter 135ms ease-out both;260}261.peach-content-frame[data-content-phase="exit"] {262  animation: peach-content-exit 95ms ease-in forwards;263}264.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }265266/* Stage */267.peach-stage {268  padding: 10px 20px 12px;269  display: grid;270  gap: 12px;271  align-content: start;272  min-width: 0;273  min-height: 0;274  max-width: 100%;275  overflow-y: auto;276  overflow-x: hidden;277  scrollbar-width: none;278  -ms-overflow-style: none;279  overscroll-behavior: contain;280}281.peach-stage::-webkit-scrollbar { display: none; }282283/* Entry name */284.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }285.peach-entry-header {286  position: relative;287  z-index: 1;288  display: flex;289  align-items: flex-start;290  gap: 6px;291  min-width: 0;292}293.peach-entry-header-name {294  flex: 1;295  min-width: 0;296}297.peach-entry-name {298  margin: 0;299  font-family: "Cormorant Garamond", "Times New Roman", serif;300  font-style: italic; font-weight: 400;301  font-size: 44px; line-height: 0.95;302  color: var(--peach-t0);303  display: -webkit-box;304  -webkit-line-clamp: 2;305  -webkit-box-orient: vertical;306  overflow: hidden;307  text-wrap: balance;308}309.peach-entry-name--lg { font-size: 40px; }310.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }311.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }312.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; }313314/* Trash icon in entry header */315.peach-entry-trash-btn {316  flex-shrink: 0;317  padding: 4px;318  margin-top: 4px;319  background: transparent;320  border: none;321  cursor: pointer;322  color: var(--peach-t2);323  border-radius: 4px;324  transition: color 140ms ease, background 140ms ease;325  display: flex;326  align-items: center;327  justify-content: center;328}329.peach-entry-trash-btn:hover {330  color: var(--peach-t1);331  background: var(--peach-t3);332}333.peach-entry-trash-confirm {334  display: flex;335  align-items: center;336  gap: 6px;337  flex-shrink: 0;338  margin-top: 6px;339  flex-wrap: nowrap;340}341.peach-entry-trash-confirm-label {342  font-family: var(--font-mono);343  font-size: 9px;344  letter-spacing: 0.1em;345  color: var(--peach-t2);346  white-space: nowrap;347}348.peach-entry-name-button {349  padding: 0;350  background: transparent;351  text-align: left;352  cursor: pointer;353  max-width: 100%;354  overflow: hidden;355  display: block;356}357.peach-entry-name-char {358  display: inline-block;359  white-space: pre;360  opacity: 0;361  transform: translateY(0.22em);362  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;363  animation-delay: calc(var(--char-index, 0) * 20ms);364}365366/* Domain */367.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }368.peach-domain-row {369  width: 100%; border: 0; background: transparent; color: inherit;370  padding: 0; display: flex; justify-content: space-between; align-items: baseline;371  cursor: default;372}373.peach-domain-value {374  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;375  font-size: 10px; font-style: italic;376  letter-spacing: 0.12em; color: var(--peach-t1);377}378379/* Fields */380.peach-fields { display: grid; gap: 10px; }381.peach-field-card { display: grid; gap: 7px; }382.peach-label {383  font-family: Inter, system-ui, sans-serif;384  text-transform: uppercase; letter-spacing: 0.2em;385  font-size: 8px; color: var(--peach-t2);386}387.peach-field-value-row {388  display: flex; justify-content: space-between;389  align-items: center; gap: 8px;390  min-width: 0;391}392.peach-field-value {393  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;394  font-size: 13px; color: var(--peach-t1);395  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;396  flex: 1;397  min-width: 0;398}399.peach-password-value {400  display: inline-flex;401  align-items: center;402  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;403  font-size: 16px; letter-spacing: 0.3em; color: var(--peach-t0);404  overflow: hidden;405  text-overflow: ellipsis;406  white-space: nowrap;407  flex: 1;408  min-width: 0;409  max-width: 100%;410}411.peach-password-value.is-revealed {412  font-size: 14px;413  letter-spacing: 0.08em;414}415.peach-password-text,416.peach-password-mask {417  display: block;418  width: 100%;419  overflow: hidden;420  text-overflow: ellipsis;421  white-space: nowrap;422}423.peach-field-actions { display: flex; gap: 4px; align-items: center; }424.peach-password-strength { display: flex; align-items: center; gap: 8px; }425.peach-strength-bar { display: flex; gap: 3px; }426.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }427.peach-strength-label {428  font-family: "IBM Plex Mono", monospace;429  font-style: italic;430  font-size: 9px;431  font-weight: 300;432  min-width: 36px;433  text-align: right;434  color: var(--peach-t2);435  letter-spacing: 0.06em;436}437438.peach-strength-hairline {439  display: flex;440  align-items: center;441  gap: 10px;442  margin-top: -2px;443}444445.peach-strength-hairline-track {446  flex: 1;447  height: 3px;448  border-radius: 2px;449  background: var(--peach-s2);450  overflow: hidden;451}452453.peach-strength-hairline-fill {454  height: 100%;455  border-radius: 2px;456  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),457    background 400ms ease;458}459460/* Note content (display) */461.peach-note-content {462  border-top: 1px solid var(--peach-t3);463  padding-top: 10px;464  font-family: "Cormorant Garamond", "Times New Roman", serif;465  font-size: 15px;466  line-height: 1.75;467  color: var(--peach-t1);468}469470/* ── Inline editing ─────────────────────────────────────────────────── */471472/* Clickable display values */473.peach-inline-clickable {474  cursor: text;475  border-radius: 3px;476  transition: background 150ms ease;477}478.peach-inline-clickable:hover {479  background: rgba(240, 232, 216, 0.05);480}481482/* Subtle "edit" hint that appears on hover */483.peach-inline-edit-hint {484  font-family: Inter, system-ui, sans-serif;485  font-size: 9px;486  text-transform: uppercase;487  letter-spacing: 0.14em;488  color: var(--peach-t2);489  opacity: 0;490  transition: opacity 120ms ease;491  pointer-events: none;492  margin-left: 6px;493  flex-shrink: 0;494}495.peach-domain-row:hover .peach-inline-edit-hint {496  opacity: 1;497}498499/* Title editing */500.peach-inline-title-wrap {501  display: flex;502  flex-direction: column;503  gap: 6px;504}505.peach-inline-title-input {506  font-family: "Cormorant Garamond", "Times New Roman", serif;507  font-style: italic;508  font-weight: 400;509  font-size: 40px;510  line-height: 0.95;511  color: var(--peach-t0);512  background: transparent;513  border: none;514  border-bottom: 1px solid var(--peach-accent);515  outline: none;516  width: 100%;517  padding: 2px 0;518}519520/* Generic inline field */521.peach-inline-field-wrap {522  display: flex;523  flex-direction: column;524  gap: 6px;525}526.peach-inline-input {527  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;528  font-size: 13px;529  color: var(--peach-t0);530  background: transparent;531  border: none;532  border-bottom: 1px solid var(--peach-accent);533  outline: none;534  width: 100%;535  padding: 3px 0;536}537.peach-inline-textarea {538  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;539  font-size: 11px;540  line-height: 1.7;541  color: var(--peach-t0);542  background: rgba(240, 232, 216, 0.04);543  border: 1px solid var(--peach-accent);544  border-radius: 4px;545  outline: none;546  width: 100%;547  padding: 8px;548  resize: vertical;549  min-height: 80px;550}551552/* Save / cancel row */553.peach-inline-actions {554  display: flex;555  gap: 6px;556  align-items: center;557}558.peach-inline-save-btn,559.peach-inline-cancel-btn {560  display: inline-flex;561  align-items: center;562  justify-content: center;563  width: 26px;564  height: 26px;565  border-radius: 4px;566  border: none;567  cursor: pointer;568  transition: background 140ms ease, opacity 140ms ease;569  flex-shrink: 0;570}571.peach-inline-save-btn {572  background: rgba(var(--ac-r, 217), var(--ac-g, 104), var(--ac-b, 48), 0.18);573  color: var(--peach-accent);574}575.peach-inline-save-btn:hover:not(:disabled) {576  background: rgba(var(--ac-r, 217), var(--ac-g, 104), var(--ac-b, 48), 0.30);577}578.peach-inline-cancel-btn {579  background: rgba(240, 232, 216, 0.06);580  color: var(--peach-t2);581}582.peach-inline-cancel-btn:hover:not(:disabled) {583  background: rgba(240, 232, 216, 0.12);584  color: var(--peach-t1);585}586.peach-inline-save-btn:disabled,587.peach-inline-cancel-btn:disabled {588  opacity: 0.4;589  cursor: not-allowed;590}591592/* Inline password generator wrapper */593.peach-inline-generator-wrap {594  margin-top: 10px;595  padding-top: 10px;596  border-top: 1px solid var(--peach-t3);597  display: flex;598  flex-direction: column;599  gap: 8px;600}601.peach-inline-generator-cancel {602  align-self: flex-start;603  font-size: 11px;604  color: var(--peach-t2);605}606607/* "is-editing" card state */608.peach-field-card.is-editing {609  background: rgba(240, 232, 216, 0.02);610  border-radius: 6px;611  padding: 8px;612  margin: -8px;613}614615/* Add notes button */616.peach-add-notes-btn {617  font-size: 11px;618  color: var(--peach-t2);619  margin-top: 6px;620  align-self: flex-start;621  padding: 4px 0;622}623624/* Delete row */625.peach-entry-delete-row {626  display: flex;627  align-items: center;628  gap: 8px;629  padding-top: 18px;630  margin-top: 8px;631  border-top: 1px solid var(--peach-t3);632}633.peach-delete-btn {634  font-size: 11px;635  color: var(--peach-t2);636  padding: 4px 0;637}638.peach-delete-confirm-text {639  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;640  font-size: 11px;641  font-style: italic;642  color: var(--peach-t2);643  flex-shrink: 0;644}645646/* TOTP band */647.peach-totp-band {648  border-top: 1px solid var(--peach-t3);649  padding: 12px 20px 14px;650  position: relative;651  display: grid;652  grid-template-columns: 1fr auto;653  gap: 10px;654}655.peach-totp-main {656  min-width: 0;657}658.peach-totp-code-row {659  display: flex;660  align-items: flex-end;661  gap: 10px;662  min-width: 0;663}664.peach-totp-code {665  margin: 2px 0 0;666  font-family: "Cormorant Garamond", "Times New Roman", serif;667  font-style: italic;668  font-weight: 300;669  font-size: 38px; color: var(--peach-accent);670  line-height: 0.95; min-height: 1em;671  min-width: 0;672}673.peach-totp-code-text {674  display: inline-flex;675  overflow: hidden;676  text-overflow: ellipsis;677  white-space: nowrap;678}679.peach-totp-copy-btn {680  margin-bottom: 2px;681  flex-shrink: 0;682  border-color: transparent;683}684.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }685.peach-totp-countdown {686  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;687  font-size: 22px; color: var(--peach-t1);688}689.peach-totp-ring { transform: rotate(-90deg); }690.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }691.peach-totp-ring-progress {692  fill: none; stroke: var(--peach-accent); stroke-width: 2;693  stroke-linecap: round;694  transition: stroke-dashoffset 1s linear, stroke 500ms ease;695}696/* Search bar */697.peach-search-wrap {698  border-top: 1px solid var(--peach-t3);699  background: var(--peach-s1);700  min-height: 54px; position: relative;701  box-shadow: inset 0 6px 18px rgba(217, 104, 48, 0);702  transition: box-shadow 700ms ease;703}704.peach-search-wrap::before {705  content: "";706  position: absolute;707  left: 0;708  top: 0;709  height: 2px;710  width: var(--peach-totp-progress, 0%);711  background: var(--peach-accent);712  opacity: 0;713  transition: width 1s linear, opacity 180ms ease;714  pointer-events: none;715}716.peach-shell[data-totp-active="true"] .peach-search-wrap::before {717  opacity: 0.9;718}719.peach-shell[data-totp-active="true"] .peach-search-wrap {720  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);721}722723@keyframes peach-totp-code-flare {724  0%   { filter: brightness(1); }725  25%  { filter: brightness(1.3); }726  100% { filter: brightness(1); }727}728.peach-totp-code.is-hot {729  animation: peach-totp-code-flare 3000ms ease-in-out both;730}731.peach-search-bar {732  min-height: 54px;733  display: grid;734  grid-template-columns: auto minmax(0, 1fr) auto;735  align-items: center;736  gap: 8px; padding: 0 9px 0 12px;737}738.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }739.peach-search-input {740  border: 0; background: transparent; color: var(--peach-t0);741  font-family: "Cormorant Garamond", "Times New Roman", serif;742  font-style: italic; font-size: 18px;743  outline: none; width: 100%; min-width: 0; padding: 0;744  caret-color: var(--peach-accent);745}746.peach-search-input::placeholder { color: var(--peach-t2); }747.peach-search-meta {748  display: grid;749  grid-auto-flow: column;750  align-items: center;751  justify-content: end;752  gap: 6px;753  min-width: max-content;754}755.peach-search-counter {756  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;757  font-size: 10px; color: var(--peach-t2);758  display: inline-flex;759  align-items: center;760  line-height: 1;761}762.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }763764/* Buttons */765.peach-btn {766  border: 1px solid transparent; border-radius: 12px;767  background: transparent; color: var(--peach-t0);768  font-family: Inter, system-ui, sans-serif;769  font-size: 12px; letter-spacing: 0.02em; padding: 8px 12px;770  cursor: pointer;771  transition:772    background-color var(--peach-dur-80) var(--peach-curve-arrival),773    color var(--peach-dur-80) var(--peach-curve-arrival),774    border-color var(--peach-dur-150) var(--peach-curve-arrival);775}776.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }777.peach-btn:disabled {778  opacity: 0.45;779  cursor: not-allowed;780}781.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 11px; }782.peach-btn--md { min-height: 38px; }783.peach-btn--accent { background: var(--peach-accent); color: rgba(0,0,0,0.75); }784.peach-btn--accent:hover:not(:disabled) { background: var(--peach-accent); filter: brightness(1.12); }785.peach-btn--ghost { border-color: var(--peach-t3); color: var(--peach-t1); }786.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }787.peach-icon-btn {788  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;789  display: inline-flex; align-items: center; justify-content: center;790}791792.peach-btn:focus-visible {793  outline: none;794  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px rgba(217, 104, 48, 0.5);795}796797/* Lock button */798.peach-lock-icon { transform-origin: center; }799.peach-lock-btn.is-locking { color: var(--peach-accent); }800.peach-lock-btn.is-locking .peach-lock-icon {801  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);802}803804/* Copy button */805.peach-copy-btn {806  position: relative; overflow: hidden;807  color: var(--peach-t2); border-color: var(--peach-t3);808}809.peach-copy-icon {810  display: inline-flex; align-items: center; justify-content: center;811  position: relative; z-index: 1;812}813.peach-copy-icon-svg { display: block; }814.peach-copy-sheen {815  position: absolute; inset: 0;816  background: linear-gradient(90deg, rgba(217,104,48,0) 0%, rgba(217,104,48,0.18) 30%, rgba(217,104,48,0.08) 100%);817  opacity: 0; transform: scaleX(0.15); transform-origin: left center;818}819.peach-copy-btn.is-copied {820  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;821  box-shadow:822    0 0 0 1px rgba(217,104,48,0.22),823    0 0 18px rgba(217,104,48,0.2),824    inset 0 0 20px rgba(217,104,48,0.12);825}826.peach-copy-btn.is-copied .peach-copy-icon {827  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;828}829.peach-copy-btn.is-copied .peach-copy-sheen {830  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;831}832.peach-copy-btn.is-retreat {833  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;834}835.peach-copy-btn.is-retreat .peach-copy-sheen {836  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;837}838.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }839.peach-copy-drain-bar {840  display: block; width: 100%; height: 100%;841  background: var(--peach-accent); opacity: 0.7;842  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;843}844845/* Unlock screen elements */846.peach-unlock-headline {847  margin: 2px 0 0;848  font-family: "Cormorant Garamond", "Times New Roman", serif;849  font-size: 52px; line-height: 0.95;850  font-style: italic; font-weight: 400;851}852.peach-subline {853  margin: 0;854  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;855  font-size: 10px; color: var(--peach-t2); font-style: italic;856}857.peach-subline--lock {858  max-width: 248px;859  line-height: 1.5;860}861.peach-underline-input {862  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);863  padding: 6px 0; background: transparent; color: var(--peach-t0);864  outline: none;865  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;866  font-size: 13px;867  caret-color: var(--peach-accent);868}869.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }870.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }871.peach-hint {872  margin: 0;873  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;874  font-size: 10px; color: var(--peach-t2);875}876.peach-unlock-footer {877  margin-top: 4px; display: flex; align-items: center; gap: 7px;878  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;879  font-size: 10px; color: var(--peach-t2);880}881.peach-unlock-footer--lock {882  padding-top: 2px;883}884885/* Breach badge */886.peach-breach-badge {887  display: flex;888  position: relative;889  z-index: 1;890  align-items: center;891  gap: 7px;892  font-size: 9px;893  color: var(--peach-breach);894  padding: 5px 10px;895  margin-bottom: 4px;896  border-radius: 8px;897  background: rgba(220, 80, 60, 0.07);898  border: 1px solid rgba(220, 80, 60, 0.18);899  letter-spacing: 0.04em;900}901902.peach-breach-action {903  margin-left: auto;904  font-size: 10px;905  padding: 3px 8px;906}907908.peach-password-value.is-breached {909  color: rgba(220, 80, 60, 0.75);910  border-bottom: 1px solid rgba(220, 80, 60, 0.22);911}912913/* ── Overlay views ─────────────────────────────────────────────────── */914.peach-overlay-view {915  position: absolute;916  inset: 0;917  display: flex;918  flex-direction: column;919  background:920    radial-gradient(120% 80% at 0% 0%, rgba(217,104,48,0.08) 0%, transparent 65%),921    radial-gradient(85% 100% at 100% 100%, rgba(217,104,48,0.06) 0%, transparent 70%),922    var(--peach-bg);923  z-index: 2;924  overflow: hidden;925  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;926}927@keyframes overlay-in {928  from { opacity: 0; transform: translateY(8px); }929  to   { opacity: 1; transform: translateY(0); }930}931.peach-overlay-view.ov-enter-up {932  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;933}934.peach-overlay-view.ov-exit-up {935  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;936}937.peach-overlay-view.ov-enter-right {938  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;939}940.peach-overlay-view.ov-exit-right {941  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;942}943944@keyframes ov-enter-up {945  from { opacity: 0; transform: translateY(18px); }946  to   { opacity: 1; transform: translateY(0); }947}948@keyframes ov-exit-up {949  from { opacity: 1; transform: translateY(0); }950  to   { opacity: 0; transform: translateY(-12px); }951}952@keyframes ov-enter-right {953  from { opacity: 0; transform: translateX(20px); }954  to   { opacity: 1; transform: translateX(0); }955}956@keyframes ov-exit-right {957  from { opacity: 1; transform: translateX(0); }958  to   { opacity: 0; transform: translateX(20px); }959}960961/* Overlay shared header */962.peach-overlay-header {963  padding: 10px 12px;964  display: flex;965  align-items: center;966  gap: 8px;967  border-bottom: 1px solid var(--peach-t3);968  flex-shrink: 0;969}970.peach-overlay-title {971  font-family: "IBM Plex Mono", monospace;972  font-size: 9px;973  text-transform: uppercase;974  letter-spacing: 0.18em;975  color: var(--peach-t2);976  flex: 1;977  text-align: center;978}979980.peach-overlay-card {981  background: var(--peach-s1);982  border: 1px solid var(--peach-t3);983  border-radius: 12px;984  overflow: hidden;985  width: 100%;986}987988.peach-onboarding-alt-actions {989  display: flex;990  flex-direction: column;991  gap: 4px;992  padding: 0;993}994995.peach-settings-copy {996  margin: 0 0 10px;997  font-size: 11px;998  line-height: 1.5;999  color: var(--peach-t2);1000}10011002.peach-settings-copy strong {1003  color: var(--peach-t0);1004}10051006.peach-settings-copy--spacious {1007  margin-bottom: 12px;1008}10091010.peach-settings-copy--result {1011  color: var(--peach-accent);1012  font-size: 13px;1013  text-align: center;1014  padding: 8px 0;1015}10161017.peach-settings-copy--danger {1018  color: var(--peach-breach);1019}10201021.peach-settings-copy--success {1022  color: var(--peach-accent);1023}10241025.peach-inline-feedback {1026  font-size: 11px;1027  margin: 10px 0 0;1028}10291030.peach-inline-feedback--ok {1031  color: var(--peach-accent);1032}10331034.peach-inline-feedback--error {1035  color: var(--peach-breach);1036}10371038.peach-inline-feedback--muted {1039  color: var(--peach-t2);1040  font-size: 10px;1041  margin: 4px 0;1042}10431044.peach-inline-feedback--spaced {1045  margin-top: 12px;1046}10471048.peach-settings-actions--row {1049  display: flex;1050  gap: 6px;1051}10521053.peach-settings-actions--end {1054  margin-top: 14px;1055  justify-content: flex-end;1056}10571058.peach-settings-stack {1059  display: flex;1060  flex-direction: column;1061  gap: 6px;1062}10631064.peach-settings-stack--tight {1065  gap: 4px;1066}10671068.peach-settings-stack--spacious {1069  gap: 8px;1070}10711072.peach-settings-input {1073  width: 100%;1074  box-sizing: border-box;1075  padding: 8px 10px;1076  background: var(--peach-s2);1077  border: 1px solid var(--peach-t3);1078  border-radius: 6px;1079  color: var(--peach-t0);1080  font-family: var(--font-ui);1081  font-size: 12px;1082  outline: none;1083  transition: border-color 120ms ease;1084}10851086.peach-settings-input:focus {1087  border-color: var(--peach-accent);1088}10891090.peach-settings-input[type="password"] {1091  font-family: var(--font-mono);1092  letter-spacing: 0.04em;1093}10941095.peach-phrase-textarea {1096  width: 100%;1097  box-sizing: border-box;1098  min-height: 120px;1099  padding: 10px 12px;1100  background: var(--peach-s2);1101  border: 1px solid var(--peach-t3);1102  border-radius: 6px;1103  color: var(--peach-t0);1104  font-size: 12px;1105  font-family: "Noto Sans CJK SC", "PingFang SC", monospace;1106  line-height: 1.5;1107  resize: vertical;1108  outline: none;1109}11101111.peach-phrase-textarea:focus {1112  border-color: var(--peach-accent);1113}11141115.peach-hidden-file-input {1116  display: none;1117}11181119.peach-checkbox-note {1120  display: flex;1121  align-items: flex-start;1122  gap: 8px;1123  font-size: 11px;1124  color: var(--peach-t1);1125  cursor: pointer;1126  margin: 12px 0;1127}11281129.peach-checkbox-note input {1130  margin-top: 1px;1131}11321133.peach-cjk-phrase-box {1134  font-family: "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", sans-serif;1135  font-size: 13px;1136  line-height: 1.5;1137  background: var(--peach-s2);1138  border: 1px solid var(--peach-t3);1139  border-radius: 6px;1140  padding: 10px 12px;1141  margin: 0 0 10px;1142  word-break: break-all;1143  white-space: pre-wrap;1144  max-height: 220px;1145  overflow-y: auto;1146  color: var(--peach-t0);1147  user-select: all;1148  scrollbar-width: none;1149  -ms-overflow-style: none;1150}1151.peach-cjk-phrase-box::-webkit-scrollbar { display: none; }11521153.peach-danger-notice {1154  background: rgba(220, 80, 60, 0.08);1155  border: 1px solid rgba(220, 80, 60, 0.2);1156  border-radius: 6px;1157  padding: 9px 11px;1158  font-size: 11px;1159  color: var(--peach-t1);1160  line-height: 1.5;1161}11621163.peach-info-notice {1164  font-size: 11px;1165  color: var(--peach-t2);1166  line-height: 1.5;1167  background: rgba(240, 232, 216, 0.04);1168  border: 1px solid var(--peach-t3);1169  border-radius: 6px;1170  padding: 8px 10px;1171}11721173.peach-strength-row {1174  display: flex;1175  align-items: center;1176  gap: 8px;1177  margin-bottom: 10px;1178}11791180.peach-strength-track {1181  flex: 1;1182  height: 4px;1183  background: var(--peach-s2);1184  border-radius: 2px;1185  overflow: hidden;1186}11871188.peach-strength-fill {1189  height: 100%;1190  border-radius: 2px;1191  transition: width 120ms ease, background 120ms ease;1192}11931194/* ── Type selector tabs ── */1195.peach-type-tabs {1196  display: flex;1197  gap: 0;1198  background: var(--peach-t4);1199  border-radius: 8px;1200  padding: 3px;1201}12021203.peach-type-tab {1204  flex: 1;1205  display: flex;1206  align-items: center;1207  justify-content: center;1208  gap: 6px;1209  padding: 6px 10px;1210  border-radius: 6px;1211  border: none;1212  background: transparent;1213  cursor: pointer;1214  font-family: Inter, system-ui, sans-serif;1215  font-size: 11px;1216  font-weight: 400;1217  letter-spacing: 0.04em;1218  color: var(--peach-t1);1219  transition: background 150ms ease, color 150ms ease;1220}12211222.peach-type-tab.is-active {1223  background: var(--peach-s2);1224  color: var(--peach-t0);1225  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1226}12271228.peach-type-tab:not(.is-active):hover {1229  color: var(--peach-t0);1230}12311232.peach-type-tab svg {1233  opacity: 0.7;1234  flex-shrink: 0;1235}12361237.peach-type-tab.is-active svg {1238  opacity: 1;1239}12401241/* ── List view ───────────────────────────────────────────────────────── */1242.peach-list-top {1243  padding: 0 10px;1244  min-height: 46px;1245  display: flex;1246  align-items: center;1247  gap: 6px;1248  border-bottom: 1px solid var(--peach-t3);1249  flex-shrink: 0;1250  background: var(--peach-s1);1251}1252.peach-vault-list {1253  flex: 1;1254  overflow-y: auto;1255  scrollbar-width: none;1256}1257.peach-vault-list::-webkit-scrollbar { display: none; }12581259/* Scrollbar — vault list */1260.peach-vault-list {1261  scrollbar-width: thin;1262  scrollbar-color: var(--peach-t3) transparent;1263}12641265.peach-vault-list::-webkit-scrollbar {1266  width: 3px;1267}12681269.peach-vault-list::-webkit-scrollbar-thumb {1270  background: var(--peach-t3);1271  border-radius: 2px;1272}12731274.peach-entry-row {1275  width: 100%;1276  display: flex;1277  align-items: center;1278  gap: 10px;1279  padding: 9px 16px;1280  background: transparent;1281  border: none;1282  border-bottom: 1px solid var(--peach-t3);1283  cursor: pointer;1284  color: inherit;1285  text-align: left;1286  transition: background 80ms ease;1287}1288.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1289.peach-entry-row:last-child { border-bottom: none; }1290.peach-entry-row.is-active {1291  box-shadow: inset 2px 0 0 var(--peach-accent);1292  background: rgba(240,232,216,0.03);1293}1294.peach-entry-row-icon {1295  width: 26px; height: 26px;1296  border-radius: 7px;1297  border: 1px solid var(--peach-t3);1298  display: flex; align-items: center; justify-content: center;1299  color: var(--peach-t2);1300  flex-shrink: 0;1301}1302.peach-entry-row-icon.is-breach {1303  border-color: rgba(220,80,60,0.3);1304  color: rgba(220,80,60,0.7);1305}1306.peach-entry-row-info { flex: 1; min-width: 0; }1307.peach-entry-row-name {1308  display: block;1309  font-family: "Cormorant Garamond", serif;1310  font-size: 17px;1311  font-style: italic;1312  font-weight: 400;1313  color: var(--peach-t0);1314  line-height: 1.2;1315  white-space: nowrap;1316  overflow: hidden;1317  text-overflow: ellipsis;1318}1319.peach-entry-row-meta {1320  display: block;1321  font-family: "IBM Plex Mono", monospace;1322  font-size: 9px;1323  color: var(--peach-t2);1324  margin-top: 1px;1325  letter-spacing: 0.05em;1326}1327.peach-entry-row-dot {1328  width: 5px; height: 5px;1329  border-radius: 50%;1330  background: rgba(220,80,60,0.7);1331  flex-shrink: 0;1332}1333.peach-new-entry-row {1334  display: flex;1335  align-items: center;1336  justify-content: center;1337  gap: 6px;1338  width: 100%;1339  padding: 11px;1340  background: transparent;1341  border: none;1342  border-top: 1px solid var(--peach-t3);1343  color: var(--peach-t2);1344  font-family: "IBM Plex Mono", monospace;1345  font-size: 9px;1346  text-transform: uppercase;1347  letter-spacing: 0.14em;1348  cursor: pointer;1349  flex-shrink: 0;1350  transition: color 120ms ease, background 120ms ease;1351}1352.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }13531354/* ── Multi-select mode ─────────────────────────────────────────────── */13551356/* Select-mode trigger button in sort bar — same shape as trash btn */1357.peach-sort-select-btn {1358  display: flex;1359  align-items: center;1360  justify-content: center;1361  padding: 3px 5px;1362  background: transparent;1363  border: none;1364  cursor: pointer;1365  color: var(--peach-t2);1366  border-radius: 4px;1367  transition: color 140ms ease, background 140ms ease;1368}1369.peach-sort-select-btn:hover {1370  color: var(--peach-t1);1371  background: var(--peach-t3);1372}13731374/* Sort bar in select mode */1375.peach-select-cancel-btn {1376  background: transparent;1377  border: none;1378  padding: 0 4px;1379  cursor: pointer;1380  font-family: "IBM Plex Mono", monospace;1381  font-size: 9px;1382  letter-spacing: 0.12em;1383  text-transform: uppercase;1384  color: var(--peach-t2);1385  transition: color 140ms ease;1386  flex-shrink: 0;1387}1388.peach-select-cancel-btn:hover { color: var(--peach-t0); }13891390.peach-select-count-label {1391  flex: 1;1392  text-align: center;1393  font-family: "IBM Plex Mono", monospace;1394  font-size: 9px;1395  letter-spacing: 0.14em;1396  text-transform: uppercase;1397  color: var(--peach-t1);1398}13991400.peach-select-all-btn {1401  background: transparent;1402  border: none;1403  padding: 0 4px;1404  cursor: pointer;1405  font-family: "IBM Plex Mono", monospace;1406  font-size: 9px;1407  letter-spacing: 0.12em;1408  text-transform: uppercase;1409  color: var(--peach-t2);1410  transition: color 140ms ease;1411  flex-shrink: 0;1412}1413.peach-select-all-btn:hover { color: var(--peach-accent); }14141415/* List in select mode */1416.peach-vault-list.is-selecting .peach-entry-row {1417  cursor: default;1418}1419.peach-vault-list.is-selecting .peach-entry-row:hover {1420  background: rgba(240,232,216,0.02);1421}1422.peach-vault-list.is-selecting .peach-entry-row.is-selected {1423  background: rgba(217,104,48,0.06);1424}1425.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1426  background: rgba(217,104,48,0.1);1427}14281429/* Select indicator circles in icon slot */1430.peach-entry-row-icon.is-select-icon {1431  color: var(--peach-t2);1432}1433.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1434  color: var(--peach-accent);1435}14361437/* Delete action bar at bottom (replaces new-entry row) */1438.peach-select-action-bar {1439  display: flex;1440  align-items: center;1441  justify-content: center;1442  gap: 7px;1443  width: 100%;1444  padding: 11px;1445  background: transparent;1446  border: none;1447  border-top: 1px solid var(--peach-t3);1448  color: var(--peach-t1);1449  font-family: "IBM Plex Mono", monospace;1450  font-size: 9px;1451  text-transform: uppercase;1452  letter-spacing: 0.14em;1453  cursor: pointer;1454  flex-shrink: 0;1455  transition: color 120ms ease, background 120ms ease;1456}1457.peach-select-action-bar:not(:disabled):hover {1458  color: var(--peach-t0);1459  background: rgba(220,80,60,0.06);1460}1461.peach-select-action-bar:not(:disabled):hover svg {1462  stroke: rgba(220,80,60,0.8);1463}1464.peach-select-action-bar:disabled,1465.peach-select-action-bar.is-empty {1466  color: var(--peach-t2);1467  cursor: default;1468  opacity: 0.5;1469}1470.peach-search-counter-list {1471  white-space: nowrap;1472  flex-shrink: 0;1473}1474.peach-list-empty {1475  min-height: 180px;1476  display: grid;1477  place-items: center;1478  color: var(--peach-t2);1479  font-family: "IBM Plex Mono", monospace;1480  font-size: 11px;1481}14821483/* ── Settings view ───────────────────────────────────────────────────── */1484.peach-settings-body {1485  flex: 1;1486  overflow-y: auto;1487  min-height: 0;1488  display: flex;1489  flex-direction: column;1490  padding: 2px 0 10px;1491}1492.peach-settings-group {1493  padding: 9px 16px 11px;1494  border-bottom: 1px solid var(--peach-t3);1495}1496.peach-export-intro {1497  padding-bottom: 8px;1498}1499.peach-export-card {1500  display: grid;1501  gap: 10px;1502}1503.peach-export-card--primary {1504  background:1505    linear-gradient(180deg, rgba(217,104,48,0.08), rgba(217,104,48,0.02));1506}1507.peach-export-card-head {1508  display: flex;1509  align-items: center;1510  justify-content: space-between;1511  gap: 10px;1512}1513.peach-export-card-copy {1514  margin: 0;1515  font-size: 12px;1516  line-height: 1.55;1517  color: var(--peach-t1);1518}1519.peach-export-note {1520  margin: 0;1521  font-size: 10px;1522  line-height: 1.5;1523  color: var(--peach-t2);1524}1525.peach-export-pill {1526  display: inline-flex;1527  align-items: center;1528  padding: 4px 8px;1529  border-radius: 999px;1530  border: 1px solid rgba(217,104,48,0.22);1531  background: rgba(217,104,48,0.08);1532  color: var(--peach-accent);1533  font-family: "IBM Plex Mono", monospace;1534  font-size: 8px;1535  letter-spacing: 0.12em;1536  text-transform: uppercase;1537  white-space: nowrap;1538}1539.peach-export-pill--danger {1540  border-color: rgba(220,80,60,0.22);1541  background: rgba(220,80,60,0.08);1542  color: var(--peach-breach);1543}1544.peach-export-password-stack {1545  gap: 8px;1546}1547.peach-settings-label {1548  margin: 0 0 6px;1549  font-family: "IBM Plex Mono", monospace;1550  font-size: 8px;1551  text-transform: uppercase;1552  letter-spacing: 0.18em;1553  color: var(--peach-t2);1554}1555.peach-settings-row {1556  display: flex;1557  align-items: center;1558  justify-content: space-between;1559  gap: 12px;1560  min-height: 34px;1561  padding: 6px 0;1562  font-size: 13px;1563  color: var(--peach-t1);1564}1565.peach-settings-row--meta { color: var(--peach-t2); font-size: 12px; }1566.peach-settings-value {1567  font-family: "IBM Plex Mono", monospace;1568  font-size: 10px;1569  color: var(--peach-t2);1570}15711572.peach-settings-value--status {1573  display: flex;1574  align-items: center;1575  gap: 6px;1576}15771578.peach-settings-row--stack {1579  flex-direction: column;1580  align-items: stretch;1581  gap: 6px;1582}15831584.peach-settings-row--top {1585  align-items: flex-start;1586}15871588.peach-settings-row-main {1589  display: flex;1590  flex-direction: column;1591  gap: 4px;1592  flex: 1;1593}1594.peach-toggle {1595  width: 28px; height: 16px;1596  border-radius: 999px;1597  background: var(--peach-t3);1598  border: 1px solid var(--peach-t3);1599  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1600  flex-shrink: 0;1601  transition: background 200ms ease, border-color 200ms ease;1602  cursor: pointer;1603}1604.peach-toggle.is-on {1605  background: rgba(217,104,48,0.22);1606  border-color: rgba(217,104,48,0.4);1607}1608.peach-toggle-knob {1609  width: 10px; height: 10px;1610  border-radius: 50%;1611  background: var(--peach-t2);1612  flex-shrink: 0;1613  transform: translateX(0px);1614  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1615}1616.peach-toggle.is-on .peach-toggle-knob {1617  background: var(--peach-accent);1618  transform: translateX(12px);1619}1620.peach-settings-footer {1621  display: flex;1622  align-items: center;1623  gap: 8px;1624  margin-top: auto;1625  padding: 14px 16px 8px;1626  font-family: "IBM Plex Mono", monospace;1627  font-size: 9px;1628  color: var(--peach-t2);1629}16301631.peach-passkey-badge {1632  margin-left: 8px;1633  font-size: 10px;1634  letter-spacing: 0.06em;1635  text-transform: uppercase;1636  color: var(--peach-t2);1637  font-family: var(--font-ui);1638  vertical-align: middle;1639}16401641.peach-passkey-delete-btn {1642  color: var(--peach-breach);1643  border-color: rgba(229, 85, 85, 0.25);1644}16451646.peach-passkey-delete-confirm {1647  display: flex;1648  align-items: center;1649  gap: 8px;1650  padding: 8px 10px;1651  background: rgba(229, 85, 85, 0.06);1652  border: 1px solid rgba(229, 85, 85, 0.2);1653  border-radius: 6px;1654}16551656.peach-passkey-delete-confirm-copy {1657  flex: 1;1658  font-size: 11px;1659  color: var(--peach-t1);1660}16611662.peach-passkey-delete-btn--confirm {1663  color: var(--peach-breach);1664  border-color: rgba(229, 85, 85, 0.4);1665}16661667.peach-passkey-activity {1668  flex-direction: column;1669  align-items: flex-start;1670  gap: 4px;1671}16721673.peach-passkey-meta {1674  font-size: 11px;1675  color: var(--peach-t2);1676}16771678.peach-passkey-actions {1679  position: relative;1680  z-index: 1;1681  margin-top: 14px;1682  display: flex;1683  flex-direction: column;1684  gap: 8px;1685}16861687.peach-passkey-approval {1688  display: flex;1689  flex-direction: column;1690  align-items: center;1691  padding: 28px 22px 22px;1692  gap: 14px;1693  text-align: center;1694}16951696.peach-passkey-approval-icon {1697  width: 46px;1698  height: 46px;1699  border-radius: 12px;1700  background: var(--peach-s2);1701  border: 1px solid var(--peach-t3);1702  display: flex;1703  align-items: center;1704  justify-content: center;1705  flex-shrink: 0;1706  color: var(--peach-accent);1707}17081709.peach-passkey-approval-icon img,1710.peach-passkey-approval-icon svg {1711  width: 28px;1712  height: 28px;1713  border-radius: 6px;1714}17151716.peach-passkey-approval-rp {1717  font-family: var(--font-ui);1718  font-size: 12px;1719  color: var(--peach-t2);1720  letter-spacing: 0.03em;1721}17221723.peach-passkey-approval-action {1724  font-family: var(--font-display);1725  font-style: italic;1726  font-weight: 300;1727  font-size: 26px;1728  color: var(--peach-t0);1729  line-height: 1;1730}17311732.peach-passkey-approval-user {1733  font-family: var(--font-mono);1734  font-size: 11px;1735  color: var(--peach-t1);1736  background: var(--peach-s2);1737  border: 1px solid var(--peach-t3);1738  border-radius: 4px;1739  padding: 3px 8px;1740}17411742.peach-passkey-approval-notice {1743  font-size: 10px;1744  color: var(--peach-t2);1745  line-height: 1.5;1746  max-width: 220px;1747}17481749.peach-passkey-approval-actions {1750  display: flex;1751  gap: 8px;1752  width: 100%;1753  margin-top: 6px;1754}17551756.peach-passkey-approval-actions .peach-btn {1757  flex: 1;1758}17591760/* ── Inline generator drawer ── */1761.peach-generator-drawer {1762  display: grid;1763  grid-template-rows: 0fr;1764  transition: grid-template-rows 320ms var(--peach-curve-arrival);1765  overflow: hidden;1766}1767.peach-generator-drawer.is-open {1768  grid-template-rows: 1fr;1769}1770.peach-generator-drawer-inner {1771  min-height: 0;1772  overflow: hidden;1773}1774.peach-generator-drawer-content {1775  border-top: 1px solid var(--peach-t3);1776  padding: 8px 0 4px;1777  display: flex;1778  flex-direction: column;1779  gap: 8px;1780}17811782/* ── Compact generator (inside entry edit) ── */1783.peach-generator-drawer-content--compact {1784  border-top: 1px solid var(--peach-t3);1785  padding: 8px 0 2px;1786  gap: 7px;1787}1788.peach-pwgen-compact-display-row {1789  display: flex;1790  align-items: center;1791  gap: 6px;1792}1793.peach-pwgen-compact-output {1794  flex: 1;1795  min-width: 0;1796  font-family: "IBM Plex Mono", monospace;1797  font-size: 11px;1798  font-weight: 400;1799  letter-spacing: 0.04em;1800  color: var(--peach-t0);1801  background: rgba(240, 232, 216, 0.04);1802  border: 1px solid var(--peach-t3);1803  border-radius: 5px;1804  padding: 5px 8px;1805  word-break: break-all;1806  line-height: 1.5;1807}1808.peach-pwgen-compact-controls {1809  display: flex;1810  align-items: center;1811  gap: 6px;1812}1813.peach-pwgen-compact-slider {1814  flex: 1;1815  min-width: 0;1816  height: 2px !important;1817}1818.peach-pwgen-compact-controls .peach-pwgen-len-num {1819  flex-shrink: 0;1820  min-width: 18px;1821  text-align: right;1822}1823.peach-pwgen-compact-pills {1824  display: flex;1825  gap: 3px;1826  flex-shrink: 0;1827}1828.peach-pwgen-compact-pills .peach-pwgen-pill {1829  padding: 2px 7px;1830  font-size: 8px;1831}1832.peach-pwgen-compact-use {1833  flex-shrink: 0;1834  font-size: 10px !important;1835  padding: 3px 9px !important;1836  min-height: 22px !important;1837  border-radius: 5px !important;1838}18391840/* ── Password edit row (input + eye toggle side-by-side) ── */1841.peach-password-edit-row {1842  display: flex;1843  align-items: center;1844  gap: 6px;1845}1846.peach-password-edit-row .peach-inline-input {1847  flex: 1;1848  min-width: 0;1849}18501851/* ── Generate toggle link ── */1852.peach-generate-toggle-link {1853  display: inline-flex;1854  align-items: center;1855  gap: 5px;1856  background: none;1857  border: none;1858  padding: 0;1859  cursor: pointer;1860  font-family: "IBM Plex Mono", monospace;1861  font-size: 10px;1862  color: var(--peach-t2);1863  letter-spacing: 0.04em;1864  transition: color 120ms ease;1865  align-self: flex-start;1866}1867.peach-generate-toggle-link:hover {1868  color: var(--peach-accent);1869}18701871/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */1872.peach-entry-body {1873  flex: 1;1874  overflow-y: auto;1875  overflow-x: hidden;1876  scrollbar-width: none;1877  -ms-overflow-style: none;1878  overscroll-behavior: contain;1879  display: grid;1880  gap: 10px;1881  align-content: start;1882  padding: 10px 20px 14px;1883  min-width: 0;1884  min-height: 0;1885}1886.peach-entry-body::-webkit-scrollbar { display: none; }18871888/* Type-toggle pills (new entry only) */1889.peach-new-type-row {1890  display: flex;1891  gap: 6px;1892  margin-bottom: 2px;1893}1894.peach-new-type-btn {1895  background: transparent;1896  border: 1px solid var(--peach-t3);1897  border-radius: 12px;1898  padding: 3px 10px;1899  font-family: "IBM Plex Mono", monospace;1900  font-size: 9px;1901  letter-spacing: 0.12em;1902  text-transform: uppercase;1903  color: var(--peach-t2);1904  cursor: pointer;1905  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;1906}1907.peach-new-type-btn.is-active {1908  color: var(--peach-t0);1909  border-color: var(--peach-accent);1910  background: rgba(217, 104, 48, 0.08);1911}1912.peach-new-type-btn:not(.is-active):hover {1913  color: var(--peach-t1);1914  border-color: var(--peach-t2);1915}19161917/* Editable title */1918.peach-new-title-wrap { margin: 0 0 2px; }1919.peach-new-title-input {1920  background: transparent;1921  border: none;1922  outline: none;1923  width: 100%;1924  color: var(--peach-t0);1925  font-family: "Cormorant Garamond", Georgia, serif;1926  font-style: italic;1927  font-weight: 400;1928  font-size: 40px;1929  line-height: 0.95;1930  caret-color: var(--peach-accent);1931}1932.peach-new-title-input::placeholder { color: var(--peach-t2); }19331934/* Editable domain field */1935.peach-domain-value--edit {1936  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1937  font-size: 10px;1938  font-style: italic;1939  letter-spacing: 0.12em;1940  color: var(--peach-t1);1941  background: transparent;1942  border: none;1943  border-bottom: 1px solid var(--peach-t3);1944  outline: none;1945  width: 100%;1946  padding: 2px 0;1947  caret-color: var(--peach-accent);1948  transition: border-color 140ms ease, color 140ms ease;1949}1950.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }1951.peach-domain-value--edit:focus {1952  border-bottom-color: rgba(240, 232, 216, 0.28);1953  color: var(--peach-t0);1954}19551956/* Editable field values (username, password, totp) */1957.peach-field-value--edit {1958  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1959  font-size: 13px;1960  color: var(--peach-t0);1961  background: transparent;1962  border: none;1963  border-bottom: 1px solid var(--peach-t3);1964  outline: none;1965  flex: 1;1966  min-width: 0;1967  padding: 3px 0;1968  caret-color: var(--peach-accent);1969  transition: border-color 140ms ease, color 140ms ease;1970}1971.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }1972.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }1973.peach-field-value--edit:focus {1974  border-bottom-color: rgba(240, 232, 216, 0.28);1975  color: var(--peach-t0);1976}19771978/* "+ add optional field" links */1979.peach-entry-add-links {1980  display: flex;1981  gap: 12px;1982  flex-wrap: wrap;1983  margin-top: -2px;1984}1985.peach-add-field-link {1986  background: transparent;1987  border: none;1988  padding: 0;1989  cursor: pointer;1990  font-family: "IBM Plex Mono", monospace;1991  font-size: 9px;1992  letter-spacing: 0.1em;1993  text-transform: uppercase;1994  color: var(--peach-t2);1995  transition: color 140ms ease;1996}1997.peach-add-field-link:hover { color: var(--peach-accent); }19981999/* ── New entry form (legacy classes) ────────────────────────────────── */2000.peach-new-body {2001  flex: 1;2002  overflow-y: auto;2003  padding: 10px 20px 14px;2004}2005.peach-new-name-input {2006  background: transparent;2007  border: none;2008  outline: none;2009  width: 100%;2010  color: var(--peach-t0);2011  font-family: "Cormorant Garamond", Georgia, serif;2012  font-style: italic;2013  font-weight: 400;2014  font-size: 40px;2015  line-height: 0.95;2016  caret-color: var(--peach-accent);2017}2018.peach-new-name-input::placeholder { color: var(--peach-t2); }2019.peach-new-field-input {2020  background: transparent;2021  border: none;2022  outline: none;2023  flex: 1;2024  min-width: 0;2025  caret-color: var(--peach-accent);2026}2027.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }20282029/* ── Canary card ── */2030.peach-canary-card {2031  border: 1px solid rgba(217, 160, 48, 0.2);2032  background: rgba(217, 160, 48, 0.03);2033  border-radius: 8px;2034  padding: 12px;2035}20362037.peach-canary-settings-header {2038  display: flex;2039  align-items: center;2040  justify-content: space-between;2041  cursor: pointer;2042  user-select: none;2043}20442045.peach-canary-card .peach-label {2046  color: rgba(217, 160, 48, 0.85);2047}20482049.peach-canary-card .peach-new-field-input {2050  border-color: rgba(217, 160, 48, 0.25);2051}20522053.peach-canary-card .peach-new-field-input:focus {2054  border-color: rgba(217, 160, 48, 0.5);2055}20562057.peach-canary-body {2058  margin-top: 12px;2059  display: flex;2060  flex-direction: column;2061  gap: 10px;2062}20632064.peach-canary-explainer {2065  display: flex;2066  gap: 10px;2067  padding: 10px 12px;2068  border-radius: 10px;2069  background: rgba(217, 160, 48, 0.06);2070  border: 1px solid rgba(217, 160, 48, 0.22);2071  margin-bottom: 4px;2072}20732074.peach-canary-explainer-icon {2075  font-size: 16px;2076  flex-shrink: 0;2077  line-height: 1.2;2078}20792080.peach-canary-explainer-title {2081  font-family: var(--font-ui);2082  font-size: 11px;2083  font-weight: 500;2084  color: rgba(217, 160, 48, 0.9);2085  margin: 0 0 3px;2086}20872088.peach-canary-explainer-copy {2089  font-family: var(--font-ui);2090  font-size: 10px;2091  color: var(--peach-t2);2092  line-height: 1.55;2093  margin: 0;2094}20952096.peach-canary-hint {2097  font-size: 10px;2098  color: var(--peach-t2);2099  font-family: Inter, system-ui, sans-serif;2100  line-height: 1.5;2101  margin-top: 4px;2102}21032104.peach-canary-actions-row {2105  display: flex;2106  align-items: center;2107  gap: 8px;2108}21092110.peach-canary-test-btn {2111  border-color: rgba(217, 160, 48, 0.3);2112  color: rgba(217, 160, 48, 0.85);2113}21142115.peach-canary-test-result {2116  font-size: 10px;2117  font-family: Inter, system-ui, sans-serif;2118}21192120.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2121.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }21222123.peach-canary-badge {2124  display: flex;2125  position: relative;2126  z-index: 1;2127  align-items: center;2128  gap: 5px;2129  padding: 4px 10px;2130  background: rgba(217, 160, 48, 0.12);2131  border: 1px solid rgba(217, 160, 48, 0.35);2132  border-radius: 6px;2133  margin-bottom: 6px;2134  width: fit-content;2135}21362137.peach-canary-badge-label {2138  font-size: 10px;2139  letter-spacing: 0.06em;2140  color: rgba(217, 160, 48, 0.9);2141  font-family: var(--font-ui);2142  text-transform: uppercase;2143}21442145.peach-canary-badge-icon {2146  font-size: 11px;2147}21482149.peach-canary-suppress-row {2150  display: flex;2151  align-items: center;2152  gap: 8px;2153  padding: 6px 10px;2154  background: rgba(217, 160, 48, 0.08);2155  border-radius: 6px;2156  margin-bottom: 8px;2157}21582159.peach-canary-suppress-label {2160  font-size: 11px;2161  color: rgba(217, 160, 48, 0.85);2162  cursor: pointer;2163  font-family: var(--font-ui);2164  letter-spacing: 0.04em;2165}21662167.peach-regen-panel {2168  position: relative;2169  z-index: 1;2170  background: rgba(217, 104, 48, 0.08);2171  border: 1px solid rgba(217, 104, 48, 0.25);2172  border-radius: 8px;2173  padding: 12px;2174  margin-bottom: 8px;2175}21762177.peach-regen-panel-header {2178  display: flex;2179  align-items: center;2180  justify-content: space-between;2181  margin-bottom: 10px;2182}21832184.peach-regen-panel-title {2185  font-size: 11px;2186  font-weight: 600;2187  letter-spacing: 0.06em;2188  text-transform: uppercase;2189  color: rgba(217, 104, 48, 0.9);2190}21912192.peach-regen-output {2193  background: rgba(0, 0, 0, 0.2);2194  border-radius: 6px;2195  padding: 10px;2196  margin-bottom: 10px;2197  font-family: var(--font-mono);2198  font-size: 13px;2199  word-break: break-all;2200  color: var(--peach-t1);2201}22022203.peach-regen-actions {2204  display: flex;2205  gap: 6px;2206}22072208.peach-regen-actions--spaced {2209  margin-bottom: 8px;2210}22112212.peach-regen-action-grow {2213  flex: 1;2214}22152216.peach-regen-copy-btn {2217  padding: 0 8px;2218}22192220.peach-regen-success {2221  position: relative;2222  z-index: 1;2223  background: rgba(40, 180, 80, 0.1);2224  border: 1px solid rgba(40, 180, 80, 0.3);2225  border-radius: 8px;2226  padding: 10px 12px;2227  margin-bottom: 8px;2228  display: flex;2229  align-items: center;2230  gap: 8px;2231  font-size: 11px;2232  color: rgba(40, 180, 80, 0.9);2233}22342235/* ── Note editor overlay ── */2236.peach-note-editor {2237  position: absolute;2238  inset: 0;2239  z-index: 200;2240  display: flex;2241  flex-direction: column;2242  background:2243    radial-gradient(120% 80% at 0% 0%, rgba(217,104,48,0.07) 0%, transparent 65%),2244    var(--peach-bg);2245  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2246}22472248.peach-note-editor-header {2249  display: flex;2250  align-items: center;2251  gap: 10px;2252  padding: 14px 16px 10px;2253  border-bottom: 1px solid var(--peach-t3);2254  flex-shrink: 0;2255}22562257.peach-note-editor-back {2258  background: transparent;2259  border: none;2260  cursor: pointer;2261  color: var(--peach-t2);2262  padding: 4px 6px;2263  border-radius: 6px;2264  display: flex;2265  align-items: center;2266  transition: color 120ms ease, background 120ms ease;2267  flex-shrink: 0;2268}2269.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }22702271.peach-note-editor-label {2272  flex: 1;2273  font-family: "Cormorant Garamond", "Times New Roman", serif;2274  font-style: italic;2275  font-size: 15px;2276  color: var(--peach-t1);2277  letter-spacing: 0.02em;2278}22792280.peach-note-editor-save-btn {2281  background: transparent;2282  border: 1px solid rgba(217, 104, 48, 0.4);2283  border-radius: 8px;2284  color: var(--peach-accent);2285  font-family: "IBM Plex Mono", monospace;2286  font-size: 10px;2287  letter-spacing: 0.06em;2288  text-transform: uppercase;2289  padding: 3px 10px;2290  cursor: pointer;2291  transition: background 120ms ease, border-color 120ms ease;2292}2293.peach-note-editor-save-btn:hover:not(:disabled) {2294  background: rgba(217, 104, 48, 0.1);2295  border-color: rgba(217, 104, 48, 0.65);2296}2297.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }22982299.peach-note-toolbar {2300  display: flex;2301  align-items: center;2302  gap: 3px;2303  padding: 6px 14px 5px;2304  border-bottom: 1px solid var(--peach-t3);2305  flex-shrink: 0;2306}23072308.peach-note-tool-btn {2309  background: transparent;2310  border: 1px solid transparent;2311  border-radius: 5px;2312  color: var(--peach-t2);2313  font-family: "IBM Plex Mono", monospace;2314  font-size: 10px;2315  letter-spacing: 0.04em;2316  padding: 2px 8px;2317  cursor: pointer;2318  line-height: 1.6;2319  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2320}2321.peach-note-tool-btn:hover {2322  background: var(--peach-t4);2323  color: var(--peach-t0);2324  border-color: var(--peach-t3);2325}23262327.peach-note-tool-bold {2328  font-weight: 700;2329  font-family: Inter, system-ui, sans-serif;2330  font-size: 11px;2331}2332.peach-note-tool-italic {2333  font-style: italic;2334  font-family: "Cormorant Garamond", serif;2335  font-size: 14px;2336  padding: 1px 7px;2337}23382339.peach-note-tool-divider {2340  width: 1px;2341  height: 14px;2342  background: var(--peach-t3);2343  margin: 0 4px;2344  flex-shrink: 0;2345}23462347.peach-note-editor-body {2348  flex: 1;2349  overflow-y: auto;2350  padding: 16px 20px 20px;2351  outline: none;2352  font-family: "Cormorant Garamond", "Times New Roman", serif;2353  font-size: 16px;2354  line-height: 1.75;2355  color: var(--peach-t0);2356  scrollbar-width: none;2357  word-break: break-word;2358}2359.peach-note-editor-body:empty::before {2360  content: "write your note…";2361  color: var(--peach-t3);2362  font-style: italic;2363  pointer-events: none;2364}23652366/* Inline variant (Add.tsx) */2367.peach-note-editor-inline {2368  border: 1px solid var(--peach-t3);2369  border-radius: 8px;2370  overflow: hidden;2371}2372.peach-note-editor-inline .peach-note-toolbar {2373  border-bottom: 1px solid var(--peach-t3);2374  background: var(--peach-t4);2375  padding: 5px 10px 4px;2376}2377.peach-note-editor-body--inline {2378  min-height: 140px;2379  max-height: 200px;2380  font-size: 15px;2381  padding: 10px 14px 12px;2382  background: var(--peach-t4);2383}23842385/* font size elements from execCommand */2386.peach-note-editor-body font[size="1"],2387.peach-note-content font[size="1"] { font-size: 11px; line-height: 1.6; }2388.peach-note-editor-body font[size="2"],2389.peach-note-content font[size="2"] { font-size: 13px; }2390.peach-note-editor-body font[size="3"],2391.peach-note-content font[size="3"] { font-size: 16px; }2392.peach-note-editor-body font[size="4"],2393.peach-note-content font[size="4"] { font-size: 20px; }2394.peach-note-editor-body font[size="5"],2395.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }23962397/* bold / italic inside the editor and note display */2398.peach-note-editor-body b, .peach-note-editor-body strong,2399.peach-note-content b, .peach-note-content strong { font-weight: 700; }2400.peach-note-editor-body em, .peach-note-editor-body i,2401.peach-note-content em, .peach-note-content i { font-style: italic; }24022403/* note display — rendered HTML, no pre-wrap */2404.peach-note-content {2405  overflow: auto;2406  max-height: 340px;2407  word-break: break-word;2408}24092410/* ── Note textarea ── */2411.peach-note-textarea {2412  width: 100%;2413  min-height: 180px;2414  max-height: 280px;2415  resize: vertical;2416  background: var(--peach-t4);2417  border: 1px solid var(--peach-t3);2418  border-radius: 8px;2419  padding: 10px 12px;2420  font-family: "IBM Plex Mono", monospace;2421  font-size: 12px;2422  line-height: 1.7;2423  color: var(--peach-t1);2424  outline: none;2425  transition: border-color 150ms ease;2426}24272428.peach-note-textarea:focus {2429  border-color: var(--peach-t2);2430}24312432.peach-note-char-count {2433  font-family: "IBM Plex Mono", monospace;2434  font-size: 9px;2435  color: var(--peach-t3);2436  text-align: right;2437  margin-top: 4px;2438  letter-spacing: 0.1em;2439}24402441/* ── Field input baseline ── */2442.peach-new-field-input {2443  width: 100%;2444  background: transparent;2445  border: none;2446  border-bottom: 1px solid var(--peach-t3);2447  padding: 4px 0;2448  color: var(--peach-t1);2449  font-family: "IBM Plex Mono", monospace;2450  font-size: 13px;2451  outline: none;2452  transition: border-color 150ms ease;2453}24542455.peach-new-field-input:focus {2456  border-bottom-color: var(--peach-t0);2457  color: var(--peach-t0);2458}24592460.peach-new-name-input {2461  width: 100%;2462  background: transparent;2463  border: none;2464  border-bottom: 1px solid var(--peach-t3);2465  padding: 6px 0;2466  font-family: "Cormorant Garamond", Georgia, serif;2467  font-style: italic;2468  font-size: 28px;2469  color: var(--peach-t0);2470  outline: none;2471  transition: border-color 150ms ease;2472}24732474.peach-new-name-input:focus {2475  border-bottom-color: var(--peach-t1);2476}24772478.peach-new-name-input::placeholder {2479  color: var(--peach-t2);2480  font-style: italic;2481}24822483.peach-new-field-input::placeholder {2484  color: var(--peach-t3);2485}24862487/* ── Demo entrance animation ── */2488#hd-shell {2489  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;2490}2491@keyframes hd-shell-enter {2492  from { opacity: 0; transform: scale(0.96) translateY(16px); }2493  to   { opacity: 1; transform: scale(1) translateY(0); }2494}24952496/* ── Keyframes ── */2497@keyframes peach-char-enter {2498  from { opacity: 0; transform: translateY(0.22em); }2499  to   { opacity: 1; transform: translateY(0); }2500}2501@keyframes peach-content-enter {2502  from { opacity: 0.96; transform: translateY(4px); }2503  to   { opacity: 1; transform: translateY(0); }2504}2505@keyframes peach-content-exit {2506  from { opacity: 1; transform: translateY(0); }2507  to   { opacity: 0.92; transform: translateY(-3px); }2508}2509@keyframes peach-screen-enter {2510  from { opacity: 0; transform: translateY(14px); }2511  to   { opacity: 1; transform: translateY(0); }2512}2513@keyframes peach-shell-fade-in {2514  from { opacity: 0; }2515  to   { opacity: 1; }2516}2517@keyframes peach-veil-in {2518  from { opacity: 0; }2519  to   { opacity: 1; }2520}2521@keyframes peach-lock-settle {2522  0%   { transform: scale(0.9); }2523  65%  { transform: scale(1.08); }2524  100% { transform: scale(1); }2525}2526@keyframes peach-copy-confirm {2527  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2528  to   { color: var(--peach-accent); border-color: rgba(217,104,48,0.42); background-color: rgba(217,104,48,0.09); box-shadow: 0 0 18px rgba(217,104,48,0.22), inset 0 0 18px rgba(217,104,48,0.12); }2529}2530@keyframes peach-copy-retreat {2531  from { color: var(--peach-accent); border-color: rgba(217,104,48,0.42); background-color: rgba(217,104,48,0.09); box-shadow: 0 0 18px rgba(217,104,48,0.22), inset 0 0 18px rgba(217,104,48,0.12); }2532  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2533}2534@keyframes peach-copy-flood {2535  from { opacity: 0; transform: scaleX(0.15); }2536  to   { opacity: 1; transform: scaleX(1); }2537}2538@keyframes peach-copy-icon-settle {2539  from  { transform: scale(0.84); }2540  70%   { transform: scale(1.08); }2541  to    { transform: scale(1); }2542}2543@keyframes peach-copy-sheen-retreat {2544  from { opacity: 1; transform: scaleX(1); }2545  to   { opacity: 0; transform: scaleX(0.15); }2546}2547@keyframes peach-copy-drain {2548  from { width: 100%; }2549  to   { width: 0; }2550}2551@keyframes peach-shake {2552  0%, 100% { transform: translateX(0); }2553  20%      { transform: translateX(-6px); }2554  40%      { transform: translateX(6px); }2555  60%      { transform: translateX(-4px); }2556  80%      { transform: translateX(4px); }2557}25582559@keyframes pip-pulse {2560  0% { transform: scale(1); }2561  40% { transform: scale(2.2); }2562  100% { transform: scale(1); }2563}256425652566/* ── Password generator ── */2567.peach-pwgen-body {2568  flex: 1; overflow-y: auto;2569  display: flex; flex-direction: column;2570}2571.peach-policy-badge {2572  display: flex; align-items: center;2573  padding: 6px 20px 0;2574  font-size: 10px; font-family: Inter, sans-serif;2575  color: var(--peach-t2); letter-spacing: 0.04em;2576}2577.peach-pwgen-display {2578  padding: 14px 20px 12px;2579  border-bottom: 1px solid var(--peach-t3);2580  display: flex; align-items: flex-start; gap: 10px;2581}2582.peach-pwgen-display-row {2583  display: flex;2584  align-items: flex-start;2585  gap: 8px;2586  padding-bottom: 8px;2587  border-bottom: 1px solid var(--peach-t3);2588}2589.peach-pwgen-output {2590  flex: 1; min-width: 0; margin: 0;2591  font-family: "IBM Plex Mono", monospace;2592  font-size: 13px; color: var(--peach-t0);2593  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;2594  white-space: normal;2595  padding: 10px 12px;2596  background: var(--peach-t4);2597  border-radius: 6px;2598  min-height: 36px;2599}2600.peach-pwgen-output-display {2601  flex: 1;2602  min-width: 0;2603  margin: 0;2604  font-family: "Cormorant Garamond", "Times New Roman", serif;2605  font-style: italic;2606  font-weight: 300;2607  font-size: 32px;2608  line-height: 1.05;2609  color: var(--peach-t0);2610  word-break: break-all;2611  overflow-wrap: break-word;2612  white-space: normal;2613  letter-spacing: 0.02em;2614}2615.peach-pwgen-display-actions {2616  display: flex;2617  flex-direction: column;2618  gap: 4px;2619  flex-shrink: 0;2620  margin-top: 2px;2621}2622.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }2623.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }2624.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }2625.peach-pwgen-len-num {2626  font-family: "IBM Plex Mono", monospace;2627  font-size: 12px; color: var(--peach-accent);2628}2629.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }2630.peach-pwgen-toggles { display: flex; flex-direction: column; }2631.peach-pwgen-charset-pills {2632  display: flex;2633  gap: 6px;2634  flex-wrap: wrap;2635}2636.peach-pwgen-pill {2637  padding: 4px 11px;2638  border-radius: 999px;2639  border: 1px solid var(--peach-t3);2640  background: transparent;2641  color: var(--peach-t2);2642  font-family: "IBM Plex Mono", monospace;2643  font-size: 9px;2644  letter-spacing: 0.08em;2645  cursor: pointer;2646  transition: all 150ms ease;2647}2648.peach-pwgen-pill.is-on {2649  border-color: rgba(217, 104, 48, 0.5);2650  background: rgba(217, 104, 48, 0.1);2651  color: var(--peach-accent);2652}2653.peach-pwgen-pill:not(.is-on):hover {2654  color: var(--peach-t1);2655  border-color: var(--peach-t2);2656}2657.peach-pwgen-use-btn {2658  width: 100%;2659  min-height: 34px;2660  border-radius: 8px;2661  margin-top: 2px;2662}2663.peach-pwgen-toggle-row {2664  display: flex; align-items: center; justify-content: space-between;2665  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);2666}2667.peach-pwgen-toggle-row:last-child { border-bottom: none; }2668.peach-pwgen-toggle-label { font-size: 13px; color: var(--peach-t1); }26692670.peach-screen-prelock {2671  z-index: 10;2672}26732674.prelock-form {2675  display: grid;2676  gap: 12px;2677}26782679/* Peach popup should not expose native scrollbars on internal panels. */2680.peach-settings-body,2681.peach-new-body,2682.peach-pwgen-body,2683.lock-screen,2684.peach-import-preview {2685  scrollbar-width: none;2686  -ms-overflow-style: none;2687  overscroll-behavior: contain;2688}2689.peach-settings-body::-webkit-scrollbar,2690.peach-new-body::-webkit-scrollbar,2691.peach-pwgen-body::-webkit-scrollbar,2692.lock-screen::-webkit-scrollbar,2693.peach-import-preview::-webkit-scrollbar {2694  width: 0;2695  height: 0;2696  display: none;2697}26982699.lock-screen {2700  height: 100%;2701  min-height: 100%;2702  overflow-y: auto;2703  padding: 18px 18px 16px;2704  gap: 14px;2705  grid-template-rows: auto auto auto 1fr auto;2706  align-content: stretch;2707  position: relative;2708  isolation: isolate;2709}2710.peach-screen.lock-screen--vault-stage {2711  display: flex;2712  flex-direction: column;2713  justify-content: flex-start;2714  gap: 18px;2715  padding: 20px 18px 18px;2716  overflow: hidden;2717}2718.peach-screen.lock-screen--vault-stage .peach-lock-panel {2719  margin-top: auto;2720}2721.lock-screen--onboarding {2722  display: flex;2723  flex-direction: column;2724  gap: 12px;2725  justify-content: flex-start;2726}27272728.lock-screen::before {2729  content: "";2730  position: absolute;2731  inset: 12px 18px auto auto;2732  width: 160px;2733  height: 160px;2734  border-radius: 999px;2735  background:2736    radial-gradient(circle at 50% 50%, rgba(217, 104, 48, 0.18) 0%, rgba(217, 104, 48, 0.06) 42%, transparent 72%);2737  filter: blur(6px);2738  opacity: 0.7;2739  pointer-events: none;2740  z-index: 0;2741}27422743.lock-screen-header {2744  display: flex;2745  align-items: center;2746  justify-content: space-between;2747  position: relative;2748  z-index: 1;2749}27502751.lock-password-input.shake {2752  animation: peach-shake 300ms ease-in-out;2753}27542755.peach-hint-error {2756  color: rgba(220, 80, 60, 0.92);2757}27582759.peach-onboarding-headline {2760  margin: 0;2761  font-family: "Cormorant Garamond", "Times New Roman", serif;2762  font-size: 35px;2763  line-height: 0.88;2764  font-style: italic;2765  font-weight: 400;2766  max-width: 252px;2767}27682769.peach-lock-copy {2770  display: grid;2771  gap: 8px;2772  position: relative;2773  z-index: 1;2774}27752776.peach-lock-copy--onboarding {2777  gap: 10px;2778}27792780.peach-lock-hero {2781  position: relative;2782  z-index: 1;2783  display: grid;2784  gap: 8px;2785  min-height: 0;2786  padding: 4px 2px 0;2787  border: none;2788  border-radius: 0;2789  background: transparent;2790  box-shadow: none;2791}2792.peach-lock-hero-art {2793  position: absolute;2794  right: -8px;2795  top: -6px;2796  width: 120px;2797  height: 120px;2798  display: flex;2799  align-items: center;2800  justify-content: center;2801  pointer-events: none;2802  opacity: 0.12;2803  filter: saturate(0.9);2804}2805.peach-lock-hero-mark {2806  width: 100%;2807  height: 100%;2808}2809.peach-lock-hero-mark path:first-child {2810  fill: rgba(217, 104, 48, 0.92);2811}2812.peach-lock-hero-mark path:nth-child(2),2813.peach-lock-hero-mark path:nth-child(3) {2814  stroke: rgba(123, 144, 96, 0.88);2815  fill: rgba(123, 144, 96, 0.88);2816}2817.peach-lock-hero > *:not(.peach-lock-hero-art) {2818  position: relative;2819  z-index: 1;2820}28212822.peach-lock-eyebrow {2823  display: inline-flex;2824  align-items: center;2825  width: fit-content;2826  padding: 4px 9px;2827  border-radius: 999px;2828  border: 1px solid rgba(217, 104, 48, 0.22);2829  background: rgba(217, 104, 48, 0.08);2830  color: var(--peach-t0);2831  font-family: "IBM Plex Mono", monospace;2832  font-size: 8px;2833  letter-spacing: 0.18em;2834  text-transform: uppercase;2835}28362837.peach-lock-label-row {2838  display: flex;2839  align-items: center;2840  justify-content: space-between;2841  margin-bottom: 0;2842}28432844.peach-lock-reveal-btn {2845  display: inline-flex;2846  align-items: center;2847  gap: 4px;2848  background: none;2849  border: none;2850  cursor: pointer;2851  font-family: "IBM Plex Mono", monospace;2852  font-size: 9px;2853  letter-spacing: 0.06em;2854  color: var(--peach-t2);2855  padding: 2px 0;2856  transition: color 150ms ease;2857}28582859.peach-lock-reveal-btn:hover {2860  color: var(--peach-t1);2861}28622863.peach-lock-warning {2864  color: rgba(220, 80, 60, 0.85) !important;2865  line-height: 1.5;2866}28672868.peach-onboarding-cards {2869  display: grid;2870  gap: 8px;2871  position: relative;2872  z-index: 1;2873}28742875.peach-lock-panel {2876  position: relative;2877  z-index: 1;2878  display: grid;2879  gap: 9px;2880  padding: 14px 16px 15px;2881  border-radius: 18px;2882  border: 1px solid var(--peach-t3);2883  background:2884    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));2885  box-shadow:2886    inset 0 1px 0 rgba(240, 232, 216, 0.04),2887    0 12px 28px rgba(0, 0, 0, 0.12);2888}28892890.peach-lock-panel--secondary {2891  gap: 12px;2892}28932894.peach-lock-panel-header {2895  display: flex;2896  align-items: baseline;2897  justify-content: space-between;2898  gap: 12px;2899}29002901.peach-lock-option-grid {2902  display: grid;2903  gap: 10px;2904}29052906.peach-lock-option {2907  width: 100%;2908  display: grid;2909  gap: 6px;2910  padding: 14px 15px;2911  border-radius: 16px;2912  border: 1px solid rgba(240, 232, 216, 0.08);2913  background: rgba(240, 232, 216, 0.02);2914  color: var(--peach-t0);2915  text-align: left;2916  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;2917}29182919.peach-lock-option:hover {2920  border-color: rgba(217, 104, 48, 0.28);2921  background: rgba(240, 232, 216, 0.04);2922  transform: translateY(-1px);2923}29242925.peach-lock-option-title {2926  font-size: 12px;2927  color: var(--peach-t0);2928}29292930.peach-lock-option-copy {2931  font-size: 11px;2932  line-height: 1.55;2933  color: var(--peach-t1);2934}29352936.peach-onboarding-stack {2937  margin-top: 2px;2938}2939.peach-lock-panel-footer {2940  display: grid;2941  gap: 6px;2942  margin-top: 2px;2943  padding-top: 10px;2944  border-top: 1px solid rgba(240, 232, 216, 0.06);2945}29462947/* Restore picker panel — method option cards */2948.peach-lock-panel--restore {2949  gap: 10px;2950}2951.peach-lock-option--history {2952  border-color: rgba(240, 232, 216, 0.06);2953  opacity: 0.85;2954}29552956/* Snapshot restore panel */2957.peach-snapshot-panel {2958  gap: 10px;2959  overflow-y: auto;2960  max-height: 340px;2961}2962.peach-snapshot-list {2963  display: flex;2964  flex-direction: column;2965  gap: 4px;2966}2967.peach-snapshot-row {2968  display: flex;2969  align-items: center;2970  justify-content: space-between;2971  width: 100%;2972  padding: 8px 10px;2973  border-radius: 8px;2974  border: 1px solid rgba(240, 232, 216, 0.07);2975  background: transparent;2976  cursor: pointer;2977  transition: border-color 120ms, background 120ms;2978  text-align: left;2979  gap: 8px;2980}2981.peach-snapshot-row:hover {2982  border-color: rgba(240, 232, 216, 0.14);2983  background: rgba(240, 232, 216, 0.03);2984}2985.peach-snapshot-row.is-selected {2986  border-color: rgba(217, 104, 48, 0.4);2987  background: rgba(217, 104, 48, 0.07);2988}2989.peach-snapshot-time {2990  font-size: 11.5px;2991  color: var(--peach-t0);2992  flex: 1;2993}2994.peach-snapshot-count {2995  font-family: "IBM Plex Mono", monospace;2996  font-size: 10px;2997  color: var(--peach-t2);2998  flex-shrink: 0;2999}3000.peach-snapshot-confirm {3001  display: flex;3002  flex-direction: column;3003  gap: 8px;3004  padding-top: 10px;3005  border-top: 1px solid rgba(240, 232, 216, 0.06);3006}3007.peach-snapshot-warning {3008  display: flex;3009  align-items: flex-start;3010  gap: 6px;3011  font-size: 10.5px;3012  color: rgba(220, 80, 60, 0.85);3013  line-height: 1.55;3014}3015.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3016.peach-snapshot-confirm-row {3017  display: flex;3018  gap: 6px;3019  align-items: center;3020}3021.peach-snapshot-restore-btn {3022  width: 100%;3023}3024.peach-lock-hero--unlock .peach-lock-hero-art {3025  width: 112px;3026  height: 112px;3027  right: 0;3028  top: 2px;3029  opacity: 0.1;3030}30313032.peach-card {3033  border: 1px solid var(--peach-t3);3034  border-radius: 18px;3035  background:3036    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3037  box-shadow:3038    inset 0 1px 0 rgba(240, 232, 216, 0.04),3039    0 12px 32px rgba(0, 0, 0, 0.14);3040  overflow: hidden;3041}30423043.peach-card-active {3044  border-color: rgba(217, 104, 48, 0.35);3045  box-shadow:3046    inset 0 1px 0 rgba(240, 232, 216, 0.05),3047    0 16px 38px rgba(0, 0, 0, 0.18),3048    0 0 0 1px rgba(217, 104, 48, 0.08);3049}30503051.peach-card-disabled {3052  opacity: 0.72;3053}30543055.peach-card-header {3056  width: 100%;3057  padding: 13px 16px 11px;3058  background: transparent;3059  color: var(--peach-t0);3060  display: flex;3061  justify-content: space-between;3062  align-items: center;3063  text-align: left;3064  font-size: 12px;3065}30663067.peach-card-body {3068  padding: 0 16px 16px;3069  display: grid;3070  gap: 9px;3071}30723073.peach-card-tag {3074  color: var(--peach-t2);3075  font-family: "IBM Plex Mono", monospace;3076  font-size: 9px;3077  letter-spacing: 0.12em;3078  text-transform: uppercase;3079}30803081.peach-empty-copy {3082  display: grid;3083  gap: 6px;3084  color: var(--peach-t1);3085  font-size: 13px;3086}30873088.peach-lock-submit {3089  width: 100%;3090  box-shadow: 0 14px 36px rgba(217, 104, 48, 0.22);3091}30923093.peach-lock-secondary {3094  width: 100%;3095  border-color: var(--peach-t3);3096  background: rgba(240, 232, 216, 0.02);3097}30983099.peach-lock-secondary:hover {3100  background: rgba(240, 232, 216, 0.04);3101}31023103.peach-lock-note {3104  max-width: none;3105  line-height: 1.55;3106  margin: 0;3107}31083109.peach-overlay-action {3110  font-size: 10px;3111  padding: 4px 8px;3112  letter-spacing: 0.06em;3113  min-width: 44px;3114  text-align: center;3115}31163117.peach-overlay-spacer {3118  width: 32px;3119}31203121.peach-inline-action {3122  flex-shrink: 0;3123  font-size: 9px;3124  letter-spacing: 0.1em;3125  text-transform: uppercase;3126  padding: 4px 7px;3127}3128.peach-password-toggle-btn {3129  display: inline-flex;3130  align-items: center;3131  justify-content: center;3132  min-width: 30px;3133  min-height: 26px;3134  padding: 0 7px;3135  border: 1px solid var(--peach-t3);3136  border-radius: 999px;3137  background: rgba(240, 232, 216, 0.04);3138  color: var(--peach-t2);3139  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;3140}3141.peach-password-toggle-btn:hover {3142  border-color: var(--peach-t2);3143  color: var(--peach-t0);3144  background: rgba(240, 232, 216, 0.06);3145}31463147.peach-new-textarea {3148  width: 100%;3149  min-height: 88px;3150  resize: vertical;3151  border: 0;3152  outline: none;3153  background: transparent;3154  color: var(--peach-t1);3155  font-family: "IBM Plex Mono", monospace;3156  font-size: 12px;3157  line-height: 1.65;3158  caret-color: var(--peach-accent);3159}31603161.peach-new-textarea::placeholder {3162  color: var(--peach-t2);3163  opacity: 0.7;3164}31653166.peach-settings-actions {3167  display: grid;3168  gap: 8px;3169}31703171.peach-sync-section-label {3172  font-size: 11px;3173  color: var(--peach-t2);3174  text-transform: uppercase;3175  letter-spacing: 0.05em;3176}31773178.peach-sync-device-row {3179  display: flex;3180  justify-content: space-between;3181  align-items: center;3182  padding: 6px 0;3183  border-bottom: 1px solid var(--peach-t3);3184}31853186.peach-sync-device-info {3187  display: flex;3188  flex-direction: column;3189  gap: 2px;3190}31913192.peach-sync-device-name {3193  font-size: 13px;3194  color: var(--peach-t0);3195}31963197.peach-sync-device-meta {3198  font-size: 11px;3199  color: var(--peach-t2);3200}32013202.peach-sync-status-dot {3203  display: inline-block;3204  width: 8px;3205  height: 8px;3206  border-radius: 50%;3207  vertical-align: middle;3208}32093210.peach-sync-remove-btn {3211  color: var(--peach-breach);3212}32133214.peach-import-preview {3215  margin-bottom: 12px;3216  max-height: 152px;3217  overflow-y: auto;3218  border: 1px solid var(--peach-t3);3219  border-radius: 10px;3220  padding: 8px 10px;3221  display: grid;3222  gap: 8px;3223  background: rgba(240, 232, 216, 0.02);3224}32253226.peach-import-preview-row {3227  display: flex;3228  justify-content: space-between;3229  gap: 10px;3230  font-size: 11px;3231  color: var(--peach-t1);3232}32333234.peach-import-preview-title {3235  color: var(--peach-t0);3236  flex: 1;3237  min-width: 0;3238  overflow: hidden;3239  text-overflow: ellipsis;3240  white-space: nowrap;3241}32423243.peach-import-preview-meta {3244  color: var(--peach-t2);3245  flex-shrink: 0;3246  max-width: 42%;3247  overflow: hidden;3248  text-overflow: ellipsis;3249  white-space: nowrap;3250}32513252.peach-import-preview-more {3253  color: var(--peach-t2);3254  font-size: 10px;3255}32563257.peach-restore-copy {3258  margin: 0;3259  color: var(--peach-t1);3260  font-size: 11px;3261  line-height: 1.6;3262}32633264.peach-restore-warning {3265  padding: 10px 12px;3266  border-radius: 12px;3267  border: 1px solid rgba(220, 80, 60, 0.22);3268  background: rgba(220, 80, 60, 0.08);3269  color: rgba(240, 232, 216, 0.86);3270  font-size: 11px;3271  line-height: 1.55;3272}32733274.peach-provider-chips {3275  display: flex;3276  flex-wrap: wrap;3277  gap: 6px;3278}32793280.peach-provider-chip {3281  display: inline-flex;3282  align-items: center;3283  padding: 5px 8px;3284  border-radius: 999px;3285  border: 1px solid var(--peach-t3);3286  background: rgba(240, 232, 216, 0.02);3287  color: var(--peach-t1);3288  font-family: "IBM Plex Mono", monospace;3289  font-size: 8px;3290  letter-spacing: 0.08em;3291  text-transform: uppercase;3292}32933294.peach-restore-file,3295.peach-restore-input {3296  width: 100%;3297  border-radius: 10px;3298  border: 1px solid var(--peach-t3);3299  background: var(--peach-s2);3300  color: var(--peach-t0);3301  font-size: 12px;3302}33033304.peach-restore-file {3305  padding: 9px 10px;3306}33073308.peach-restore-file::file-selector-button {3309  margin-right: 10px;3310  padding: 7px 10px;3311  border: 1px solid rgba(217, 104, 48, 0.28);3312  border-radius: 999px;3313  background: rgba(217, 104, 48, 0.08);3314  color: var(--peach-t0);3315  font-size: 10px;3316  letter-spacing: 0.08em;3317  text-transform: uppercase;3318  cursor: pointer;3319}33203321.peach-restore-input {3322  padding: 10px 12px;3323}33243325.peach-auth-grid {3326  display: grid;3327  gap: 10px;3328}33293330.peach-import-summary {3331  color: var(--peach-t1);3332  font-size: 12px;3333  line-height: 1.6;3334  margin-bottom: 12px;3335}33363337.peach-restore-error {3338  color: rgba(220, 80, 60, 0.95);3339  font-size: 12px;3340  line-height: 1.55;3341}33423343.peach-cjk-qr-panel {3344  margin-top: 14px;3345  padding: 12px;3346  border-radius: 16px;3347  border: 1px solid var(--peach-t3);3348  background: rgba(240, 232, 216, 0.02);3349  display: grid;3350  gap: 10px;3351}33523353.peach-cjk-qr-frame {3354  display: grid;3355  place-items: center;3356  min-height: 212px;3357  border-radius: 14px;3358  background: #fff;3359  overflow: hidden;3360}33613362.peach-cjk-qr-frame svg {3363  display: block;3364  width: 196px;3365  height: 196px;3366}33673368.peach-cjk-qr-error,3369.peach-cjk-qr-caption {3370  color: var(--peach-t1);3371  font-size: 11px;3372  line-height: 1.55;3373}33743375.peach-cjk-qr-card {3376  max-width: 400px;3377  margin: auto;3378}33793380.peach-cjk-qr-body {3381  padding: 0 20px 20px;3382  text-align: center;3383}33843385.peach-cjk-qr-hint {3386  font-size: 11px;3387  color: var(--peach-t2);3388  margin: 0 0 14px;3389}33903391.peach-cjk-qr-image {3392  border-radius: 4px;3393  display: block;3394  margin: 0 auto;3395  width: 100%;3396  max-width: 320px;3397  height: auto;3398}33993400.peach-pro-badge {3401  padding: 2px 6px;3402  border-radius: 999px;3403  font-family: var(--font-ui);3404  font-size: 10px;3405  letter-spacing: 0.08em;3406  text-transform: uppercase;3407  background: rgba(217, 104, 48, 0.14);3408  color: var(--peach-accent);3409}34103411.peach-loading {3412  position: absolute;3413  inset: 0;3414  display: flex;3415  align-items: center;3416  justify-content: center;3417  background: var(--bg);3418  animation: peach-loading-pulse 1.2s ease-in-out infinite;3419}34203421@keyframes peach-loading-pulse {3422  0%, 100% { opacity: 0.6; }3423  50% { opacity: 1; }3424}34253426/* ── Health Dashboard ─────────────────────────────────────────────────── */3427.peach-health-body {3428  flex: 1;3429  overflow-y: auto;3430  display: flex;3431  flex-direction: column;3432}34333434.peach-health-summary {3435  padding: 10px 16px 6px;3436  font-family: "IBM Plex Mono", monospace;3437  font-size: 11px;3438}3439.peach-health-summary-warn { color: rgba(220,80,60,0.9); }3440.peach-health-summary-ok { color: var(--peach-t2); }34413442.peach-health-check-row {3443  padding: 0 16px 10px;3444}3445.peach-health-check-btn {3446  width: 100%;3447  display: flex;3448  align-items: center;3449  justify-content: center;3450}34513452.peach-health-sections {3453  flex: 1;3454  display: flex;3455  flex-direction: column;3456}34573458.peach-health-section {3459  border-bottom: 1px solid var(--peach-t3);3460}34613462.peach-health-section-header {3463  width: 100%;3464  display: flex;3465  align-items: center;3466  justify-content: space-between;3467  padding: 9px 16px;3468  background: transparent;3469  cursor: pointer;3470  color: var(--peach-t0);3471}34723473.peach-health-section-title-row {3474  display: flex;3475  align-items: center;3476  gap: 8px;3477}34783479.peach-health-count-badge {3480  display: inline-flex;3481  align-items: center;3482  justify-content: center;3483  min-width: 20px;3484  height: 18px;3485  padding: 0 5px;3486  border-radius: 999px;3487  background: rgba(220,80,60,0.15);3488  border: 1px solid rgba(220,80,60,0.25);3489  font-family: "IBM Plex Mono", monospace;3490  font-size: 9px;3491  color: rgba(220,80,60,0.9);3492}34933494.peach-health-section-title {3495  font-family: "IBM Plex Mono", monospace;3496  font-size: 11px;3497  text-transform: uppercase;3498  letter-spacing: 0.1em;3499  color: var(--peach-t1);3500}35013502.peach-health-chevron {3503  color: var(--peach-t2);3504  transition: transform 200ms ease;3505  flex-shrink: 0;3506}3507.peach-health-chevron.is-expanded {3508  transform: rotate(180deg);3509}35103511.peach-health-section-body {3512  padding: 0 16px 10px;3513  display: flex;3514  flex-direction: column;3515  gap: 4px;3516}35173518.peach-health-row {3519  display: flex;3520  align-items: flex-start;3521  justify-content: space-between;3522  gap: 8px;3523  padding: 6px 8px;3524  border-radius: 8px;3525  background: rgba(240,232,216,0.02);3526}35273528.peach-health-row-info {3529  flex: 1;3530  min-width: 0;3531  display: flex;3532  flex-direction: column;3533  gap: 2px;3534}35353536.peach-health-row-name {3537  font-family: "Cormorant Garamond", serif;3538  font-size: 15px;3539  font-style: italic;3540  font-weight: 400;3541  color: var(--peach-t0);3542  white-space: nowrap;3543  overflow: hidden;3544  text-overflow: ellipsis;3545}35463547.peach-health-row-meta {3548  font-family: "IBM Plex Mono", monospace;3549  font-size: 9px;3550  color: var(--peach-t2);3551  letter-spacing: 0.05em;3552}35533554.peach-health-fix-btn {3555  font-size: 9px;3556  letter-spacing: 0.08em;3557  text-transform: uppercase;3558  padding: 4px 7px;3559  flex-shrink: 0;3560  display: flex;3561  align-items: center;3562}35633564.peach-health-empty {3565  font-family: "IBM Plex Mono", monospace;3566  font-size: 10px;3567  color: var(--peach-t2);3568  padding: 6px 0;3569}35703571.peach-health-loading {3572  font-family: "IBM Plex Mono", monospace;3573  font-size: 10px;3574  color: var(--peach-t2);3575  padding: 6px 0;3576  display: flex;3577  align-items: center;3578  gap: 6px;3579}35803581.peach-health-loading::before {3582  content: "";3583  width: 10px;3584  height: 10px;3585  border: 1.5px solid var(--peach-t3);3586  border-top-color: var(--peach-accent);3587  border-radius: 50%;3588  animation: peach-spin 600ms linear infinite;3589}35903591@keyframes peach-spin {3592  to { transform: rotate(360deg); }3593}35943595.peach-spinner {3596  width: 32px;3597  height: 32px;3598  border: 2px solid var(--peach-s2);3599  border-top-color: var(--peach-accent);3600  border-radius: 50%;3601  margin: 0 auto 16px;3602  animation: peach-spin 0.8s linear infinite;3603}36043605.peach-progress-screen {3606  text-align: center;3607  padding: 32px 16px;3608}36093610.peach-progress-screen-title {3611  font-size: 13px;3612  color: var(--peach-t0);3613  margin-bottom: 16px;3614}36153616.peach-progress-screen-stage {3617  font-size: 11px;3618  color: var(--peach-t2);3619  min-height: 14px;3620}36213622.peach-progress-screen-note {3623  font-size: 10px;3624  color: var(--peach-t2);3625  margin-top: 8px;3626}36273628.peach-pairing-body {3629  flex: 1;3630  overflow-y: auto;3631  display: flex;3632  flex-direction: column;3633}36343635.peach-pairing-content {3636  flex: 1;3637  display: flex;3638  flex-direction: column;3639  align-items: center;3640  justify-content: center;3641  gap: 14px;3642  padding: 28px 20px;3643  text-align: center;3644}36453646.peach-pairing-headline {3647  font-family: var(--font-display);3648  font-style: italic;3649  font-weight: 300;3650  font-size: 28px;3651  color: var(--peach-t0);3652  margin: 0;3653  line-height: 1;3654}36553656.peach-pairing-subline {3657  font-size: 12px;3658  color: var(--peach-t2);3659  max-width: 220px;3660  line-height: 1.5;3661  margin: 0;3662}36633664.peach-pairing-subline--center {3665  text-align: center;3666}36673668.peach-pairing-code-display {3669  display: flex;3670  gap: 6px;3671}36723673.peach-pairing-code-digit {3674  display: flex;3675  align-items: center;3676  justify-content: center;3677  width: 36px;3678  height: 48px;3679  background: var(--peach-s2);3680  border: 1px solid var(--peach-t3);3681  border-radius: 6px;3682  font-family: var(--font-mono);3683  font-size: 22px;3684  color: var(--peach-t0);3685  letter-spacing: 0;3686}36873688.peach-pairing-countdown-ring {3689  position: relative;3690  display: inline-flex;3691  align-items: center;3692  justify-content: center;3693}36943695.peach-pairing-countdown-num {3696  position: absolute;3697  font-family: var(--font-mono);3698  font-size: 14px;3699  color: var(--peach-t1);3700}37013702.peach-pairing-ring-track {3703  fill: none;3704  stroke: var(--peach-t3);3705  stroke-width: 2;3706}37073708.peach-pairing-ring-progress {3709  fill: none;3710  stroke: var(--peach-accent);3711  stroke-width: 2;3712  stroke-linecap: round;3713  transform: rotate(-90deg);3714  transform-origin: 50% 50%;3715  transition: stroke-dashoffset 0.5s linear;3716}37173718.peach-pairing-code-inputs {3719  display: flex;3720  gap: 8px;3721}37223723.peach-pairing-code-box {3724  width: 36px;3725  height: 48px;3726  text-align: center;3727  background: var(--peach-s2);3728  border: 1px solid var(--peach-t3);3729  border-radius: 6px;3730  font-family: var(--font-mono);3731  font-size: 20px;3732  color: var(--peach-t0);3733  outline: none;3734  transition: border-color 120ms ease;3735}37363737.peach-pairing-code-box:focus {3738  border-color: var(--peach-accent);3739}37403741.peach-pairing-code-box.has-error {3742  border-color: rgba(220, 80, 60, 0.45);3743}37443745.peach-pairing-status {3746  display: flex;3747  align-items: center;3748  gap: 8px;3749  margin: 0;3750  font-size: 12px;3751  color: var(--peach-t1);3752}37533754.peach-pairing-error {3755  margin: 0;3756  font-size: 11px;3757  color: var(--peach-breach);3758}37593760.peach-pairing-error-msg {3761  color: var(--peach-t1);3762}37633764.peach-pairing-spinner {3765  width: 12px;3766  height: 12px;3767  border: 1.5px solid var(--peach-t3);3768  border-top-color: var(--peach-accent);3769  border-radius: 50%;3770  animation: peach-spin 0.8s linear infinite;3771}37723773.peach-pairing-success-icon,3774.peach-pairing-error-icon,3775.peach-pairing-hero {3776  display: inline-flex;3777  align-items: center;3778  justify-content: center;3779}37803781/* Tag chips */3782.peach-tag-chip {3783  display: inline-flex;3784  align-items: center;3785  gap: 4px;3786  padding: 3px 8px;3787  border-radius: 999px;3788  border: 1px solid rgba(217, 104, 48, 0.28);3789  background: rgba(217, 104, 48, 0.08);3790  color: rgba(240, 232, 216, 0.85);3791  font-family: "IBM Plex Mono", monospace;3792  font-size: 10px;3793  letter-spacing: 0.04em;3794}37953796.peach-tag-chip-remove {3797  background: transparent;3798  border: none;3799  color: inherit;3800  opacity: 0.6;3801  cursor: pointer;3802  padding: 0;3803  font-size: 12px;3804  line-height: 1;3805}38063807.peach-tag-chip-remove:hover {3808  opacity: 1;3809}38103811/* Tag input */3812.peach-tag-input-wrap {3813  border-bottom: 1px solid var(--peach-t3);3814}38153816.peach-tag-suggestions {3817  display: flex;3818  flex-wrap: wrap;3819  gap: 4px;3820  padding: 6px 0;3821}38223823.peach-tag-suggestion {3824  padding: 2px 8px;3825  border-radius: 999px;3826  border: 1px solid var(--peach-t3);3827  background: var(--peach-s2);3828  color: var(--peach-t1);3829  font-family: "IBM Plex Mono", monospace;3830  font-size: 10px;3831  cursor: pointer;3832  transition: border-color 80ms ease, background 80ms ease;3833}38343835.peach-tag-suggestion:hover {3836  border-color: rgba(217, 104, 48, 0.4);3837  background: rgba(217, 104, 48, 0.08);3838}38393840/* Tag filter strip */3841.peach-tag-filter-strip {3842  border-bottom: 1px solid var(--peach-t3);3843  flex-shrink: 0;3844}38453846.peach-tag-filter-chip {3847  display: inline-flex;3848  align-items: center;3849  padding: 4px 10px;3850  border-radius: 999px;3851  border: 1px solid var(--peach-t3);3852  background: transparent;3853  color: var(--peach-t2);3854  font-family: "IBM Plex Mono", monospace;3855  font-size: 9px;3856  letter-spacing: 0.06em;3857  text-transform: uppercase;3858  cursor: pointer;3859  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;3860  white-space: nowrap;3861}38623863.peach-tag-filter-chip:hover {3864  border-color: rgba(217, 104, 48, 0.35);3865  color: var(--peach-t1);3866}38673868.peach-tag-filter-chip.is-selected {3869  border-color: rgba(217, 104, 48, 0.5);3870  background: rgba(217, 104, 48, 0.12);3871  color: rgba(240, 232, 216, 0.9);3872}38733874/* ─────────────────────────────────────────────────────────────────────────3875   v1.4.12 additions3876   ─────────────────────────────────────────────────────────────────────── */38773878/* Sort bar */3879.peach-sort-bar {3880  display: flex;3881  align-items: center;3882  gap: 4px;3883  padding: 5px 12px;3884  border-bottom: 1px solid var(--peach-t3);3885  flex-shrink: 0;3886  overflow-x: auto;3887  scrollbar-width: none;3888}38893890.peach-sort-btn {3891  padding: 2px 9px;3892  border-radius: 999px;3893  border: 1px solid transparent;3894  background: transparent;3895  color: var(--peach-t2);3896  font-family: "IBM Plex Mono", monospace;3897  font-size: 9px;3898  letter-spacing: 0.07em;3899  text-transform: uppercase;3900  cursor: pointer;3901  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;3902  white-space: nowrap;3903}39043905.peach-sort-btn:hover {3906  border-color: rgba(217, 104, 48, 0.3);3907  color: var(--peach-t1);3908}39093910.peach-sort-btn.is-active {3911  border-color: rgba(217, 104, 48, 0.5);3912  background: rgba(217, 104, 48, 0.12);3913  color: rgba(240, 232, 216, 0.9);3914}39153916.peach-sort-domain-hint {3917  margin-left: auto;3918  font-family: "IBM Plex Mono", monospace;3919  font-size: 9px;3920  color: rgba(217, 104, 48, 0.6);3921  white-space: nowrap;3922  overflow: hidden;3923  text-overflow: ellipsis;3924  max-width: 110px;3925}39263927/* Tab-match badge on entry rows */3928.peach-tab-match-badge {3929  display: inline-block;3930  width: 6px;3931  height: 6px;3932  border-radius: 50%;3933  background: rgba(217, 104, 48, 0.75);3934  margin-left: 5px;3935  vertical-align: middle;3936  flex-shrink: 0;3937  box-shadow: 0 0 4px rgba(217, 104, 48, 0.4);3938}39393940.peach-entry-row.is-tab-match {3941  background: rgba(217, 104, 48, 0.04);3942  border-bottom-color: rgba(217, 104, 48, 0.08);3943}39443945.peach-entry-row.is-tab-match:hover {3946  background: rgba(217, 104, 48, 0.08);3947}39483949/* Entry list stagger entrance */3950@keyframes peach-entry-fadein {3951  from { opacity: 0; transform: translateY(4px); }3952  to   { opacity: 1; transform: translateY(0); }3953}39543955.peach-vault-list .peach-entry-row {3956  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;3957  content-visibility: auto;3958  contain-intrinsic-size: auto 44px;3959}39603961/* Button press micro-interaction */3962.peach-btn:active {3963  transform: scale(0.95);3964  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);3965}39663967.peach-sort-btn:active,3968.peach-tag-filter-chip:active {3969  transform: scale(0.93);3970  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);3971}39723973/* Password strength bar (Lock view + shared) */3974.peach-password-strength {3975  display: flex;3976  align-items: center;3977  gap: 8px;3978  margin-top: 6px;3979}39803981.peach-strength-bar {3982  flex: 1;3983  height: 3px;3984  border-radius: 2px;3985  background: var(--peach-t3);3986  overflow: hidden;3987}39883989.peach-strength-fill {3990  height: 100%;3991  border-radius: 2px;3992  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),3993              background 300ms ease;3994}39953996.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }3997.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }3998.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }3999.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }40004001.peach-strength-label {4002  font-family: "IBM Plex Mono", monospace;4003  font-style: italic;4004  font-size: 9px;4005  font-weight: 300;4006  letter-spacing: 0.06em;4007  color: var(--peach-t2);4008  min-width: 36px;4009  text-align: right;4010}40114012.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }4013.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }4014.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }4015.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }40164017/* Duress form */4018.peach-duress-status {4019  padding: 2px 8px;4020  border-radius: 999px;4021  border: 1px solid var(--peach-t3);4022  font-family: "IBM Plex Mono", monospace;4023  font-size: 9px;4024  letter-spacing: 0.07em;4025  text-transform: uppercase;4026  color: var(--peach-t2);4027  flex-shrink: 0;4028}40294030.peach-duress-status.is-active {4031  border-color: rgba(217, 104, 48, 0.45);4032  background: rgba(217, 104, 48, 0.1);4033  color: rgba(240, 232, 216, 0.85);4034}40354036.peach-duress-form {4037  padding: 8px 0 4px;4038  display: flex;4039  flex-direction: column;4040  gap: 6px;4041}40424043.peach-duress-form .peach-label {4044  margin-top: 4px;4045}40464047.peach-duress-actions {4048  display: flex;4049  gap: 6px;4050  align-items: center;4051  margin-top: 4px;4052}40534054.peach-duress-actions .peach-btn:first-child {4055  margin-right: auto;4056}40574058/* Improved overlay spring entrance */4059.peach-overlay-view.ov-enter-up {4060  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4061}40624063@keyframes ov-enter-up-spring {4064  from { opacity: 0; transform: translateY(16px) scale(0.98); }4065  to   { opacity: 1; transform: translateY(0) scale(1); }4066}40674068.peach-overlay-view.ov-enter-right {4069  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4070}40714072@keyframes ov-enter-right-spring {4073  from { opacity: 0; transform: translateX(18px) scale(0.98); }4074  to   { opacity: 1; transform: translateX(0) scale(1); }4075}40764077/* ── Onboarding-mode restore screens (CJK phrase / file import) ── */4078/* Used when CJKImportView or MainImportView renders during onboarding4079   (no vault yet). Animates like a lock-screen transition. */4080.peach-lock-view {4081  position: absolute;4082  inset: 0;4083  display: flex;4084  flex-direction: column;4085  background:4086    radial-gradient(120% 80% at 0% 0%, rgba(217,104,48,0.08) 0%, transparent 65%),4087    radial-gradient(85% 100% at 100% 100%, rgba(217,104,48,0.06) 0%, transparent 70%),4088    var(--peach-bg);4089  z-index: 2;4090  overflow: hidden;4091  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4092}40934094.peach-lock-view-header {4095  display: flex;4096  align-items: center;4097  justify-content: space-between;4098  padding: 16px 18px 12px;4099  flex-shrink: 0;4100}41014102/* ───────── Settings: auto-lock select ───────── */4103.peach-settings-select {4104  font-family: "IBM Plex Mono", monospace;4105  font-size: 11px;4106  background: transparent;4107  border: 1px solid var(--peach-t3);4108  border-radius: 4px;4109  color: var(--peach-t1);4110  padding: 3px 6px;4111  cursor: pointer;4112  outline: none;4113}4114.peach-settings-select:focus {4115  border-color: var(--peach-accent);4116}41174118/* ───────── Duress status pill (new polished) ───────── */4119.peach-duress-status-pill {4120  font-family: "IBM Plex Mono", monospace;4121  font-size: 9px;4122  text-transform: uppercase;4123  letter-spacing: 0.12em;4124  padding: 2px 8px;4125  border-radius: 12px;4126  background: var(--peach-t3);4127  color: var(--peach-t2);4128  flex-shrink: 0;4129}4130.peach-duress-status-pill.is-active {4131  background: rgba(217, 104, 48, 0.15);4132  color: var(--peach-accent);4133}41344135/* ───────── Entry advanced disclosure (canary) ───────── */4136.peach-entry-advanced {4137  margin-top: 12px;4138  border-top: 1px solid var(--peach-t3);4139  padding-top: 10px;4140  position: relative;4141  z-index: 1;4142}4143.peach-entry-advanced-toggle {4144  display: flex;4145  align-items: center;4146  justify-content: space-between;4147  width: 100%;4148  background: transparent;4149  border: none;4150  cursor: pointer;4151  padding: 0;4152  color: var(--peach-t2);4153}4154.peach-canary-section {4155  margin-top: 10px;4156  display: grid;4157  gap: 6px;4158}41594160/* ───────── Import: merge/replace radio choices ───────── */4161.peach-import-choice {4162  display: flex;4163  align-items: flex-start;4164  gap: 10px;4165  padding: 8px 10px;4166  border: 1px solid var(--peach-t3);4167  border-radius: 10px;4168  cursor: pointer;4169  margin-bottom: 6px;4170  transition: border-color 120ms ease, background 120ms ease;4171}4172.peach-import-choice:hover {4173  border-color: var(--peach-accent);4174}4175.peach-import-choice input[type="radio"] {4176  margin-top: 3px;4177  accent-color: var(--peach-accent);4178  flex-shrink: 0;4179}4180.peach-import-choice-main {4181  display: flex;4182  flex-direction: column;4183  gap: 2px;4184  min-width: 0;4185}4186.peach-import-choice-label {4187  font-size: 12px;4188  color: var(--peach-t0);4189}4190.peach-import-choice-sub {4191  font-size: 11px;4192  color: var(--peach-t2);4193  line-height: 1.5;4194}41954196/* ───────── Export: success confirmation strip ───────── */4197.peach-export-success {4198  display: flex;4199  align-items: flex-start;4200  gap: 10px;4201  padding: 12px;4202  border-radius: 12px;4203  border: 1px solid rgba(150, 175, 110, 0.3);4204  background: rgba(150, 175, 110, 0.08);4205  color: var(--peach-t0);4206  font-size: 12px;4207  line-height: 1.55;4208}4209.peach-export-success-check {4210  color: rgba(150, 175, 110, 0.9);4211  font-size: 14px;4212  flex-shrink: 0;4213}42144215/* ── Trash view ──────────────────────────────────────────────────────── */4216.peach-trash-entry-row {4217  display: flex;4218  align-items: center;4219  justify-content: space-between;4220  gap: 8px;4221  padding: 8px 0;4222  border-bottom: 1px solid var(--peach-t3);4223}4224.peach-trash-entry-row:last-child { border-bottom: none; }4225.peach-trash-entry-info {4226  flex: 1;4227  min-width: 0;4228  display: flex;4229  flex-direction: column;4230  gap: 2px;4231}4232.peach-trash-entry-title {4233  font-size: 12px;4234  color: var(--peach-t1);4235  overflow: hidden;4236  text-overflow: ellipsis;4237  white-space: nowrap;4238}4239.peach-trash-entry-meta {4240  font-family: var(--font-mono);4241  font-size: 9px;4242  color: var(--peach-t2);4243  letter-spacing: 0.06em;4244}4245.peach-trash-entry-actions {4246  display: flex;4247  align-items: center;4248  gap: 4px;4249  flex-shrink: 0;4250}42514252/* ── Settings shortcuts grid ─────────────────────────────────────────── */4253.peach-shortcuts-grid {4254  display: grid;4255  grid-template-columns: auto 1fr;4256  gap: 6px 12px;4257  align-items: center;4258  padding: 4px 0;4259}4260.peach-shortcut-key {4261  font-family: var(--font-mono);4262  font-size: 10px;4263  color: var(--peach-t0);4264  background: var(--peach-t3);4265  border-radius: 4px;4266  padding: 2px 6px;4267  white-space: nowrap;4268  text-align: center;4269}4270.peach-shortcut-desc {4271  font-size: 11px;4272  color: var(--peach-t1);4273}42744275/* ── Sort bar trash button ───────────────────────────────────────────── */4276.peach-sort-trash-btn {4277  display: flex;4278  align-items: center;4279  justify-content: center;4280  padding: 3px 5px;4281  background: transparent;4282  border: none;4283  cursor: pointer;4284  color: var(--peach-t2);4285  border-radius: 4px;4286  transition: color 140ms ease, background 140ms ease;4287}4288.peach-sort-trash-btn:hover {4289  color: var(--peach-t1);4290  background: var(--peach-t3);4291}4292.peach-sort-trash-btn.is-active {4293  color: var(--peach-accent);4294}