popup.css

98.3 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 + inline note toolbar */1889.peach-new-type-row {1890  display: flex;1891  align-items: center;1892  gap: 6px;1893  margin-bottom: 2px;1894}1895.peach-new-type-btn {1896  background: transparent;1897  border: 1px solid var(--peach-t3);1898  border-radius: 12px;1899  padding: 3px 10px;1900  font-family: "IBM Plex Mono", monospace;1901  font-size: 9px;1902  letter-spacing: 0.12em;1903  text-transform: uppercase;1904  color: var(--peach-t2);1905  cursor: pointer;1906  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;1907}1908.peach-new-type-btn.is-active {1909  color: var(--peach-t0);1910  border-color: var(--peach-accent);1911  background: rgba(217, 104, 48, 0.08);1912}1913.peach-new-type-btn:not(.is-active):hover {1914  color: var(--peach-t1);1915  border-color: var(--peach-t2);1916}19171918/* Editable title */1919.peach-new-title-wrap { margin: 0 0 2px; }1920.peach-new-title-input {1921  background: transparent;1922  border: none;1923  outline: none;1924  width: 100%;1925  color: var(--peach-t0);1926  font-family: "Cormorant Garamond", Georgia, serif;1927  font-style: italic;1928  font-weight: 400;1929  font-size: 40px;1930  line-height: 0.95;1931  caret-color: var(--peach-accent);1932}1933.peach-new-title-input::placeholder { color: var(--peach-t2); }19341935/* Editable domain field */1936.peach-domain-value--edit {1937  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1938  font-size: 10px;1939  font-style: italic;1940  letter-spacing: 0.12em;1941  color: var(--peach-t1);1942  background: transparent;1943  border: none;1944  border-bottom: 1px solid var(--peach-t3);1945  outline: none;1946  width: 100%;1947  padding: 2px 0;1948  caret-color: var(--peach-accent);1949  transition: border-color 140ms ease, color 140ms ease;1950}1951.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }1952.peach-domain-value--edit:focus {1953  border-bottom-color: rgba(240, 232, 216, 0.28);1954  color: var(--peach-t0);1955}19561957/* Editable field values (username, password, totp) */1958.peach-field-value--edit {1959  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1960  font-size: 13px;1961  color: var(--peach-t0);1962  background: transparent;1963  border: none;1964  border-bottom: 1px solid var(--peach-t3);1965  outline: none;1966  flex: 1;1967  min-width: 0;1968  padding: 3px 0;1969  caret-color: var(--peach-accent);1970  transition: border-color 140ms ease, color 140ms ease;1971}1972.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }1973.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }1974.peach-field-value--edit:focus {1975  border-bottom-color: rgba(240, 232, 216, 0.28);1976  color: var(--peach-t0);1977}19781979/* "+ add optional field" links */1980.peach-entry-add-links {1981  display: flex;1982  gap: 12px;1983  flex-wrap: wrap;1984  margin-top: -2px;1985}1986.peach-add-field-link {1987  background: transparent;1988  border: none;1989  padding: 0;1990  cursor: pointer;1991  font-family: "IBM Plex Mono", monospace;1992  font-size: 9px;1993  letter-spacing: 0.1em;1994  text-transform: uppercase;1995  color: var(--peach-t2);1996  transition: color 140ms ease;1997}1998.peach-add-field-link:hover { color: var(--peach-accent); }19992000/* ── New entry form (legacy classes) ────────────────────────────────── */2001.peach-new-body {2002  flex: 1;2003  overflow-y: auto;2004  padding: 10px 20px 14px;2005}2006.peach-new-name-input {2007  background: transparent;2008  border: none;2009  outline: none;2010  width: 100%;2011  color: var(--peach-t0);2012  font-family: "Cormorant Garamond", Georgia, serif;2013  font-style: italic;2014  font-weight: 400;2015  font-size: 40px;2016  line-height: 0.95;2017  caret-color: var(--peach-accent);2018}2019.peach-new-name-input::placeholder { color: var(--peach-t2); }2020.peach-new-field-input {2021  background: transparent;2022  border: none;2023  outline: none;2024  flex: 1;2025  min-width: 0;2026  caret-color: var(--peach-accent);2027}2028.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }20292030/* ── Canary card ── */2031.peach-canary-card {2032  border: 1px solid rgba(217, 160, 48, 0.2);2033  background: rgba(217, 160, 48, 0.03);2034  border-radius: 8px;2035  padding: 12px;2036}20372038.peach-canary-settings-header {2039  display: flex;2040  align-items: center;2041  justify-content: space-between;2042  cursor: pointer;2043  user-select: none;2044}20452046.peach-canary-card .peach-label {2047  color: rgba(217, 160, 48, 0.85);2048}20492050.peach-canary-card .peach-new-field-input {2051  border-color: rgba(217, 160, 48, 0.25);2052}20532054.peach-canary-card .peach-new-field-input:focus {2055  border-color: rgba(217, 160, 48, 0.5);2056}20572058.peach-canary-body {2059  margin-top: 12px;2060  display: flex;2061  flex-direction: column;2062  gap: 10px;2063}20642065.peach-canary-explainer {2066  display: flex;2067  gap: 10px;2068  padding: 10px 12px;2069  border-radius: 10px;2070  background: rgba(217, 160, 48, 0.06);2071  border: 1px solid rgba(217, 160, 48, 0.22);2072  margin-bottom: 4px;2073}20742075.peach-canary-explainer-icon {2076  font-size: 16px;2077  flex-shrink: 0;2078  line-height: 1.2;2079}20802081.peach-canary-explainer-title {2082  font-family: var(--font-ui);2083  font-size: 11px;2084  font-weight: 500;2085  color: rgba(217, 160, 48, 0.9);2086  margin: 0 0 3px;2087}20882089.peach-canary-explainer-copy {2090  font-family: var(--font-ui);2091  font-size: 10px;2092  color: var(--peach-t2);2093  line-height: 1.55;2094  margin: 0;2095}20962097.peach-canary-hint {2098  font-size: 10px;2099  color: var(--peach-t2);2100  font-family: Inter, system-ui, sans-serif;2101  line-height: 1.5;2102  margin-top: 4px;2103}21042105.peach-canary-actions-row {2106  display: flex;2107  align-items: center;2108  gap: 8px;2109}21102111.peach-canary-test-btn {2112  border-color: rgba(217, 160, 48, 0.3);2113  color: rgba(217, 160, 48, 0.85);2114}21152116.peach-canary-test-result {2117  font-size: 10px;2118  font-family: Inter, system-ui, sans-serif;2119}21202121.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2122.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }21232124.peach-canary-badge {2125  display: flex;2126  position: relative;2127  z-index: 1;2128  align-items: center;2129  gap: 5px;2130  padding: 4px 10px;2131  background: rgba(217, 160, 48, 0.12);2132  border: 1px solid rgba(217, 160, 48, 0.35);2133  border-radius: 6px;2134  margin-bottom: 6px;2135  width: fit-content;2136}21372138.peach-canary-badge-label {2139  font-size: 10px;2140  letter-spacing: 0.06em;2141  color: rgba(217, 160, 48, 0.9);2142  font-family: var(--font-ui);2143  text-transform: uppercase;2144}21452146.peach-canary-badge-icon {2147  font-size: 11px;2148}21492150.peach-canary-suppress-row {2151  display: flex;2152  align-items: center;2153  gap: 8px;2154  padding: 6px 10px;2155  background: rgba(217, 160, 48, 0.08);2156  border-radius: 6px;2157  margin-bottom: 8px;2158}21592160.peach-canary-suppress-label {2161  font-size: 11px;2162  color: rgba(217, 160, 48, 0.85);2163  cursor: pointer;2164  font-family: var(--font-ui);2165  letter-spacing: 0.04em;2166}21672168.peach-regen-panel {2169  position: relative;2170  z-index: 1;2171  background: rgba(217, 104, 48, 0.08);2172  border: 1px solid rgba(217, 104, 48, 0.25);2173  border-radius: 8px;2174  padding: 12px;2175  margin-bottom: 8px;2176}21772178.peach-regen-panel-header {2179  display: flex;2180  align-items: center;2181  justify-content: space-between;2182  margin-bottom: 10px;2183}21842185.peach-regen-panel-title {2186  font-size: 11px;2187  font-weight: 600;2188  letter-spacing: 0.06em;2189  text-transform: uppercase;2190  color: rgba(217, 104, 48, 0.9);2191}21922193.peach-regen-output {2194  background: rgba(0, 0, 0, 0.2);2195  border-radius: 6px;2196  padding: 10px;2197  margin-bottom: 10px;2198  font-family: var(--font-mono);2199  font-size: 13px;2200  word-break: break-all;2201  color: var(--peach-t1);2202}22032204.peach-regen-actions {2205  display: flex;2206  gap: 6px;2207}22082209.peach-regen-actions--spaced {2210  margin-bottom: 8px;2211}22122213.peach-regen-action-grow {2214  flex: 1;2215}22162217.peach-regen-copy-btn {2218  padding: 0 8px;2219}22202221.peach-regen-success {2222  position: relative;2223  z-index: 1;2224  background: rgba(40, 180, 80, 0.1);2225  border: 1px solid rgba(40, 180, 80, 0.3);2226  border-radius: 8px;2227  padding: 10px 12px;2228  margin-bottom: 8px;2229  display: flex;2230  align-items: center;2231  gap: 8px;2232  font-size: 11px;2233  color: rgba(40, 180, 80, 0.9);2234}22352236/* ── Note editor overlay ── */2237.peach-note-editor {2238  position: absolute;2239  inset: 0;2240  z-index: 200;2241  display: flex;2242  flex-direction: column;2243  background:2244    radial-gradient(120% 80% at 0% 0%, rgba(217,104,48,0.07) 0%, transparent 65%),2245    var(--peach-bg);2246  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2247}22482249.peach-note-editor-header {2250  display: flex;2251  align-items: center;2252  gap: 10px;2253  padding: 14px 16px 10px;2254  border-bottom: 1px solid var(--peach-t3);2255  flex-shrink: 0;2256}22572258.peach-note-editor-back {2259  background: transparent;2260  border: none;2261  cursor: pointer;2262  color: var(--peach-t2);2263  padding: 4px 6px;2264  border-radius: 6px;2265  display: flex;2266  align-items: center;2267  transition: color 120ms ease, background 120ms ease;2268  flex-shrink: 0;2269}2270.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }22712272.peach-note-editor-label {2273  flex: 1;2274  font-family: "Cormorant Garamond", "Times New Roman", serif;2275  font-style: italic;2276  font-size: 15px;2277  color: var(--peach-t1);2278  letter-spacing: 0.02em;2279}22802281.peach-note-editor-save-btn {2282  background: transparent;2283  border: 1px solid rgba(217, 104, 48, 0.4);2284  border-radius: 8px;2285  color: var(--peach-accent);2286  font-family: "IBM Plex Mono", monospace;2287  font-size: 10px;2288  letter-spacing: 0.06em;2289  text-transform: uppercase;2290  padding: 3px 10px;2291  cursor: pointer;2292  transition: background 120ms ease, border-color 120ms ease;2293}2294.peach-note-editor-save-btn:hover:not(:disabled) {2295  background: rgba(217, 104, 48, 0.1);2296  border-color: rgba(217, 104, 48, 0.65);2297}2298.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }22992300.peach-note-toolbar {2301  display: flex;2302  align-items: center;2303  gap: 3px;2304  padding: 6px 14px 5px;2305  border-bottom: 1px solid var(--peach-t3);2306  flex-shrink: 0;2307}23082309.peach-note-tool-btn {2310  background: transparent;2311  border: 1px solid transparent;2312  border-radius: 5px;2313  color: var(--peach-t2);2314  font-family: "IBM Plex Mono", monospace;2315  font-size: 10px;2316  letter-spacing: 0.04em;2317  padding: 2px 8px;2318  cursor: pointer;2319  line-height: 1.6;2320  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2321}2322.peach-note-tool-btn:hover {2323  background: var(--peach-t4);2324  color: var(--peach-t0);2325  border-color: var(--peach-t3);2326}23272328.peach-note-tool-icon {2329  padding: 3px 7px;2330  display: inline-flex;2331  align-items: center;2332  justify-content: center;2333}23342335.peach-note-tool-divider {2336  width: 1px;2337  height: 14px;2338  background: var(--peach-t3);2339  margin: 0 4px;2340  flex-shrink: 0;2341}23422343.peach-note-editor-body {2344  flex: 1;2345  overflow-y: auto;2346  padding: 16px 20px 20px;2347  outline: none;2348  font-family: "Cormorant Garamond", "Times New Roman", serif;2349  font-size: 16px;2350  line-height: 1.75;2351  color: var(--peach-t0);2352  scrollbar-width: none;2353  word-break: break-word;2354}2355.peach-note-editor-body:empty::before {2356  content: "write your note…";2357  color: var(--peach-t3);2358  font-style: italic;2359  pointer-events: none;2360}23612362/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2363.peach-note-editor-inline {2364  border: 1px solid var(--peach-t3);2365  border-radius: 8px;2366  overflow: hidden;2367  display: flex;2368  flex-direction: column;2369  flex: 1;2370  min-height: 0;2371}2372.peach-note-editor-body--inline {2373  flex: 1;2374  min-height: 200px;2375  font-size: 15px;2376  padding: 10px 14px 14px;2377  background: var(--peach-t4);2378}23792380/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2381   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2382   and .peach-note-tool-divider button-level styles. */2383.peach-note-toolbar-inline {2384  display: flex;2385  align-items: center;2386  gap: 3px;2387  margin-left: auto;2388  padding-left: 10px;2389  border-left: 1px solid var(--peach-t3);2390  min-height: 22px;2391}23922393/* Entry.tsx toolbar row (no tabs, toolbar only) */2394.peach-entry-note-toolbar-row {2395  display: flex;2396  align-items: center;2397  margin: 4px 0 6px;2398  position: relative;2399  z-index: 1;2400}2401.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2402  border-left: none;2403  padding-left: 0;2404  margin-left: 0;2405}24062407/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2408.peach-note-body {2409  display: flex;2410  flex-direction: column;2411  flex: 1;2412  min-height: 0;2413  margin: 4px 0 0;2414}2415.peach-entry-body--new .peach-note-body {2416  margin: 4px 12px 0;2417}24182419/* Add.tsx body is a grid by default; swap to a flex column when a note is2420   active so the note body can stretch and pin the tags row to the bottom. */2421.peach-entry-body--new:has(.peach-note-body) {2422  display: flex;2423  flex-direction: column;2424}24252426/* Rich content element styles (editor + display) */2427.peach-note-editor-body h2,2428.peach-note-content h2 {2429  font-family: "Cormorant Garamond", serif;2430  font-size: 20px;2431  font-weight: 600;2432  font-style: italic;2433  color: var(--peach-t0);2434  margin: 6px 0 2px;2435  line-height: 1.3;2436}2437.peach-note-editor-body ul,2438.peach-note-content ul {2439  padding-left: 18px;2440  margin: 3px 0;2441  list-style: disc;2442}2443.peach-note-editor-body ol,2444.peach-note-content ol {2445  padding-left: 18px;2446  margin: 3px 0;2447  list-style: decimal;2448}2449.peach-note-editor-body li,2450.peach-note-content li { margin: 2px 0; }2451.peach-note-editor-body hr,2452.peach-note-content hr {2453  border: none;2454  border-top: 1px solid var(--peach-t3);2455  margin: 10px 0;2456}24572458/* font size elements from execCommand */2459.peach-note-editor-body font[size="1"],2460.peach-note-content font[size="1"] { font-size: 11px; line-height: 1.6; }2461.peach-note-editor-body font[size="2"],2462.peach-note-content font[size="2"] { font-size: 13px; }2463.peach-note-editor-body font[size="3"],2464.peach-note-content font[size="3"] { font-size: 16px; }2465.peach-note-editor-body font[size="4"],2466.peach-note-content font[size="4"] { font-size: 20px; }2467.peach-note-editor-body font[size="5"],2468.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }24692470/* bold / italic inside the editor and note display */2471.peach-note-editor-body b, .peach-note-editor-body strong,2472.peach-note-content b, .peach-note-content strong { font-weight: 700; }2473.peach-note-editor-body em, .peach-note-editor-body i,2474.peach-note-content em, .peach-note-content i { font-style: italic; }24752476/* note display — rendered HTML, no pre-wrap */2477.peach-note-content {2478  overflow: auto;2479  max-height: 340px;2480  word-break: break-word;2481}24822483/* ── Note textarea ── */2484.peach-note-textarea {2485  width: 100%;2486  min-height: 180px;2487  max-height: 280px;2488  resize: vertical;2489  background: var(--peach-t4);2490  border: 1px solid var(--peach-t3);2491  border-radius: 8px;2492  padding: 10px 12px;2493  font-family: "IBM Plex Mono", monospace;2494  font-size: 12px;2495  line-height: 1.7;2496  color: var(--peach-t1);2497  outline: none;2498  transition: border-color 150ms ease;2499}25002501.peach-note-textarea:focus {2502  border-color: var(--peach-t2);2503}25042505.peach-note-char-count {2506  font-family: "IBM Plex Mono", monospace;2507  font-size: 9px;2508  color: var(--peach-t3);2509  text-align: right;2510  margin-top: 4px;2511  letter-spacing: 0.1em;2512}25132514/* ── Field input baseline ── */2515.peach-new-field-input {2516  width: 100%;2517  background: transparent;2518  border: none;2519  border-bottom: 1px solid var(--peach-t3);2520  padding: 4px 0;2521  color: var(--peach-t1);2522  font-family: "IBM Plex Mono", monospace;2523  font-size: 13px;2524  outline: none;2525  transition: border-color 150ms ease;2526}25272528.peach-new-field-input:focus {2529  border-bottom-color: var(--peach-t0);2530  color: var(--peach-t0);2531}25322533.peach-new-name-input {2534  width: 100%;2535  background: transparent;2536  border: none;2537  border-bottom: 1px solid var(--peach-t3);2538  padding: 6px 0;2539  font-family: "Cormorant Garamond", Georgia, serif;2540  font-style: italic;2541  font-size: 28px;2542  color: var(--peach-t0);2543  outline: none;2544  transition: border-color 150ms ease;2545}25462547.peach-new-name-input:focus {2548  border-bottom-color: var(--peach-t1);2549}25502551.peach-new-name-input::placeholder {2552  color: var(--peach-t2);2553  font-style: italic;2554}25552556.peach-new-field-input::placeholder {2557  color: var(--peach-t3);2558}25592560/* ── Demo entrance animation ── */2561#hd-shell {2562  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;2563}2564@keyframes hd-shell-enter {2565  from { opacity: 0; transform: scale(0.96) translateY(16px); }2566  to   { opacity: 1; transform: scale(1) translateY(0); }2567}25682569/* ── Keyframes ── */2570@keyframes peach-char-enter {2571  from { opacity: 0; transform: translateY(0.22em); }2572  to   { opacity: 1; transform: translateY(0); }2573}2574@keyframes peach-content-enter {2575  from { opacity: 0.96; transform: translateY(4px); }2576  to   { opacity: 1; transform: translateY(0); }2577}2578@keyframes peach-content-exit {2579  from { opacity: 1; transform: translateY(0); }2580  to   { opacity: 0.92; transform: translateY(-3px); }2581}2582@keyframes peach-screen-enter {2583  from { opacity: 0; transform: translateY(14px); }2584  to   { opacity: 1; transform: translateY(0); }2585}2586@keyframes peach-shell-fade-in {2587  from { opacity: 0; }2588  to   { opacity: 1; }2589}2590@keyframes peach-veil-in {2591  from { opacity: 0; }2592  to   { opacity: 1; }2593}2594@keyframes peach-lock-settle {2595  0%   { transform: scale(0.9); }2596  65%  { transform: scale(1.08); }2597  100% { transform: scale(1); }2598}2599@keyframes peach-copy-confirm {2600  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2601  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); }2602}2603@keyframes peach-copy-retreat {2604  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); }2605  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2606}2607@keyframes peach-copy-flood {2608  from { opacity: 0; transform: scaleX(0.15); }2609  to   { opacity: 1; transform: scaleX(1); }2610}2611@keyframes peach-copy-icon-settle {2612  from  { transform: scale(0.84); }2613  70%   { transform: scale(1.08); }2614  to    { transform: scale(1); }2615}2616@keyframes peach-copy-sheen-retreat {2617  from { opacity: 1; transform: scaleX(1); }2618  to   { opacity: 0; transform: scaleX(0.15); }2619}2620@keyframes peach-copy-drain {2621  from { width: 100%; }2622  to   { width: 0; }2623}2624@keyframes peach-shake {2625  0%, 100% { transform: translateX(0); }2626  20%      { transform: translateX(-6px); }2627  40%      { transform: translateX(6px); }2628  60%      { transform: translateX(-4px); }2629  80%      { transform: translateX(4px); }2630}26312632@keyframes pip-pulse {2633  0% { transform: scale(1); }2634  40% { transform: scale(2.2); }2635  100% { transform: scale(1); }2636}263726382639/* ── Password generator ── */2640.peach-pwgen-body {2641  flex: 1; overflow-y: auto;2642  display: flex; flex-direction: column;2643}2644.peach-policy-badge {2645  display: flex; align-items: center;2646  padding: 6px 20px 0;2647  font-size: 10px; font-family: Inter, sans-serif;2648  color: var(--peach-t2); letter-spacing: 0.04em;2649}2650.peach-pwgen-display {2651  padding: 14px 20px 12px;2652  border-bottom: 1px solid var(--peach-t3);2653  display: flex; align-items: flex-start; gap: 10px;2654}2655.peach-pwgen-display-row {2656  display: flex;2657  align-items: flex-start;2658  gap: 8px;2659  padding-bottom: 8px;2660  border-bottom: 1px solid var(--peach-t3);2661}2662.peach-pwgen-output {2663  flex: 1; min-width: 0; margin: 0;2664  font-family: "IBM Plex Mono", monospace;2665  font-size: 13px; color: var(--peach-t0);2666  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;2667  white-space: normal;2668  padding: 10px 12px;2669  background: var(--peach-t4);2670  border-radius: 6px;2671  min-height: 36px;2672}2673.peach-pwgen-output-display {2674  flex: 1;2675  min-width: 0;2676  margin: 0;2677  font-family: "Cormorant Garamond", "Times New Roman", serif;2678  font-style: italic;2679  font-weight: 300;2680  font-size: 32px;2681  line-height: 1.05;2682  color: var(--peach-t0);2683  word-break: break-all;2684  overflow-wrap: break-word;2685  white-space: normal;2686  letter-spacing: 0.02em;2687}2688.peach-pwgen-display-actions {2689  display: flex;2690  flex-direction: column;2691  gap: 4px;2692  flex-shrink: 0;2693  margin-top: 2px;2694}2695.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }2696.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }2697.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }2698.peach-pwgen-len-num {2699  font-family: "IBM Plex Mono", monospace;2700  font-size: 12px; color: var(--peach-accent);2701}2702.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }2703.peach-pwgen-toggles { display: flex; flex-direction: column; }2704.peach-pwgen-charset-pills {2705  display: flex;2706  gap: 6px;2707  flex-wrap: wrap;2708}2709.peach-pwgen-pill {2710  padding: 4px 11px;2711  border-radius: 999px;2712  border: 1px solid var(--peach-t3);2713  background: transparent;2714  color: var(--peach-t2);2715  font-family: "IBM Plex Mono", monospace;2716  font-size: 9px;2717  letter-spacing: 0.08em;2718  cursor: pointer;2719  transition: all 150ms ease;2720}2721.peach-pwgen-pill.is-on {2722  border-color: rgba(217, 104, 48, 0.5);2723  background: rgba(217, 104, 48, 0.1);2724  color: var(--peach-accent);2725}2726.peach-pwgen-pill:not(.is-on):hover {2727  color: var(--peach-t1);2728  border-color: var(--peach-t2);2729}2730.peach-pwgen-use-btn {2731  width: 100%;2732  min-height: 34px;2733  border-radius: 8px;2734  margin-top: 2px;2735}2736.peach-pwgen-toggle-row {2737  display: flex; align-items: center; justify-content: space-between;2738  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);2739}2740.peach-pwgen-toggle-row:last-child { border-bottom: none; }2741.peach-pwgen-toggle-label { font-size: 13px; color: var(--peach-t1); }27422743.peach-screen-prelock {2744  z-index: 10;2745}27462747.prelock-form {2748  display: grid;2749  gap: 12px;2750}27512752/* Peach popup should not expose native scrollbars on internal panels. */2753.peach-settings-body,2754.peach-new-body,2755.peach-pwgen-body,2756.lock-screen,2757.peach-import-preview {2758  scrollbar-width: none;2759  -ms-overflow-style: none;2760  overscroll-behavior: contain;2761}2762.peach-settings-body::-webkit-scrollbar,2763.peach-new-body::-webkit-scrollbar,2764.peach-pwgen-body::-webkit-scrollbar,2765.lock-screen::-webkit-scrollbar,2766.peach-import-preview::-webkit-scrollbar {2767  width: 0;2768  height: 0;2769  display: none;2770}27712772.lock-screen {2773  height: 100%;2774  min-height: 100%;2775  overflow-y: auto;2776  padding: 18px 18px 16px;2777  gap: 14px;2778  grid-template-rows: auto auto auto 1fr auto;2779  align-content: stretch;2780  position: relative;2781  isolation: isolate;2782}2783.peach-screen.lock-screen--vault-stage {2784  display: flex;2785  flex-direction: column;2786  justify-content: flex-start;2787  gap: 18px;2788  padding: 20px 18px 18px;2789  overflow: hidden;2790}2791.peach-screen.lock-screen--vault-stage .peach-lock-panel {2792  margin-top: auto;2793}2794.lock-screen--onboarding {2795  display: flex;2796  flex-direction: column;2797  gap: 12px;2798  justify-content: flex-start;2799}28002801.lock-screen::before {2802  content: "";2803  position: absolute;2804  inset: 12px 18px auto auto;2805  width: 160px;2806  height: 160px;2807  border-radius: 999px;2808  background:2809    radial-gradient(circle at 50% 50%, rgba(217, 104, 48, 0.18) 0%, rgba(217, 104, 48, 0.06) 42%, transparent 72%);2810  filter: blur(6px);2811  opacity: 0.7;2812  pointer-events: none;2813  z-index: 0;2814}28152816.lock-screen-header {2817  display: flex;2818  align-items: center;2819  justify-content: space-between;2820  position: relative;2821  z-index: 1;2822}28232824.lock-password-input.shake {2825  animation: peach-shake 300ms ease-in-out;2826}28272828.peach-hint-error {2829  color: rgba(220, 80, 60, 0.92);2830}28312832.peach-onboarding-headline {2833  margin: 0;2834  font-family: "Cormorant Garamond", "Times New Roman", serif;2835  font-size: 35px;2836  line-height: 0.88;2837  font-style: italic;2838  font-weight: 400;2839  max-width: 252px;2840}28412842.peach-lock-copy {2843  display: grid;2844  gap: 8px;2845  position: relative;2846  z-index: 1;2847}28482849.peach-lock-copy--onboarding {2850  gap: 10px;2851}28522853.peach-lock-hero {2854  position: relative;2855  z-index: 1;2856  display: grid;2857  gap: 8px;2858  min-height: 0;2859  padding: 4px 2px 0;2860  border: none;2861  border-radius: 0;2862  background: transparent;2863  box-shadow: none;2864}2865.peach-lock-hero-art {2866  position: absolute;2867  right: -8px;2868  top: -6px;2869  width: 120px;2870  height: 120px;2871  display: flex;2872  align-items: center;2873  justify-content: center;2874  pointer-events: none;2875  opacity: 0.12;2876  filter: saturate(0.9);2877}2878.peach-lock-hero-mark {2879  width: 100%;2880  height: 100%;2881}2882.peach-lock-hero-mark path:first-child {2883  fill: rgba(217, 104, 48, 0.92);2884}2885.peach-lock-hero-mark path:nth-child(2),2886.peach-lock-hero-mark path:nth-child(3) {2887  stroke: rgba(123, 144, 96, 0.88);2888  fill: rgba(123, 144, 96, 0.88);2889}2890.peach-lock-hero > *:not(.peach-lock-hero-art) {2891  position: relative;2892  z-index: 1;2893}28942895.peach-lock-eyebrow {2896  display: inline-flex;2897  align-items: center;2898  width: fit-content;2899  padding: 4px 9px;2900  border-radius: 999px;2901  border: 1px solid rgba(217, 104, 48, 0.22);2902  background: rgba(217, 104, 48, 0.08);2903  color: var(--peach-t0);2904  font-family: "IBM Plex Mono", monospace;2905  font-size: 8px;2906  letter-spacing: 0.18em;2907  text-transform: uppercase;2908}29092910.peach-lock-label-row {2911  display: flex;2912  align-items: center;2913  justify-content: space-between;2914  margin-bottom: 0;2915}29162917.peach-lock-reveal-btn {2918  display: inline-flex;2919  align-items: center;2920  gap: 4px;2921  background: none;2922  border: none;2923  cursor: pointer;2924  font-family: "IBM Plex Mono", monospace;2925  font-size: 9px;2926  letter-spacing: 0.06em;2927  color: var(--peach-t2);2928  padding: 2px 0;2929  transition: color 150ms ease;2930}29312932.peach-lock-reveal-btn:hover {2933  color: var(--peach-t1);2934}29352936.peach-lock-warning {2937  color: rgba(220, 80, 60, 0.85) !important;2938  line-height: 1.5;2939}29402941.peach-onboarding-cards {2942  display: grid;2943  gap: 8px;2944  position: relative;2945  z-index: 1;2946}29472948.peach-lock-panel {2949  position: relative;2950  z-index: 1;2951  display: grid;2952  gap: 9px;2953  padding: 14px 16px 15px;2954  border-radius: 18px;2955  border: 1px solid var(--peach-t3);2956  background:2957    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));2958  box-shadow:2959    inset 0 1px 0 rgba(240, 232, 216, 0.04),2960    0 12px 28px rgba(0, 0, 0, 0.12);2961}29622963.peach-lock-panel--secondary {2964  gap: 12px;2965}29662967.peach-lock-panel-header {2968  display: flex;2969  align-items: baseline;2970  justify-content: space-between;2971  gap: 12px;2972}29732974.peach-lock-option-grid {2975  display: grid;2976  gap: 10px;2977}29782979.peach-lock-option {2980  width: 100%;2981  display: grid;2982  gap: 6px;2983  padding: 14px 15px;2984  border-radius: 16px;2985  border: 1px solid rgba(240, 232, 216, 0.08);2986  background: rgba(240, 232, 216, 0.02);2987  color: var(--peach-t0);2988  text-align: left;2989  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;2990}29912992.peach-lock-option:hover {2993  border-color: rgba(217, 104, 48, 0.28);2994  background: rgba(240, 232, 216, 0.04);2995  transform: translateY(-1px);2996}29972998.peach-lock-option-title {2999  font-size: 12px;3000  color: var(--peach-t0);3001}30023003.peach-lock-option-copy {3004  font-size: 11px;3005  line-height: 1.55;3006  color: var(--peach-t1);3007}30083009.peach-onboarding-stack {3010  margin-top: 2px;3011}3012.peach-lock-panel-footer {3013  display: grid;3014  gap: 6px;3015  margin-top: 2px;3016  padding-top: 10px;3017  border-top: 1px solid rgba(240, 232, 216, 0.06);3018}30193020/* Restore picker panel — method option cards */3021.peach-lock-panel--restore {3022  gap: 10px;3023}3024.peach-lock-option--history {3025  border-color: rgba(240, 232, 216, 0.06);3026  opacity: 0.85;3027}30283029/* Snapshot restore panel */3030.peach-snapshot-panel {3031  gap: 10px;3032  overflow-y: auto;3033  max-height: 340px;3034}3035.peach-snapshot-list {3036  display: flex;3037  flex-direction: column;3038  gap: 4px;3039}3040.peach-snapshot-row {3041  display: flex;3042  align-items: center;3043  justify-content: space-between;3044  width: 100%;3045  padding: 8px 10px;3046  border-radius: 8px;3047  border: 1px solid rgba(240, 232, 216, 0.07);3048  background: transparent;3049  cursor: pointer;3050  transition: border-color 120ms, background 120ms;3051  text-align: left;3052  gap: 8px;3053}3054.peach-snapshot-row:hover {3055  border-color: rgba(240, 232, 216, 0.14);3056  background: rgba(240, 232, 216, 0.03);3057}3058.peach-snapshot-row.is-selected {3059  border-color: rgba(217, 104, 48, 0.4);3060  background: rgba(217, 104, 48, 0.07);3061}3062.peach-snapshot-time {3063  font-size: 11.5px;3064  color: var(--peach-t0);3065  flex: 1;3066}3067.peach-snapshot-count {3068  font-family: "IBM Plex Mono", monospace;3069  font-size: 10px;3070  color: var(--peach-t2);3071  flex-shrink: 0;3072}3073.peach-snapshot-confirm {3074  display: flex;3075  flex-direction: column;3076  gap: 8px;3077  padding-top: 10px;3078  border-top: 1px solid rgba(240, 232, 216, 0.06);3079}3080.peach-snapshot-warning {3081  display: flex;3082  align-items: flex-start;3083  gap: 6px;3084  font-size: 10.5px;3085  color: rgba(220, 80, 60, 0.85);3086  line-height: 1.55;3087}3088.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3089.peach-snapshot-confirm-row {3090  display: flex;3091  gap: 6px;3092  align-items: center;3093}3094.peach-snapshot-restore-btn {3095  width: 100%;3096}3097.peach-lock-hero--unlock .peach-lock-hero-art {3098  width: 112px;3099  height: 112px;3100  right: 0;3101  top: 2px;3102  opacity: 0.1;3103}31043105.peach-card {3106  border: 1px solid var(--peach-t3);3107  border-radius: 18px;3108  background:3109    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3110  box-shadow:3111    inset 0 1px 0 rgba(240, 232, 216, 0.04),3112    0 12px 32px rgba(0, 0, 0, 0.14);3113  overflow: hidden;3114}31153116.peach-card-active {3117  border-color: rgba(217, 104, 48, 0.35);3118  box-shadow:3119    inset 0 1px 0 rgba(240, 232, 216, 0.05),3120    0 16px 38px rgba(0, 0, 0, 0.18),3121    0 0 0 1px rgba(217, 104, 48, 0.08);3122}31233124.peach-card-disabled {3125  opacity: 0.72;3126}31273128.peach-card-header {3129  width: 100%;3130  padding: 13px 16px 11px;3131  background: transparent;3132  color: var(--peach-t0);3133  display: flex;3134  justify-content: space-between;3135  align-items: center;3136  text-align: left;3137  font-size: 12px;3138}31393140.peach-card-body {3141  padding: 0 16px 16px;3142  display: grid;3143  gap: 9px;3144}31453146.peach-card-tag {3147  color: var(--peach-t2);3148  font-family: "IBM Plex Mono", monospace;3149  font-size: 9px;3150  letter-spacing: 0.12em;3151  text-transform: uppercase;3152}31533154.peach-empty-copy {3155  display: grid;3156  gap: 6px;3157  color: var(--peach-t1);3158  font-size: 13px;3159}31603161.peach-lock-submit {3162  width: 100%;3163  box-shadow: 0 14px 36px rgba(217, 104, 48, 0.22);3164}31653166.peach-lock-secondary {3167  width: 100%;3168  border-color: var(--peach-t3);3169  background: rgba(240, 232, 216, 0.02);3170}31713172.peach-lock-secondary:hover {3173  background: rgba(240, 232, 216, 0.04);3174}31753176.peach-lock-note {3177  max-width: none;3178  line-height: 1.55;3179  margin: 0;3180}31813182.peach-overlay-action {3183  font-size: 10px;3184  padding: 4px 8px;3185  letter-spacing: 0.06em;3186  min-width: 44px;3187  text-align: center;3188}31893190.peach-overlay-spacer {3191  width: 32px;3192}31933194.peach-inline-action {3195  flex-shrink: 0;3196  font-size: 9px;3197  letter-spacing: 0.1em;3198  text-transform: uppercase;3199  padding: 4px 7px;3200}3201.peach-password-toggle-btn {3202  display: inline-flex;3203  align-items: center;3204  justify-content: center;3205  min-width: 30px;3206  min-height: 26px;3207  padding: 0 7px;3208  border: 1px solid var(--peach-t3);3209  border-radius: 999px;3210  background: rgba(240, 232, 216, 0.04);3211  color: var(--peach-t2);3212  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;3213}3214.peach-password-toggle-btn:hover {3215  border-color: var(--peach-t2);3216  color: var(--peach-t0);3217  background: rgba(240, 232, 216, 0.06);3218}32193220.peach-new-textarea {3221  width: 100%;3222  min-height: 88px;3223  resize: vertical;3224  border: 0;3225  outline: none;3226  background: transparent;3227  color: var(--peach-t1);3228  font-family: "IBM Plex Mono", monospace;3229  font-size: 12px;3230  line-height: 1.65;3231  caret-color: var(--peach-accent);3232}32333234.peach-new-textarea::placeholder {3235  color: var(--peach-t2);3236  opacity: 0.7;3237}32383239.peach-settings-actions {3240  display: grid;3241  gap: 8px;3242}32433244.peach-sync-section-label {3245  font-size: 11px;3246  color: var(--peach-t2);3247  text-transform: uppercase;3248  letter-spacing: 0.05em;3249}32503251.peach-sync-device-row {3252  display: flex;3253  justify-content: space-between;3254  align-items: center;3255  padding: 6px 0;3256  border-bottom: 1px solid var(--peach-t3);3257}32583259.peach-sync-device-info {3260  display: flex;3261  flex-direction: column;3262  gap: 2px;3263}32643265.peach-sync-device-name {3266  font-size: 13px;3267  color: var(--peach-t0);3268}32693270.peach-sync-device-meta {3271  font-size: 11px;3272  color: var(--peach-t2);3273}32743275.peach-sync-status-dot {3276  display: inline-block;3277  width: 8px;3278  height: 8px;3279  border-radius: 50%;3280  vertical-align: middle;3281}32823283.peach-sync-remove-btn {3284  color: var(--peach-breach);3285}32863287.peach-import-preview {3288  margin-bottom: 12px;3289  max-height: 152px;3290  overflow-y: auto;3291  border: 1px solid var(--peach-t3);3292  border-radius: 10px;3293  padding: 8px 10px;3294  display: grid;3295  gap: 8px;3296  background: rgba(240, 232, 216, 0.02);3297}32983299.peach-import-preview-row {3300  display: flex;3301  justify-content: space-between;3302  gap: 10px;3303  font-size: 11px;3304  color: var(--peach-t1);3305}33063307.peach-import-preview-title {3308  color: var(--peach-t0);3309  flex: 1;3310  min-width: 0;3311  overflow: hidden;3312  text-overflow: ellipsis;3313  white-space: nowrap;3314}33153316.peach-import-preview-meta {3317  color: var(--peach-t2);3318  flex-shrink: 0;3319  max-width: 42%;3320  overflow: hidden;3321  text-overflow: ellipsis;3322  white-space: nowrap;3323}33243325.peach-import-preview-more {3326  color: var(--peach-t2);3327  font-size: 10px;3328}33293330.peach-restore-copy {3331  margin: 0;3332  color: var(--peach-t1);3333  font-size: 11px;3334  line-height: 1.6;3335}33363337.peach-restore-warning {3338  padding: 10px 12px;3339  border-radius: 12px;3340  border: 1px solid rgba(220, 80, 60, 0.22);3341  background: rgba(220, 80, 60, 0.08);3342  color: rgba(240, 232, 216, 0.86);3343  font-size: 11px;3344  line-height: 1.55;3345}33463347.peach-provider-chips {3348  display: flex;3349  flex-wrap: wrap;3350  gap: 6px;3351}33523353.peach-provider-chip {3354  display: inline-flex;3355  align-items: center;3356  padding: 5px 8px;3357  border-radius: 999px;3358  border: 1px solid var(--peach-t3);3359  background: rgba(240, 232, 216, 0.02);3360  color: var(--peach-t1);3361  font-family: "IBM Plex Mono", monospace;3362  font-size: 8px;3363  letter-spacing: 0.08em;3364  text-transform: uppercase;3365}33663367.peach-restore-file,3368.peach-restore-input {3369  width: 100%;3370  border-radius: 10px;3371  border: 1px solid var(--peach-t3);3372  background: var(--peach-s2);3373  color: var(--peach-t0);3374  font-size: 12px;3375}33763377.peach-restore-file {3378  padding: 9px 10px;3379}33803381.peach-restore-file::file-selector-button {3382  margin-right: 10px;3383  padding: 7px 10px;3384  border: 1px solid rgba(217, 104, 48, 0.28);3385  border-radius: 999px;3386  background: rgba(217, 104, 48, 0.08);3387  color: var(--peach-t0);3388  font-size: 10px;3389  letter-spacing: 0.08em;3390  text-transform: uppercase;3391  cursor: pointer;3392}33933394.peach-restore-input {3395  padding: 10px 12px;3396}33973398.peach-auth-grid {3399  display: grid;3400  gap: 10px;3401}34023403.peach-import-summary {3404  color: var(--peach-t1);3405  font-size: 12px;3406  line-height: 1.6;3407  margin-bottom: 12px;3408}34093410.peach-restore-error {3411  color: rgba(220, 80, 60, 0.95);3412  font-size: 12px;3413  line-height: 1.55;3414}34153416.peach-cjk-qr-panel {3417  margin-top: 14px;3418  padding: 12px;3419  border-radius: 16px;3420  border: 1px solid var(--peach-t3);3421  background: rgba(240, 232, 216, 0.02);3422  display: grid;3423  gap: 10px;3424}34253426.peach-cjk-qr-frame {3427  display: grid;3428  place-items: center;3429  min-height: 212px;3430  border-radius: 14px;3431  background: #fff;3432  overflow: hidden;3433}34343435.peach-cjk-qr-frame svg {3436  display: block;3437  width: 196px;3438  height: 196px;3439}34403441.peach-cjk-qr-error,3442.peach-cjk-qr-caption {3443  color: var(--peach-t1);3444  font-size: 11px;3445  line-height: 1.55;3446}34473448.peach-cjk-qr-card {3449  max-width: 400px;3450  margin: auto;3451}34523453.peach-cjk-qr-body {3454  padding: 0 20px 20px;3455  text-align: center;3456}34573458.peach-cjk-qr-hint {3459  font-size: 11px;3460  color: var(--peach-t2);3461  margin: 0 0 14px;3462}34633464.peach-cjk-qr-image {3465  border-radius: 4px;3466  display: block;3467  margin: 0 auto;3468  width: 100%;3469  max-width: 320px;3470  height: auto;3471}34723473.peach-pro-badge {3474  padding: 2px 6px;3475  border-radius: 999px;3476  font-family: var(--font-ui);3477  font-size: 10px;3478  letter-spacing: 0.08em;3479  text-transform: uppercase;3480  background: rgba(217, 104, 48, 0.14);3481  color: var(--peach-accent);3482}34833484.peach-loading {3485  position: absolute;3486  inset: 0;3487  display: flex;3488  align-items: center;3489  justify-content: center;3490  background: var(--bg);3491  animation: peach-loading-pulse 1.2s ease-in-out infinite;3492}34933494@keyframes peach-loading-pulse {3495  0%, 100% { opacity: 0.6; }3496  50% { opacity: 1; }3497}34983499/* ── Health Dashboard ─────────────────────────────────────────────────── */3500.peach-health-body {3501  flex: 1;3502  overflow-y: auto;3503  display: flex;3504  flex-direction: column;3505}35063507.peach-health-summary {3508  padding: 10px 16px 6px;3509  font-family: "IBM Plex Mono", monospace;3510  font-size: 11px;3511}3512.peach-health-summary-warn { color: rgba(220,80,60,0.9); }3513.peach-health-summary-ok { color: var(--peach-t2); }35143515.peach-health-check-row {3516  padding: 0 16px 10px;3517}3518.peach-health-check-btn {3519  width: 100%;3520  display: flex;3521  align-items: center;3522  justify-content: center;3523}35243525.peach-health-sections {3526  flex: 1;3527  display: flex;3528  flex-direction: column;3529}35303531.peach-health-section {3532  border-bottom: 1px solid var(--peach-t3);3533}35343535.peach-health-section-header {3536  width: 100%;3537  display: flex;3538  align-items: center;3539  justify-content: space-between;3540  padding: 9px 16px;3541  background: transparent;3542  cursor: pointer;3543  color: var(--peach-t0);3544}35453546.peach-health-section-title-row {3547  display: flex;3548  align-items: center;3549  gap: 8px;3550}35513552.peach-health-count-badge {3553  display: inline-flex;3554  align-items: center;3555  justify-content: center;3556  min-width: 20px;3557  height: 18px;3558  padding: 0 5px;3559  border-radius: 999px;3560  background: rgba(220,80,60,0.15);3561  border: 1px solid rgba(220,80,60,0.25);3562  font-family: "IBM Plex Mono", monospace;3563  font-size: 9px;3564  color: rgba(220,80,60,0.9);3565}35663567.peach-health-section-title {3568  font-family: "IBM Plex Mono", monospace;3569  font-size: 11px;3570  text-transform: uppercase;3571  letter-spacing: 0.1em;3572  color: var(--peach-t1);3573}35743575.peach-health-chevron {3576  color: var(--peach-t2);3577  transition: transform 200ms ease;3578  flex-shrink: 0;3579}3580.peach-health-chevron.is-expanded {3581  transform: rotate(180deg);3582}35833584.peach-health-section-body {3585  padding: 0 16px 10px;3586  display: flex;3587  flex-direction: column;3588  gap: 4px;3589}35903591.peach-health-row {3592  display: flex;3593  align-items: flex-start;3594  justify-content: space-between;3595  gap: 8px;3596  padding: 6px 8px;3597  border-radius: 8px;3598  background: rgba(240,232,216,0.02);3599}36003601.peach-health-row-info {3602  flex: 1;3603  min-width: 0;3604  display: flex;3605  flex-direction: column;3606  gap: 2px;3607}36083609.peach-health-row-name {3610  font-family: "Cormorant Garamond", serif;3611  font-size: 15px;3612  font-style: italic;3613  font-weight: 400;3614  color: var(--peach-t0);3615  white-space: nowrap;3616  overflow: hidden;3617  text-overflow: ellipsis;3618}36193620.peach-health-row-meta {3621  font-family: "IBM Plex Mono", monospace;3622  font-size: 9px;3623  color: var(--peach-t2);3624  letter-spacing: 0.05em;3625}36263627.peach-health-fix-btn {3628  font-size: 9px;3629  letter-spacing: 0.08em;3630  text-transform: uppercase;3631  padding: 4px 7px;3632  flex-shrink: 0;3633  display: flex;3634  align-items: center;3635}36363637.peach-health-empty {3638  font-family: "IBM Plex Mono", monospace;3639  font-size: 10px;3640  color: var(--peach-t2);3641  padding: 6px 0;3642}36433644.peach-health-loading {3645  font-family: "IBM Plex Mono", monospace;3646  font-size: 10px;3647  color: var(--peach-t2);3648  padding: 6px 0;3649  display: flex;3650  align-items: center;3651  gap: 6px;3652}36533654.peach-health-loading::before {3655  content: "";3656  width: 10px;3657  height: 10px;3658  border: 1.5px solid var(--peach-t3);3659  border-top-color: var(--peach-accent);3660  border-radius: 50%;3661  animation: peach-spin 600ms linear infinite;3662}36633664@keyframes peach-spin {3665  to { transform: rotate(360deg); }3666}36673668.peach-spinner {3669  width: 32px;3670  height: 32px;3671  border: 2px solid var(--peach-s2);3672  border-top-color: var(--peach-accent);3673  border-radius: 50%;3674  margin: 0 auto 16px;3675  animation: peach-spin 0.8s linear infinite;3676}36773678.peach-progress-screen {3679  text-align: center;3680  padding: 32px 16px;3681}36823683.peach-progress-screen-title {3684  font-size: 13px;3685  color: var(--peach-t0);3686  margin-bottom: 16px;3687}36883689.peach-progress-screen-stage {3690  font-size: 11px;3691  color: var(--peach-t2);3692  min-height: 14px;3693}36943695.peach-progress-screen-note {3696  font-size: 10px;3697  color: var(--peach-t2);3698  margin-top: 8px;3699}37003701.peach-pairing-body {3702  flex: 1;3703  overflow-y: auto;3704  display: flex;3705  flex-direction: column;3706}37073708.peach-pairing-content {3709  flex: 1;3710  display: flex;3711  flex-direction: column;3712  align-items: center;3713  justify-content: center;3714  gap: 14px;3715  padding: 28px 20px;3716  text-align: center;3717}37183719.peach-pairing-headline {3720  font-family: var(--font-display);3721  font-style: italic;3722  font-weight: 300;3723  font-size: 28px;3724  color: var(--peach-t0);3725  margin: 0;3726  line-height: 1;3727}37283729.peach-pairing-subline {3730  font-size: 12px;3731  color: var(--peach-t2);3732  max-width: 220px;3733  line-height: 1.5;3734  margin: 0;3735}37363737.peach-pairing-subline--center {3738  text-align: center;3739}37403741.peach-pairing-code-display {3742  display: flex;3743  gap: 6px;3744}37453746.peach-pairing-code-digit {3747  display: flex;3748  align-items: center;3749  justify-content: center;3750  width: 36px;3751  height: 48px;3752  background: var(--peach-s2);3753  border: 1px solid var(--peach-t3);3754  border-radius: 6px;3755  font-family: var(--font-mono);3756  font-size: 22px;3757  color: var(--peach-t0);3758  letter-spacing: 0;3759}37603761.peach-pairing-countdown-ring {3762  position: relative;3763  display: inline-flex;3764  align-items: center;3765  justify-content: center;3766}37673768.peach-pairing-countdown-num {3769  position: absolute;3770  font-family: var(--font-mono);3771  font-size: 14px;3772  color: var(--peach-t1);3773}37743775.peach-pairing-ring-track {3776  fill: none;3777  stroke: var(--peach-t3);3778  stroke-width: 2;3779}37803781.peach-pairing-ring-progress {3782  fill: none;3783  stroke: var(--peach-accent);3784  stroke-width: 2;3785  stroke-linecap: round;3786  transform: rotate(-90deg);3787  transform-origin: 50% 50%;3788  transition: stroke-dashoffset 0.5s linear;3789}37903791.peach-pairing-code-inputs {3792  display: flex;3793  gap: 8px;3794}37953796.peach-pairing-code-box {3797  width: 36px;3798  height: 48px;3799  text-align: center;3800  background: var(--peach-s2);3801  border: 1px solid var(--peach-t3);3802  border-radius: 6px;3803  font-family: var(--font-mono);3804  font-size: 20px;3805  color: var(--peach-t0);3806  outline: none;3807  transition: border-color 120ms ease;3808}38093810.peach-pairing-code-box:focus {3811  border-color: var(--peach-accent);3812}38133814.peach-pairing-code-box.has-error {3815  border-color: rgba(220, 80, 60, 0.45);3816}38173818.peach-pairing-status {3819  display: flex;3820  align-items: center;3821  gap: 8px;3822  margin: 0;3823  font-size: 12px;3824  color: var(--peach-t1);3825}38263827.peach-pairing-error {3828  margin: 0;3829  font-size: 11px;3830  color: var(--peach-breach);3831}38323833.peach-pairing-error-msg {3834  color: var(--peach-t1);3835}38363837.peach-pairing-spinner {3838  width: 12px;3839  height: 12px;3840  border: 1.5px solid var(--peach-t3);3841  border-top-color: var(--peach-accent);3842  border-radius: 50%;3843  animation: peach-spin 0.8s linear infinite;3844}38453846.peach-pairing-success-icon,3847.peach-pairing-error-icon,3848.peach-pairing-hero {3849  display: inline-flex;3850  align-items: center;3851  justify-content: center;3852}38533854/* Tag chips */3855.peach-tag-chip {3856  display: inline-flex;3857  align-items: center;3858  gap: 4px;3859  padding: 3px 8px;3860  border-radius: 999px;3861  border: 1px solid rgba(217, 104, 48, 0.28);3862  background: rgba(217, 104, 48, 0.08);3863  color: rgba(240, 232, 216, 0.85);3864  font-family: "IBM Plex Mono", monospace;3865  font-size: 10px;3866  letter-spacing: 0.04em;3867}38683869.peach-tag-chip-remove {3870  background: transparent;3871  border: none;3872  color: inherit;3873  opacity: 0.6;3874  cursor: pointer;3875  padding: 0;3876  font-size: 12px;3877  line-height: 1;3878}38793880.peach-tag-chip-remove:hover {3881  opacity: 1;3882}38833884/* Tag input */3885.peach-tag-input-wrap {3886  border-bottom: 1px solid var(--peach-t3);3887}38883889.peach-tag-suggestions {3890  display: flex;3891  flex-wrap: wrap;3892  gap: 4px;3893  padding: 6px 0;3894}38953896.peach-tag-suggestion {3897  padding: 2px 8px;3898  border-radius: 999px;3899  border: 1px solid var(--peach-t3);3900  background: var(--peach-s2);3901  color: var(--peach-t1);3902  font-family: "IBM Plex Mono", monospace;3903  font-size: 10px;3904  cursor: pointer;3905  transition: border-color 80ms ease, background 80ms ease;3906}39073908.peach-tag-suggestion:hover {3909  border-color: rgba(217, 104, 48, 0.4);3910  background: rgba(217, 104, 48, 0.08);3911}39123913/* Tag filter strip */3914.peach-tag-filter-strip {3915  border-bottom: 1px solid var(--peach-t3);3916  flex-shrink: 0;3917}39183919.peach-tag-filter-chip {3920  display: inline-flex;3921  align-items: center;3922  padding: 4px 10px;3923  border-radius: 999px;3924  border: 1px solid var(--peach-t3);3925  background: transparent;3926  color: var(--peach-t2);3927  font-family: "IBM Plex Mono", monospace;3928  font-size: 9px;3929  letter-spacing: 0.06em;3930  text-transform: uppercase;3931  cursor: pointer;3932  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;3933  white-space: nowrap;3934}39353936.peach-tag-filter-chip:hover {3937  border-color: rgba(217, 104, 48, 0.35);3938  color: var(--peach-t1);3939}39403941.peach-tag-filter-chip.is-selected {3942  border-color: rgba(217, 104, 48, 0.5);3943  background: rgba(217, 104, 48, 0.12);3944  color: rgba(240, 232, 216, 0.9);3945}39463947/* ─────────────────────────────────────────────────────────────────────────3948   v1.4.12 additions3949   ─────────────────────────────────────────────────────────────────────── */39503951/* Sort bar */3952.peach-sort-bar {3953  display: flex;3954  align-items: center;3955  gap: 4px;3956  padding: 5px 12px;3957  border-bottom: 1px solid var(--peach-t3);3958  flex-shrink: 0;3959  overflow-x: auto;3960  scrollbar-width: none;3961}39623963.peach-sort-btn {3964  padding: 2px 9px;3965  border-radius: 999px;3966  border: 1px solid transparent;3967  background: transparent;3968  color: var(--peach-t2);3969  font-family: "IBM Plex Mono", monospace;3970  font-size: 9px;3971  letter-spacing: 0.07em;3972  text-transform: uppercase;3973  cursor: pointer;3974  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;3975  white-space: nowrap;3976}39773978.peach-sort-btn:hover {3979  border-color: rgba(217, 104, 48, 0.3);3980  color: var(--peach-t1);3981}39823983.peach-sort-btn.is-active {3984  border-color: rgba(217, 104, 48, 0.5);3985  background: rgba(217, 104, 48, 0.12);3986  color: rgba(240, 232, 216, 0.9);3987}39883989.peach-sort-domain-hint {3990  margin-left: auto;3991  font-family: "IBM Plex Mono", monospace;3992  font-size: 9px;3993  color: rgba(217, 104, 48, 0.6);3994  white-space: nowrap;3995  overflow: hidden;3996  text-overflow: ellipsis;3997  max-width: 110px;3998}39994000/* Tab-match badge on entry rows */4001.peach-tab-match-badge {4002  display: inline-block;4003  width: 6px;4004  height: 6px;4005  border-radius: 50%;4006  background: rgba(217, 104, 48, 0.75);4007  margin-left: 5px;4008  vertical-align: middle;4009  flex-shrink: 0;4010  box-shadow: 0 0 4px rgba(217, 104, 48, 0.4);4011}40124013.peach-entry-row.is-tab-match {4014  background: rgba(217, 104, 48, 0.04);4015  border-bottom-color: rgba(217, 104, 48, 0.08);4016}40174018.peach-entry-row.is-tab-match:hover {4019  background: rgba(217, 104, 48, 0.08);4020}40214022/* Entry list stagger entrance */4023@keyframes peach-entry-fadein {4024  from { opacity: 0; transform: translateY(4px); }4025  to   { opacity: 1; transform: translateY(0); }4026}40274028.peach-vault-list .peach-entry-row {4029  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;4030  content-visibility: auto;4031  contain-intrinsic-size: auto 44px;4032}40334034/* Button press micro-interaction */4035.peach-btn:active {4036  transform: scale(0.95);4037  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);4038}40394040.peach-sort-btn:active,4041.peach-tag-filter-chip:active {4042  transform: scale(0.93);4043  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);4044}40454046/* Password strength bar (Lock view + shared) */4047.peach-password-strength {4048  display: flex;4049  align-items: center;4050  gap: 8px;4051  margin-top: 6px;4052}40534054.peach-strength-bar {4055  flex: 1;4056  height: 3px;4057  border-radius: 2px;4058  background: var(--peach-t3);4059  overflow: hidden;4060}40614062.peach-strength-fill {4063  height: 100%;4064  border-radius: 2px;4065  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),4066              background 300ms ease;4067}40684069.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }4070.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }4071.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }4072.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }40734074.peach-strength-label {4075  font-family: "IBM Plex Mono", monospace;4076  font-style: italic;4077  font-size: 9px;4078  font-weight: 300;4079  letter-spacing: 0.06em;4080  color: var(--peach-t2);4081  min-width: 36px;4082  text-align: right;4083}40844085.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }4086.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }4087.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }4088.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }40894090/* Duress form */4091.peach-duress-status {4092  padding: 2px 8px;4093  border-radius: 999px;4094  border: 1px solid var(--peach-t3);4095  font-family: "IBM Plex Mono", monospace;4096  font-size: 9px;4097  letter-spacing: 0.07em;4098  text-transform: uppercase;4099  color: var(--peach-t2);4100  flex-shrink: 0;4101}41024103.peach-duress-status.is-active {4104  border-color: rgba(217, 104, 48, 0.45);4105  background: rgba(217, 104, 48, 0.1);4106  color: rgba(240, 232, 216, 0.85);4107}41084109.peach-duress-form {4110  padding: 8px 0 4px;4111  display: flex;4112  flex-direction: column;4113  gap: 6px;4114}41154116.peach-duress-form .peach-label {4117  margin-top: 4px;4118}41194120.peach-duress-actions {4121  display: flex;4122  gap: 6px;4123  align-items: center;4124  margin-top: 4px;4125}41264127.peach-duress-actions .peach-btn:first-child {4128  margin-right: auto;4129}41304131/* Improved overlay spring entrance */4132.peach-overlay-view.ov-enter-up {4133  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4134}41354136@keyframes ov-enter-up-spring {4137  from { opacity: 0; transform: translateY(16px) scale(0.98); }4138  to   { opacity: 1; transform: translateY(0) scale(1); }4139}41404141.peach-overlay-view.ov-enter-right {4142  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4143}41444145@keyframes ov-enter-right-spring {4146  from { opacity: 0; transform: translateX(18px) scale(0.98); }4147  to   { opacity: 1; transform: translateX(0) scale(1); }4148}41494150/* ── Onboarding-mode restore screens (CJK phrase / file import) ── */4151/* Used when CJKImportView or MainImportView renders during onboarding4152   (no vault yet). Animates like a lock-screen transition. */4153.peach-lock-view {4154  position: absolute;4155  inset: 0;4156  display: flex;4157  flex-direction: column;4158  background:4159    radial-gradient(120% 80% at 0% 0%, rgba(217,104,48,0.08) 0%, transparent 65%),4160    radial-gradient(85% 100% at 100% 100%, rgba(217,104,48,0.06) 0%, transparent 70%),4161    var(--peach-bg);4162  z-index: 2;4163  overflow: hidden;4164  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4165}41664167.peach-lock-view-header {4168  display: flex;4169  align-items: center;4170  justify-content: space-between;4171  padding: 16px 18px 12px;4172  flex-shrink: 0;4173}41744175/* ───────── Settings: auto-lock select ───────── */4176.peach-settings-select {4177  font-family: "IBM Plex Mono", monospace;4178  font-size: 11px;4179  background: transparent;4180  border: 1px solid var(--peach-t3);4181  border-radius: 4px;4182  color: var(--peach-t1);4183  padding: 3px 6px;4184  cursor: pointer;4185  outline: none;4186}4187.peach-settings-select:focus {4188  border-color: var(--peach-accent);4189}41904191/* ───────── Duress status pill (new polished) ───────── */4192.peach-duress-status-pill {4193  font-family: "IBM Plex Mono", monospace;4194  font-size: 9px;4195  text-transform: uppercase;4196  letter-spacing: 0.12em;4197  padding: 2px 8px;4198  border-radius: 12px;4199  background: var(--peach-t3);4200  color: var(--peach-t2);4201  flex-shrink: 0;4202}4203.peach-duress-status-pill.is-active {4204  background: rgba(217, 104, 48, 0.15);4205  color: var(--peach-accent);4206}42074208/* ───────── Entry advanced disclosure (canary) ───────── */4209.peach-entry-advanced {4210  margin-top: 12px;4211  border-top: 1px solid var(--peach-t3);4212  padding-top: 10px;4213  position: relative;4214  z-index: 1;4215}4216.peach-entry-advanced-toggle {4217  display: flex;4218  align-items: center;4219  justify-content: space-between;4220  width: 100%;4221  background: transparent;4222  border: none;4223  cursor: pointer;4224  padding: 0;4225  color: var(--peach-t2);4226}4227.peach-canary-section {4228  margin-top: 10px;4229  display: grid;4230  gap: 6px;4231}42324233/* ───────── Import: merge/replace radio choices ───────── */4234.peach-import-choice {4235  display: flex;4236  align-items: flex-start;4237  gap: 10px;4238  padding: 8px 10px;4239  border: 1px solid var(--peach-t3);4240  border-radius: 10px;4241  cursor: pointer;4242  margin-bottom: 6px;4243  transition: border-color 120ms ease, background 120ms ease;4244}4245.peach-import-choice:hover {4246  border-color: var(--peach-accent);4247}4248.peach-import-choice input[type="radio"] {4249  margin-top: 3px;4250  accent-color: var(--peach-accent);4251  flex-shrink: 0;4252}4253.peach-import-choice-main {4254  display: flex;4255  flex-direction: column;4256  gap: 2px;4257  min-width: 0;4258}4259.peach-import-choice-label {4260  font-size: 12px;4261  color: var(--peach-t0);4262}4263.peach-import-choice-sub {4264  font-size: 11px;4265  color: var(--peach-t2);4266  line-height: 1.5;4267}42684269/* ───────── Export: success confirmation strip ───────── */4270.peach-export-success {4271  display: flex;4272  align-items: flex-start;4273  gap: 10px;4274  padding: 12px;4275  border-radius: 12px;4276  border: 1px solid rgba(150, 175, 110, 0.3);4277  background: rgba(150, 175, 110, 0.08);4278  color: var(--peach-t0);4279  font-size: 12px;4280  line-height: 1.55;4281}4282.peach-export-success-check {4283  color: rgba(150, 175, 110, 0.9);4284  font-size: 14px;4285  flex-shrink: 0;4286}42874288/* ── Trash view ──────────────────────────────────────────────────────── */4289.peach-trash-entry-row {4290  display: flex;4291  align-items: center;4292  justify-content: space-between;4293  gap: 8px;4294  padding: 8px 0;4295  border-bottom: 1px solid var(--peach-t3);4296}4297.peach-trash-entry-row:last-child { border-bottom: none; }4298.peach-trash-entry-info {4299  flex: 1;4300  min-width: 0;4301  display: flex;4302  flex-direction: column;4303  gap: 2px;4304}4305.peach-trash-entry-title {4306  font-size: 12px;4307  color: var(--peach-t1);4308  overflow: hidden;4309  text-overflow: ellipsis;4310  white-space: nowrap;4311}4312.peach-trash-entry-meta {4313  font-family: var(--font-mono);4314  font-size: 9px;4315  color: var(--peach-t2);4316  letter-spacing: 0.06em;4317}4318.peach-trash-entry-actions {4319  display: flex;4320  align-items: center;4321  gap: 4px;4322  flex-shrink: 0;4323}43244325/* ── Settings shortcuts grid ─────────────────────────────────────────── */4326.peach-shortcuts-grid {4327  display: grid;4328  grid-template-columns: auto 1fr;4329  gap: 6px 12px;4330  align-items: center;4331  padding: 4px 0;4332}4333.peach-shortcut-key {4334  font-family: var(--font-mono);4335  font-size: 10px;4336  color: var(--peach-t0);4337  background: var(--peach-t3);4338  border-radius: 4px;4339  padding: 2px 6px;4340  white-space: nowrap;4341  text-align: center;4342}4343.peach-shortcut-desc {4344  font-size: 11px;4345  color: var(--peach-t1);4346}43474348/* ── Sort bar trash button ───────────────────────────────────────────── */4349.peach-sort-trash-btn {4350  display: flex;4351  align-items: center;4352  justify-content: center;4353  padding: 3px 5px;4354  background: transparent;4355  border: none;4356  cursor: pointer;4357  color: var(--peach-t2);4358  border-radius: 4px;4359  transition: color 140ms ease, background 140ms ease;4360}4361.peach-sort-trash-btn:hover {4362  color: var(--peach-t1);4363  background: var(--peach-t3);4364}4365.peach-sort-trash-btn.is-active {4366  color: var(--peach-accent);4367}