popup.css

101.1 KB · raw

1html,2body,3#app,4#pre-lock,5.popup-root {6  width: 320px;7  min-height: 520px;8  height: 520px;9  margin: 0;10}1112body {13  overflow: hidden;14  background: var(--bg);15  color: var(--t0);16  font-family: var(--font-ui);17  font-weight: 300;18  position: relative;19}2021* {22  box-sizing: border-box;23}2425button,26input,27textarea,28select {29  font: inherit;30}3132button {33  border: 0;34}3536#pre-lock {37  position: absolute;38  inset: 0;39  z-index: 10;40}4142#pre-lock[hidden] {43  display: none;44}4546.popup-root {47  position: relative;48  overflow: hidden;49}5051.peach-theme {52  color: var(--peach-t0);53  font-family: var(--font-ui);54  font-weight: 300;55  box-sizing: border-box;56  text-align: left;57}58.peach-theme, .peach-theme * { box-sizing: inherit; }5960.peach-brand-mark {61  width: 14px;62  height: 14px;63  flex-shrink: 0;64}6566.peach-status-pip.is-hidden {67  display: none;68}6970.peach-status-pip.unlocked {71  background: var(--peach-health-ok);72  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);73}7475.peach-status-pip.pulse {76  animation: pip-pulse 400ms var(--peach-curve-settle) both;77}7879/* Shell */80.peach-shell, .peach-screen {81  background:82    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),83    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),84    var(--peach-bg);85  border: 1px solid var(--peach-t3);86  box-shadow:87    0 2px 8px rgba(0,0,0,0.55),88    0 14px 48px rgba(0,0,0,0.7),89    0 0 0 1px rgba(240,232,216,0.04);90  overflow: hidden;91}92.peach-shell {93  display: grid;94  grid-template-rows: auto 1fr;95  min-height: 520px;96  position: relative;97  isolation: isolate;98}99100.peach-shell[data-surface="extension"] {101  width: min(320px, 100vw);102  border-radius: 0;103  height: 520px;104  max-height: 520px;105  overflow: hidden;106}107108/* ── Lock screen – full-window lock/create stage ── */109.lock-screen--vault-stage {110  display: flex;111  flex-direction: column;112  gap: 18px;113  padding: 20px 18px 18px;114  justify-content: flex-start;115}116.lock-screen--vault-stage .peach-lock-panel {117  margin-top: auto;118}119.peach-lock-headline--unlock {120  max-width: 220px;121}122.peach-lock-hero--unlock {123  padding-top: 14px;124}125.peach-lock-panel--unlock {126  gap: 10px;127}128129.peach-lock-restore-link {130  background: transparent;131  border: none;132  cursor: pointer;133  font-family: var(--font-mono);134  font-size: 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 transparent;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 color-mix(in srgb, var(--peach-accent) 50%, transparent);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, transparent 0%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 30%, color-mix(in srgb, var(--peach-accent) 8%, transparent) 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 color-mix(in srgb, var(--peach-accent) 22%, transparent),823    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),824    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);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%, var(--shell-accent-a) 0%, transparent 65%),921    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 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: color-mix(in srgb, var(--peach-accent) 6%, transparent);1424}1425.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1426  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);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, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));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 color-mix(in srgb, var(--peach-accent) 22%, transparent);1531  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);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: color-mix(in srgb, var(--peach-accent) 22%, transparent);1606  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);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: color-mix(in srgb, var(--peach-accent) 8%, transparent);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: color-mix(in srgb, var(--peach-accent) 8%, transparent);2172  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);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: color-mix(in srgb, var(--peach-accent) 90%, transparent);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%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 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 color-mix(in srgb, var(--peach-accent) 40%, transparent);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: color-mix(in srgb, var(--peach-accent) 10%, transparent);2296  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);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  display: flex;2365  flex-direction: column;2366  flex: 1;2367  min-height: 0;2368}2369.peach-note-editor-body--inline {2370  flex: 1;2371  min-height: 0;2372  font-size: 15px;2373  padding: 10px 20px 14px;2374}23752376/* Full-width toolbar row inside the body (Add.tsx note type).2377   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2378.peach-note-toolbar-body {2379  display: flex;2380  align-items: center;2381  gap: 3px;2382  padding: 5px 20px 4px;2383  margin: 2px -20px 0;2384  border-bottom: 1px solid var(--peach-t3);2385  flex-shrink: 0;2386}23872388/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2389   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2390   and .peach-note-tool-divider button-level styles. */2391.peach-note-toolbar-inline {2392  display: flex;2393  align-items: center;2394  gap: 3px;2395  margin-left: auto;2396  padding-left: 10px;2397  border-left: 1px solid var(--peach-t3);2398  min-height: 22px;2399}24002401/* Entry.tsx toolbar row (no tabs, toolbar only) */2402.peach-entry-note-toolbar-row {2403  display: flex;2404  align-items: center;2405  margin: 4px 0 6px;2406  position: relative;2407  z-index: 1;2408}2409.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2410  border-left: none;2411  padding-left: 0;2412  margin-left: 0;2413}24142415/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2416.peach-note-body {2417  display: flex;2418  flex-direction: column;2419  flex: 1;2420  min-height: 0;2421  margin: 4px 0 0;2422}2423.peach-entry-body--new .peach-note-body {2424  margin: 8px -20px 0;2425}24262427/* Add.tsx body is a grid by default; swap to a flex column when a note is2428   active so the note body can stretch and pin the tags row to the bottom. */2429.peach-entry-body--new:has(.peach-note-body) {2430  display: flex;2431  flex-direction: column;2432}24332434/* Rich content element styles (editor + display) */2435.peach-note-editor-body h2,2436.peach-note-content h2 {2437  font-family: "Cormorant Garamond", serif;2438  font-size: 20px;2439  font-weight: 600;2440  font-style: italic;2441  color: var(--peach-t0);2442  margin: 6px 0 2px;2443  line-height: 1.3;2444}2445.peach-note-editor-body ul,2446.peach-note-content ul {2447  padding-left: 18px;2448  margin: 3px 0;2449  list-style: disc;2450}2451.peach-note-editor-body ol,2452.peach-note-content ol {2453  padding-left: 18px;2454  margin: 3px 0;2455  list-style: decimal;2456}2457.peach-note-editor-body li,2458.peach-note-content li { margin: 2px 0; }2459.peach-note-editor-body hr,2460.peach-note-content hr {2461  border: none;2462  border-top: 1px solid var(--peach-t3);2463  margin: 10px 0;2464}24652466/* font size elements from execCommand */2467.peach-note-editor-body font[size="1"],2468.peach-note-content font[size="1"] { font-size: 11px; line-height: 1.6; }2469.peach-note-editor-body font[size="2"],2470.peach-note-content font[size="2"] { font-size: 13px; }2471.peach-note-editor-body font[size="3"],2472.peach-note-content font[size="3"] { font-size: 16px; }2473.peach-note-editor-body font[size="4"],2474.peach-note-content font[size="4"] { font-size: 20px; }2475.peach-note-editor-body font[size="5"],2476.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }24772478/* bold / italic inside the editor and note display */2479.peach-note-editor-body b, .peach-note-editor-body strong,2480.peach-note-content b, .peach-note-content strong { font-weight: 700; }2481.peach-note-editor-body em, .peach-note-editor-body i,2482.peach-note-content em, .peach-note-content i { font-style: italic; }24832484/* note display — rendered HTML, no pre-wrap */2485.peach-note-content {2486  overflow: auto;2487  max-height: 340px;2488  word-break: break-word;2489}24902491/* ── Note textarea ── */2492.peach-note-textarea {2493  width: 100%;2494  min-height: 180px;2495  max-height: 280px;2496  resize: vertical;2497  background: var(--peach-t4);2498  border: 1px solid var(--peach-t3);2499  border-radius: 8px;2500  padding: 10px 12px;2501  font-family: "IBM Plex Mono", monospace;2502  font-size: 12px;2503  line-height: 1.7;2504  color: var(--peach-t1);2505  outline: none;2506  transition: border-color 150ms ease;2507}25082509.peach-note-textarea:focus {2510  border-color: var(--peach-t2);2511}25122513.peach-note-char-count {2514  font-family: "IBM Plex Mono", monospace;2515  font-size: 9px;2516  color: var(--peach-t3);2517  text-align: right;2518  margin-top: 4px;2519  letter-spacing: 0.1em;2520}25212522/* ── Field input baseline ── */2523.peach-new-field-input {2524  width: 100%;2525  background: transparent;2526  border: none;2527  border-bottom: 1px solid var(--peach-t3);2528  padding: 4px 0;2529  color: var(--peach-t1);2530  font-family: "IBM Plex Mono", monospace;2531  font-size: 13px;2532  outline: none;2533  transition: border-color 150ms ease;2534}25352536.peach-new-field-input:focus {2537  border-bottom-color: var(--peach-t0);2538  color: var(--peach-t0);2539}25402541.peach-new-name-input {2542  width: 100%;2543  background: transparent;2544  border: none;2545  border-bottom: 1px solid var(--peach-t3);2546  padding: 6px 0;2547  font-family: "Cormorant Garamond", Georgia, serif;2548  font-style: italic;2549  font-size: 28px;2550  color: var(--peach-t0);2551  outline: none;2552  transition: border-color 150ms ease;2553}25542555.peach-new-name-input:focus {2556  border-bottom-color: var(--peach-t1);2557}25582559.peach-new-name-input::placeholder {2560  color: var(--peach-t2);2561  font-style: italic;2562}25632564.peach-new-field-input::placeholder {2565  color: var(--peach-t3);2566}25672568/* ── Demo entrance animation ── */2569#hd-shell {2570  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;2571}2572@keyframes hd-shell-enter {2573  from { opacity: 0; transform: scale(0.96) translateY(16px); }2574  to   { opacity: 1; transform: scale(1) translateY(0); }2575}25762577/* ── Keyframes ── */2578@keyframes peach-char-enter {2579  from { opacity: 0; transform: translateY(0.22em); }2580  to   { opacity: 1; transform: translateY(0); }2581}2582@keyframes peach-content-enter {2583  from { opacity: 0.96; transform: translateY(4px); }2584  to   { opacity: 1; transform: translateY(0); }2585}2586@keyframes peach-content-exit {2587  from { opacity: 1; transform: translateY(0); }2588  to   { opacity: 0.92; transform: translateY(-3px); }2589}2590@keyframes peach-screen-enter {2591  from { opacity: 0; transform: translateY(14px); }2592  to   { opacity: 1; transform: translateY(0); }2593}2594@keyframes peach-shell-fade-in {2595  from { opacity: 0; }2596  to   { opacity: 1; }2597}2598@keyframes peach-veil-in {2599  from { opacity: 0; }2600  to   { opacity: 1; }2601}2602@keyframes peach-lock-settle {2603  0%   { transform: scale(0.9); }2604  65%  { transform: scale(1.08); }2605  100% { transform: scale(1); }2606}2607@keyframes peach-copy-confirm {2608  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2609  to   { color: var(--peach-accent); border-color: color-mix(in srgb, var(--peach-accent) 42%, transparent); background-color: color-mix(in srgb, var(--peach-accent) 9%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--peach-accent) 12%, transparent); }2610}2611@keyframes peach-copy-retreat {2612  from { color: var(--peach-accent); border-color: color-mix(in srgb, var(--peach-accent) 42%, transparent); background-color: color-mix(in srgb, var(--peach-accent) 9%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--peach-accent) 12%, transparent); }2613  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2614}2615@keyframes peach-copy-flood {2616  from { opacity: 0; transform: scaleX(0.15); }2617  to   { opacity: 1; transform: scaleX(1); }2618}2619@keyframes peach-copy-icon-settle {2620  from  { transform: scale(0.84); }2621  70%   { transform: scale(1.08); }2622  to    { transform: scale(1); }2623}2624@keyframes peach-copy-sheen-retreat {2625  from { opacity: 1; transform: scaleX(1); }2626  to   { opacity: 0; transform: scaleX(0.15); }2627}2628@keyframes peach-copy-drain {2629  from { width: 100%; }2630  to   { width: 0; }2631}2632@keyframes peach-shake {2633  0%, 100% { transform: translateX(0); }2634  20%      { transform: translateX(-6px); }2635  40%      { transform: translateX(6px); }2636  60%      { transform: translateX(-4px); }2637  80%      { transform: translateX(4px); }2638}26392640@keyframes pip-pulse {2641  0% { transform: scale(1); }2642  40% { transform: scale(2.2); }2643  100% { transform: scale(1); }2644}264526462647/* ── Password generator ── */2648.peach-pwgen-body {2649  flex: 1; overflow-y: auto;2650  display: flex; flex-direction: column;2651}2652.peach-policy-badge {2653  display: flex; align-items: center;2654  padding: 6px 20px 0;2655  font-size: 10px; font-family: Inter, sans-serif;2656  color: var(--peach-t2); letter-spacing: 0.04em;2657}2658.peach-pwgen-display {2659  padding: 14px 20px 12px;2660  border-bottom: 1px solid var(--peach-t3);2661  display: flex; align-items: flex-start; gap: 10px;2662}2663.peach-pwgen-display-row {2664  display: flex;2665  align-items: flex-start;2666  gap: 8px;2667  padding-bottom: 8px;2668  border-bottom: 1px solid var(--peach-t3);2669}2670.peach-pwgen-output {2671  flex: 1; min-width: 0; margin: 0;2672  font-family: "IBM Plex Mono", monospace;2673  font-size: 13px; color: var(--peach-t0);2674  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;2675  white-space: normal;2676  padding: 10px 12px;2677  background: var(--peach-t4);2678  border-radius: 6px;2679  min-height: 36px;2680}2681.peach-pwgen-output-display {2682  flex: 1;2683  min-width: 0;2684  margin: 0;2685  font-family: "Cormorant Garamond", "Times New Roman", serif;2686  font-style: italic;2687  font-weight: 300;2688  font-size: 32px;2689  line-height: 1.05;2690  color: var(--peach-t0);2691  word-break: break-all;2692  overflow-wrap: break-word;2693  white-space: normal;2694  letter-spacing: 0.02em;2695}2696.peach-pwgen-display-actions {2697  display: flex;2698  flex-direction: column;2699  gap: 4px;2700  flex-shrink: 0;2701  margin-top: 2px;2702}2703.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }2704.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }2705.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }2706.peach-pwgen-len-num {2707  font-family: "IBM Plex Mono", monospace;2708  font-size: 12px; color: var(--peach-accent);2709}2710.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }2711.peach-pwgen-toggles { display: flex; flex-direction: column; }2712.peach-pwgen-charset-pills {2713  display: flex;2714  gap: 6px;2715  flex-wrap: wrap;2716}2717.peach-pwgen-pill {2718  padding: 4px 11px;2719  border-radius: 999px;2720  border: 1px solid var(--peach-t3);2721  background: transparent;2722  color: var(--peach-t2);2723  font-family: "IBM Plex Mono", monospace;2724  font-size: 9px;2725  letter-spacing: 0.08em;2726  cursor: pointer;2727  transition: all 150ms ease;2728}2729.peach-pwgen-pill.is-on {2730  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);2731  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2732  color: var(--peach-accent);2733}2734.peach-pwgen-pill:not(.is-on):hover {2735  color: var(--peach-t1);2736  border-color: var(--peach-t2);2737}2738.peach-pwgen-use-btn {2739  width: 100%;2740  min-height: 34px;2741  border-radius: 8px;2742  margin-top: 2px;2743}2744.peach-pwgen-toggle-row {2745  display: flex; align-items: center; justify-content: space-between;2746  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);2747}2748.peach-pwgen-toggle-row:last-child { border-bottom: none; }2749.peach-pwgen-toggle-label { font-size: 13px; color: var(--peach-t1); }27502751.peach-screen-prelock {2752  z-index: 10;2753}27542755.prelock-form {2756  display: grid;2757  gap: 12px;2758}27592760/* Peach popup should not expose native scrollbars on internal panels. */2761.peach-settings-body,2762.peach-new-body,2763.peach-pwgen-body,2764.lock-screen,2765.peach-import-preview {2766  scrollbar-width: none;2767  -ms-overflow-style: none;2768  overscroll-behavior: contain;2769}2770.peach-settings-body::-webkit-scrollbar,2771.peach-new-body::-webkit-scrollbar,2772.peach-pwgen-body::-webkit-scrollbar,2773.lock-screen::-webkit-scrollbar,2774.peach-import-preview::-webkit-scrollbar {2775  width: 0;2776  height: 0;2777  display: none;2778}27792780.lock-screen {2781  height: 100%;2782  min-height: 100%;2783  overflow-y: auto;2784  padding: 18px 18px 16px;2785  gap: 14px;2786  grid-template-rows: auto auto auto 1fr auto;2787  align-content: stretch;2788  position: relative;2789  isolation: isolate;2790}2791.peach-screen.lock-screen--vault-stage {2792  display: flex;2793  flex-direction: column;2794  justify-content: flex-start;2795  gap: 18px;2796  padding: 20px 18px 18px;2797  overflow: hidden;2798}2799.peach-screen.lock-screen--vault-stage .peach-lock-panel {2800  margin-top: auto;2801}2802.lock-screen--onboarding {2803  display: flex;2804  flex-direction: column;2805  gap: 12px;2806  justify-content: flex-start;2807}28082809.lock-screen::before {2810  content: "";2811  position: absolute;2812  inset: 12px 18px auto auto;2813  width: 160px;2814  height: 160px;2815  border-radius: 999px;2816  background:2817    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 42%, transparent 72%);2818  filter: blur(6px);2819  opacity: 0.7;2820  pointer-events: none;2821  z-index: 0;2822}28232824.lock-screen-header {2825  display: flex;2826  align-items: center;2827  justify-content: space-between;2828  position: relative;2829  z-index: 1;2830}28312832.lock-password-input.shake {2833  animation: peach-shake 300ms ease-in-out;2834}28352836.peach-hint-error {2837  color: rgba(220, 80, 60, 0.92);2838}28392840.peach-onboarding-headline {2841  margin: 0;2842  font-family: "Cormorant Garamond", "Times New Roman", serif;2843  font-size: 35px;2844  line-height: 0.88;2845  font-style: italic;2846  font-weight: 400;2847  max-width: 252px;2848}28492850.peach-lock-copy {2851  display: grid;2852  gap: 8px;2853  position: relative;2854  z-index: 1;2855}28562857.peach-lock-copy--onboarding {2858  gap: 10px;2859}28602861.peach-lock-hero {2862  position: relative;2863  z-index: 1;2864  display: grid;2865  gap: 8px;2866  min-height: 0;2867  padding: 4px 2px 0;2868  border: none;2869  border-radius: 0;2870  background: transparent;2871  box-shadow: none;2872}2873.peach-lock-hero-art {2874  position: absolute;2875  right: -8px;2876  top: -6px;2877  width: 120px;2878  height: 120px;2879  display: flex;2880  align-items: center;2881  justify-content: center;2882  pointer-events: none;2883  opacity: 0.12;2884  filter: saturate(0.9);2885}2886.peach-lock-hero-mark {2887  width: 100%;2888  height: 100%;2889}2890.peach-lock-hero-mark path:first-child {2891  fill: color-mix(in srgb, var(--peach-accent) 92%, transparent);2892}2893.peach-lock-hero-mark path:nth-child(2),2894.peach-lock-hero-mark path:nth-child(3) {2895  stroke: rgba(123, 144, 96, 0.88);2896  fill: rgba(123, 144, 96, 0.88);2897}2898.peach-lock-hero > *:not(.peach-lock-hero-art) {2899  position: relative;2900  z-index: 1;2901}29022903.peach-lock-eyebrow {2904  display: inline-flex;2905  align-items: center;2906  width: fit-content;2907  padding: 4px 9px;2908  border-radius: 999px;2909  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);2910  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2911  color: var(--peach-t0);2912  font-family: "IBM Plex Mono", monospace;2913  font-size: 8px;2914  letter-spacing: 0.18em;2915  text-transform: uppercase;2916}29172918.peach-lock-label-row {2919  display: flex;2920  align-items: center;2921  justify-content: space-between;2922  margin-bottom: 0;2923}29242925.peach-lock-reveal-btn {2926  display: inline-flex;2927  align-items: center;2928  gap: 4px;2929  background: none;2930  border: none;2931  cursor: pointer;2932  font-family: "IBM Plex Mono", monospace;2933  font-size: 9px;2934  letter-spacing: 0.06em;2935  color: var(--peach-t2);2936  padding: 2px 0;2937  transition: color 150ms ease;2938}29392940.peach-lock-reveal-btn:hover {2941  color: var(--peach-t1);2942}29432944.peach-lock-warning {2945  color: rgba(220, 80, 60, 0.85) !important;2946  line-height: 1.5;2947}29482949.peach-onboarding-cards {2950  display: grid;2951  gap: 8px;2952  position: relative;2953  z-index: 1;2954}29552956.peach-lock-panel {2957  position: relative;2958  z-index: 1;2959  display: grid;2960  gap: 9px;2961  padding: 14px 16px 15px;2962  border-radius: 18px;2963  border: 1px solid var(--peach-t3);2964  background:2965    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));2966  box-shadow:2967    inset 0 1px 0 rgba(240, 232, 216, 0.04),2968    0 12px 28px rgba(0, 0, 0, 0.12);2969}29702971.peach-lock-panel--secondary {2972  gap: 12px;2973}29742975.peach-lock-panel-header {2976  display: flex;2977  align-items: baseline;2978  justify-content: space-between;2979  gap: 12px;2980}29812982.peach-lock-option-grid {2983  display: grid;2984  gap: 10px;2985}29862987.peach-lock-option {2988  width: 100%;2989  display: grid;2990  gap: 6px;2991  padding: 14px 15px;2992  border-radius: 16px;2993  border: 1px solid rgba(240, 232, 216, 0.08);2994  background: rgba(240, 232, 216, 0.02);2995  color: var(--peach-t0);2996  text-align: left;2997  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;2998}29993000.peach-lock-option:hover {3001  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3002  background: rgba(240, 232, 216, 0.04);3003  transform: translateY(-1px);3004}30053006.peach-lock-option-title {3007  font-size: 12px;3008  color: var(--peach-t0);3009}30103011.peach-lock-option-copy {3012  font-size: 11px;3013  line-height: 1.55;3014  color: var(--peach-t1);3015}30163017.peach-onboarding-stack {3018  margin-top: 2px;3019}3020.peach-lock-panel-footer {3021  display: grid;3022  gap: 6px;3023  margin-top: 2px;3024  padding-top: 10px;3025  border-top: 1px solid rgba(240, 232, 216, 0.06);3026}30273028/* Restore picker panel — method option cards */3029.peach-lock-panel--restore {3030  gap: 10px;3031}3032.peach-lock-option--history {3033  border-color: rgba(240, 232, 216, 0.06);3034  opacity: 0.85;3035}30363037/* Snapshot restore panel */3038.peach-snapshot-panel {3039  gap: 10px;3040  overflow-y: auto;3041  max-height: 340px;3042}3043.peach-snapshot-list {3044  display: flex;3045  flex-direction: column;3046  gap: 4px;3047}3048.peach-snapshot-row {3049  display: flex;3050  align-items: center;3051  justify-content: space-between;3052  width: 100%;3053  padding: 8px 10px;3054  border-radius: 8px;3055  border: 1px solid rgba(240, 232, 216, 0.07);3056  background: transparent;3057  cursor: pointer;3058  transition: border-color 120ms, background 120ms;3059  text-align: left;3060  gap: 8px;3061}3062.peach-snapshot-row:hover {3063  border-color: rgba(240, 232, 216, 0.14);3064  background: rgba(240, 232, 216, 0.03);3065}3066.peach-snapshot-row.is-selected {3067  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3068  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3069}3070.peach-snapshot-time {3071  font-size: 11.5px;3072  color: var(--peach-t0);3073  flex: 1;3074}3075.peach-snapshot-count {3076  font-family: "IBM Plex Mono", monospace;3077  font-size: 10px;3078  color: var(--peach-t2);3079  flex-shrink: 0;3080}3081.peach-snapshot-confirm {3082  display: flex;3083  flex-direction: column;3084  gap: 8px;3085  padding-top: 10px;3086  border-top: 1px solid rgba(240, 232, 216, 0.06);3087}3088.peach-snapshot-warning {3089  display: flex;3090  align-items: flex-start;3091  gap: 6px;3092  font-size: 10.5px;3093  color: rgba(220, 80, 60, 0.85);3094  line-height: 1.55;3095}3096.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3097.peach-snapshot-confirm-row {3098  display: flex;3099  gap: 6px;3100  align-items: center;3101}3102.peach-snapshot-restore-btn {3103  width: 100%;3104}3105.peach-lock-hero--unlock .peach-lock-hero-art {3106  width: 112px;3107  height: 112px;3108  right: 0;3109  top: 2px;3110  opacity: 0.1;3111}31123113.peach-card {3114  border: 1px solid var(--peach-t3);3115  border-radius: 18px;3116  background:3117    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3118  box-shadow:3119    inset 0 1px 0 rgba(240, 232, 216, 0.04),3120    0 12px 32px rgba(0, 0, 0, 0.14);3121  overflow: hidden;3122}31233124.peach-card-active {3125  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3126  box-shadow:3127    inset 0 1px 0 rgba(240, 232, 216, 0.05),3128    0 16px 38px rgba(0, 0, 0, 0.18),3129    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);3130}31313132.peach-card-disabled {3133  opacity: 0.72;3134}31353136.peach-card-header {3137  width: 100%;3138  padding: 13px 16px 11px;3139  background: transparent;3140  color: var(--peach-t0);3141  display: flex;3142  justify-content: space-between;3143  align-items: center;3144  text-align: left;3145  font-size: 12px;3146}31473148.peach-card-body {3149  padding: 0 16px 16px;3150  display: grid;3151  gap: 9px;3152}31533154.peach-card-tag {3155  color: var(--peach-t2);3156  font-family: "IBM Plex Mono", monospace;3157  font-size: 9px;3158  letter-spacing: 0.12em;3159  text-transform: uppercase;3160}31613162.peach-empty-copy {3163  display: grid;3164  gap: 6px;3165  color: var(--peach-t1);3166  font-size: 13px;3167}31683169.peach-lock-submit {3170  width: 100%;3171  box-shadow: 0 14px 36px color-mix(in srgb, var(--peach-accent) 22%, transparent);3172}31733174.peach-lock-secondary {3175  width: 100%;3176  border-color: var(--peach-t3);3177  background: rgba(240, 232, 216, 0.02);3178}31793180.peach-lock-secondary:hover {3181  background: rgba(240, 232, 216, 0.04);3182}31833184.peach-lock-note {3185  max-width: none;3186  line-height: 1.55;3187  margin: 0;3188}31893190.peach-overlay-action {3191  font-size: 10px;3192  padding: 4px 8px;3193  letter-spacing: 0.06em;3194  min-width: 44px;3195  text-align: center;3196}31973198.peach-overlay-spacer {3199  width: 32px;3200}32013202.peach-inline-action {3203  flex-shrink: 0;3204  font-size: 9px;3205  letter-spacing: 0.1em;3206  text-transform: uppercase;3207  padding: 4px 7px;3208}3209.peach-password-toggle-btn {3210  display: inline-flex;3211  align-items: center;3212  justify-content: center;3213  min-width: 30px;3214  min-height: 26px;3215  padding: 0 7px;3216  border: 1px solid var(--peach-t3);3217  border-radius: 999px;3218  background: rgba(240, 232, 216, 0.04);3219  color: var(--peach-t2);3220  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;3221}3222.peach-password-toggle-btn:hover {3223  border-color: var(--peach-t2);3224  color: var(--peach-t0);3225  background: rgba(240, 232, 216, 0.06);3226}32273228.peach-new-textarea {3229  width: 100%;3230  min-height: 88px;3231  resize: vertical;3232  border: 0;3233  outline: none;3234  background: transparent;3235  color: var(--peach-t1);3236  font-family: "IBM Plex Mono", monospace;3237  font-size: 12px;3238  line-height: 1.65;3239  caret-color: var(--peach-accent);3240}32413242.peach-new-textarea::placeholder {3243  color: var(--peach-t2);3244  opacity: 0.7;3245}32463247.peach-settings-actions {3248  display: grid;3249  gap: 8px;3250}32513252.peach-sync-section-label {3253  font-size: 11px;3254  color: var(--peach-t2);3255  text-transform: uppercase;3256  letter-spacing: 0.05em;3257}32583259.peach-sync-device-row {3260  display: flex;3261  justify-content: space-between;3262  align-items: center;3263  padding: 6px 0;3264  border-bottom: 1px solid var(--peach-t3);3265}32663267.peach-sync-device-info {3268  display: flex;3269  flex-direction: column;3270  gap: 2px;3271}32723273.peach-sync-device-name {3274  font-size: 13px;3275  color: var(--peach-t0);3276}32773278.peach-sync-device-meta {3279  font-size: 11px;3280  color: var(--peach-t2);3281}32823283.peach-sync-status-dot {3284  display: inline-block;3285  width: 8px;3286  height: 8px;3287  border-radius: 50%;3288  vertical-align: middle;3289}32903291.peach-sync-remove-btn {3292  color: var(--peach-breach);3293}32943295.peach-import-preview {3296  margin-bottom: 12px;3297  max-height: 152px;3298  overflow-y: auto;3299  border: 1px solid var(--peach-t3);3300  border-radius: 10px;3301  padding: 8px 10px;3302  display: grid;3303  gap: 8px;3304  background: rgba(240, 232, 216, 0.02);3305}33063307.peach-import-preview-row {3308  display: flex;3309  justify-content: space-between;3310  gap: 10px;3311  font-size: 11px;3312  color: var(--peach-t1);3313}33143315.peach-import-preview-title {3316  color: var(--peach-t0);3317  flex: 1;3318  min-width: 0;3319  overflow: hidden;3320  text-overflow: ellipsis;3321  white-space: nowrap;3322}33233324.peach-import-preview-meta {3325  color: var(--peach-t2);3326  flex-shrink: 0;3327  max-width: 42%;3328  overflow: hidden;3329  text-overflow: ellipsis;3330  white-space: nowrap;3331}33323333.peach-import-preview-more {3334  color: var(--peach-t2);3335  font-size: 10px;3336}33373338.peach-restore-copy {3339  margin: 0;3340  color: var(--peach-t1);3341  font-size: 11px;3342  line-height: 1.6;3343}33443345.peach-restore-warning {3346  padding: 10px 12px;3347  border-radius: 12px;3348  border: 1px solid rgba(220, 80, 60, 0.22);3349  background: rgba(220, 80, 60, 0.08);3350  color: rgba(240, 232, 216, 0.86);3351  font-size: 11px;3352  line-height: 1.55;3353}33543355.peach-provider-chips {3356  display: flex;3357  flex-wrap: wrap;3358  gap: 6px;3359}33603361.peach-provider-chip {3362  display: inline-flex;3363  align-items: center;3364  padding: 5px 8px;3365  border-radius: 999px;3366  border: 1px solid var(--peach-t3);3367  background: rgba(240, 232, 216, 0.02);3368  color: var(--peach-t1);3369  font-family: "IBM Plex Mono", monospace;3370  font-size: 8px;3371  letter-spacing: 0.08em;3372  text-transform: uppercase;3373}33743375.peach-restore-file,3376.peach-restore-input {3377  width: 100%;3378  border-radius: 10px;3379  border: 1px solid var(--peach-t3);3380  background: var(--peach-s2);3381  color: var(--peach-t0);3382  font-size: 12px;3383}33843385.peach-restore-file {3386  padding: 9px 10px;3387}33883389.peach-restore-file::file-selector-button {3390  margin-right: 10px;3391  padding: 7px 10px;3392  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);3393  border-radius: 999px;3394  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3395  color: var(--peach-t0);3396  font-size: 10px;3397  letter-spacing: 0.08em;3398  text-transform: uppercase;3399  cursor: pointer;3400}34013402.peach-restore-input {3403  padding: 10px 12px;3404}34053406.peach-auth-grid {3407  display: grid;3408  gap: 10px;3409}34103411.peach-import-summary {3412  color: var(--peach-t1);3413  font-size: 12px;3414  line-height: 1.6;3415  margin-bottom: 12px;3416}34173418.peach-restore-error {3419  color: rgba(220, 80, 60, 0.95);3420  font-size: 12px;3421  line-height: 1.55;3422}34233424.peach-cjk-qr-panel {3425  margin-top: 14px;3426  padding: 12px;3427  border-radius: 16px;3428  border: 1px solid var(--peach-t3);3429  background: rgba(240, 232, 216, 0.02);3430  display: grid;3431  gap: 10px;3432}34333434.peach-cjk-qr-frame {3435  display: grid;3436  place-items: center;3437  min-height: 212px;3438  border-radius: 14px;3439  background: #fff;3440  overflow: hidden;3441}34423443.peach-cjk-qr-frame svg {3444  display: block;3445  width: 196px;3446  height: 196px;3447}34483449.peach-cjk-qr-error,3450.peach-cjk-qr-caption {3451  color: var(--peach-t1);3452  font-size: 11px;3453  line-height: 1.55;3454}34553456.peach-cjk-qr-card {3457  max-width: 400px;3458  margin: auto;3459}34603461.peach-cjk-qr-body {3462  padding: 0 20px 20px;3463  text-align: center;3464}34653466.peach-cjk-qr-hint {3467  font-size: 11px;3468  color: var(--peach-t2);3469  margin: 0 0 14px;3470}34713472.peach-cjk-qr-image {3473  border-radius: 4px;3474  display: block;3475  margin: 0 auto;3476  width: 100%;3477  max-width: 320px;3478  height: auto;3479}34803481.peach-pro-badge {3482  padding: 2px 6px;3483  border-radius: 999px;3484  font-family: var(--font-ui);3485  font-size: 10px;3486  letter-spacing: 0.08em;3487  text-transform: uppercase;3488  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);3489  color: var(--peach-accent);3490}34913492.peach-loading {3493  position: absolute;3494  inset: 0;3495  display: flex;3496  align-items: center;3497  justify-content: center;3498  background: var(--bg);3499  animation: peach-loading-pulse 1.2s ease-in-out infinite;3500}35013502@keyframes peach-loading-pulse {3503  0%, 100% { opacity: 0.6; }3504  50% { opacity: 1; }3505}35063507/* ── Health Dashboard ─────────────────────────────────────────────────── */3508.peach-health-body {3509  flex: 1;3510  overflow-y: auto;3511  display: flex;3512  flex-direction: column;3513}35143515.peach-health-summary {3516  padding: 10px 16px 6px;3517  font-family: "IBM Plex Mono", monospace;3518  font-size: 11px;3519}3520.peach-health-summary-warn { color: rgba(220,80,60,0.9); }3521.peach-health-summary-ok { color: var(--peach-t2); }35223523.peach-health-check-row {3524  padding: 0 16px 10px;3525}3526.peach-health-check-btn {3527  width: 100%;3528  display: flex;3529  align-items: center;3530  justify-content: center;3531}35323533.peach-health-sections {3534  flex: 1;3535  display: flex;3536  flex-direction: column;3537}35383539.peach-health-section {3540  border-bottom: 1px solid var(--peach-t3);3541}35423543.peach-health-section-header {3544  width: 100%;3545  display: flex;3546  align-items: center;3547  justify-content: space-between;3548  padding: 9px 16px;3549  background: transparent;3550  cursor: pointer;3551  color: var(--peach-t0);3552}35533554.peach-health-section-title-row {3555  display: flex;3556  align-items: center;3557  gap: 8px;3558}35593560.peach-health-count-badge {3561  display: inline-flex;3562  align-items: center;3563  justify-content: center;3564  min-width: 20px;3565  height: 18px;3566  padding: 0 5px;3567  border-radius: 999px;3568  background: rgba(220,80,60,0.15);3569  border: 1px solid rgba(220,80,60,0.25);3570  font-family: "IBM Plex Mono", monospace;3571  font-size: 9px;3572  color: rgba(220,80,60,0.9);3573}35743575.peach-health-section-title {3576  font-family: "IBM Plex Mono", monospace;3577  font-size: 11px;3578  text-transform: uppercase;3579  letter-spacing: 0.1em;3580  color: var(--peach-t1);3581}35823583.peach-health-chevron {3584  color: var(--peach-t2);3585  transition: transform 200ms ease;3586  flex-shrink: 0;3587}3588.peach-health-chevron.is-expanded {3589  transform: rotate(180deg);3590}35913592.peach-health-section-body {3593  padding: 0 16px 10px;3594  display: flex;3595  flex-direction: column;3596  gap: 4px;3597}35983599.peach-health-row {3600  display: flex;3601  align-items: flex-start;3602  justify-content: space-between;3603  gap: 8px;3604  padding: 6px 8px;3605  border-radius: 8px;3606  background: rgba(240,232,216,0.02);3607}36083609.peach-health-row-info {3610  flex: 1;3611  min-width: 0;3612  display: flex;3613  flex-direction: column;3614  gap: 2px;3615}36163617.peach-health-row-name {3618  font-family: "Cormorant Garamond", serif;3619  font-size: 15px;3620  font-style: italic;3621  font-weight: 400;3622  color: var(--peach-t0);3623  white-space: nowrap;3624  overflow: hidden;3625  text-overflow: ellipsis;3626}36273628.peach-health-row-meta {3629  font-family: "IBM Plex Mono", monospace;3630  font-size: 9px;3631  color: var(--peach-t2);3632  letter-spacing: 0.05em;3633}36343635.peach-health-fix-btn {3636  font-size: 9px;3637  letter-spacing: 0.08em;3638  text-transform: uppercase;3639  padding: 4px 7px;3640  flex-shrink: 0;3641  display: flex;3642  align-items: center;3643}36443645.peach-health-empty {3646  font-family: "IBM Plex Mono", monospace;3647  font-size: 10px;3648  color: var(--peach-t2);3649  padding: 6px 0;3650}36513652.peach-health-loading {3653  font-family: "IBM Plex Mono", monospace;3654  font-size: 10px;3655  color: var(--peach-t2);3656  padding: 6px 0;3657  display: flex;3658  align-items: center;3659  gap: 6px;3660}36613662.peach-health-loading::before {3663  content: "";3664  width: 10px;3665  height: 10px;3666  border: 1.5px solid var(--peach-t3);3667  border-top-color: var(--peach-accent);3668  border-radius: 50%;3669  animation: peach-spin 600ms linear infinite;3670}36713672@keyframes peach-spin {3673  to { transform: rotate(360deg); }3674}36753676.peach-spinner {3677  width: 32px;3678  height: 32px;3679  border: 2px solid var(--peach-s2);3680  border-top-color: var(--peach-accent);3681  border-radius: 50%;3682  margin: 0 auto 16px;3683  animation: peach-spin 0.8s linear infinite;3684}36853686.peach-progress-screen {3687  text-align: center;3688  padding: 32px 16px;3689}36903691.peach-progress-screen-title {3692  font-size: 13px;3693  color: var(--peach-t0);3694  margin-bottom: 16px;3695}36963697.peach-progress-screen-stage {3698  font-size: 11px;3699  color: var(--peach-t2);3700  min-height: 14px;3701}37023703.peach-progress-screen-note {3704  font-size: 10px;3705  color: var(--peach-t2);3706  margin-top: 8px;3707}37083709.peach-pairing-body {3710  flex: 1;3711  overflow-y: auto;3712  display: flex;3713  flex-direction: column;3714}37153716.peach-pairing-content {3717  flex: 1;3718  display: flex;3719  flex-direction: column;3720  align-items: center;3721  justify-content: center;3722  gap: 14px;3723  padding: 28px 20px;3724  text-align: center;3725}37263727.peach-pairing-headline {3728  font-family: var(--font-display);3729  font-style: italic;3730  font-weight: 300;3731  font-size: 28px;3732  color: var(--peach-t0);3733  margin: 0;3734  line-height: 1;3735}37363737.peach-pairing-subline {3738  font-size: 12px;3739  color: var(--peach-t2);3740  max-width: 220px;3741  line-height: 1.5;3742  margin: 0;3743}37443745.peach-pairing-subline--center {3746  text-align: center;3747}37483749.peach-pairing-code-display {3750  display: flex;3751  gap: 6px;3752}37533754.peach-pairing-code-digit {3755  display: flex;3756  align-items: center;3757  justify-content: center;3758  width: 36px;3759  height: 48px;3760  background: var(--peach-s2);3761  border: 1px solid var(--peach-t3);3762  border-radius: 6px;3763  font-family: var(--font-mono);3764  font-size: 22px;3765  color: var(--peach-t0);3766  letter-spacing: 0;3767}37683769.peach-pairing-countdown-ring {3770  position: relative;3771  display: inline-flex;3772  align-items: center;3773  justify-content: center;3774}37753776.peach-pairing-countdown-num {3777  position: absolute;3778  font-family: var(--font-mono);3779  font-size: 14px;3780  color: var(--peach-t1);3781}37823783.peach-pairing-ring-track {3784  fill: none;3785  stroke: var(--peach-t3);3786  stroke-width: 2;3787}37883789.peach-pairing-ring-progress {3790  fill: none;3791  stroke: var(--peach-accent);3792  stroke-width: 2;3793  stroke-linecap: round;3794  transform: rotate(-90deg);3795  transform-origin: 50% 50%;3796  transition: stroke-dashoffset 0.5s linear;3797}37983799.peach-pairing-code-inputs {3800  display: flex;3801  gap: 8px;3802}38033804.peach-pairing-code-box {3805  width: 36px;3806  height: 48px;3807  text-align: center;3808  background: var(--peach-s2);3809  border: 1px solid var(--peach-t3);3810  border-radius: 6px;3811  font-family: var(--font-mono);3812  font-size: 20px;3813  color: var(--peach-t0);3814  outline: none;3815  transition: border-color 120ms ease;3816}38173818.peach-pairing-code-box:focus {3819  border-color: var(--peach-accent);3820}38213822.peach-pairing-code-box.has-error {3823  border-color: rgba(220, 80, 60, 0.45);3824}38253826.peach-pairing-status {3827  display: flex;3828  align-items: center;3829  gap: 8px;3830  margin: 0;3831  font-size: 12px;3832  color: var(--peach-t1);3833}38343835.peach-pairing-error {3836  margin: 0;3837  font-size: 11px;3838  color: var(--peach-breach);3839}38403841.peach-pairing-error-msg {3842  color: var(--peach-t1);3843}38443845.peach-pairing-spinner {3846  width: 12px;3847  height: 12px;3848  border: 1.5px solid var(--peach-t3);3849  border-top-color: var(--peach-accent);3850  border-radius: 50%;3851  animation: peach-spin 0.8s linear infinite;3852}38533854.peach-pairing-success-icon,3855.peach-pairing-error-icon,3856.peach-pairing-hero {3857  display: inline-flex;3858  align-items: center;3859  justify-content: center;3860}38613862/* Tag chips */3863.peach-tag-chip {3864  display: inline-flex;3865  align-items: center;3866  gap: 4px;3867  padding: 3px 8px;3868  border-radius: 999px;3869  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);3870  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3871  color: rgba(240, 232, 216, 0.85);3872  font-family: "IBM Plex Mono", monospace;3873  font-size: 10px;3874  letter-spacing: 0.04em;3875}38763877.peach-tag-chip-remove {3878  background: transparent;3879  border: none;3880  color: inherit;3881  opacity: 0.6;3882  cursor: pointer;3883  padding: 0;3884  font-size: 12px;3885  line-height: 1;3886}38873888.peach-tag-chip-remove:hover {3889  opacity: 1;3890}38913892/* Tag input */3893.peach-tag-input-wrap {3894  border-bottom: 1px solid var(--peach-t3);3895}38963897.peach-tag-suggestions {3898  display: flex;3899  flex-wrap: wrap;3900  gap: 4px;3901  padding: 6px 0;3902}39033904.peach-tag-suggestion {3905  padding: 2px 8px;3906  border-radius: 999px;3907  border: 1px solid var(--peach-t3);3908  background: var(--peach-s2);3909  color: var(--peach-t1);3910  font-family: "IBM Plex Mono", monospace;3911  font-size: 10px;3912  cursor: pointer;3913  transition: border-color 80ms ease, background 80ms ease;3914}39153916.peach-tag-suggestion:hover {3917  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3918  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3919}39203921/* Tag filter strip */3922.peach-tag-filter-strip {3923  border-bottom: 1px solid var(--peach-t3);3924  flex-shrink: 0;3925}39263927.peach-tag-filter-chip {3928  display: inline-flex;3929  align-items: center;3930  padding: 4px 10px;3931  border-radius: 999px;3932  border: 1px solid var(--peach-t3);3933  background: transparent;3934  color: var(--peach-t2);3935  font-family: "IBM Plex Mono", monospace;3936  font-size: 9px;3937  letter-spacing: 0.06em;3938  text-transform: uppercase;3939  cursor: pointer;3940  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;3941  white-space: nowrap;3942}39433944.peach-tag-filter-chip:hover {3945  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3946  color: var(--peach-t1);3947}39483949.peach-tag-filter-chip.is-selected {3950  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3951  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);3952  color: rgba(240, 232, 216, 0.9);3953}39543955/* ─────────────────────────────────────────────────────────────────────────3956   v1.4.12 additions3957   ─────────────────────────────────────────────────────────────────────── */39583959/* Sort bar */3960.peach-sort-bar {3961  display: flex;3962  align-items: center;3963  gap: 4px;3964  padding: 5px 12px;3965  border-bottom: 1px solid var(--peach-t3);3966  flex-shrink: 0;3967  overflow-x: auto;3968  scrollbar-width: none;3969}39703971.peach-sort-btn {3972  padding: 2px 9px;3973  border-radius: 999px;3974  border: 1px solid transparent;3975  background: transparent;3976  color: var(--peach-t2);3977  font-family: "IBM Plex Mono", monospace;3978  font-size: 9px;3979  letter-spacing: 0.07em;3980  text-transform: uppercase;3981  cursor: pointer;3982  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;3983  white-space: nowrap;3984}39853986.peach-sort-btn:hover {3987  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);3988  color: var(--peach-t1);3989}39903991.peach-sort-btn.is-active {3992  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3993  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);3994  color: rgba(240, 232, 216, 0.9);3995}39963997.peach-sort-domain-hint {3998  margin-left: auto;3999  font-family: "IBM Plex Mono", monospace;4000  font-size: 9px;4001  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);4002  white-space: nowrap;4003  overflow: hidden;4004  text-overflow: ellipsis;4005  max-width: 110px;4006}40074008/* Tab-match badge on entry rows */4009.peach-tab-match-badge {4010  display: inline-block;4011  width: 6px;4012  height: 6px;4013  border-radius: 50%;4014  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);4015  margin-left: 5px;4016  vertical-align: middle;4017  flex-shrink: 0;4018  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);4019}40204021.peach-entry-row.is-tab-match {4022  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);4023  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);4024}40254026.peach-entry-row.is-tab-match:hover {4027  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4028}40294030/* Entry list stagger entrance */4031@keyframes peach-entry-fadein {4032  from { opacity: 0; transform: translateY(4px); }4033  to   { opacity: 1; transform: translateY(0); }4034}40354036.peach-vault-list .peach-entry-row {4037  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;4038  content-visibility: auto;4039  contain-intrinsic-size: auto 44px;4040}40414042/* Button press micro-interaction */4043.peach-btn:active {4044  transform: scale(0.95);4045  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);4046}40474048.peach-sort-btn:active,4049.peach-tag-filter-chip:active {4050  transform: scale(0.93);4051  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);4052}40534054/* Password strength bar (Lock view + shared) */4055.peach-password-strength {4056  display: flex;4057  align-items: center;4058  gap: 8px;4059  margin-top: 6px;4060}40614062.peach-strength-bar {4063  flex: 1;4064  height: 3px;4065  border-radius: 2px;4066  background: var(--peach-t3);4067  overflow: hidden;4068}40694070.peach-strength-fill {4071  height: 100%;4072  border-radius: 2px;4073  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),4074              background 300ms ease;4075}40764077.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }4078.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }4079.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }4080.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }40814082.peach-strength-label {4083  font-family: "IBM Plex Mono", monospace;4084  font-style: italic;4085  font-size: 9px;4086  font-weight: 300;4087  letter-spacing: 0.06em;4088  color: var(--peach-t2);4089  min-width: 36px;4090  text-align: right;4091}40924093.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }4094.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }4095.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }4096.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }40974098/* Duress form */4099.peach-duress-status {4100  padding: 2px 8px;4101  border-radius: 999px;4102  border: 1px solid var(--peach-t3);4103  font-family: "IBM Plex Mono", monospace;4104  font-size: 9px;4105  letter-spacing: 0.07em;4106  text-transform: uppercase;4107  color: var(--peach-t2);4108  flex-shrink: 0;4109}41104111.peach-duress-status.is-active {4112  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);4113  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4114  color: rgba(240, 232, 216, 0.85);4115}41164117.peach-duress-form {4118  padding: 8px 0 4px;4119  display: flex;4120  flex-direction: column;4121  gap: 6px;4122}41234124.peach-duress-form .peach-label {4125  margin-top: 4px;4126}41274128.peach-duress-actions {4129  display: flex;4130  gap: 6px;4131  align-items: center;4132  margin-top: 4px;4133}41344135.peach-duress-actions .peach-btn:first-child {4136  margin-right: auto;4137}41384139/* Improved overlay spring entrance */4140.peach-overlay-view.ov-enter-up {4141  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4142}41434144@keyframes ov-enter-up-spring {4145  from { opacity: 0; transform: translateY(16px) scale(0.98); }4146  to   { opacity: 1; transform: translateY(0) scale(1); }4147}41484149.peach-overlay-view.ov-enter-right {4150  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4151}41524153@keyframes ov-enter-right-spring {4154  from { opacity: 0; transform: translateX(18px) scale(0.98); }4155  to   { opacity: 1; transform: translateX(0) scale(1); }4156}41574158/* ── Onboarding-mode restore screens (CJK phrase / file import) ── */4159/* Used when CJKImportView or MainImportView renders during onboarding4160   (no vault yet). Animates like a lock-screen transition. */4161.peach-lock-view {4162  position: absolute;4163  inset: 0;4164  display: flex;4165  flex-direction: column;4166  background:4167    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),4168    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),4169    var(--peach-bg);4170  z-index: 2;4171  overflow: hidden;4172  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4173}41744175.peach-lock-view-header {4176  display: flex;4177  align-items: center;4178  justify-content: space-between;4179  padding: 16px 18px 12px;4180  flex-shrink: 0;4181}41824183/* ───────── Settings: auto-lock select ───────── */4184.peach-settings-select {4185  font-family: "IBM Plex Mono", monospace;4186  font-size: 11px;4187  background: transparent;4188  border: 1px solid var(--peach-t3);4189  border-radius: 4px;4190  color: var(--peach-t1);4191  padding: 3px 6px;4192  cursor: pointer;4193  outline: none;4194}4195.peach-settings-select:focus {4196  border-color: var(--peach-accent);4197}41984199/* ───────── Duress status pill (new polished) ───────── */4200.peach-duress-status-pill {4201  font-family: "IBM Plex Mono", monospace;4202  font-size: 9px;4203  text-transform: uppercase;4204  letter-spacing: 0.12em;4205  padding: 2px 8px;4206  border-radius: 12px;4207  background: var(--peach-t3);4208  color: var(--peach-t2);4209  flex-shrink: 0;4210}4211.peach-duress-status-pill.is-active {4212  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);4213  color: var(--peach-accent);4214}42154216/* ───────── Entry advanced disclosure (canary) ───────── */4217.peach-entry-advanced {4218  margin-top: 12px;4219  border-top: 1px solid var(--peach-t3);4220  padding-top: 10px;4221  position: relative;4222  z-index: 1;4223}4224.peach-entry-advanced-toggle {4225  display: flex;4226  align-items: center;4227  justify-content: space-between;4228  width: 100%;4229  background: transparent;4230  border: none;4231  cursor: pointer;4232  padding: 0;4233  color: var(--peach-t2);4234}4235.peach-canary-section {4236  margin-top: 10px;4237  display: grid;4238  gap: 6px;4239}42404241/* ───────── Import: merge/replace radio choices ───────── */4242.peach-import-choice {4243  display: flex;4244  align-items: flex-start;4245  gap: 10px;4246  padding: 8px 10px;4247  border: 1px solid var(--peach-t3);4248  border-radius: 10px;4249  cursor: pointer;4250  margin-bottom: 6px;4251  transition: border-color 120ms ease, background 120ms ease;4252}4253.peach-import-choice:hover {4254  border-color: var(--peach-accent);4255}4256.peach-import-choice input[type="radio"] {4257  margin-top: 3px;4258  accent-color: var(--peach-accent);4259  flex-shrink: 0;4260}4261.peach-import-choice-main {4262  display: flex;4263  flex-direction: column;4264  gap: 2px;4265  min-width: 0;4266}4267.peach-import-choice-label {4268  font-size: 12px;4269  color: var(--peach-t0);4270}4271.peach-import-choice-sub {4272  font-size: 11px;4273  color: var(--peach-t2);4274  line-height: 1.5;4275}42764277/* ───────── Export: success confirmation strip ───────── */4278.peach-export-success {4279  display: flex;4280  align-items: flex-start;4281  gap: 10px;4282  padding: 12px;4283  border-radius: 12px;4284  border: 1px solid rgba(150, 175, 110, 0.3);4285  background: rgba(150, 175, 110, 0.08);4286  color: var(--peach-t0);4287  font-size: 12px;4288  line-height: 1.55;4289}4290.peach-export-success-check {4291  color: rgba(150, 175, 110, 0.9);4292  font-size: 14px;4293  flex-shrink: 0;4294}42954296/* ── Trash view ──────────────────────────────────────────────────────── */4297.peach-trash-entry-row {4298  display: flex;4299  align-items: center;4300  justify-content: space-between;4301  gap: 8px;4302  padding: 8px 0;4303  border-bottom: 1px solid var(--peach-t3);4304}4305.peach-trash-entry-row:last-child { border-bottom: none; }4306.peach-trash-entry-info {4307  flex: 1;4308  min-width: 0;4309  display: flex;4310  flex-direction: column;4311  gap: 2px;4312}4313.peach-trash-entry-title {4314  font-size: 12px;4315  color: var(--peach-t1);4316  overflow: hidden;4317  text-overflow: ellipsis;4318  white-space: nowrap;4319}4320.peach-trash-entry-meta {4321  font-family: var(--font-mono);4322  font-size: 9px;4323  color: var(--peach-t2);4324  letter-spacing: 0.06em;4325}4326.peach-trash-entry-actions {4327  display: flex;4328  align-items: center;4329  gap: 4px;4330  flex-shrink: 0;4331}43324333/* ── Settings shortcuts grid ─────────────────────────────────────────── */4334.peach-shortcuts-grid {4335  display: grid;4336  grid-template-columns: auto 1fr;4337  gap: 6px 12px;4338  align-items: center;4339  padding: 4px 0;4340}4341.peach-shortcut-key {4342  font-family: var(--font-mono);4343  font-size: 10px;4344  color: var(--peach-t0);4345  background: var(--peach-t3);4346  border-radius: 4px;4347  padding: 2px 6px;4348  white-space: nowrap;4349  text-align: center;4350}4351.peach-shortcut-desc {4352  font-size: 11px;4353  color: var(--peach-t1);4354}43554356/* ── Sort bar trash button ───────────────────────────────────────────── */4357.peach-sort-trash-btn {4358  display: flex;4359  align-items: center;4360  justify-content: center;4361  padding: 3px 5px;4362  background: transparent;4363  border: none;4364  cursor: pointer;4365  color: var(--peach-t2);4366  border-radius: 4px;4367  transition: color 140ms ease, background 140ms ease;4368}4369.peach-sort-trash-btn:hover {4370  color: var(--peach-t1);4371  background: var(--peach-t3);4372}4373.peach-sort-trash-btn.is-active {4374  color: var(--peach-accent);4375}43764377/* Accent color picker */4378.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }4379.peach-accent-picker {4380  display: flex;4381  flex-wrap: wrap;4382  gap: 7px;4383  padding: 2px 0;4384}4385.peach-accent-swatch {4386  width: 22px;4387  height: 22px;4388  border-radius: 50%;4389  border: 2px solid transparent;4390  cursor: pointer;4391  padding: 0;4392  transition: transform 100ms;4393  outline-offset: 2px;4394}4395.peach-accent-swatch:hover { transform: scale(1.15); }4396.peach-accent-swatch.is-active {4397  border-color: var(--peach-t0);4398  transform: scale(1.1);4399}