popup.css

97.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: absolute;2238  inset: 0;2239  z-index: 200;2240  display: flex;2241  flex-direction: column;2242  background:2243    radial-gradient(120% 80% at 0% 0%, rgba(217,104,48,0.07) 0%, transparent 65%),2244    var(--peach-bg);2245  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2246}22472248.peach-note-editor-header {2249  display: flex;2250  align-items: center;2251  gap: 10px;2252  padding: 14px 16px 10px;2253  border-bottom: 1px solid var(--peach-t3);2254  flex-shrink: 0;2255}22562257.peach-note-editor-back {2258  background: transparent;2259  border: none;2260  cursor: pointer;2261  color: var(--peach-t2);2262  padding: 4px 6px;2263  border-radius: 6px;2264  display: flex;2265  align-items: center;2266  transition: color 120ms ease, background 120ms ease;2267  flex-shrink: 0;2268}2269.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }22702271.peach-note-editor-label {2272  flex: 1;2273  font-family: "Cormorant Garamond", "Times New Roman", serif;2274  font-style: italic;2275  font-size: 15px;2276  color: var(--peach-t1);2277  letter-spacing: 0.02em;2278}22792280.peach-note-editor-save-btn {2281  background: transparent;2282  border: 1px solid rgba(217, 104, 48, 0.4);2283  border-radius: 8px;2284  color: var(--peach-accent);2285  font-family: "IBM Plex Mono", monospace;2286  font-size: 10px;2287  letter-spacing: 0.06em;2288  text-transform: uppercase;2289  padding: 3px 10px;2290  cursor: pointer;2291  transition: background 120ms ease, border-color 120ms ease;2292}2293.peach-note-editor-save-btn:hover:not(:disabled) {2294  background: rgba(217, 104, 48, 0.1);2295  border-color: rgba(217, 104, 48, 0.65);2296}2297.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }22982299.peach-note-toolbar {2300  display: flex;2301  align-items: center;2302  gap: 3px;2303  padding: 6px 14px 5px;2304  border-bottom: 1px solid var(--peach-t3);2305  flex-shrink: 0;2306}23072308.peach-note-tool-btn {2309  background: transparent;2310  border: 1px solid transparent;2311  border-radius: 5px;2312  color: var(--peach-t2);2313  font-family: "IBM Plex Mono", monospace;2314  font-size: 10px;2315  letter-spacing: 0.04em;2316  padding: 2px 8px;2317  cursor: pointer;2318  line-height: 1.6;2319  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2320}2321.peach-note-tool-btn:hover {2322  background: var(--peach-t4);2323  color: var(--peach-t0);2324  border-color: var(--peach-t3);2325}23262327.peach-note-tool-icon {2328  padding: 3px 7px;2329  display: inline-flex;2330  align-items: center;2331  justify-content: center;2332}23332334.peach-note-tool-divider {2335  width: 1px;2336  height: 14px;2337  background: var(--peach-t3);2338  margin: 0 4px;2339  flex-shrink: 0;2340}23412342.peach-note-editor-body {2343  flex: 1;2344  overflow-y: auto;2345  padding: 16px 20px 20px;2346  outline: none;2347  font-family: "Cormorant Garamond", "Times New Roman", serif;2348  font-size: 16px;2349  line-height: 1.75;2350  color: var(--peach-t0);2351  scrollbar-width: none;2352  word-break: break-word;2353}2354.peach-note-editor-body:empty::before {2355  content: "write your note…";2356  color: var(--peach-t3);2357  font-style: italic;2358  pointer-events: none;2359}23602361/* Inline variant (Add.tsx) */2362.peach-note-editor-inline {2363  border: 1px solid var(--peach-t3);2364  border-radius: 8px;2365  overflow: hidden;2366}2367.peach-note-editor-inline .peach-note-toolbar {2368  border-bottom: 1px solid var(--peach-t3);2369  background: var(--peach-t4);2370  padding: 5px 10px 4px;2371}2372.peach-note-editor-body--inline {2373  min-height: 250px;2374  font-size: 15px;2375  padding: 10px 14px 14px;2376  background: var(--peach-t4);2377}23782379/* Rich content element styles (editor + display) */2380.peach-note-editor-body h2,2381.peach-note-content h2 {2382  font-family: "Cormorant Garamond", serif;2383  font-size: 20px;2384  font-weight: 600;2385  font-style: italic;2386  color: var(--peach-t0);2387  margin: 6px 0 2px;2388  line-height: 1.3;2389}2390.peach-note-editor-body ul,2391.peach-note-content ul {2392  padding-left: 18px;2393  margin: 3px 0;2394  list-style: disc;2395}2396.peach-note-editor-body ol,2397.peach-note-content ol {2398  padding-left: 18px;2399  margin: 3px 0;2400  list-style: decimal;2401}2402.peach-note-editor-body li,2403.peach-note-content li { margin: 2px 0; }2404.peach-note-editor-body hr,2405.peach-note-content hr {2406  border: none;2407  border-top: 1px solid var(--peach-t3);2408  margin: 10px 0;2409}24102411/* font size elements from execCommand */2412.peach-note-editor-body font[size="1"],2413.peach-note-content font[size="1"] { font-size: 11px; line-height: 1.6; }2414.peach-note-editor-body font[size="2"],2415.peach-note-content font[size="2"] { font-size: 13px; }2416.peach-note-editor-body font[size="3"],2417.peach-note-content font[size="3"] { font-size: 16px; }2418.peach-note-editor-body font[size="4"],2419.peach-note-content font[size="4"] { font-size: 20px; }2420.peach-note-editor-body font[size="5"],2421.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }24222423/* bold / italic inside the editor and note display */2424.peach-note-editor-body b, .peach-note-editor-body strong,2425.peach-note-content b, .peach-note-content strong { font-weight: 700; }2426.peach-note-editor-body em, .peach-note-editor-body i,2427.peach-note-content em, .peach-note-content i { font-style: italic; }24282429/* note display — rendered HTML, no pre-wrap */2430.peach-note-content {2431  overflow: auto;2432  max-height: 340px;2433  word-break: break-word;2434}24352436/* ── Note textarea ── */2437.peach-note-textarea {2438  width: 100%;2439  min-height: 180px;2440  max-height: 280px;2441  resize: vertical;2442  background: var(--peach-t4);2443  border: 1px solid var(--peach-t3);2444  border-radius: 8px;2445  padding: 10px 12px;2446  font-family: "IBM Plex Mono", monospace;2447  font-size: 12px;2448  line-height: 1.7;2449  color: var(--peach-t1);2450  outline: none;2451  transition: border-color 150ms ease;2452}24532454.peach-note-textarea:focus {2455  border-color: var(--peach-t2);2456}24572458.peach-note-char-count {2459  font-family: "IBM Plex Mono", monospace;2460  font-size: 9px;2461  color: var(--peach-t3);2462  text-align: right;2463  margin-top: 4px;2464  letter-spacing: 0.1em;2465}24662467/* ── Field input baseline ── */2468.peach-new-field-input {2469  width: 100%;2470  background: transparent;2471  border: none;2472  border-bottom: 1px solid var(--peach-t3);2473  padding: 4px 0;2474  color: var(--peach-t1);2475  font-family: "IBM Plex Mono", monospace;2476  font-size: 13px;2477  outline: none;2478  transition: border-color 150ms ease;2479}24802481.peach-new-field-input:focus {2482  border-bottom-color: var(--peach-t0);2483  color: var(--peach-t0);2484}24852486.peach-new-name-input {2487  width: 100%;2488  background: transparent;2489  border: none;2490  border-bottom: 1px solid var(--peach-t3);2491  padding: 6px 0;2492  font-family: "Cormorant Garamond", Georgia, serif;2493  font-style: italic;2494  font-size: 28px;2495  color: var(--peach-t0);2496  outline: none;2497  transition: border-color 150ms ease;2498}24992500.peach-new-name-input:focus {2501  border-bottom-color: var(--peach-t1);2502}25032504.peach-new-name-input::placeholder {2505  color: var(--peach-t2);2506  font-style: italic;2507}25082509.peach-new-field-input::placeholder {2510  color: var(--peach-t3);2511}25122513/* ── Demo entrance animation ── */2514#hd-shell {2515  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;2516}2517@keyframes hd-shell-enter {2518  from { opacity: 0; transform: scale(0.96) translateY(16px); }2519  to   { opacity: 1; transform: scale(1) translateY(0); }2520}25212522/* ── Keyframes ── */2523@keyframes peach-char-enter {2524  from { opacity: 0; transform: translateY(0.22em); }2525  to   { opacity: 1; transform: translateY(0); }2526}2527@keyframes peach-content-enter {2528  from { opacity: 0.96; transform: translateY(4px); }2529  to   { opacity: 1; transform: translateY(0); }2530}2531@keyframes peach-content-exit {2532  from { opacity: 1; transform: translateY(0); }2533  to   { opacity: 0.92; transform: translateY(-3px); }2534}2535@keyframes peach-screen-enter {2536  from { opacity: 0; transform: translateY(14px); }2537  to   { opacity: 1; transform: translateY(0); }2538}2539@keyframes peach-shell-fade-in {2540  from { opacity: 0; }2541  to   { opacity: 1; }2542}2543@keyframes peach-veil-in {2544  from { opacity: 0; }2545  to   { opacity: 1; }2546}2547@keyframes peach-lock-settle {2548  0%   { transform: scale(0.9); }2549  65%  { transform: scale(1.08); }2550  100% { transform: scale(1); }2551}2552@keyframes peach-copy-confirm {2553  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2554  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); }2555}2556@keyframes peach-copy-retreat {2557  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); }2558  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2559}2560@keyframes peach-copy-flood {2561  from { opacity: 0; transform: scaleX(0.15); }2562  to   { opacity: 1; transform: scaleX(1); }2563}2564@keyframes peach-copy-icon-settle {2565  from  { transform: scale(0.84); }2566  70%   { transform: scale(1.08); }2567  to    { transform: scale(1); }2568}2569@keyframes peach-copy-sheen-retreat {2570  from { opacity: 1; transform: scaleX(1); }2571  to   { opacity: 0; transform: scaleX(0.15); }2572}2573@keyframes peach-copy-drain {2574  from { width: 100%; }2575  to   { width: 0; }2576}2577@keyframes peach-shake {2578  0%, 100% { transform: translateX(0); }2579  20%      { transform: translateX(-6px); }2580  40%      { transform: translateX(6px); }2581  60%      { transform: translateX(-4px); }2582  80%      { transform: translateX(4px); }2583}25842585@keyframes pip-pulse {2586  0% { transform: scale(1); }2587  40% { transform: scale(2.2); }2588  100% { transform: scale(1); }2589}259025912592/* ── Password generator ── */2593.peach-pwgen-body {2594  flex: 1; overflow-y: auto;2595  display: flex; flex-direction: column;2596}2597.peach-policy-badge {2598  display: flex; align-items: center;2599  padding: 6px 20px 0;2600  font-size: 10px; font-family: Inter, sans-serif;2601  color: var(--peach-t2); letter-spacing: 0.04em;2602}2603.peach-pwgen-display {2604  padding: 14px 20px 12px;2605  border-bottom: 1px solid var(--peach-t3);2606  display: flex; align-items: flex-start; gap: 10px;2607}2608.peach-pwgen-display-row {2609  display: flex;2610  align-items: flex-start;2611  gap: 8px;2612  padding-bottom: 8px;2613  border-bottom: 1px solid var(--peach-t3);2614}2615.peach-pwgen-output {2616  flex: 1; min-width: 0; margin: 0;2617  font-family: "IBM Plex Mono", monospace;2618  font-size: 13px; color: var(--peach-t0);2619  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;2620  white-space: normal;2621  padding: 10px 12px;2622  background: var(--peach-t4);2623  border-radius: 6px;2624  min-height: 36px;2625}2626.peach-pwgen-output-display {2627  flex: 1;2628  min-width: 0;2629  margin: 0;2630  font-family: "Cormorant Garamond", "Times New Roman", serif;2631  font-style: italic;2632  font-weight: 300;2633  font-size: 32px;2634  line-height: 1.05;2635  color: var(--peach-t0);2636  word-break: break-all;2637  overflow-wrap: break-word;2638  white-space: normal;2639  letter-spacing: 0.02em;2640}2641.peach-pwgen-display-actions {2642  display: flex;2643  flex-direction: column;2644  gap: 4px;2645  flex-shrink: 0;2646  margin-top: 2px;2647}2648.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }2649.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }2650.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }2651.peach-pwgen-len-num {2652  font-family: "IBM Plex Mono", monospace;2653  font-size: 12px; color: var(--peach-accent);2654}2655.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }2656.peach-pwgen-toggles { display: flex; flex-direction: column; }2657.peach-pwgen-charset-pills {2658  display: flex;2659  gap: 6px;2660  flex-wrap: wrap;2661}2662.peach-pwgen-pill {2663  padding: 4px 11px;2664  border-radius: 999px;2665  border: 1px solid var(--peach-t3);2666  background: transparent;2667  color: var(--peach-t2);2668  font-family: "IBM Plex Mono", monospace;2669  font-size: 9px;2670  letter-spacing: 0.08em;2671  cursor: pointer;2672  transition: all 150ms ease;2673}2674.peach-pwgen-pill.is-on {2675  border-color: rgba(217, 104, 48, 0.5);2676  background: rgba(217, 104, 48, 0.1);2677  color: var(--peach-accent);2678}2679.peach-pwgen-pill:not(.is-on):hover {2680  color: var(--peach-t1);2681  border-color: var(--peach-t2);2682}2683.peach-pwgen-use-btn {2684  width: 100%;2685  min-height: 34px;2686  border-radius: 8px;2687  margin-top: 2px;2688}2689.peach-pwgen-toggle-row {2690  display: flex; align-items: center; justify-content: space-between;2691  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);2692}2693.peach-pwgen-toggle-row:last-child { border-bottom: none; }2694.peach-pwgen-toggle-label { font-size: 13px; color: var(--peach-t1); }26952696.peach-screen-prelock {2697  z-index: 10;2698}26992700.prelock-form {2701  display: grid;2702  gap: 12px;2703}27042705/* Peach popup should not expose native scrollbars on internal panels. */2706.peach-settings-body,2707.peach-new-body,2708.peach-pwgen-body,2709.lock-screen,2710.peach-import-preview {2711  scrollbar-width: none;2712  -ms-overflow-style: none;2713  overscroll-behavior: contain;2714}2715.peach-settings-body::-webkit-scrollbar,2716.peach-new-body::-webkit-scrollbar,2717.peach-pwgen-body::-webkit-scrollbar,2718.lock-screen::-webkit-scrollbar,2719.peach-import-preview::-webkit-scrollbar {2720  width: 0;2721  height: 0;2722  display: none;2723}27242725.lock-screen {2726  height: 100%;2727  min-height: 100%;2728  overflow-y: auto;2729  padding: 18px 18px 16px;2730  gap: 14px;2731  grid-template-rows: auto auto auto 1fr auto;2732  align-content: stretch;2733  position: relative;2734  isolation: isolate;2735}2736.peach-screen.lock-screen--vault-stage {2737  display: flex;2738  flex-direction: column;2739  justify-content: flex-start;2740  gap: 18px;2741  padding: 20px 18px 18px;2742  overflow: hidden;2743}2744.peach-screen.lock-screen--vault-stage .peach-lock-panel {2745  margin-top: auto;2746}2747.lock-screen--onboarding {2748  display: flex;2749  flex-direction: column;2750  gap: 12px;2751  justify-content: flex-start;2752}27532754.lock-screen::before {2755  content: "";2756  position: absolute;2757  inset: 12px 18px auto auto;2758  width: 160px;2759  height: 160px;2760  border-radius: 999px;2761  background:2762    radial-gradient(circle at 50% 50%, rgba(217, 104, 48, 0.18) 0%, rgba(217, 104, 48, 0.06) 42%, transparent 72%);2763  filter: blur(6px);2764  opacity: 0.7;2765  pointer-events: none;2766  z-index: 0;2767}27682769.lock-screen-header {2770  display: flex;2771  align-items: center;2772  justify-content: space-between;2773  position: relative;2774  z-index: 1;2775}27762777.lock-password-input.shake {2778  animation: peach-shake 300ms ease-in-out;2779}27802781.peach-hint-error {2782  color: rgba(220, 80, 60, 0.92);2783}27842785.peach-onboarding-headline {2786  margin: 0;2787  font-family: "Cormorant Garamond", "Times New Roman", serif;2788  font-size: 35px;2789  line-height: 0.88;2790  font-style: italic;2791  font-weight: 400;2792  max-width: 252px;2793}27942795.peach-lock-copy {2796  display: grid;2797  gap: 8px;2798  position: relative;2799  z-index: 1;2800}28012802.peach-lock-copy--onboarding {2803  gap: 10px;2804}28052806.peach-lock-hero {2807  position: relative;2808  z-index: 1;2809  display: grid;2810  gap: 8px;2811  min-height: 0;2812  padding: 4px 2px 0;2813  border: none;2814  border-radius: 0;2815  background: transparent;2816  box-shadow: none;2817}2818.peach-lock-hero-art {2819  position: absolute;2820  right: -8px;2821  top: -6px;2822  width: 120px;2823  height: 120px;2824  display: flex;2825  align-items: center;2826  justify-content: center;2827  pointer-events: none;2828  opacity: 0.12;2829  filter: saturate(0.9);2830}2831.peach-lock-hero-mark {2832  width: 100%;2833  height: 100%;2834}2835.peach-lock-hero-mark path:first-child {2836  fill: rgba(217, 104, 48, 0.92);2837}2838.peach-lock-hero-mark path:nth-child(2),2839.peach-lock-hero-mark path:nth-child(3) {2840  stroke: rgba(123, 144, 96, 0.88);2841  fill: rgba(123, 144, 96, 0.88);2842}2843.peach-lock-hero > *:not(.peach-lock-hero-art) {2844  position: relative;2845  z-index: 1;2846}28472848.peach-lock-eyebrow {2849  display: inline-flex;2850  align-items: center;2851  width: fit-content;2852  padding: 4px 9px;2853  border-radius: 999px;2854  border: 1px solid rgba(217, 104, 48, 0.22);2855  background: rgba(217, 104, 48, 0.08);2856  color: var(--peach-t0);2857  font-family: "IBM Plex Mono", monospace;2858  font-size: 8px;2859  letter-spacing: 0.18em;2860  text-transform: uppercase;2861}28622863.peach-lock-label-row {2864  display: flex;2865  align-items: center;2866  justify-content: space-between;2867  margin-bottom: 0;2868}28692870.peach-lock-reveal-btn {2871  display: inline-flex;2872  align-items: center;2873  gap: 4px;2874  background: none;2875  border: none;2876  cursor: pointer;2877  font-family: "IBM Plex Mono", monospace;2878  font-size: 9px;2879  letter-spacing: 0.06em;2880  color: var(--peach-t2);2881  padding: 2px 0;2882  transition: color 150ms ease;2883}28842885.peach-lock-reveal-btn:hover {2886  color: var(--peach-t1);2887}28882889.peach-lock-warning {2890  color: rgba(220, 80, 60, 0.85) !important;2891  line-height: 1.5;2892}28932894.peach-onboarding-cards {2895  display: grid;2896  gap: 8px;2897  position: relative;2898  z-index: 1;2899}29002901.peach-lock-panel {2902  position: relative;2903  z-index: 1;2904  display: grid;2905  gap: 9px;2906  padding: 14px 16px 15px;2907  border-radius: 18px;2908  border: 1px solid var(--peach-t3);2909  background:2910    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));2911  box-shadow:2912    inset 0 1px 0 rgba(240, 232, 216, 0.04),2913    0 12px 28px rgba(0, 0, 0, 0.12);2914}29152916.peach-lock-panel--secondary {2917  gap: 12px;2918}29192920.peach-lock-panel-header {2921  display: flex;2922  align-items: baseline;2923  justify-content: space-between;2924  gap: 12px;2925}29262927.peach-lock-option-grid {2928  display: grid;2929  gap: 10px;2930}29312932.peach-lock-option {2933  width: 100%;2934  display: grid;2935  gap: 6px;2936  padding: 14px 15px;2937  border-radius: 16px;2938  border: 1px solid rgba(240, 232, 216, 0.08);2939  background: rgba(240, 232, 216, 0.02);2940  color: var(--peach-t0);2941  text-align: left;2942  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;2943}29442945.peach-lock-option:hover {2946  border-color: rgba(217, 104, 48, 0.28);2947  background: rgba(240, 232, 216, 0.04);2948  transform: translateY(-1px);2949}29502951.peach-lock-option-title {2952  font-size: 12px;2953  color: var(--peach-t0);2954}29552956.peach-lock-option-copy {2957  font-size: 11px;2958  line-height: 1.55;2959  color: var(--peach-t1);2960}29612962.peach-onboarding-stack {2963  margin-top: 2px;2964}2965.peach-lock-panel-footer {2966  display: grid;2967  gap: 6px;2968  margin-top: 2px;2969  padding-top: 10px;2970  border-top: 1px solid rgba(240, 232, 216, 0.06);2971}29722973/* Restore picker panel — method option cards */2974.peach-lock-panel--restore {2975  gap: 10px;2976}2977.peach-lock-option--history {2978  border-color: rgba(240, 232, 216, 0.06);2979  opacity: 0.85;2980}29812982/* Snapshot restore panel */2983.peach-snapshot-panel {2984  gap: 10px;2985  overflow-y: auto;2986  max-height: 340px;2987}2988.peach-snapshot-list {2989  display: flex;2990  flex-direction: column;2991  gap: 4px;2992}2993.peach-snapshot-row {2994  display: flex;2995  align-items: center;2996  justify-content: space-between;2997  width: 100%;2998  padding: 8px 10px;2999  border-radius: 8px;3000  border: 1px solid rgba(240, 232, 216, 0.07);3001  background: transparent;3002  cursor: pointer;3003  transition: border-color 120ms, background 120ms;3004  text-align: left;3005  gap: 8px;3006}3007.peach-snapshot-row:hover {3008  border-color: rgba(240, 232, 216, 0.14);3009  background: rgba(240, 232, 216, 0.03);3010}3011.peach-snapshot-row.is-selected {3012  border-color: rgba(217, 104, 48, 0.4);3013  background: rgba(217, 104, 48, 0.07);3014}3015.peach-snapshot-time {3016  font-size: 11.5px;3017  color: var(--peach-t0);3018  flex: 1;3019}3020.peach-snapshot-count {3021  font-family: "IBM Plex Mono", monospace;3022  font-size: 10px;3023  color: var(--peach-t2);3024  flex-shrink: 0;3025}3026.peach-snapshot-confirm {3027  display: flex;3028  flex-direction: column;3029  gap: 8px;3030  padding-top: 10px;3031  border-top: 1px solid rgba(240, 232, 216, 0.06);3032}3033.peach-snapshot-warning {3034  display: flex;3035  align-items: flex-start;3036  gap: 6px;3037  font-size: 10.5px;3038  color: rgba(220, 80, 60, 0.85);3039  line-height: 1.55;3040}3041.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3042.peach-snapshot-confirm-row {3043  display: flex;3044  gap: 6px;3045  align-items: center;3046}3047.peach-snapshot-restore-btn {3048  width: 100%;3049}3050.peach-lock-hero--unlock .peach-lock-hero-art {3051  width: 112px;3052  height: 112px;3053  right: 0;3054  top: 2px;3055  opacity: 0.1;3056}30573058.peach-card {3059  border: 1px solid var(--peach-t3);3060  border-radius: 18px;3061  background:3062    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3063  box-shadow:3064    inset 0 1px 0 rgba(240, 232, 216, 0.04),3065    0 12px 32px rgba(0, 0, 0, 0.14);3066  overflow: hidden;3067}30683069.peach-card-active {3070  border-color: rgba(217, 104, 48, 0.35);3071  box-shadow:3072    inset 0 1px 0 rgba(240, 232, 216, 0.05),3073    0 16px 38px rgba(0, 0, 0, 0.18),3074    0 0 0 1px rgba(217, 104, 48, 0.08);3075}30763077.peach-card-disabled {3078  opacity: 0.72;3079}30803081.peach-card-header {3082  width: 100%;3083  padding: 13px 16px 11px;3084  background: transparent;3085  color: var(--peach-t0);3086  display: flex;3087  justify-content: space-between;3088  align-items: center;3089  text-align: left;3090  font-size: 12px;3091}30923093.peach-card-body {3094  padding: 0 16px 16px;3095  display: grid;3096  gap: 9px;3097}30983099.peach-card-tag {3100  color: var(--peach-t2);3101  font-family: "IBM Plex Mono", monospace;3102  font-size: 9px;3103  letter-spacing: 0.12em;3104  text-transform: uppercase;3105}31063107.peach-empty-copy {3108  display: grid;3109  gap: 6px;3110  color: var(--peach-t1);3111  font-size: 13px;3112}31133114.peach-lock-submit {3115  width: 100%;3116  box-shadow: 0 14px 36px rgba(217, 104, 48, 0.22);3117}31183119.peach-lock-secondary {3120  width: 100%;3121  border-color: var(--peach-t3);3122  background: rgba(240, 232, 216, 0.02);3123}31243125.peach-lock-secondary:hover {3126  background: rgba(240, 232, 216, 0.04);3127}31283129.peach-lock-note {3130  max-width: none;3131  line-height: 1.55;3132  margin: 0;3133}31343135.peach-overlay-action {3136  font-size: 10px;3137  padding: 4px 8px;3138  letter-spacing: 0.06em;3139  min-width: 44px;3140  text-align: center;3141}31423143.peach-overlay-spacer {3144  width: 32px;3145}31463147.peach-inline-action {3148  flex-shrink: 0;3149  font-size: 9px;3150  letter-spacing: 0.1em;3151  text-transform: uppercase;3152  padding: 4px 7px;3153}3154.peach-password-toggle-btn {3155  display: inline-flex;3156  align-items: center;3157  justify-content: center;3158  min-width: 30px;3159  min-height: 26px;3160  padding: 0 7px;3161  border: 1px solid var(--peach-t3);3162  border-radius: 999px;3163  background: rgba(240, 232, 216, 0.04);3164  color: var(--peach-t2);3165  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;3166}3167.peach-password-toggle-btn:hover {3168  border-color: var(--peach-t2);3169  color: var(--peach-t0);3170  background: rgba(240, 232, 216, 0.06);3171}31723173.peach-new-textarea {3174  width: 100%;3175  min-height: 88px;3176  resize: vertical;3177  border: 0;3178  outline: none;3179  background: transparent;3180  color: var(--peach-t1);3181  font-family: "IBM Plex Mono", monospace;3182  font-size: 12px;3183  line-height: 1.65;3184  caret-color: var(--peach-accent);3185}31863187.peach-new-textarea::placeholder {3188  color: var(--peach-t2);3189  opacity: 0.7;3190}31913192.peach-settings-actions {3193  display: grid;3194  gap: 8px;3195}31963197.peach-sync-section-label {3198  font-size: 11px;3199  color: var(--peach-t2);3200  text-transform: uppercase;3201  letter-spacing: 0.05em;3202}32033204.peach-sync-device-row {3205  display: flex;3206  justify-content: space-between;3207  align-items: center;3208  padding: 6px 0;3209  border-bottom: 1px solid var(--peach-t3);3210}32113212.peach-sync-device-info {3213  display: flex;3214  flex-direction: column;3215  gap: 2px;3216}32173218.peach-sync-device-name {3219  font-size: 13px;3220  color: var(--peach-t0);3221}32223223.peach-sync-device-meta {3224  font-size: 11px;3225  color: var(--peach-t2);3226}32273228.peach-sync-status-dot {3229  display: inline-block;3230  width: 8px;3231  height: 8px;3232  border-radius: 50%;3233  vertical-align: middle;3234}32353236.peach-sync-remove-btn {3237  color: var(--peach-breach);3238}32393240.peach-import-preview {3241  margin-bottom: 12px;3242  max-height: 152px;3243  overflow-y: auto;3244  border: 1px solid var(--peach-t3);3245  border-radius: 10px;3246  padding: 8px 10px;3247  display: grid;3248  gap: 8px;3249  background: rgba(240, 232, 216, 0.02);3250}32513252.peach-import-preview-row {3253  display: flex;3254  justify-content: space-between;3255  gap: 10px;3256  font-size: 11px;3257  color: var(--peach-t1);3258}32593260.peach-import-preview-title {3261  color: var(--peach-t0);3262  flex: 1;3263  min-width: 0;3264  overflow: hidden;3265  text-overflow: ellipsis;3266  white-space: nowrap;3267}32683269.peach-import-preview-meta {3270  color: var(--peach-t2);3271  flex-shrink: 0;3272  max-width: 42%;3273  overflow: hidden;3274  text-overflow: ellipsis;3275  white-space: nowrap;3276}32773278.peach-import-preview-more {3279  color: var(--peach-t2);3280  font-size: 10px;3281}32823283.peach-restore-copy {3284  margin: 0;3285  color: var(--peach-t1);3286  font-size: 11px;3287  line-height: 1.6;3288}32893290.peach-restore-warning {3291  padding: 10px 12px;3292  border-radius: 12px;3293  border: 1px solid rgba(220, 80, 60, 0.22);3294  background: rgba(220, 80, 60, 0.08);3295  color: rgba(240, 232, 216, 0.86);3296  font-size: 11px;3297  line-height: 1.55;3298}32993300.peach-provider-chips {3301  display: flex;3302  flex-wrap: wrap;3303  gap: 6px;3304}33053306.peach-provider-chip {3307  display: inline-flex;3308  align-items: center;3309  padding: 5px 8px;3310  border-radius: 999px;3311  border: 1px solid var(--peach-t3);3312  background: rgba(240, 232, 216, 0.02);3313  color: var(--peach-t1);3314  font-family: "IBM Plex Mono", monospace;3315  font-size: 8px;3316  letter-spacing: 0.08em;3317  text-transform: uppercase;3318}33193320.peach-restore-file,3321.peach-restore-input {3322  width: 100%;3323  border-radius: 10px;3324  border: 1px solid var(--peach-t3);3325  background: var(--peach-s2);3326  color: var(--peach-t0);3327  font-size: 12px;3328}33293330.peach-restore-file {3331  padding: 9px 10px;3332}33333334.peach-restore-file::file-selector-button {3335  margin-right: 10px;3336  padding: 7px 10px;3337  border: 1px solid rgba(217, 104, 48, 0.28);3338  border-radius: 999px;3339  background: rgba(217, 104, 48, 0.08);3340  color: var(--peach-t0);3341  font-size: 10px;3342  letter-spacing: 0.08em;3343  text-transform: uppercase;3344  cursor: pointer;3345}33463347.peach-restore-input {3348  padding: 10px 12px;3349}33503351.peach-auth-grid {3352  display: grid;3353  gap: 10px;3354}33553356.peach-import-summary {3357  color: var(--peach-t1);3358  font-size: 12px;3359  line-height: 1.6;3360  margin-bottom: 12px;3361}33623363.peach-restore-error {3364  color: rgba(220, 80, 60, 0.95);3365  font-size: 12px;3366  line-height: 1.55;3367}33683369.peach-cjk-qr-panel {3370  margin-top: 14px;3371  padding: 12px;3372  border-radius: 16px;3373  border: 1px solid var(--peach-t3);3374  background: rgba(240, 232, 216, 0.02);3375  display: grid;3376  gap: 10px;3377}33783379.peach-cjk-qr-frame {3380  display: grid;3381  place-items: center;3382  min-height: 212px;3383  border-radius: 14px;3384  background: #fff;3385  overflow: hidden;3386}33873388.peach-cjk-qr-frame svg {3389  display: block;3390  width: 196px;3391  height: 196px;3392}33933394.peach-cjk-qr-error,3395.peach-cjk-qr-caption {3396  color: var(--peach-t1);3397  font-size: 11px;3398  line-height: 1.55;3399}34003401.peach-cjk-qr-card {3402  max-width: 400px;3403  margin: auto;3404}34053406.peach-cjk-qr-body {3407  padding: 0 20px 20px;3408  text-align: center;3409}34103411.peach-cjk-qr-hint {3412  font-size: 11px;3413  color: var(--peach-t2);3414  margin: 0 0 14px;3415}34163417.peach-cjk-qr-image {3418  border-radius: 4px;3419  display: block;3420  margin: 0 auto;3421  width: 100%;3422  max-width: 320px;3423  height: auto;3424}34253426.peach-pro-badge {3427  padding: 2px 6px;3428  border-radius: 999px;3429  font-family: var(--font-ui);3430  font-size: 10px;3431  letter-spacing: 0.08em;3432  text-transform: uppercase;3433  background: rgba(217, 104, 48, 0.14);3434  color: var(--peach-accent);3435}34363437.peach-loading {3438  position: absolute;3439  inset: 0;3440  display: flex;3441  align-items: center;3442  justify-content: center;3443  background: var(--bg);3444  animation: peach-loading-pulse 1.2s ease-in-out infinite;3445}34463447@keyframes peach-loading-pulse {3448  0%, 100% { opacity: 0.6; }3449  50% { opacity: 1; }3450}34513452/* ── Health Dashboard ─────────────────────────────────────────────────── */3453.peach-health-body {3454  flex: 1;3455  overflow-y: auto;3456  display: flex;3457  flex-direction: column;3458}34593460.peach-health-summary {3461  padding: 10px 16px 6px;3462  font-family: "IBM Plex Mono", monospace;3463  font-size: 11px;3464}3465.peach-health-summary-warn { color: rgba(220,80,60,0.9); }3466.peach-health-summary-ok { color: var(--peach-t2); }34673468.peach-health-check-row {3469  padding: 0 16px 10px;3470}3471.peach-health-check-btn {3472  width: 100%;3473  display: flex;3474  align-items: center;3475  justify-content: center;3476}34773478.peach-health-sections {3479  flex: 1;3480  display: flex;3481  flex-direction: column;3482}34833484.peach-health-section {3485  border-bottom: 1px solid var(--peach-t3);3486}34873488.peach-health-section-header {3489  width: 100%;3490  display: flex;3491  align-items: center;3492  justify-content: space-between;3493  padding: 9px 16px;3494  background: transparent;3495  cursor: pointer;3496  color: var(--peach-t0);3497}34983499.peach-health-section-title-row {3500  display: flex;3501  align-items: center;3502  gap: 8px;3503}35043505.peach-health-count-badge {3506  display: inline-flex;3507  align-items: center;3508  justify-content: center;3509  min-width: 20px;3510  height: 18px;3511  padding: 0 5px;3512  border-radius: 999px;3513  background: rgba(220,80,60,0.15);3514  border: 1px solid rgba(220,80,60,0.25);3515  font-family: "IBM Plex Mono", monospace;3516  font-size: 9px;3517  color: rgba(220,80,60,0.9);3518}35193520.peach-health-section-title {3521  font-family: "IBM Plex Mono", monospace;3522  font-size: 11px;3523  text-transform: uppercase;3524  letter-spacing: 0.1em;3525  color: var(--peach-t1);3526}35273528.peach-health-chevron {3529  color: var(--peach-t2);3530  transition: transform 200ms ease;3531  flex-shrink: 0;3532}3533.peach-health-chevron.is-expanded {3534  transform: rotate(180deg);3535}35363537.peach-health-section-body {3538  padding: 0 16px 10px;3539  display: flex;3540  flex-direction: column;3541  gap: 4px;3542}35433544.peach-health-row {3545  display: flex;3546  align-items: flex-start;3547  justify-content: space-between;3548  gap: 8px;3549  padding: 6px 8px;3550  border-radius: 8px;3551  background: rgba(240,232,216,0.02);3552}35533554.peach-health-row-info {3555  flex: 1;3556  min-width: 0;3557  display: flex;3558  flex-direction: column;3559  gap: 2px;3560}35613562.peach-health-row-name {3563  font-family: "Cormorant Garamond", serif;3564  font-size: 15px;3565  font-style: italic;3566  font-weight: 400;3567  color: var(--peach-t0);3568  white-space: nowrap;3569  overflow: hidden;3570  text-overflow: ellipsis;3571}35723573.peach-health-row-meta {3574  font-family: "IBM Plex Mono", monospace;3575  font-size: 9px;3576  color: var(--peach-t2);3577  letter-spacing: 0.05em;3578}35793580.peach-health-fix-btn {3581  font-size: 9px;3582  letter-spacing: 0.08em;3583  text-transform: uppercase;3584  padding: 4px 7px;3585  flex-shrink: 0;3586  display: flex;3587  align-items: center;3588}35893590.peach-health-empty {3591  font-family: "IBM Plex Mono", monospace;3592  font-size: 10px;3593  color: var(--peach-t2);3594  padding: 6px 0;3595}35963597.peach-health-loading {3598  font-family: "IBM Plex Mono", monospace;3599  font-size: 10px;3600  color: var(--peach-t2);3601  padding: 6px 0;3602  display: flex;3603  align-items: center;3604  gap: 6px;3605}36063607.peach-health-loading::before {3608  content: "";3609  width: 10px;3610  height: 10px;3611  border: 1.5px solid var(--peach-t3);3612  border-top-color: var(--peach-accent);3613  border-radius: 50%;3614  animation: peach-spin 600ms linear infinite;3615}36163617@keyframes peach-spin {3618  to { transform: rotate(360deg); }3619}36203621.peach-spinner {3622  width: 32px;3623  height: 32px;3624  border: 2px solid var(--peach-s2);3625  border-top-color: var(--peach-accent);3626  border-radius: 50%;3627  margin: 0 auto 16px;3628  animation: peach-spin 0.8s linear infinite;3629}36303631.peach-progress-screen {3632  text-align: center;3633  padding: 32px 16px;3634}36353636.peach-progress-screen-title {3637  font-size: 13px;3638  color: var(--peach-t0);3639  margin-bottom: 16px;3640}36413642.peach-progress-screen-stage {3643  font-size: 11px;3644  color: var(--peach-t2);3645  min-height: 14px;3646}36473648.peach-progress-screen-note {3649  font-size: 10px;3650  color: var(--peach-t2);3651  margin-top: 8px;3652}36533654.peach-pairing-body {3655  flex: 1;3656  overflow-y: auto;3657  display: flex;3658  flex-direction: column;3659}36603661.peach-pairing-content {3662  flex: 1;3663  display: flex;3664  flex-direction: column;3665  align-items: center;3666  justify-content: center;3667  gap: 14px;3668  padding: 28px 20px;3669  text-align: center;3670}36713672.peach-pairing-headline {3673  font-family: var(--font-display);3674  font-style: italic;3675  font-weight: 300;3676  font-size: 28px;3677  color: var(--peach-t0);3678  margin: 0;3679  line-height: 1;3680}36813682.peach-pairing-subline {3683  font-size: 12px;3684  color: var(--peach-t2);3685  max-width: 220px;3686  line-height: 1.5;3687  margin: 0;3688}36893690.peach-pairing-subline--center {3691  text-align: center;3692}36933694.peach-pairing-code-display {3695  display: flex;3696  gap: 6px;3697}36983699.peach-pairing-code-digit {3700  display: flex;3701  align-items: center;3702  justify-content: center;3703  width: 36px;3704  height: 48px;3705  background: var(--peach-s2);3706  border: 1px solid var(--peach-t3);3707  border-radius: 6px;3708  font-family: var(--font-mono);3709  font-size: 22px;3710  color: var(--peach-t0);3711  letter-spacing: 0;3712}37133714.peach-pairing-countdown-ring {3715  position: relative;3716  display: inline-flex;3717  align-items: center;3718  justify-content: center;3719}37203721.peach-pairing-countdown-num {3722  position: absolute;3723  font-family: var(--font-mono);3724  font-size: 14px;3725  color: var(--peach-t1);3726}37273728.peach-pairing-ring-track {3729  fill: none;3730  stroke: var(--peach-t3);3731  stroke-width: 2;3732}37333734.peach-pairing-ring-progress {3735  fill: none;3736  stroke: var(--peach-accent);3737  stroke-width: 2;3738  stroke-linecap: round;3739  transform: rotate(-90deg);3740  transform-origin: 50% 50%;3741  transition: stroke-dashoffset 0.5s linear;3742}37433744.peach-pairing-code-inputs {3745  display: flex;3746  gap: 8px;3747}37483749.peach-pairing-code-box {3750  width: 36px;3751  height: 48px;3752  text-align: center;3753  background: var(--peach-s2);3754  border: 1px solid var(--peach-t3);3755  border-radius: 6px;3756  font-family: var(--font-mono);3757  font-size: 20px;3758  color: var(--peach-t0);3759  outline: none;3760  transition: border-color 120ms ease;3761}37623763.peach-pairing-code-box:focus {3764  border-color: var(--peach-accent);3765}37663767.peach-pairing-code-box.has-error {3768  border-color: rgba(220, 80, 60, 0.45);3769}37703771.peach-pairing-status {3772  display: flex;3773  align-items: center;3774  gap: 8px;3775  margin: 0;3776  font-size: 12px;3777  color: var(--peach-t1);3778}37793780.peach-pairing-error {3781  margin: 0;3782  font-size: 11px;3783  color: var(--peach-breach);3784}37853786.peach-pairing-error-msg {3787  color: var(--peach-t1);3788}37893790.peach-pairing-spinner {3791  width: 12px;3792  height: 12px;3793  border: 1.5px solid var(--peach-t3);3794  border-top-color: var(--peach-accent);3795  border-radius: 50%;3796  animation: peach-spin 0.8s linear infinite;3797}37983799.peach-pairing-success-icon,3800.peach-pairing-error-icon,3801.peach-pairing-hero {3802  display: inline-flex;3803  align-items: center;3804  justify-content: center;3805}38063807/* Tag chips */3808.peach-tag-chip {3809  display: inline-flex;3810  align-items: center;3811  gap: 4px;3812  padding: 3px 8px;3813  border-radius: 999px;3814  border: 1px solid rgba(217, 104, 48, 0.28);3815  background: rgba(217, 104, 48, 0.08);3816  color: rgba(240, 232, 216, 0.85);3817  font-family: "IBM Plex Mono", monospace;3818  font-size: 10px;3819  letter-spacing: 0.04em;3820}38213822.peach-tag-chip-remove {3823  background: transparent;3824  border: none;3825  color: inherit;3826  opacity: 0.6;3827  cursor: pointer;3828  padding: 0;3829  font-size: 12px;3830  line-height: 1;3831}38323833.peach-tag-chip-remove:hover {3834  opacity: 1;3835}38363837/* Tag input */3838.peach-tag-input-wrap {3839  border-bottom: 1px solid var(--peach-t3);3840}38413842.peach-tag-suggestions {3843  display: flex;3844  flex-wrap: wrap;3845  gap: 4px;3846  padding: 6px 0;3847}38483849.peach-tag-suggestion {3850  padding: 2px 8px;3851  border-radius: 999px;3852  border: 1px solid var(--peach-t3);3853  background: var(--peach-s2);3854  color: var(--peach-t1);3855  font-family: "IBM Plex Mono", monospace;3856  font-size: 10px;3857  cursor: pointer;3858  transition: border-color 80ms ease, background 80ms ease;3859}38603861.peach-tag-suggestion:hover {3862  border-color: rgba(217, 104, 48, 0.4);3863  background: rgba(217, 104, 48, 0.08);3864}38653866/* Tag filter strip */3867.peach-tag-filter-strip {3868  border-bottom: 1px solid var(--peach-t3);3869  flex-shrink: 0;3870}38713872.peach-tag-filter-chip {3873  display: inline-flex;3874  align-items: center;3875  padding: 4px 10px;3876  border-radius: 999px;3877  border: 1px solid var(--peach-t3);3878  background: transparent;3879  color: var(--peach-t2);3880  font-family: "IBM Plex Mono", monospace;3881  font-size: 9px;3882  letter-spacing: 0.06em;3883  text-transform: uppercase;3884  cursor: pointer;3885  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;3886  white-space: nowrap;3887}38883889.peach-tag-filter-chip:hover {3890  border-color: rgba(217, 104, 48, 0.35);3891  color: var(--peach-t1);3892}38933894.peach-tag-filter-chip.is-selected {3895  border-color: rgba(217, 104, 48, 0.5);3896  background: rgba(217, 104, 48, 0.12);3897  color: rgba(240, 232, 216, 0.9);3898}38993900/* ─────────────────────────────────────────────────────────────────────────3901   v1.4.12 additions3902   ─────────────────────────────────────────────────────────────────────── */39033904/* Sort bar */3905.peach-sort-bar {3906  display: flex;3907  align-items: center;3908  gap: 4px;3909  padding: 5px 12px;3910  border-bottom: 1px solid var(--peach-t3);3911  flex-shrink: 0;3912  overflow-x: auto;3913  scrollbar-width: none;3914}39153916.peach-sort-btn {3917  padding: 2px 9px;3918  border-radius: 999px;3919  border: 1px solid transparent;3920  background: transparent;3921  color: var(--peach-t2);3922  font-family: "IBM Plex Mono", monospace;3923  font-size: 9px;3924  letter-spacing: 0.07em;3925  text-transform: uppercase;3926  cursor: pointer;3927  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;3928  white-space: nowrap;3929}39303931.peach-sort-btn:hover {3932  border-color: rgba(217, 104, 48, 0.3);3933  color: var(--peach-t1);3934}39353936.peach-sort-btn.is-active {3937  border-color: rgba(217, 104, 48, 0.5);3938  background: rgba(217, 104, 48, 0.12);3939  color: rgba(240, 232, 216, 0.9);3940}39413942.peach-sort-domain-hint {3943  margin-left: auto;3944  font-family: "IBM Plex Mono", monospace;3945  font-size: 9px;3946  color: rgba(217, 104, 48, 0.6);3947  white-space: nowrap;3948  overflow: hidden;3949  text-overflow: ellipsis;3950  max-width: 110px;3951}39523953/* Tab-match badge on entry rows */3954.peach-tab-match-badge {3955  display: inline-block;3956  width: 6px;3957  height: 6px;3958  border-radius: 50%;3959  background: rgba(217, 104, 48, 0.75);3960  margin-left: 5px;3961  vertical-align: middle;3962  flex-shrink: 0;3963  box-shadow: 0 0 4px rgba(217, 104, 48, 0.4);3964}39653966.peach-entry-row.is-tab-match {3967  background: rgba(217, 104, 48, 0.04);3968  border-bottom-color: rgba(217, 104, 48, 0.08);3969}39703971.peach-entry-row.is-tab-match:hover {3972  background: rgba(217, 104, 48, 0.08);3973}39743975/* Entry list stagger entrance */3976@keyframes peach-entry-fadein {3977  from { opacity: 0; transform: translateY(4px); }3978  to   { opacity: 1; transform: translateY(0); }3979}39803981.peach-vault-list .peach-entry-row {3982  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;3983  content-visibility: auto;3984  contain-intrinsic-size: auto 44px;3985}39863987/* Button press micro-interaction */3988.peach-btn:active {3989  transform: scale(0.95);3990  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);3991}39923993.peach-sort-btn:active,3994.peach-tag-filter-chip:active {3995  transform: scale(0.93);3996  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);3997}39983999/* Password strength bar (Lock view + shared) */4000.peach-password-strength {4001  display: flex;4002  align-items: center;4003  gap: 8px;4004  margin-top: 6px;4005}40064007.peach-strength-bar {4008  flex: 1;4009  height: 3px;4010  border-radius: 2px;4011  background: var(--peach-t3);4012  overflow: hidden;4013}40144015.peach-strength-fill {4016  height: 100%;4017  border-radius: 2px;4018  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),4019              background 300ms ease;4020}40214022.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }4023.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }4024.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }4025.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }40264027.peach-strength-label {4028  font-family: "IBM Plex Mono", monospace;4029  font-style: italic;4030  font-size: 9px;4031  font-weight: 300;4032  letter-spacing: 0.06em;4033  color: var(--peach-t2);4034  min-width: 36px;4035  text-align: right;4036}40374038.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }4039.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }4040.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }4041.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }40424043/* Duress form */4044.peach-duress-status {4045  padding: 2px 8px;4046  border-radius: 999px;4047  border: 1px solid var(--peach-t3);4048  font-family: "IBM Plex Mono", monospace;4049  font-size: 9px;4050  letter-spacing: 0.07em;4051  text-transform: uppercase;4052  color: var(--peach-t2);4053  flex-shrink: 0;4054}40554056.peach-duress-status.is-active {4057  border-color: rgba(217, 104, 48, 0.45);4058  background: rgba(217, 104, 48, 0.1);4059  color: rgba(240, 232, 216, 0.85);4060}40614062.peach-duress-form {4063  padding: 8px 0 4px;4064  display: flex;4065  flex-direction: column;4066  gap: 6px;4067}40684069.peach-duress-form .peach-label {4070  margin-top: 4px;4071}40724073.peach-duress-actions {4074  display: flex;4075  gap: 6px;4076  align-items: center;4077  margin-top: 4px;4078}40794080.peach-duress-actions .peach-btn:first-child {4081  margin-right: auto;4082}40834084/* Improved overlay spring entrance */4085.peach-overlay-view.ov-enter-up {4086  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4087}40884089@keyframes ov-enter-up-spring {4090  from { opacity: 0; transform: translateY(16px) scale(0.98); }4091  to   { opacity: 1; transform: translateY(0) scale(1); }4092}40934094.peach-overlay-view.ov-enter-right {4095  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4096}40974098@keyframes ov-enter-right-spring {4099  from { opacity: 0; transform: translateX(18px) scale(0.98); }4100  to   { opacity: 1; transform: translateX(0) scale(1); }4101}41024103/* ── Onboarding-mode restore screens (CJK phrase / file import) ── */4104/* Used when CJKImportView or MainImportView renders during onboarding4105   (no vault yet). Animates like a lock-screen transition. */4106.peach-lock-view {4107  position: absolute;4108  inset: 0;4109  display: flex;4110  flex-direction: column;4111  background:4112    radial-gradient(120% 80% at 0% 0%, rgba(217,104,48,0.08) 0%, transparent 65%),4113    radial-gradient(85% 100% at 100% 100%, rgba(217,104,48,0.06) 0%, transparent 70%),4114    var(--peach-bg);4115  z-index: 2;4116  overflow: hidden;4117  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4118}41194120.peach-lock-view-header {4121  display: flex;4122  align-items: center;4123  justify-content: space-between;4124  padding: 16px 18px 12px;4125  flex-shrink: 0;4126}41274128/* ───────── Settings: auto-lock select ───────── */4129.peach-settings-select {4130  font-family: "IBM Plex Mono", monospace;4131  font-size: 11px;4132  background: transparent;4133  border: 1px solid var(--peach-t3);4134  border-radius: 4px;4135  color: var(--peach-t1);4136  padding: 3px 6px;4137  cursor: pointer;4138  outline: none;4139}4140.peach-settings-select:focus {4141  border-color: var(--peach-accent);4142}41434144/* ───────── Duress status pill (new polished) ───────── */4145.peach-duress-status-pill {4146  font-family: "IBM Plex Mono", monospace;4147  font-size: 9px;4148  text-transform: uppercase;4149  letter-spacing: 0.12em;4150  padding: 2px 8px;4151  border-radius: 12px;4152  background: var(--peach-t3);4153  color: var(--peach-t2);4154  flex-shrink: 0;4155}4156.peach-duress-status-pill.is-active {4157  background: rgba(217, 104, 48, 0.15);4158  color: var(--peach-accent);4159}41604161/* ───────── Entry advanced disclosure (canary) ───────── */4162.peach-entry-advanced {4163  margin-top: 12px;4164  border-top: 1px solid var(--peach-t3);4165  padding-top: 10px;4166  position: relative;4167  z-index: 1;4168}4169.peach-entry-advanced-toggle {4170  display: flex;4171  align-items: center;4172  justify-content: space-between;4173  width: 100%;4174  background: transparent;4175  border: none;4176  cursor: pointer;4177  padding: 0;4178  color: var(--peach-t2);4179}4180.peach-canary-section {4181  margin-top: 10px;4182  display: grid;4183  gap: 6px;4184}41854186/* ───────── Import: merge/replace radio choices ───────── */4187.peach-import-choice {4188  display: flex;4189  align-items: flex-start;4190  gap: 10px;4191  padding: 8px 10px;4192  border: 1px solid var(--peach-t3);4193  border-radius: 10px;4194  cursor: pointer;4195  margin-bottom: 6px;4196  transition: border-color 120ms ease, background 120ms ease;4197}4198.peach-import-choice:hover {4199  border-color: var(--peach-accent);4200}4201.peach-import-choice input[type="radio"] {4202  margin-top: 3px;4203  accent-color: var(--peach-accent);4204  flex-shrink: 0;4205}4206.peach-import-choice-main {4207  display: flex;4208  flex-direction: column;4209  gap: 2px;4210  min-width: 0;4211}4212.peach-import-choice-label {4213  font-size: 12px;4214  color: var(--peach-t0);4215}4216.peach-import-choice-sub {4217  font-size: 11px;4218  color: var(--peach-t2);4219  line-height: 1.5;4220}42214222/* ───────── Export: success confirmation strip ───────── */4223.peach-export-success {4224  display: flex;4225  align-items: flex-start;4226  gap: 10px;4227  padding: 12px;4228  border-radius: 12px;4229  border: 1px solid rgba(150, 175, 110, 0.3);4230  background: rgba(150, 175, 110, 0.08);4231  color: var(--peach-t0);4232  font-size: 12px;4233  line-height: 1.55;4234}4235.peach-export-success-check {4236  color: rgba(150, 175, 110, 0.9);4237  font-size: 14px;4238  flex-shrink: 0;4239}42404241/* ── Trash view ──────────────────────────────────────────────────────── */4242.peach-trash-entry-row {4243  display: flex;4244  align-items: center;4245  justify-content: space-between;4246  gap: 8px;4247  padding: 8px 0;4248  border-bottom: 1px solid var(--peach-t3);4249}4250.peach-trash-entry-row:last-child { border-bottom: none; }4251.peach-trash-entry-info {4252  flex: 1;4253  min-width: 0;4254  display: flex;4255  flex-direction: column;4256  gap: 2px;4257}4258.peach-trash-entry-title {4259  font-size: 12px;4260  color: var(--peach-t1);4261  overflow: hidden;4262  text-overflow: ellipsis;4263  white-space: nowrap;4264}4265.peach-trash-entry-meta {4266  font-family: var(--font-mono);4267  font-size: 9px;4268  color: var(--peach-t2);4269  letter-spacing: 0.06em;4270}4271.peach-trash-entry-actions {4272  display: flex;4273  align-items: center;4274  gap: 4px;4275  flex-shrink: 0;4276}42774278/* ── Settings shortcuts grid ─────────────────────────────────────────── */4279.peach-shortcuts-grid {4280  display: grid;4281  grid-template-columns: auto 1fr;4282  gap: 6px 12px;4283  align-items: center;4284  padding: 4px 0;4285}4286.peach-shortcut-key {4287  font-family: var(--font-mono);4288  font-size: 10px;4289  color: var(--peach-t0);4290  background: var(--peach-t3);4291  border-radius: 4px;4292  padding: 2px 6px;4293  white-space: nowrap;4294  text-align: center;4295}4296.peach-shortcut-desc {4297  font-size: 11px;4298  color: var(--peach-t1);4299}43004301/* ── Sort bar trash button ───────────────────────────────────────────── */4302.peach-sort-trash-btn {4303  display: flex;4304  align-items: center;4305  justify-content: center;4306  padding: 3px 5px;4307  background: transparent;4308  border: none;4309  cursor: pointer;4310  color: var(--peach-t2);4311  border-radius: 4px;4312  transition: color 140ms ease, background 140ms ease;4313}4314.peach-sort-trash-btn:hover {4315  color: var(--peach-t1);4316  background: var(--peach-t3);4317}4318.peach-sort-trash-btn.is-active {4319  color: var(--peach-accent);4320}