popup.css

96.1 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: fixed;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/* font size elements from execCommand */2367.peach-note-editor-body font[size="1"],2368.peach-note-content font[size="1"] { font-size: 11px; line-height: 1.6; }2369.peach-note-editor-body font[size="2"],2370.peach-note-content font[size="2"] { font-size: 13px; }2371.peach-note-editor-body font[size="3"],2372.peach-note-content font[size="3"] { font-size: 16px; }2373.peach-note-editor-body font[size="4"],2374.peach-note-content font[size="4"] { font-size: 20px; }2375.peach-note-editor-body font[size="5"],2376.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }23772378/* bold / italic inside the editor and note display */2379.peach-note-editor-body b, .peach-note-editor-body strong,2380.peach-note-content b, .peach-note-content strong { font-weight: 700; }2381.peach-note-editor-body em, .peach-note-editor-body i,2382.peach-note-content em, .peach-note-content i { font-style: italic; }23832384/* note display — rendered HTML, no pre-wrap */2385.peach-note-content {2386  overflow: auto;2387  max-height: 340px;2388  word-break: break-word;2389}23902391/* ── Note textarea ── */2392.peach-note-textarea {2393  width: 100%;2394  min-height: 180px;2395  max-height: 280px;2396  resize: vertical;2397  background: var(--peach-t4);2398  border: 1px solid var(--peach-t3);2399  border-radius: 8px;2400  padding: 10px 12px;2401  font-family: "IBM Plex Mono", monospace;2402  font-size: 12px;2403  line-height: 1.7;2404  color: var(--peach-t1);2405  outline: none;2406  transition: border-color 150ms ease;2407}24082409.peach-note-textarea:focus {2410  border-color: var(--peach-t2);2411}24122413.peach-note-char-count {2414  font-family: "IBM Plex Mono", monospace;2415  font-size: 9px;2416  color: var(--peach-t3);2417  text-align: right;2418  margin-top: 4px;2419  letter-spacing: 0.1em;2420}24212422/* ── Field input baseline ── */2423.peach-new-field-input {2424  width: 100%;2425  background: transparent;2426  border: none;2427  border-bottom: 1px solid var(--peach-t3);2428  padding: 4px 0;2429  color: var(--peach-t1);2430  font-family: "IBM Plex Mono", monospace;2431  font-size: 13px;2432  outline: none;2433  transition: border-color 150ms ease;2434}24352436.peach-new-field-input:focus {2437  border-bottom-color: var(--peach-t0);2438  color: var(--peach-t0);2439}24402441.peach-new-name-input {2442  width: 100%;2443  background: transparent;2444  border: none;2445  border-bottom: 1px solid var(--peach-t3);2446  padding: 6px 0;2447  font-family: "Cormorant Garamond", Georgia, serif;2448  font-style: italic;2449  font-size: 28px;2450  color: var(--peach-t0);2451  outline: none;2452  transition: border-color 150ms ease;2453}24542455.peach-new-name-input:focus {2456  border-bottom-color: var(--peach-t1);2457}24582459.peach-new-name-input::placeholder {2460  color: var(--peach-t2);2461  font-style: italic;2462}24632464.peach-new-field-input::placeholder {2465  color: var(--peach-t3);2466}24672468/* ── Demo entrance animation ── */2469#hd-shell {2470  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;2471}2472@keyframes hd-shell-enter {2473  from { opacity: 0; transform: scale(0.96) translateY(16px); }2474  to   { opacity: 1; transform: scale(1) translateY(0); }2475}24762477/* ── Keyframes ── */2478@keyframes peach-char-enter {2479  from { opacity: 0; transform: translateY(0.22em); }2480  to   { opacity: 1; transform: translateY(0); }2481}2482@keyframes peach-content-enter {2483  from { opacity: 0.96; transform: translateY(4px); }2484  to   { opacity: 1; transform: translateY(0); }2485}2486@keyframes peach-content-exit {2487  from { opacity: 1; transform: translateY(0); }2488  to   { opacity: 0.92; transform: translateY(-3px); }2489}2490@keyframes peach-screen-enter {2491  from { opacity: 0; transform: translateY(14px); }2492  to   { opacity: 1; transform: translateY(0); }2493}2494@keyframes peach-shell-fade-in {2495  from { opacity: 0; }2496  to   { opacity: 1; }2497}2498@keyframes peach-veil-in {2499  from { opacity: 0; }2500  to   { opacity: 1; }2501}2502@keyframes peach-lock-settle {2503  0%   { transform: scale(0.9); }2504  65%  { transform: scale(1.08); }2505  100% { transform: scale(1); }2506}2507@keyframes peach-copy-confirm {2508  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2509  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); }2510}2511@keyframes peach-copy-retreat {2512  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); }2513  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2514}2515@keyframes peach-copy-flood {2516  from { opacity: 0; transform: scaleX(0.15); }2517  to   { opacity: 1; transform: scaleX(1); }2518}2519@keyframes peach-copy-icon-settle {2520  from  { transform: scale(0.84); }2521  70%   { transform: scale(1.08); }2522  to    { transform: scale(1); }2523}2524@keyframes peach-copy-sheen-retreat {2525  from { opacity: 1; transform: scaleX(1); }2526  to   { opacity: 0; transform: scaleX(0.15); }2527}2528@keyframes peach-copy-drain {2529  from { width: 100%; }2530  to   { width: 0; }2531}2532@keyframes peach-shake {2533  0%, 100% { transform: translateX(0); }2534  20%      { transform: translateX(-6px); }2535  40%      { transform: translateX(6px); }2536  60%      { transform: translateX(-4px); }2537  80%      { transform: translateX(4px); }2538}25392540@keyframes pip-pulse {2541  0% { transform: scale(1); }2542  40% { transform: scale(2.2); }2543  100% { transform: scale(1); }2544}254525462547/* ── Password generator ── */2548.peach-pwgen-body {2549  flex: 1; overflow-y: auto;2550  display: flex; flex-direction: column;2551}2552.peach-policy-badge {2553  display: flex; align-items: center;2554  padding: 6px 20px 0;2555  font-size: 10px; font-family: Inter, sans-serif;2556  color: var(--peach-t2); letter-spacing: 0.04em;2557}2558.peach-pwgen-display {2559  padding: 14px 20px 12px;2560  border-bottom: 1px solid var(--peach-t3);2561  display: flex; align-items: flex-start; gap: 10px;2562}2563.peach-pwgen-display-row {2564  display: flex;2565  align-items: flex-start;2566  gap: 8px;2567  padding-bottom: 8px;2568  border-bottom: 1px solid var(--peach-t3);2569}2570.peach-pwgen-output {2571  flex: 1; min-width: 0; margin: 0;2572  font-family: "IBM Plex Mono", monospace;2573  font-size: 13px; color: var(--peach-t0);2574  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;2575  white-space: normal;2576  padding: 10px 12px;2577  background: var(--peach-t4);2578  border-radius: 6px;2579  min-height: 36px;2580}2581.peach-pwgen-output-display {2582  flex: 1;2583  min-width: 0;2584  margin: 0;2585  font-family: "Cormorant Garamond", "Times New Roman", serif;2586  font-style: italic;2587  font-weight: 300;2588  font-size: 32px;2589  line-height: 1.05;2590  color: var(--peach-t0);2591  word-break: break-all;2592  overflow-wrap: break-word;2593  white-space: normal;2594  letter-spacing: 0.02em;2595}2596.peach-pwgen-display-actions {2597  display: flex;2598  flex-direction: column;2599  gap: 4px;2600  flex-shrink: 0;2601  margin-top: 2px;2602}2603.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }2604.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }2605.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }2606.peach-pwgen-len-num {2607  font-family: "IBM Plex Mono", monospace;2608  font-size: 12px; color: var(--peach-accent);2609}2610.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }2611.peach-pwgen-toggles { display: flex; flex-direction: column; }2612.peach-pwgen-charset-pills {2613  display: flex;2614  gap: 6px;2615  flex-wrap: wrap;2616}2617.peach-pwgen-pill {2618  padding: 4px 11px;2619  border-radius: 999px;2620  border: 1px solid var(--peach-t3);2621  background: transparent;2622  color: var(--peach-t2);2623  font-family: "IBM Plex Mono", monospace;2624  font-size: 9px;2625  letter-spacing: 0.08em;2626  cursor: pointer;2627  transition: all 150ms ease;2628}2629.peach-pwgen-pill.is-on {2630  border-color: rgba(217, 104, 48, 0.5);2631  background: rgba(217, 104, 48, 0.1);2632  color: var(--peach-accent);2633}2634.peach-pwgen-pill:not(.is-on):hover {2635  color: var(--peach-t1);2636  border-color: var(--peach-t2);2637}2638.peach-pwgen-use-btn {2639  width: 100%;2640  min-height: 34px;2641  border-radius: 8px;2642  margin-top: 2px;2643}2644.peach-pwgen-toggle-row {2645  display: flex; align-items: center; justify-content: space-between;2646  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);2647}2648.peach-pwgen-toggle-row:last-child { border-bottom: none; }2649.peach-pwgen-toggle-label { font-size: 13px; color: var(--peach-t1); }26502651.peach-screen-prelock {2652  z-index: 10;2653}26542655.prelock-form {2656  display: grid;2657  gap: 12px;2658}26592660/* Peach popup should not expose native scrollbars on internal panels. */2661.peach-settings-body,2662.peach-new-body,2663.peach-pwgen-body,2664.lock-screen,2665.peach-import-preview {2666  scrollbar-width: none;2667  -ms-overflow-style: none;2668  overscroll-behavior: contain;2669}2670.peach-settings-body::-webkit-scrollbar,2671.peach-new-body::-webkit-scrollbar,2672.peach-pwgen-body::-webkit-scrollbar,2673.lock-screen::-webkit-scrollbar,2674.peach-import-preview::-webkit-scrollbar {2675  width: 0;2676  height: 0;2677  display: none;2678}26792680.lock-screen {2681  height: 100%;2682  min-height: 100%;2683  overflow-y: auto;2684  padding: 18px 18px 16px;2685  gap: 14px;2686  grid-template-rows: auto auto auto 1fr auto;2687  align-content: stretch;2688  position: relative;2689  isolation: isolate;2690}2691.peach-screen.lock-screen--vault-stage {2692  display: flex;2693  flex-direction: column;2694  justify-content: flex-start;2695  gap: 18px;2696  padding: 20px 18px 18px;2697  overflow: hidden;2698}2699.peach-screen.lock-screen--vault-stage .peach-lock-panel {2700  margin-top: auto;2701}2702.lock-screen--onboarding {2703  display: flex;2704  flex-direction: column;2705  gap: 12px;2706  justify-content: flex-start;2707}27082709.lock-screen::before {2710  content: "";2711  position: absolute;2712  inset: 12px 18px auto auto;2713  width: 160px;2714  height: 160px;2715  border-radius: 999px;2716  background:2717    radial-gradient(circle at 50% 50%, rgba(217, 104, 48, 0.18) 0%, rgba(217, 104, 48, 0.06) 42%, transparent 72%);2718  filter: blur(6px);2719  opacity: 0.7;2720  pointer-events: none;2721  z-index: 0;2722}27232724.lock-screen-header {2725  display: flex;2726  align-items: center;2727  justify-content: space-between;2728  position: relative;2729  z-index: 1;2730}27312732.lock-password-input.shake {2733  animation: peach-shake 300ms ease-in-out;2734}27352736.peach-hint-error {2737  color: rgba(220, 80, 60, 0.92);2738}27392740.peach-onboarding-headline {2741  margin: 0;2742  font-family: "Cormorant Garamond", "Times New Roman", serif;2743  font-size: 35px;2744  line-height: 0.88;2745  font-style: italic;2746  font-weight: 400;2747  max-width: 252px;2748}27492750.peach-lock-copy {2751  display: grid;2752  gap: 8px;2753  position: relative;2754  z-index: 1;2755}27562757.peach-lock-copy--onboarding {2758  gap: 10px;2759}27602761.peach-lock-hero {2762  position: relative;2763  z-index: 1;2764  display: grid;2765  gap: 8px;2766  min-height: 0;2767  padding: 4px 2px 0;2768  border: none;2769  border-radius: 0;2770  background: transparent;2771  box-shadow: none;2772}2773.peach-lock-hero-art {2774  position: absolute;2775  right: -8px;2776  top: -6px;2777  width: 120px;2778  height: 120px;2779  display: flex;2780  align-items: center;2781  justify-content: center;2782  pointer-events: none;2783  opacity: 0.12;2784  filter: saturate(0.9);2785}2786.peach-lock-hero-mark {2787  width: 100%;2788  height: 100%;2789}2790.peach-lock-hero-mark path:first-child {2791  fill: rgba(217, 104, 48, 0.92);2792}2793.peach-lock-hero-mark path:nth-child(2),2794.peach-lock-hero-mark path:nth-child(3) {2795  stroke: rgba(123, 144, 96, 0.88);2796  fill: rgba(123, 144, 96, 0.88);2797}2798.peach-lock-hero > *:not(.peach-lock-hero-art) {2799  position: relative;2800  z-index: 1;2801}28022803.peach-lock-eyebrow {2804  display: inline-flex;2805  align-items: center;2806  width: fit-content;2807  padding: 4px 9px;2808  border-radius: 999px;2809  border: 1px solid rgba(217, 104, 48, 0.22);2810  background: rgba(217, 104, 48, 0.08);2811  color: var(--peach-t0);2812  font-family: "IBM Plex Mono", monospace;2813  font-size: 8px;2814  letter-spacing: 0.18em;2815  text-transform: uppercase;2816}28172818.peach-lock-label-row {2819  display: flex;2820  align-items: center;2821  justify-content: space-between;2822  margin-bottom: 0;2823}28242825.peach-lock-reveal-btn {2826  display: inline-flex;2827  align-items: center;2828  gap: 4px;2829  background: none;2830  border: none;2831  cursor: pointer;2832  font-family: "IBM Plex Mono", monospace;2833  font-size: 9px;2834  letter-spacing: 0.06em;2835  color: var(--peach-t2);2836  padding: 2px 0;2837  transition: color 150ms ease;2838}28392840.peach-lock-reveal-btn:hover {2841  color: var(--peach-t1);2842}28432844.peach-lock-warning {2845  color: rgba(220, 80, 60, 0.85) !important;2846  line-height: 1.5;2847}28482849.peach-onboarding-cards {2850  display: grid;2851  gap: 8px;2852  position: relative;2853  z-index: 1;2854}28552856.peach-lock-panel {2857  position: relative;2858  z-index: 1;2859  display: grid;2860  gap: 9px;2861  padding: 14px 16px 15px;2862  border-radius: 18px;2863  border: 1px solid var(--peach-t3);2864  background:2865    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));2866  box-shadow:2867    inset 0 1px 0 rgba(240, 232, 216, 0.04),2868    0 12px 28px rgba(0, 0, 0, 0.12);2869}28702871.peach-lock-panel--secondary {2872  gap: 12px;2873}28742875.peach-lock-panel-header {2876  display: flex;2877  align-items: baseline;2878  justify-content: space-between;2879  gap: 12px;2880}28812882.peach-lock-option-grid {2883  display: grid;2884  gap: 10px;2885}28862887.peach-lock-option {2888  width: 100%;2889  display: grid;2890  gap: 6px;2891  padding: 14px 15px;2892  border-radius: 16px;2893  border: 1px solid rgba(240, 232, 216, 0.08);2894  background: rgba(240, 232, 216, 0.02);2895  color: var(--peach-t0);2896  text-align: left;2897  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;2898}28992900.peach-lock-option:hover {2901  border-color: rgba(217, 104, 48, 0.28);2902  background: rgba(240, 232, 216, 0.04);2903  transform: translateY(-1px);2904}29052906.peach-lock-option-title {2907  font-size: 12px;2908  color: var(--peach-t0);2909}29102911.peach-lock-option-copy {2912  font-size: 11px;2913  line-height: 1.55;2914  color: var(--peach-t1);2915}29162917.peach-onboarding-stack {2918  margin-top: 2px;2919}2920.peach-lock-panel-footer {2921  display: grid;2922  gap: 6px;2923  margin-top: 2px;2924  padding-top: 10px;2925  border-top: 1px solid rgba(240, 232, 216, 0.06);2926}29272928/* Restore picker panel — method option cards */2929.peach-lock-panel--restore {2930  gap: 10px;2931}2932.peach-lock-option--history {2933  border-color: rgba(240, 232, 216, 0.06);2934  opacity: 0.85;2935}29362937/* Snapshot restore panel */2938.peach-snapshot-panel {2939  gap: 10px;2940  overflow-y: auto;2941  max-height: 340px;2942}2943.peach-snapshot-list {2944  display: flex;2945  flex-direction: column;2946  gap: 4px;2947}2948.peach-snapshot-row {2949  display: flex;2950  align-items: center;2951  justify-content: space-between;2952  width: 100%;2953  padding: 8px 10px;2954  border-radius: 8px;2955  border: 1px solid rgba(240, 232, 216, 0.07);2956  background: transparent;2957  cursor: pointer;2958  transition: border-color 120ms, background 120ms;2959  text-align: left;2960  gap: 8px;2961}2962.peach-snapshot-row:hover {2963  border-color: rgba(240, 232, 216, 0.14);2964  background: rgba(240, 232, 216, 0.03);2965}2966.peach-snapshot-row.is-selected {2967  border-color: rgba(217, 104, 48, 0.4);2968  background: rgba(217, 104, 48, 0.07);2969}2970.peach-snapshot-time {2971  font-size: 11.5px;2972  color: var(--peach-t0);2973  flex: 1;2974}2975.peach-snapshot-count {2976  font-family: "IBM Plex Mono", monospace;2977  font-size: 10px;2978  color: var(--peach-t2);2979  flex-shrink: 0;2980}2981.peach-snapshot-confirm {2982  display: flex;2983  flex-direction: column;2984  gap: 8px;2985  padding-top: 10px;2986  border-top: 1px solid rgba(240, 232, 216, 0.06);2987}2988.peach-snapshot-warning {2989  display: flex;2990  align-items: flex-start;2991  gap: 6px;2992  font-size: 10.5px;2993  color: rgba(220, 80, 60, 0.85);2994  line-height: 1.55;2995}2996.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }2997.peach-snapshot-confirm-row {2998  display: flex;2999  gap: 6px;3000  align-items: center;3001}3002.peach-snapshot-restore-btn {3003  width: 100%;3004}3005.peach-lock-hero--unlock .peach-lock-hero-art {3006  width: 112px;3007  height: 112px;3008  right: 0;3009  top: 2px;3010  opacity: 0.1;3011}30123013.peach-card {3014  border: 1px solid var(--peach-t3);3015  border-radius: 18px;3016  background:3017    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3018  box-shadow:3019    inset 0 1px 0 rgba(240, 232, 216, 0.04),3020    0 12px 32px rgba(0, 0, 0, 0.14);3021  overflow: hidden;3022}30233024.peach-card-active {3025  border-color: rgba(217, 104, 48, 0.35);3026  box-shadow:3027    inset 0 1px 0 rgba(240, 232, 216, 0.05),3028    0 16px 38px rgba(0, 0, 0, 0.18),3029    0 0 0 1px rgba(217, 104, 48, 0.08);3030}30313032.peach-card-disabled {3033  opacity: 0.72;3034}30353036.peach-card-header {3037  width: 100%;3038  padding: 13px 16px 11px;3039  background: transparent;3040  color: var(--peach-t0);3041  display: flex;3042  justify-content: space-between;3043  align-items: center;3044  text-align: left;3045  font-size: 12px;3046}30473048.peach-card-body {3049  padding: 0 16px 16px;3050  display: grid;3051  gap: 9px;3052}30533054.peach-card-tag {3055  color: var(--peach-t2);3056  font-family: "IBM Plex Mono", monospace;3057  font-size: 9px;3058  letter-spacing: 0.12em;3059  text-transform: uppercase;3060}30613062.peach-empty-copy {3063  display: grid;3064  gap: 6px;3065  color: var(--peach-t1);3066  font-size: 13px;3067}30683069.peach-lock-submit {3070  width: 100%;3071  box-shadow: 0 14px 36px rgba(217, 104, 48, 0.22);3072}30733074.peach-lock-secondary {3075  width: 100%;3076  border-color: var(--peach-t3);3077  background: rgba(240, 232, 216, 0.02);3078}30793080.peach-lock-secondary:hover {3081  background: rgba(240, 232, 216, 0.04);3082}30833084.peach-lock-note {3085  max-width: none;3086  line-height: 1.55;3087  margin: 0;3088}30893090.peach-overlay-action {3091  font-size: 10px;3092  padding: 4px 8px;3093  letter-spacing: 0.06em;3094  min-width: 44px;3095  text-align: center;3096}30973098.peach-overlay-spacer {3099  width: 32px;3100}31013102.peach-inline-action {3103  flex-shrink: 0;3104  font-size: 9px;3105  letter-spacing: 0.1em;3106  text-transform: uppercase;3107  padding: 4px 7px;3108}3109.peach-password-toggle-btn {3110  display: inline-flex;3111  align-items: center;3112  justify-content: center;3113  min-width: 30px;3114  min-height: 26px;3115  padding: 0 7px;3116  border: 1px solid var(--peach-t3);3117  border-radius: 999px;3118  background: rgba(240, 232, 216, 0.04);3119  color: var(--peach-t2);3120  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;3121}3122.peach-password-toggle-btn:hover {3123  border-color: var(--peach-t2);3124  color: var(--peach-t0);3125  background: rgba(240, 232, 216, 0.06);3126}31273128.peach-new-textarea {3129  width: 100%;3130  min-height: 88px;3131  resize: vertical;3132  border: 0;3133  outline: none;3134  background: transparent;3135  color: var(--peach-t1);3136  font-family: "IBM Plex Mono", monospace;3137  font-size: 12px;3138  line-height: 1.65;3139  caret-color: var(--peach-accent);3140}31413142.peach-new-textarea::placeholder {3143  color: var(--peach-t2);3144  opacity: 0.7;3145}31463147.peach-settings-actions {3148  display: grid;3149  gap: 8px;3150}31513152.peach-sync-section-label {3153  font-size: 11px;3154  color: var(--peach-t2);3155  text-transform: uppercase;3156  letter-spacing: 0.05em;3157}31583159.peach-sync-device-row {3160  display: flex;3161  justify-content: space-between;3162  align-items: center;3163  padding: 6px 0;3164  border-bottom: 1px solid var(--peach-t3);3165}31663167.peach-sync-device-info {3168  display: flex;3169  flex-direction: column;3170  gap: 2px;3171}31723173.peach-sync-device-name {3174  font-size: 13px;3175  color: var(--peach-t0);3176}31773178.peach-sync-device-meta {3179  font-size: 11px;3180  color: var(--peach-t2);3181}31823183.peach-sync-status-dot {3184  display: inline-block;3185  width: 8px;3186  height: 8px;3187  border-radius: 50%;3188  vertical-align: middle;3189}31903191.peach-sync-remove-btn {3192  color: var(--peach-breach);3193}31943195.peach-import-preview {3196  margin-bottom: 12px;3197  max-height: 152px;3198  overflow-y: auto;3199  border: 1px solid var(--peach-t3);3200  border-radius: 10px;3201  padding: 8px 10px;3202  display: grid;3203  gap: 8px;3204  background: rgba(240, 232, 216, 0.02);3205}32063207.peach-import-preview-row {3208  display: flex;3209  justify-content: space-between;3210  gap: 10px;3211  font-size: 11px;3212  color: var(--peach-t1);3213}32143215.peach-import-preview-title {3216  color: var(--peach-t0);3217  flex: 1;3218  min-width: 0;3219  overflow: hidden;3220  text-overflow: ellipsis;3221  white-space: nowrap;3222}32233224.peach-import-preview-meta {3225  color: var(--peach-t2);3226  flex-shrink: 0;3227  max-width: 42%;3228  overflow: hidden;3229  text-overflow: ellipsis;3230  white-space: nowrap;3231}32323233.peach-import-preview-more {3234  color: var(--peach-t2);3235  font-size: 10px;3236}32373238.peach-restore-copy {3239  margin: 0;3240  color: var(--peach-t1);3241  font-size: 11px;3242  line-height: 1.6;3243}32443245.peach-restore-warning {3246  padding: 10px 12px;3247  border-radius: 12px;3248  border: 1px solid rgba(220, 80, 60, 0.22);3249  background: rgba(220, 80, 60, 0.08);3250  color: rgba(240, 232, 216, 0.86);3251  font-size: 11px;3252  line-height: 1.55;3253}32543255.peach-provider-chips {3256  display: flex;3257  flex-wrap: wrap;3258  gap: 6px;3259}32603261.peach-provider-chip {3262  display: inline-flex;3263  align-items: center;3264  padding: 5px 8px;3265  border-radius: 999px;3266  border: 1px solid var(--peach-t3);3267  background: rgba(240, 232, 216, 0.02);3268  color: var(--peach-t1);3269  font-family: "IBM Plex Mono", monospace;3270  font-size: 8px;3271  letter-spacing: 0.08em;3272  text-transform: uppercase;3273}32743275.peach-restore-file,3276.peach-restore-input {3277  width: 100%;3278  border-radius: 10px;3279  border: 1px solid var(--peach-t3);3280  background: var(--peach-s2);3281  color: var(--peach-t0);3282  font-size: 12px;3283}32843285.peach-restore-file {3286  padding: 9px 10px;3287}32883289.peach-restore-file::file-selector-button {3290  margin-right: 10px;3291  padding: 7px 10px;3292  border: 1px solid rgba(217, 104, 48, 0.28);3293  border-radius: 999px;3294  background: rgba(217, 104, 48, 0.08);3295  color: var(--peach-t0);3296  font-size: 10px;3297  letter-spacing: 0.08em;3298  text-transform: uppercase;3299  cursor: pointer;3300}33013302.peach-restore-input {3303  padding: 10px 12px;3304}33053306.peach-auth-grid {3307  display: grid;3308  gap: 10px;3309}33103311.peach-import-summary {3312  color: var(--peach-t1);3313  font-size: 12px;3314  line-height: 1.6;3315  margin-bottom: 12px;3316}33173318.peach-restore-error {3319  color: rgba(220, 80, 60, 0.95);3320  font-size: 12px;3321  line-height: 1.55;3322}33233324.peach-cjk-qr-panel {3325  margin-top: 14px;3326  padding: 12px;3327  border-radius: 16px;3328  border: 1px solid var(--peach-t3);3329  background: rgba(240, 232, 216, 0.02);3330  display: grid;3331  gap: 10px;3332}33333334.peach-cjk-qr-frame {3335  display: grid;3336  place-items: center;3337  min-height: 212px;3338  border-radius: 14px;3339  background: #fff;3340  overflow: hidden;3341}33423343.peach-cjk-qr-frame svg {3344  display: block;3345  width: 196px;3346  height: 196px;3347}33483349.peach-cjk-qr-error,3350.peach-cjk-qr-caption {3351  color: var(--peach-t1);3352  font-size: 11px;3353  line-height: 1.55;3354}33553356.peach-cjk-qr-card {3357  max-width: 400px;3358  margin: auto;3359}33603361.peach-cjk-qr-body {3362  padding: 0 20px 20px;3363  text-align: center;3364}33653366.peach-cjk-qr-hint {3367  font-size: 11px;3368  color: var(--peach-t2);3369  margin: 0 0 14px;3370}33713372.peach-cjk-qr-image {3373  border-radius: 4px;3374  display: block;3375  margin: 0 auto;3376  width: 100%;3377  max-width: 320px;3378  height: auto;3379}33803381.peach-pro-badge {3382  padding: 2px 6px;3383  border-radius: 999px;3384  font-family: var(--font-ui);3385  font-size: 10px;3386  letter-spacing: 0.08em;3387  text-transform: uppercase;3388  background: rgba(217, 104, 48, 0.14);3389  color: var(--peach-accent);3390}33913392.peach-loading {3393  position: absolute;3394  inset: 0;3395  display: flex;3396  align-items: center;3397  justify-content: center;3398  background: var(--bg);3399  animation: peach-loading-pulse 1.2s ease-in-out infinite;3400}34013402@keyframes peach-loading-pulse {3403  0%, 100% { opacity: 0.6; }3404  50% { opacity: 1; }3405}34063407/* ── Health Dashboard ─────────────────────────────────────────────────── */3408.peach-health-body {3409  flex: 1;3410  overflow-y: auto;3411  display: flex;3412  flex-direction: column;3413}34143415.peach-health-summary {3416  padding: 10px 16px 6px;3417  font-family: "IBM Plex Mono", monospace;3418  font-size: 11px;3419}3420.peach-health-summary-warn { color: rgba(220,80,60,0.9); }3421.peach-health-summary-ok { color: var(--peach-t2); }34223423.peach-health-check-row {3424  padding: 0 16px 10px;3425}3426.peach-health-check-btn {3427  width: 100%;3428  display: flex;3429  align-items: center;3430  justify-content: center;3431}34323433.peach-health-sections {3434  flex: 1;3435  display: flex;3436  flex-direction: column;3437}34383439.peach-health-section {3440  border-bottom: 1px solid var(--peach-t3);3441}34423443.peach-health-section-header {3444  width: 100%;3445  display: flex;3446  align-items: center;3447  justify-content: space-between;3448  padding: 9px 16px;3449  background: transparent;3450  cursor: pointer;3451  color: var(--peach-t0);3452}34533454.peach-health-section-title-row {3455  display: flex;3456  align-items: center;3457  gap: 8px;3458}34593460.peach-health-count-badge {3461  display: inline-flex;3462  align-items: center;3463  justify-content: center;3464  min-width: 20px;3465  height: 18px;3466  padding: 0 5px;3467  border-radius: 999px;3468  background: rgba(220,80,60,0.15);3469  border: 1px solid rgba(220,80,60,0.25);3470  font-family: "IBM Plex Mono", monospace;3471  font-size: 9px;3472  color: rgba(220,80,60,0.9);3473}34743475.peach-health-section-title {3476  font-family: "IBM Plex Mono", monospace;3477  font-size: 11px;3478  text-transform: uppercase;3479  letter-spacing: 0.1em;3480  color: var(--peach-t1);3481}34823483.peach-health-chevron {3484  color: var(--peach-t2);3485  transition: transform 200ms ease;3486  flex-shrink: 0;3487}3488.peach-health-chevron.is-expanded {3489  transform: rotate(180deg);3490}34913492.peach-health-section-body {3493  padding: 0 16px 10px;3494  display: flex;3495  flex-direction: column;3496  gap: 4px;3497}34983499.peach-health-row {3500  display: flex;3501  align-items: flex-start;3502  justify-content: space-between;3503  gap: 8px;3504  padding: 6px 8px;3505  border-radius: 8px;3506  background: rgba(240,232,216,0.02);3507}35083509.peach-health-row-info {3510  flex: 1;3511  min-width: 0;3512  display: flex;3513  flex-direction: column;3514  gap: 2px;3515}35163517.peach-health-row-name {3518  font-family: "Cormorant Garamond", serif;3519  font-size: 15px;3520  font-style: italic;3521  font-weight: 400;3522  color: var(--peach-t0);3523  white-space: nowrap;3524  overflow: hidden;3525  text-overflow: ellipsis;3526}35273528.peach-health-row-meta {3529  font-family: "IBM Plex Mono", monospace;3530  font-size: 9px;3531  color: var(--peach-t2);3532  letter-spacing: 0.05em;3533}35343535.peach-health-fix-btn {3536  font-size: 9px;3537  letter-spacing: 0.08em;3538  text-transform: uppercase;3539  padding: 4px 7px;3540  flex-shrink: 0;3541  display: flex;3542  align-items: center;3543}35443545.peach-health-empty {3546  font-family: "IBM Plex Mono", monospace;3547  font-size: 10px;3548  color: var(--peach-t2);3549  padding: 6px 0;3550}35513552.peach-health-loading {3553  font-family: "IBM Plex Mono", monospace;3554  font-size: 10px;3555  color: var(--peach-t2);3556  padding: 6px 0;3557  display: flex;3558  align-items: center;3559  gap: 6px;3560}35613562.peach-health-loading::before {3563  content: "";3564  width: 10px;3565  height: 10px;3566  border: 1.5px solid var(--peach-t3);3567  border-top-color: var(--peach-accent);3568  border-radius: 50%;3569  animation: peach-spin 600ms linear infinite;3570}35713572@keyframes peach-spin {3573  to { transform: rotate(360deg); }3574}35753576.peach-spinner {3577  width: 32px;3578  height: 32px;3579  border: 2px solid var(--peach-s2);3580  border-top-color: var(--peach-accent);3581  border-radius: 50%;3582  margin: 0 auto 16px;3583  animation: peach-spin 0.8s linear infinite;3584}35853586.peach-progress-screen {3587  text-align: center;3588  padding: 32px 16px;3589}35903591.peach-progress-screen-title {3592  font-size: 13px;3593  color: var(--peach-t0);3594  margin-bottom: 16px;3595}35963597.peach-progress-screen-stage {3598  font-size: 11px;3599  color: var(--peach-t2);3600  min-height: 14px;3601}36023603.peach-progress-screen-note {3604  font-size: 10px;3605  color: var(--peach-t2);3606  margin-top: 8px;3607}36083609.peach-pairing-body {3610  flex: 1;3611  overflow-y: auto;3612  display: flex;3613  flex-direction: column;3614}36153616.peach-pairing-content {3617  flex: 1;3618  display: flex;3619  flex-direction: column;3620  align-items: center;3621  justify-content: center;3622  gap: 14px;3623  padding: 28px 20px;3624  text-align: center;3625}36263627.peach-pairing-headline {3628  font-family: var(--font-display);3629  font-style: italic;3630  font-weight: 300;3631  font-size: 28px;3632  color: var(--peach-t0);3633  margin: 0;3634  line-height: 1;3635}36363637.peach-pairing-subline {3638  font-size: 12px;3639  color: var(--peach-t2);3640  max-width: 220px;3641  line-height: 1.5;3642  margin: 0;3643}36443645.peach-pairing-subline--center {3646  text-align: center;3647}36483649.peach-pairing-code-display {3650  display: flex;3651  gap: 6px;3652}36533654.peach-pairing-code-digit {3655  display: flex;3656  align-items: center;3657  justify-content: center;3658  width: 36px;3659  height: 48px;3660  background: var(--peach-s2);3661  border: 1px solid var(--peach-t3);3662  border-radius: 6px;3663  font-family: var(--font-mono);3664  font-size: 22px;3665  color: var(--peach-t0);3666  letter-spacing: 0;3667}36683669.peach-pairing-countdown-ring {3670  position: relative;3671  display: inline-flex;3672  align-items: center;3673  justify-content: center;3674}36753676.peach-pairing-countdown-num {3677  position: absolute;3678  font-family: var(--font-mono);3679  font-size: 14px;3680  color: var(--peach-t1);3681}36823683.peach-pairing-ring-track {3684  fill: none;3685  stroke: var(--peach-t3);3686  stroke-width: 2;3687}36883689.peach-pairing-ring-progress {3690  fill: none;3691  stroke: var(--peach-accent);3692  stroke-width: 2;3693  stroke-linecap: round;3694  transform: rotate(-90deg);3695  transform-origin: 50% 50%;3696  transition: stroke-dashoffset 0.5s linear;3697}36983699.peach-pairing-code-inputs {3700  display: flex;3701  gap: 8px;3702}37033704.peach-pairing-code-box {3705  width: 36px;3706  height: 48px;3707  text-align: center;3708  background: var(--peach-s2);3709  border: 1px solid var(--peach-t3);3710  border-radius: 6px;3711  font-family: var(--font-mono);3712  font-size: 20px;3713  color: var(--peach-t0);3714  outline: none;3715  transition: border-color 120ms ease;3716}37173718.peach-pairing-code-box:focus {3719  border-color: var(--peach-accent);3720}37213722.peach-pairing-code-box.has-error {3723  border-color: rgba(220, 80, 60, 0.45);3724}37253726.peach-pairing-status {3727  display: flex;3728  align-items: center;3729  gap: 8px;3730  margin: 0;3731  font-size: 12px;3732  color: var(--peach-t1);3733}37343735.peach-pairing-error {3736  margin: 0;3737  font-size: 11px;3738  color: var(--peach-breach);3739}37403741.peach-pairing-error-msg {3742  color: var(--peach-t1);3743}37443745.peach-pairing-spinner {3746  width: 12px;3747  height: 12px;3748  border: 1.5px solid var(--peach-t3);3749  border-top-color: var(--peach-accent);3750  border-radius: 50%;3751  animation: peach-spin 0.8s linear infinite;3752}37533754.peach-pairing-success-icon,3755.peach-pairing-error-icon,3756.peach-pairing-hero {3757  display: inline-flex;3758  align-items: center;3759  justify-content: center;3760}37613762/* Tag chips */3763.peach-tag-chip {3764  display: inline-flex;3765  align-items: center;3766  gap: 4px;3767  padding: 3px 8px;3768  border-radius: 999px;3769  border: 1px solid rgba(217, 104, 48, 0.28);3770  background: rgba(217, 104, 48, 0.08);3771  color: rgba(240, 232, 216, 0.85);3772  font-family: "IBM Plex Mono", monospace;3773  font-size: 10px;3774  letter-spacing: 0.04em;3775}37763777.peach-tag-chip-remove {3778  background: transparent;3779  border: none;3780  color: inherit;3781  opacity: 0.6;3782  cursor: pointer;3783  padding: 0;3784  font-size: 12px;3785  line-height: 1;3786}37873788.peach-tag-chip-remove:hover {3789  opacity: 1;3790}37913792/* Tag input */3793.peach-tag-input-wrap {3794  border-bottom: 1px solid var(--peach-t3);3795}37963797.peach-tag-suggestions {3798  display: flex;3799  flex-wrap: wrap;3800  gap: 4px;3801  padding: 6px 0;3802}38033804.peach-tag-suggestion {3805  padding: 2px 8px;3806  border-radius: 999px;3807  border: 1px solid var(--peach-t3);3808  background: var(--peach-s2);3809  color: var(--peach-t1);3810  font-family: "IBM Plex Mono", monospace;3811  font-size: 10px;3812  cursor: pointer;3813  transition: border-color 80ms ease, background 80ms ease;3814}38153816.peach-tag-suggestion:hover {3817  border-color: rgba(217, 104, 48, 0.4);3818  background: rgba(217, 104, 48, 0.08);3819}38203821/* Tag filter strip */3822.peach-tag-filter-strip {3823  border-bottom: 1px solid var(--peach-t3);3824  flex-shrink: 0;3825}38263827.peach-tag-filter-chip {3828  display: inline-flex;3829  align-items: center;3830  padding: 4px 10px;3831  border-radius: 999px;3832  border: 1px solid var(--peach-t3);3833  background: transparent;3834  color: var(--peach-t2);3835  font-family: "IBM Plex Mono", monospace;3836  font-size: 9px;3837  letter-spacing: 0.06em;3838  text-transform: uppercase;3839  cursor: pointer;3840  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;3841  white-space: nowrap;3842}38433844.peach-tag-filter-chip:hover {3845  border-color: rgba(217, 104, 48, 0.35);3846  color: var(--peach-t1);3847}38483849.peach-tag-filter-chip.is-selected {3850  border-color: rgba(217, 104, 48, 0.5);3851  background: rgba(217, 104, 48, 0.12);3852  color: rgba(240, 232, 216, 0.9);3853}38543855/* ─────────────────────────────────────────────────────────────────────────3856   v1.4.12 additions3857   ─────────────────────────────────────────────────────────────────────── */38583859/* Sort bar */3860.peach-sort-bar {3861  display: flex;3862  align-items: center;3863  gap: 4px;3864  padding: 5px 12px;3865  border-bottom: 1px solid var(--peach-t3);3866  flex-shrink: 0;3867  overflow-x: auto;3868  scrollbar-width: none;3869}38703871.peach-sort-btn {3872  padding: 2px 9px;3873  border-radius: 999px;3874  border: 1px solid transparent;3875  background: transparent;3876  color: var(--peach-t2);3877  font-family: "IBM Plex Mono", monospace;3878  font-size: 9px;3879  letter-spacing: 0.07em;3880  text-transform: uppercase;3881  cursor: pointer;3882  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;3883  white-space: nowrap;3884}38853886.peach-sort-btn:hover {3887  border-color: rgba(217, 104, 48, 0.3);3888  color: var(--peach-t1);3889}38903891.peach-sort-btn.is-active {3892  border-color: rgba(217, 104, 48, 0.5);3893  background: rgba(217, 104, 48, 0.12);3894  color: rgba(240, 232, 216, 0.9);3895}38963897.peach-sort-domain-hint {3898  margin-left: auto;3899  font-family: "IBM Plex Mono", monospace;3900  font-size: 9px;3901  color: rgba(217, 104, 48, 0.6);3902  white-space: nowrap;3903  overflow: hidden;3904  text-overflow: ellipsis;3905  max-width: 110px;3906}39073908/* Tab-match badge on entry rows */3909.peach-tab-match-badge {3910  display: inline-block;3911  width: 6px;3912  height: 6px;3913  border-radius: 50%;3914  background: rgba(217, 104, 48, 0.75);3915  margin-left: 5px;3916  vertical-align: middle;3917  flex-shrink: 0;3918  box-shadow: 0 0 4px rgba(217, 104, 48, 0.4);3919}39203921.peach-entry-row.is-tab-match {3922  background: rgba(217, 104, 48, 0.04);3923  border-bottom-color: rgba(217, 104, 48, 0.08);3924}39253926.peach-entry-row.is-tab-match:hover {3927  background: rgba(217, 104, 48, 0.08);3928}39293930/* Entry list stagger entrance */3931@keyframes peach-entry-fadein {3932  from { opacity: 0; transform: translateY(4px); }3933  to   { opacity: 1; transform: translateY(0); }3934}39353936.peach-vault-list .peach-entry-row {3937  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;3938  content-visibility: auto;3939  contain-intrinsic-size: auto 44px;3940}39413942/* Button press micro-interaction */3943.peach-btn:active {3944  transform: scale(0.95);3945  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);3946}39473948.peach-sort-btn:active,3949.peach-tag-filter-chip:active {3950  transform: scale(0.93);3951  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);3952}39533954/* Password strength bar (Lock view + shared) */3955.peach-password-strength {3956  display: flex;3957  align-items: center;3958  gap: 8px;3959  margin-top: 6px;3960}39613962.peach-strength-bar {3963  flex: 1;3964  height: 3px;3965  border-radius: 2px;3966  background: var(--peach-t3);3967  overflow: hidden;3968}39693970.peach-strength-fill {3971  height: 100%;3972  border-radius: 2px;3973  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),3974              background 300ms ease;3975}39763977.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }3978.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }3979.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }3980.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }39813982.peach-strength-label {3983  font-family: "IBM Plex Mono", monospace;3984  font-style: italic;3985  font-size: 9px;3986  font-weight: 300;3987  letter-spacing: 0.06em;3988  color: var(--peach-t2);3989  min-width: 36px;3990  text-align: right;3991}39923993.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }3994.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }3995.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }3996.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }39973998/* Duress form */3999.peach-duress-status {4000  padding: 2px 8px;4001  border-radius: 999px;4002  border: 1px solid var(--peach-t3);4003  font-family: "IBM Plex Mono", monospace;4004  font-size: 9px;4005  letter-spacing: 0.07em;4006  text-transform: uppercase;4007  color: var(--peach-t2);4008  flex-shrink: 0;4009}40104011.peach-duress-status.is-active {4012  border-color: rgba(217, 104, 48, 0.45);4013  background: rgba(217, 104, 48, 0.1);4014  color: rgba(240, 232, 216, 0.85);4015}40164017.peach-duress-form {4018  padding: 8px 0 4px;4019  display: flex;4020  flex-direction: column;4021  gap: 6px;4022}40234024.peach-duress-form .peach-label {4025  margin-top: 4px;4026}40274028.peach-duress-actions {4029  display: flex;4030  gap: 6px;4031  align-items: center;4032  margin-top: 4px;4033}40344035.peach-duress-actions .peach-btn:first-child {4036  margin-right: auto;4037}40384039/* Improved overlay spring entrance */4040.peach-overlay-view.ov-enter-up {4041  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4042}40434044@keyframes ov-enter-up-spring {4045  from { opacity: 0; transform: translateY(16px) scale(0.98); }4046  to   { opacity: 1; transform: translateY(0) scale(1); }4047}40484049.peach-overlay-view.ov-enter-right {4050  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4051}40524053@keyframes ov-enter-right-spring {4054  from { opacity: 0; transform: translateX(18px) scale(0.98); }4055  to   { opacity: 1; transform: translateX(0) scale(1); }4056}40574058/* ── Onboarding-mode restore screens (CJK phrase / file import) ── */4059/* Used when CJKImportView or MainImportView renders during onboarding4060   (no vault yet). Animates like a lock-screen transition. */4061.peach-lock-view {4062  position: absolute;4063  inset: 0;4064  display: flex;4065  flex-direction: column;4066  background:4067    radial-gradient(120% 80% at 0% 0%, rgba(217,104,48,0.08) 0%, transparent 65%),4068    radial-gradient(85% 100% at 100% 100%, rgba(217,104,48,0.06) 0%, transparent 70%),4069    var(--peach-bg);4070  z-index: 2;4071  overflow: hidden;4072  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4073}40744075.peach-lock-view-header {4076  display: flex;4077  align-items: center;4078  justify-content: space-between;4079  padding: 16px 18px 12px;4080  flex-shrink: 0;4081}40824083/* ───────── Settings: auto-lock select ───────── */4084.peach-settings-select {4085  font-family: "IBM Plex Mono", monospace;4086  font-size: 11px;4087  background: transparent;4088  border: 1px solid var(--peach-t3);4089  border-radius: 4px;4090  color: var(--peach-t1);4091  padding: 3px 6px;4092  cursor: pointer;4093  outline: none;4094}4095.peach-settings-select:focus {4096  border-color: var(--peach-accent);4097}40984099/* ───────── Duress status pill (new polished) ───────── */4100.peach-duress-status-pill {4101  font-family: "IBM Plex Mono", monospace;4102  font-size: 9px;4103  text-transform: uppercase;4104  letter-spacing: 0.12em;4105  padding: 2px 8px;4106  border-radius: 12px;4107  background: var(--peach-t3);4108  color: var(--peach-t2);4109  flex-shrink: 0;4110}4111.peach-duress-status-pill.is-active {4112  background: rgba(217, 104, 48, 0.15);4113  color: var(--peach-accent);4114}41154116/* ───────── Entry advanced disclosure (canary) ───────── */4117.peach-entry-advanced {4118  margin-top: 12px;4119  border-top: 1px solid var(--peach-t3);4120  padding-top: 10px;4121  position: relative;4122  z-index: 1;4123}4124.peach-entry-advanced-toggle {4125  display: flex;4126  align-items: center;4127  justify-content: space-between;4128  width: 100%;4129  background: transparent;4130  border: none;4131  cursor: pointer;4132  padding: 0;4133  color: var(--peach-t2);4134}4135.peach-canary-section {4136  margin-top: 10px;4137  display: grid;4138  gap: 6px;4139}41404141/* ───────── Import: merge/replace radio choices ───────── */4142.peach-import-choice {4143  display: flex;4144  align-items: flex-start;4145  gap: 10px;4146  padding: 8px 10px;4147  border: 1px solid var(--peach-t3);4148  border-radius: 10px;4149  cursor: pointer;4150  margin-bottom: 6px;4151  transition: border-color 120ms ease, background 120ms ease;4152}4153.peach-import-choice:hover {4154  border-color: var(--peach-accent);4155}4156.peach-import-choice input[type="radio"] {4157  margin-top: 3px;4158  accent-color: var(--peach-accent);4159  flex-shrink: 0;4160}4161.peach-import-choice-main {4162  display: flex;4163  flex-direction: column;4164  gap: 2px;4165  min-width: 0;4166}4167.peach-import-choice-label {4168  font-size: 12px;4169  color: var(--peach-t0);4170}4171.peach-import-choice-sub {4172  font-size: 11px;4173  color: var(--peach-t2);4174  line-height: 1.5;4175}41764177/* ───────── Export: success confirmation strip ───────── */4178.peach-export-success {4179  display: flex;4180  align-items: flex-start;4181  gap: 10px;4182  padding: 12px;4183  border-radius: 12px;4184  border: 1px solid rgba(150, 175, 110, 0.3);4185  background: rgba(150, 175, 110, 0.08);4186  color: var(--peach-t0);4187  font-size: 12px;4188  line-height: 1.55;4189}4190.peach-export-success-check {4191  color: rgba(150, 175, 110, 0.9);4192  font-size: 14px;4193  flex-shrink: 0;4194}41954196/* ── Trash view ──────────────────────────────────────────────────────── */4197.peach-trash-entry-row {4198  display: flex;4199  align-items: center;4200  justify-content: space-between;4201  gap: 8px;4202  padding: 8px 0;4203  border-bottom: 1px solid var(--peach-t3);4204}4205.peach-trash-entry-row:last-child { border-bottom: none; }4206.peach-trash-entry-info {4207  flex: 1;4208  min-width: 0;4209  display: flex;4210  flex-direction: column;4211  gap: 2px;4212}4213.peach-trash-entry-title {4214  font-size: 12px;4215  color: var(--peach-t1);4216  overflow: hidden;4217  text-overflow: ellipsis;4218  white-space: nowrap;4219}4220.peach-trash-entry-meta {4221  font-family: var(--font-mono);4222  font-size: 9px;4223  color: var(--peach-t2);4224  letter-spacing: 0.06em;4225}4226.peach-trash-entry-actions {4227  display: flex;4228  align-items: center;4229  gap: 4px;4230  flex-shrink: 0;4231}42324233/* ── Settings shortcuts grid ─────────────────────────────────────────── */4234.peach-shortcuts-grid {4235  display: grid;4236  grid-template-columns: auto 1fr;4237  gap: 6px 12px;4238  align-items: center;4239  padding: 4px 0;4240}4241.peach-shortcut-key {4242  font-family: var(--font-mono);4243  font-size: 10px;4244  color: var(--peach-t0);4245  background: var(--peach-t3);4246  border-radius: 4px;4247  padding: 2px 6px;4248  white-space: nowrap;4249  text-align: center;4250}4251.peach-shortcut-desc {4252  font-size: 11px;4253  color: var(--peach-t1);4254}42554256/* ── Sort bar trash button ───────────────────────────────────────────── */4257.peach-sort-trash-btn {4258  display: flex;4259  align-items: center;4260  justify-content: center;4261  padding: 3px 5px;4262  background: transparent;4263  border: none;4264  cursor: pointer;4265  color: var(--peach-t2);4266  border-radius: 4px;4267  transition: color 140ms ease, background 140ms ease;4268}4269.peach-sort-trash-btn:hover {4270  color: var(--peach-t1);4271  background: var(--peach-t3);4272}4273.peach-sort-trash-btn.is-active {4274  color: var(--peach-accent);4275}