popup.css

102.3 KB · raw

1html,2body,3#app,4#pre-lock,5.popup-root {6  width: 320px;7  min-height: 520px;8  height: 520px;9  margin: 0;10}1112body {13  overflow: hidden;14  background: var(--bg);15  color: var(--t0);16  font-family: var(--font-ui);17  font-weight: 300;18  position: relative;19}2021* {22  box-sizing: border-box;23}2425button,26input,27textarea,28select {29  font: inherit;30}3132button {33  border: 0;34}3536#pre-lock {37  position: absolute;38  inset: 0;39  z-index: 10;40}4142#pre-lock[hidden] {43  display: none;44}4546.popup-root {47  position: relative;48  overflow: hidden;49}5051.peach-theme {52  color: var(--peach-t0);53  font-family: var(--font-ui);54  font-weight: 300;55  box-sizing: border-box;56  text-align: left;57}58.peach-theme, .peach-theme * { box-sizing: inherit; }5960.peach-brand-mark {61  width: 14px;62  height: 14px;63  flex-shrink: 0;64}6566.peach-status-pip.is-hidden {67  display: none;68}6970.peach-status-pip.unlocked {71  background: var(--peach-health-ok);72  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);73}7475.peach-status-pip.pulse {76  animation: pip-pulse 400ms var(--peach-curve-settle) both;77}7879/* Shell */80.peach-shell, .peach-screen {81  background:82    radial-gradient(120% 80% at 0% 0%, 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); box-shadow: 0 2px 16px var(--peach-glow); }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:focus-visible {1295  outline: none;1296  box-shadow: 0 0 0 1px var(--peach-border-accent);1297  background: rgba(240,232,216,0.03);1298}1299.peach-entry-row-icon {1300  width: 26px; height: 26px;1301  border-radius: 7px;1302  border: 1px solid var(--peach-t3);1303  display: flex; align-items: center; justify-content: center;1304  color: var(--peach-t2);1305  flex-shrink: 0;1306}1307.peach-entry-row-icon.is-breach {1308  border-color: rgba(220,80,60,0.3);1309  color: rgba(220,80,60,0.7);1310}1311.peach-entry-row-info { flex: 1; min-width: 0; }1312.peach-entry-row-name {1313  display: block;1314  font-family: "Cormorant Garamond", serif;1315  font-size: 17px;1316  font-style: italic;1317  font-weight: 400;1318  color: var(--peach-t0);1319  line-height: 1.2;1320  white-space: nowrap;1321  overflow: hidden;1322  text-overflow: ellipsis;1323}1324.peach-entry-row-meta {1325  display: block;1326  font-family: "IBM Plex Mono", monospace;1327  font-size: 9px;1328  color: var(--peach-t2);1329  margin-top: 1px;1330  letter-spacing: 0.05em;1331}1332.peach-entry-row-dot {1333  width: 5px; height: 5px;1334  border-radius: 50%;1335  background: rgba(220,80,60,0.7);1336  flex-shrink: 0;1337}1338.peach-new-entry-row {1339  display: flex;1340  align-items: center;1341  justify-content: center;1342  gap: 6px;1343  width: 100%;1344  padding: 11px;1345  background: transparent;1346  border: none;1347  border-top: 1px solid var(--peach-t3);1348  color: var(--peach-t2);1349  font-family: "IBM Plex Mono", monospace;1350  font-size: 9px;1351  text-transform: uppercase;1352  letter-spacing: 0.14em;1353  cursor: pointer;1354  flex-shrink: 0;1355  transition: color 120ms ease, background 120ms ease;1356}1357.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }13581359/* ── Multi-select mode ─────────────────────────────────────────────── */13601361/* Select-mode trigger button in sort bar — same shape as trash btn */1362.peach-sort-select-btn {1363  display: flex;1364  align-items: center;1365  justify-content: center;1366  padding: 3px 5px;1367  background: transparent;1368  border: none;1369  cursor: pointer;1370  color: var(--peach-t2);1371  border-radius: 4px;1372  transition: color 140ms ease, background 140ms ease;1373}1374.peach-sort-select-btn:hover {1375  color: var(--peach-t1);1376  background: var(--peach-t3);1377}13781379/* Sort bar in select mode */1380.peach-select-cancel-btn {1381  background: transparent;1382  border: none;1383  padding: 0 4px;1384  cursor: pointer;1385  font-family: "IBM Plex Mono", monospace;1386  font-size: 9px;1387  letter-spacing: 0.12em;1388  text-transform: uppercase;1389  color: var(--peach-t2);1390  transition: color 140ms ease;1391  flex-shrink: 0;1392}1393.peach-select-cancel-btn:hover { color: var(--peach-t0); }13941395.peach-select-count-label {1396  flex: 1;1397  text-align: center;1398  font-family: "IBM Plex Mono", monospace;1399  font-size: 9px;1400  letter-spacing: 0.14em;1401  text-transform: uppercase;1402  color: var(--peach-t1);1403}14041405.peach-select-all-btn {1406  background: transparent;1407  border: none;1408  padding: 0 4px;1409  cursor: pointer;1410  font-family: "IBM Plex Mono", monospace;1411  font-size: 9px;1412  letter-spacing: 0.12em;1413  text-transform: uppercase;1414  color: var(--peach-t2);1415  transition: color 140ms ease;1416  flex-shrink: 0;1417}1418.peach-select-all-btn:hover { color: var(--peach-accent); }14191420/* List in select mode */1421.peach-vault-list.is-selecting .peach-entry-row {1422  cursor: default;1423}1424.peach-vault-list.is-selecting .peach-entry-row:hover {1425  background: rgba(240,232,216,0.02);1426}1427.peach-vault-list.is-selecting .peach-entry-row.is-selected {1428  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1429}1430.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1431  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1432}14331434/* Select indicator circles in icon slot */1435.peach-entry-row-icon.is-select-icon {1436  color: var(--peach-t2);1437}1438.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1439  color: var(--peach-accent);1440}14411442/* Delete action bar at bottom (replaces new-entry row) */1443.peach-select-action-bar {1444  display: flex;1445  align-items: center;1446  justify-content: center;1447  gap: 7px;1448  width: 100%;1449  padding: 11px;1450  background: transparent;1451  border: none;1452  border-top: 1px solid var(--peach-t3);1453  color: var(--peach-t1);1454  font-family: "IBM Plex Mono", monospace;1455  font-size: 9px;1456  text-transform: uppercase;1457  letter-spacing: 0.14em;1458  cursor: pointer;1459  flex-shrink: 0;1460  transition: color 120ms ease, background 120ms ease;1461}1462.peach-select-action-bar:not(:disabled):hover {1463  color: var(--peach-t0);1464  background: rgba(220,80,60,0.06);1465}1466.peach-select-action-bar:not(:disabled):hover svg {1467  stroke: rgba(220,80,60,0.8);1468}1469.peach-select-action-bar:disabled,1470.peach-select-action-bar.is-empty {1471  color: var(--peach-t2);1472  cursor: default;1473  opacity: 0.5;1474}1475.peach-search-counter-list {1476  white-space: nowrap;1477  flex-shrink: 0;1478}1479.peach-list-empty {1480  min-height: 180px;1481  display: grid;1482  place-items: center;1483  color: var(--peach-t2);1484  font-family: "IBM Plex Mono", monospace;1485  font-size: 11px;1486}14871488/* ── Settings view ───────────────────────────────────────────────────── */1489.peach-settings-body {1490  flex: 1;1491  overflow-y: auto;1492  min-height: 0;1493  display: flex;1494  flex-direction: column;1495  padding: 2px 0 10px;1496}1497.peach-settings-group {1498  padding: 9px 16px 11px;1499  border-bottom: 1px solid var(--peach-t3);1500}1501.peach-export-intro {1502  padding-bottom: 8px;1503}1504.peach-export-card {1505  display: grid;1506  gap: 10px;1507}1508.peach-export-card--primary {1509  background:1510    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1511}1512.peach-export-card-head {1513  display: flex;1514  align-items: center;1515  justify-content: space-between;1516  gap: 10px;1517}1518.peach-export-card-copy {1519  margin: 0;1520  font-size: 12px;1521  line-height: 1.55;1522  color: var(--peach-t1);1523}1524.peach-export-note {1525  margin: 0;1526  font-size: 10px;1527  line-height: 1.5;1528  color: var(--peach-t2);1529}1530.peach-export-pill {1531  display: inline-flex;1532  align-items: center;1533  padding: 4px 8px;1534  border-radius: 999px;1535  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1536  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1537  color: var(--peach-accent);1538  font-family: "IBM Plex Mono", monospace;1539  font-size: 8px;1540  letter-spacing: 0.12em;1541  text-transform: uppercase;1542  white-space: nowrap;1543}1544.peach-export-pill--danger {1545  border-color: rgba(220,80,60,0.22);1546  background: rgba(220,80,60,0.08);1547  color: var(--peach-breach);1548}1549.peach-export-password-stack {1550  gap: 8px;1551}1552.peach-settings-label {1553  margin: 0 0 6px;1554  font-family: "IBM Plex Mono", monospace;1555  font-size: 8px;1556  text-transform: uppercase;1557  letter-spacing: 0.18em;1558  color: var(--peach-t2);1559}1560.peach-settings-row {1561  display: flex;1562  align-items: center;1563  justify-content: space-between;1564  gap: 12px;1565  min-height: 34px;1566  padding: 6px 0;1567  font-size: 13px;1568  color: var(--peach-t1);1569}1570.peach-settings-row--meta { color: var(--peach-t2); font-size: 12px; }1571.peach-settings-value {1572  font-family: "IBM Plex Mono", monospace;1573  font-size: 10px;1574  color: var(--peach-t2);1575}15761577.peach-settings-value--status {1578  display: flex;1579  align-items: center;1580  gap: 6px;1581}15821583.peach-settings-link {1584  font-family: "IBM Plex Mono", monospace;1585  font-size: 10px;1586  color: var(--peach-accent);1587  text-decoration: none;1588  cursor: pointer;1589}1590.peach-settings-link:hover {1591  text-decoration: underline;1592}15931594.peach-settings-row--stack {1595  flex-direction: column;1596  align-items: stretch;1597  gap: 6px;1598}15991600.peach-settings-row--top {1601  align-items: flex-start;1602}16031604.peach-settings-row-main {1605  display: flex;1606  flex-direction: column;1607  gap: 4px;1608  flex: 1;1609}1610.peach-toggle {1611  width: 28px; height: 16px;1612  border-radius: 999px;1613  background: var(--peach-t3);1614  border: 1px solid var(--peach-t3);1615  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1616  flex-shrink: 0;1617  transition: background 200ms ease, border-color 200ms ease;1618  cursor: pointer;1619}1620.peach-toggle.is-on {1621  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1622  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1623}1624.peach-toggle-knob {1625  width: 10px; height: 10px;1626  border-radius: 50%;1627  background: var(--peach-t2);1628  flex-shrink: 0;1629  transform: translateX(0px);1630  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1631}1632.peach-toggle.is-on .peach-toggle-knob {1633  background: var(--peach-accent);1634  transform: translateX(12px);1635}1636.peach-settings-footer {1637  display: flex;1638  align-items: center;1639  gap: 8px;1640  margin-top: auto;1641  padding: 14px 16px 8px;1642  font-family: "IBM Plex Mono", monospace;1643  font-size: 9px;1644  color: var(--peach-t2);1645}16461647.peach-passkey-badge {1648  margin-left: 8px;1649  font-size: 10px;1650  letter-spacing: 0.06em;1651  text-transform: uppercase;1652  color: var(--peach-t2);1653  font-family: var(--font-ui);1654  vertical-align: middle;1655}16561657.peach-passkey-delete-btn {1658  color: var(--peach-breach);1659  border-color: rgba(229, 85, 85, 0.25);1660}16611662.peach-passkey-delete-confirm {1663  display: flex;1664  align-items: center;1665  gap: 8px;1666  padding: 8px 10px;1667  background: rgba(229, 85, 85, 0.06);1668  border: 1px solid rgba(229, 85, 85, 0.2);1669  border-radius: 6px;1670}16711672.peach-passkey-delete-confirm-copy {1673  flex: 1;1674  font-size: 11px;1675  color: var(--peach-t1);1676}16771678.peach-passkey-delete-btn--confirm {1679  color: var(--peach-breach);1680  border-color: rgba(229, 85, 85, 0.4);1681}16821683.peach-passkey-activity {1684  flex-direction: column;1685  align-items: flex-start;1686  gap: 4px;1687}16881689.peach-passkey-meta {1690  font-size: 11px;1691  color: var(--peach-t2);1692}16931694.peach-passkey-actions {1695  position: relative;1696  z-index: 1;1697  margin-top: 14px;1698  display: flex;1699  flex-direction: column;1700  gap: 8px;1701}17021703.peach-passkey-approval {1704  display: flex;1705  flex-direction: column;1706  align-items: center;1707  padding: 28px 22px 22px;1708  gap: 14px;1709  text-align: center;1710}17111712.peach-passkey-approval-icon {1713  width: 46px;1714  height: 46px;1715  border-radius: 12px;1716  background: var(--peach-s2);1717  border: 1px solid var(--peach-t3);1718  display: flex;1719  align-items: center;1720  justify-content: center;1721  flex-shrink: 0;1722  color: var(--peach-accent);1723}17241725.peach-passkey-approval-icon img,1726.peach-passkey-approval-icon svg {1727  width: 28px;1728  height: 28px;1729  border-radius: 6px;1730}17311732.peach-passkey-approval-rp {1733  font-family: var(--font-ui);1734  font-size: 12px;1735  color: var(--peach-t2);1736  letter-spacing: 0.03em;1737}17381739.peach-passkey-approval-action {1740  font-family: var(--font-display);1741  font-style: italic;1742  font-weight: 300;1743  font-size: 26px;1744  color: var(--peach-t0);1745  line-height: 1;1746}17471748.peach-passkey-approval-user {1749  font-family: var(--font-mono);1750  font-size: 11px;1751  color: var(--peach-t1);1752  background: var(--peach-s2);1753  border: 1px solid var(--peach-t3);1754  border-radius: 4px;1755  padding: 3px 8px;1756}17571758.peach-passkey-approval-notice {1759  font-size: 10px;1760  color: var(--peach-t2);1761  line-height: 1.5;1762  max-width: 220px;1763}17641765.peach-passkey-approval-actions {1766  display: flex;1767  gap: 8px;1768  width: 100%;1769  margin-top: 6px;1770}17711772.peach-passkey-approval-actions .peach-btn {1773  flex: 1;1774}17751776/* ── Inline generator drawer ── */1777.peach-generator-drawer {1778  display: grid;1779  grid-template-rows: 0fr;1780  transition: grid-template-rows 320ms var(--peach-curve-arrival);1781  overflow: hidden;1782}1783.peach-generator-drawer.is-open {1784  grid-template-rows: 1fr;1785}1786.peach-generator-drawer-inner {1787  min-height: 0;1788  overflow: hidden;1789}1790.peach-generator-drawer-content {1791  border-top: 1px solid var(--peach-t3);1792  padding: 8px 0 4px;1793  display: flex;1794  flex-direction: column;1795  gap: 8px;1796}17971798/* ── Compact generator (inside entry edit) ── */1799.peach-generator-drawer-content--compact {1800  border-top: 1px solid var(--peach-t3);1801  padding: 8px 0 2px;1802  gap: 7px;1803}1804.peach-pwgen-compact-display-row {1805  display: flex;1806  align-items: center;1807  gap: 6px;1808}1809.peach-pwgen-compact-output {1810  flex: 1;1811  min-width: 0;1812  font-family: "IBM Plex Mono", monospace;1813  font-size: 11px;1814  font-weight: 400;1815  letter-spacing: 0.04em;1816  color: var(--peach-t0);1817  background: rgba(240, 232, 216, 0.04);1818  border: 1px solid var(--peach-t3);1819  border-radius: 5px;1820  padding: 5px 8px;1821  word-break: break-all;1822  line-height: 1.5;1823}1824.peach-pwgen-compact-controls {1825  display: flex;1826  align-items: center;1827  gap: 6px;1828}1829.peach-pwgen-compact-slider {1830  flex: 1;1831  min-width: 0;1832  height: 2px !important;1833}1834.peach-pwgen-compact-controls .peach-pwgen-len-num {1835  flex-shrink: 0;1836  min-width: 18px;1837  text-align: right;1838}1839.peach-pwgen-compact-pills {1840  display: flex;1841  gap: 3px;1842  flex-shrink: 0;1843}1844.peach-pwgen-compact-pills .peach-pwgen-pill {1845  padding: 2px 7px;1846  font-size: 8px;1847}1848.peach-pwgen-compact-use {1849  flex-shrink: 0;1850  font-size: 10px !important;1851  padding: 3px 9px !important;1852  min-height: 22px !important;1853  border-radius: 5px !important;1854}18551856/* ── Password edit row (input + eye toggle side-by-side) ── */1857.peach-password-edit-row {1858  display: flex;1859  align-items: center;1860  gap: 6px;1861}1862.peach-password-edit-row .peach-inline-input {1863  flex: 1;1864  min-width: 0;1865}18661867/* ── Generate toggle link ── */1868.peach-generate-toggle-link {1869  display: inline-flex;1870  align-items: center;1871  gap: 5px;1872  background: none;1873  border: none;1874  padding: 0;1875  cursor: pointer;1876  font-family: "IBM Plex Mono", monospace;1877  font-size: 10px;1878  color: var(--peach-t2);1879  letter-spacing: 0.04em;1880  transition: color 120ms ease;1881  align-self: flex-start;1882}1883.peach-generate-toggle-link:hover {1884  color: var(--peach-accent);1885}18861887/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */1888.peach-entry-body {1889  flex: 1;1890  overflow-y: auto;1891  overflow-x: hidden;1892  scrollbar-width: none;1893  -ms-overflow-style: none;1894  overscroll-behavior: contain;1895  display: grid;1896  gap: 10px;1897  align-content: start;1898  padding: 10px 20px 14px;1899  min-width: 0;1900  min-height: 0;1901}1902.peach-entry-body::-webkit-scrollbar { display: none; }19031904/* Type-toggle pills + inline note toolbar */1905.peach-new-type-row {1906  display: flex;1907  align-items: center;1908  gap: 6px;1909  margin-bottom: 2px;1910}1911.peach-new-type-btn {1912  background: transparent;1913  border: 1px solid var(--peach-t3);1914  border-radius: 12px;1915  padding: 3px 10px;1916  font-family: "IBM Plex Mono", monospace;1917  font-size: 9px;1918  letter-spacing: 0.12em;1919  text-transform: uppercase;1920  color: var(--peach-t2);1921  cursor: pointer;1922  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;1923}1924.peach-new-type-btn.is-active {1925  color: var(--peach-t0);1926  border-color: var(--peach-accent);1927  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1928}1929.peach-new-type-btn:not(.is-active):hover {1930  color: var(--peach-t1);1931  border-color: var(--peach-t2);1932}19331934/* Editable title */1935.peach-new-title-wrap { margin: 0 0 2px; }1936.peach-new-title-input {1937  background: transparent;1938  border: none;1939  outline: none;1940  width: 100%;1941  color: var(--peach-t0);1942  font-family: "Cormorant Garamond", Georgia, serif;1943  font-style: italic;1944  font-weight: 400;1945  font-size: 40px;1946  line-height: 0.95;1947  caret-color: var(--peach-accent);1948}1949.peach-new-title-input::placeholder { color: var(--peach-t2); }19501951/* Editable domain field */1952.peach-domain-value--edit {1953  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1954  font-size: 10px;1955  font-style: italic;1956  letter-spacing: 0.12em;1957  color: var(--peach-t1);1958  background: transparent;1959  border: none;1960  border-bottom: 1px solid var(--peach-t3);1961  outline: none;1962  width: 100%;1963  padding: 2px 0;1964  caret-color: var(--peach-accent);1965  transition: border-color 140ms ease, color 140ms ease;1966}1967.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }1968.peach-domain-value--edit:focus {1969  border-bottom-color: rgba(240, 232, 216, 0.28);1970  color: var(--peach-t0);1971}19721973/* Editable field values (username, password, totp) */1974.peach-field-value--edit {1975  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1976  font-size: 13px;1977  color: var(--peach-t0);1978  background: transparent;1979  border: none;1980  border-bottom: 1px solid var(--peach-t3);1981  outline: none;1982  flex: 1;1983  min-width: 0;1984  padding: 3px 0;1985  caret-color: var(--peach-accent);1986  transition: border-color 140ms ease, color 140ms ease;1987}1988.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }1989.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }1990.peach-field-value--edit:focus {1991  border-bottom-color: rgba(240, 232, 216, 0.28);1992  color: var(--peach-t0);1993}19941995/* "+ add optional field" links */1996.peach-entry-add-links {1997  display: flex;1998  gap: 12px;1999  flex-wrap: wrap;2000  margin-top: -2px;2001}2002.peach-add-field-link {2003  background: transparent;2004  border: none;2005  padding: 0;2006  cursor: pointer;2007  font-family: "IBM Plex Mono", monospace;2008  font-size: 9px;2009  letter-spacing: 0.1em;2010  text-transform: uppercase;2011  color: var(--peach-t2);2012  transition: color 140ms ease;2013}2014.peach-add-field-link:hover { color: var(--peach-accent); }20152016/* ── New entry form (legacy classes) ────────────────────────────────── */2017.peach-new-body {2018  flex: 1;2019  overflow-y: auto;2020  padding: 10px 20px 14px;2021}2022.peach-new-name-input {2023  background: transparent;2024  border: none;2025  outline: none;2026  width: 100%;2027  color: var(--peach-t0);2028  font-family: "Cormorant Garamond", Georgia, serif;2029  font-style: italic;2030  font-weight: 400;2031  font-size: 40px;2032  line-height: 0.95;2033  caret-color: var(--peach-accent);2034}2035.peach-new-name-input::placeholder { color: var(--peach-t2); }2036.peach-new-field-input {2037  background: transparent;2038  border: none;2039  outline: none;2040  flex: 1;2041  min-width: 0;2042  caret-color: var(--peach-accent);2043}2044.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }20452046/* ── Canary card ── */2047.peach-canary-card {2048  border: 1px solid rgba(217, 160, 48, 0.2);2049  background: rgba(217, 160, 48, 0.03);2050  border-radius: 8px;2051  padding: 12px;2052}20532054.peach-canary-settings-header {2055  display: flex;2056  align-items: center;2057  justify-content: space-between;2058  cursor: pointer;2059  user-select: none;2060}20612062.peach-canary-card .peach-label {2063  color: rgba(217, 160, 48, 0.85);2064}20652066.peach-canary-card .peach-new-field-input {2067  border-color: rgba(217, 160, 48, 0.25);2068}20692070.peach-canary-card .peach-new-field-input:focus {2071  border-color: rgba(217, 160, 48, 0.5);2072}20732074.peach-canary-body {2075  margin-top: 12px;2076  display: flex;2077  flex-direction: column;2078  gap: 10px;2079}20802081.peach-canary-explainer {2082  display: flex;2083  gap: 10px;2084  padding: 10px 12px;2085  border-radius: 10px;2086  background: rgba(217, 160, 48, 0.06);2087  border: 1px solid rgba(217, 160, 48, 0.22);2088  margin-bottom: 4px;2089}20902091.peach-canary-explainer-icon {2092  font-size: 16px;2093  flex-shrink: 0;2094  line-height: 1.2;2095}20962097.peach-canary-explainer-title {2098  font-family: var(--font-ui);2099  font-size: 11px;2100  font-weight: 500;2101  color: rgba(217, 160, 48, 0.9);2102  margin: 0 0 3px;2103}21042105.peach-canary-explainer-copy {2106  font-family: var(--font-ui);2107  font-size: 10px;2108  color: var(--peach-t2);2109  line-height: 1.55;2110  margin: 0;2111}21122113.peach-canary-hint {2114  font-size: 10px;2115  color: var(--peach-t2);2116  font-family: Inter, system-ui, sans-serif;2117  line-height: 1.5;2118  margin-top: 4px;2119}21202121.peach-canary-actions-row {2122  display: flex;2123  align-items: center;2124  gap: 8px;2125}21262127.peach-canary-test-btn {2128  border-color: rgba(217, 160, 48, 0.3);2129  color: rgba(217, 160, 48, 0.85);2130}21312132.peach-canary-test-result {2133  font-size: 10px;2134  font-family: Inter, system-ui, sans-serif;2135}21362137.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2138.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }21392140.peach-canary-badge {2141  display: flex;2142  position: relative;2143  z-index: 1;2144  align-items: center;2145  gap: 5px;2146  padding: 4px 10px;2147  background: rgba(217, 160, 48, 0.12);2148  border: 1px solid rgba(217, 160, 48, 0.35);2149  border-radius: 6px;2150  margin-bottom: 6px;2151  width: fit-content;2152}21532154.peach-canary-badge-label {2155  font-size: 10px;2156  letter-spacing: 0.06em;2157  color: rgba(217, 160, 48, 0.9);2158  font-family: var(--font-ui);2159  text-transform: uppercase;2160}21612162.peach-canary-badge-icon {2163  font-size: 11px;2164}21652166.peach-canary-suppress-row {2167  display: flex;2168  align-items: center;2169  gap: 8px;2170  padding: 6px 10px;2171  background: rgba(217, 160, 48, 0.08);2172  border-radius: 6px;2173  margin-bottom: 8px;2174}21752176.peach-canary-suppress-label {2177  font-size: 11px;2178  color: rgba(217, 160, 48, 0.85);2179  cursor: pointer;2180  font-family: var(--font-ui);2181  letter-spacing: 0.04em;2182}21832184.peach-regen-panel {2185  position: relative;2186  z-index: 1;2187  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2188  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2189  border-radius: 8px;2190  padding: 12px;2191  margin-bottom: 8px;2192}21932194.peach-regen-panel-header {2195  display: flex;2196  align-items: center;2197  justify-content: space-between;2198  margin-bottom: 10px;2199}22002201.peach-regen-panel-title {2202  font-size: 11px;2203  font-weight: 600;2204  letter-spacing: 0.06em;2205  text-transform: uppercase;2206  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2207}22082209.peach-regen-output {2210  background: rgba(0, 0, 0, 0.2);2211  border-radius: 6px;2212  padding: 10px;2213  margin-bottom: 10px;2214  font-family: var(--font-mono);2215  font-size: 13px;2216  word-break: break-all;2217  color: var(--peach-t1);2218}22192220.peach-regen-actions {2221  display: flex;2222  gap: 6px;2223}22242225.peach-regen-actions--spaced {2226  margin-bottom: 8px;2227}22282229.peach-regen-action-grow {2230  flex: 1;2231}22322233.peach-regen-copy-btn {2234  padding: 0 8px;2235}22362237.peach-regen-success {2238  position: relative;2239  z-index: 1;2240  background: rgba(40, 180, 80, 0.1);2241  border: 1px solid rgba(40, 180, 80, 0.3);2242  border-radius: 8px;2243  padding: 10px 12px;2244  margin-bottom: 8px;2245  display: flex;2246  align-items: center;2247  gap: 8px;2248  font-size: 11px;2249  color: rgba(40, 180, 80, 0.9);2250}22512252/* ── Note editor overlay ── */2253.peach-note-editor {2254  position: absolute;2255  inset: 0;2256  z-index: 200;2257  display: flex;2258  flex-direction: column;2259  background:2260    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2261    var(--peach-bg);2262  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2263}22642265.peach-note-editor-header {2266  display: flex;2267  align-items: center;2268  gap: 10px;2269  padding: 14px 16px 10px;2270  border-bottom: 1px solid var(--peach-t3);2271  flex-shrink: 0;2272}22732274.peach-note-editor-back {2275  background: transparent;2276  border: none;2277  cursor: pointer;2278  color: var(--peach-t2);2279  padding: 4px 6px;2280  border-radius: 6px;2281  display: flex;2282  align-items: center;2283  transition: color 120ms ease, background 120ms ease;2284  flex-shrink: 0;2285}2286.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }22872288.peach-note-editor-label {2289  flex: 1;2290  font-family: "Cormorant Garamond", "Times New Roman", serif;2291  font-style: italic;2292  font-size: 15px;2293  color: var(--peach-t1);2294  letter-spacing: 0.02em;2295}22962297.peach-note-editor-save-btn {2298  background: transparent;2299  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2300  border-radius: 8px;2301  color: var(--peach-accent);2302  font-family: "IBM Plex Mono", monospace;2303  font-size: 10px;2304  letter-spacing: 0.06em;2305  text-transform: uppercase;2306  padding: 3px 10px;2307  cursor: pointer;2308  transition: background 120ms ease, border-color 120ms ease;2309}2310.peach-note-editor-save-btn:hover:not(:disabled) {2311  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2312  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2313}2314.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }23152316.peach-note-toolbar {2317  display: flex;2318  align-items: center;2319  gap: 3px;2320  padding: 6px 14px 5px;2321  border-bottom: 1px solid var(--peach-t3);2322  flex-shrink: 0;2323}23242325.peach-note-tool-btn {2326  background: transparent;2327  border: 1px solid transparent;2328  border-radius: 5px;2329  color: var(--peach-t2);2330  font-family: "IBM Plex Mono", monospace;2331  font-size: 10px;2332  letter-spacing: 0.04em;2333  padding: 2px 8px;2334  cursor: pointer;2335  line-height: 1.6;2336  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2337}2338.peach-note-tool-btn:hover {2339  background: var(--peach-t4);2340  color: var(--peach-t0);2341  border-color: var(--peach-t3);2342}23432344.peach-note-tool-icon {2345  padding: 3px 7px;2346  display: inline-flex;2347  align-items: center;2348  justify-content: center;2349}23502351.peach-note-tool-divider {2352  width: 1px;2353  height: 14px;2354  background: var(--peach-t3);2355  margin: 0 4px;2356  flex-shrink: 0;2357}23582359.peach-note-editor-body {2360  flex: 1;2361  overflow-y: auto;2362  padding: 16px 20px 20px;2363  outline: none;2364  font-family: "Cormorant Garamond", "Times New Roman", serif;2365  font-size: 16px;2366  line-height: 1.75;2367  color: var(--peach-t0);2368  scrollbar-width: none;2369  word-break: break-word;2370}2371.peach-note-editor-body:empty::before {2372  content: "write your note…";2373  color: var(--peach-t3);2374  font-style: italic;2375  pointer-events: none;2376}23772378/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2379.peach-note-editor-inline {2380  display: flex;2381  flex-direction: column;2382  flex: 1;2383  min-height: 0;2384}2385.peach-note-editor-body--inline {2386  flex: 1;2387  min-height: 0;2388  font-size: 15px;2389  padding: 10px 20px 14px;2390}23912392/* Full-width toolbar row inside the body (Add.tsx note type).2393   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2394.peach-note-toolbar-body {2395  display: flex;2396  align-items: center;2397  gap: 3px;2398  padding: 5px 20px 4px;2399  margin: 2px -20px 0;2400  border-bottom: 1px solid var(--peach-t3);2401  flex-shrink: 0;2402}24032404/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2405   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2406   and .peach-note-tool-divider button-level styles. */2407.peach-note-toolbar-inline {2408  display: flex;2409  align-items: center;2410  gap: 3px;2411  margin-left: auto;2412  padding-left: 10px;2413  border-left: 1px solid var(--peach-t3);2414  min-height: 22px;2415}24162417/* Entry.tsx toolbar row (no tabs, toolbar only) */2418.peach-entry-note-toolbar-row {2419  display: flex;2420  align-items: center;2421  margin: 4px 0 6px;2422  position: relative;2423  z-index: 1;2424}2425.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2426  border-left: none;2427  padding-left: 0;2428  margin-left: 0;2429}24302431/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2432.peach-note-body {2433  display: flex;2434  flex-direction: column;2435  flex: 1;2436  min-height: 0;2437  margin: 4px 0 0;2438}2439.peach-entry-body--new .peach-note-body {2440  margin: 8px -20px 0;2441}24422443/* Add.tsx body is a grid by default; swap to a flex column when a note is2444   active so the note body can stretch and pin the tags row to the bottom. */2445.peach-entry-body--new:has(.peach-note-body) {2446  display: flex;2447  flex-direction: column;2448}24492450/* Rich content element styles (editor + display) */2451.peach-note-editor-body h2,2452.peach-note-content h2 {2453  font-family: "Cormorant Garamond", serif;2454  font-size: 20px;2455  font-weight: 600;2456  font-style: italic;2457  color: var(--peach-t0);2458  margin: 6px 0 2px;2459  line-height: 1.3;2460}2461.peach-note-editor-body ul,2462.peach-note-content ul {2463  padding-left: 18px;2464  margin: 3px 0;2465  list-style: disc;2466}2467.peach-note-editor-body ol,2468.peach-note-content ol {2469  padding-left: 18px;2470  margin: 3px 0;2471  list-style: decimal;2472}2473.peach-note-editor-body li,2474.peach-note-content li { margin: 2px 0; }2475.peach-note-editor-body hr,2476.peach-note-content hr {2477  border: none;2478  border-top: 1px solid var(--peach-t3);2479  margin: 10px 0;2480}24812482/* font size elements from execCommand */2483.peach-note-editor-body font[size="1"],2484.peach-note-content font[size="1"] { font-size: 11px; line-height: 1.6; }2485.peach-note-editor-body font[size="2"],2486.peach-note-content font[size="2"] { font-size: 13px; }2487.peach-note-editor-body font[size="3"],2488.peach-note-content font[size="3"] { font-size: 16px; }2489.peach-note-editor-body font[size="4"],2490.peach-note-content font[size="4"] { font-size: 20px; }2491.peach-note-editor-body font[size="5"],2492.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }24932494/* bold / italic inside the editor and note display */2495.peach-note-editor-body b, .peach-note-editor-body strong,2496.peach-note-content b, .peach-note-content strong { font-weight: 700; }2497.peach-note-editor-body em, .peach-note-editor-body i,2498.peach-note-content em, .peach-note-content i { font-style: italic; }24992500/* note display — rendered HTML, no pre-wrap */2501.peach-note-content {2502  overflow: auto;2503  max-height: 340px;2504  word-break: break-word;2505}25062507/* ── Note textarea ── */2508.peach-note-textarea {2509  width: 100%;2510  min-height: 180px;2511  max-height: 280px;2512  resize: vertical;2513  background: var(--peach-t4);2514  border: 1px solid var(--peach-t3);2515  border-radius: 8px;2516  padding: 10px 12px;2517  font-family: "IBM Plex Mono", monospace;2518  font-size: 12px;2519  line-height: 1.7;2520  color: var(--peach-t1);2521  outline: none;2522  transition: border-color 150ms ease;2523}25242525.peach-note-textarea:focus {2526  border-color: var(--peach-t2);2527}25282529.peach-note-char-count {2530  font-family: "IBM Plex Mono", monospace;2531  font-size: 9px;2532  color: var(--peach-t3);2533  text-align: right;2534  margin-top: 4px;2535  letter-spacing: 0.1em;2536}25372538/* ── Field input baseline ── */2539.peach-new-field-input {2540  width: 100%;2541  background: transparent;2542  border: none;2543  border-bottom: 1px solid var(--peach-t3);2544  padding: 4px 0;2545  color: var(--peach-t1);2546  font-family: "IBM Plex Mono", monospace;2547  font-size: 13px;2548  outline: none;2549  transition: border-color 150ms ease;2550}25512552.peach-new-field-input:focus {2553  border-bottom-color: var(--peach-t0);2554  color: var(--peach-t0);2555}25562557.peach-new-name-input {2558  width: 100%;2559  background: transparent;2560  border: none;2561  border-bottom: 1px solid var(--peach-t3);2562  padding: 6px 0;2563  font-family: "Cormorant Garamond", Georgia, serif;2564  font-style: italic;2565  font-size: 28px;2566  color: var(--peach-t0);2567  outline: none;2568  transition: border-color 150ms ease;2569}25702571.peach-new-name-input:focus {2572  border-bottom-color: var(--peach-t1);2573}25742575.peach-new-name-input::placeholder {2576  color: var(--peach-t2);2577  font-style: italic;2578}25792580.peach-new-field-input::placeholder {2581  color: var(--peach-t3);2582}25832584/* ── Demo entrance animation ── */2585#hd-shell {2586  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;2587}2588@keyframes hd-shell-enter {2589  from { opacity: 0; transform: scale(0.96) translateY(16px); }2590  to   { opacity: 1; transform: scale(1) translateY(0); }2591}25922593/* ── Keyframes ── */2594@keyframes peach-char-enter {2595  from { opacity: 0; transform: translateY(0.22em); }2596  to   { opacity: 1; transform: translateY(0); }2597}2598@keyframes peach-content-enter {2599  from { opacity: 0.96; transform: translateY(4px); }2600  to   { opacity: 1; transform: translateY(0); }2601}2602@keyframes peach-content-exit {2603  from { opacity: 1; transform: translateY(0); }2604  to   { opacity: 0.92; transform: translateY(-3px); }2605}2606@keyframes peach-screen-enter {2607  from { opacity: 0; transform: translateY(14px); }2608  to   { opacity: 1; transform: translateY(0); }2609}2610@keyframes peach-shell-fade-in {2611  from { opacity: 0; }2612  to   { opacity: 1; }2613}2614@keyframes peach-veil-in {2615  from { opacity: 0; }2616  to   { opacity: 1; }2617}2618@keyframes peach-lock-settle {2619  0%   { transform: scale(0.9); }2620  65%  { transform: scale(1.08); }2621  100% { transform: scale(1); }2622}2623@keyframes peach-copy-confirm {2624  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2625  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); }2626}2627@keyframes peach-copy-retreat {2628  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); }2629  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2630}2631@keyframes peach-copy-flood {2632  from { opacity: 0; transform: scaleX(0.15); }2633  to   { opacity: 1; transform: scaleX(1); }2634}2635@keyframes peach-copy-icon-settle {2636  from  { transform: scale(0.84); }2637  70%   { transform: scale(1.08); }2638  to    { transform: scale(1); }2639}2640@keyframes peach-copy-sheen-retreat {2641  from { opacity: 1; transform: scaleX(1); }2642  to   { opacity: 0; transform: scaleX(0.15); }2643}2644@keyframes peach-copy-drain {2645  from { width: 100%; }2646  to   { width: 0; }2647}2648@keyframes peach-shake {2649  0%, 100% { transform: translateX(0); }2650  20%      { transform: translateX(-6px); }2651  40%      { transform: translateX(6px); }2652  60%      { transform: translateX(-4px); }2653  80%      { transform: translateX(4px); }2654}26552656@keyframes pip-pulse {2657  0% { transform: scale(1); }2658  40% { transform: scale(2.2); }2659  100% { transform: scale(1); }2660}266126622663/* ── Password generator ── */2664.peach-pwgen-body {2665  flex: 1; overflow-y: auto;2666  display: flex; flex-direction: column;2667}2668.peach-policy-badge {2669  display: flex; align-items: center;2670  padding: 6px 20px 0;2671  font-size: 10px; font-family: Inter, sans-serif;2672  color: var(--peach-t2); letter-spacing: 0.04em;2673}2674.peach-pwgen-display {2675  padding: 14px 20px 12px;2676  border-bottom: 1px solid var(--peach-t3);2677  display: flex; align-items: flex-start; gap: 10px;2678}2679.peach-pwgen-display-row {2680  display: flex;2681  align-items: flex-start;2682  gap: 8px;2683  padding-bottom: 8px;2684  border-bottom: 1px solid var(--peach-t3);2685}2686.peach-pwgen-output {2687  flex: 1; min-width: 0; margin: 0;2688  font-family: "IBM Plex Mono", monospace;2689  font-size: 13px; color: var(--peach-t0);2690  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;2691  white-space: normal;2692  padding: 10px 12px;2693  background: var(--peach-t4);2694  border-radius: 6px;2695  min-height: 36px;2696}2697.peach-pwgen-output-display {2698  flex: 1;2699  min-width: 0;2700  margin: 0;2701  font-family: "Cormorant Garamond", "Times New Roman", serif;2702  font-style: italic;2703  font-weight: 300;2704  font-size: 32px;2705  line-height: 1.05;2706  color: var(--peach-t0);2707  word-break: break-all;2708  overflow-wrap: break-word;2709  white-space: normal;2710  letter-spacing: 0.02em;2711}2712.peach-pwgen-display-actions {2713  display: flex;2714  flex-direction: column;2715  gap: 4px;2716  flex-shrink: 0;2717  margin-top: 2px;2718}2719.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }2720.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }2721.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }2722.peach-pwgen-len-num {2723  font-family: "IBM Plex Mono", monospace;2724  font-size: 12px; color: var(--peach-accent);2725}2726.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }2727.peach-pwgen-toggles { display: flex; flex-direction: column; }2728.peach-pwgen-charset-pills {2729  display: flex;2730  gap: 6px;2731  flex-wrap: wrap;2732}2733.peach-pwgen-pill {2734  padding: 4px 11px;2735  border-radius: 999px;2736  border: 1px solid var(--peach-t3);2737  background: transparent;2738  color: var(--peach-t2);2739  font-family: "IBM Plex Mono", monospace;2740  font-size: 9px;2741  letter-spacing: 0.08em;2742  cursor: pointer;2743  transition: all 150ms ease;2744}2745.peach-pwgen-pill.is-on {2746  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);2747  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2748  color: var(--peach-accent);2749}2750.peach-pwgen-pill:not(.is-on):hover {2751  color: var(--peach-t1);2752  border-color: var(--peach-t2);2753}2754.peach-pwgen-use-btn {2755  width: 100%;2756  min-height: 34px;2757  border-radius: 8px;2758  margin-top: 2px;2759}2760.peach-pwgen-toggle-row {2761  display: flex; align-items: center; justify-content: space-between;2762  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);2763}2764.peach-pwgen-toggle-row:last-child { border-bottom: none; }2765.peach-pwgen-toggle-label { font-size: 13px; color: var(--peach-t1); }27662767.peach-screen-prelock {2768  z-index: 10;2769}27702771.prelock-form {2772  display: grid;2773  gap: 12px;2774}27752776/* Peach popup should not expose native scrollbars on internal panels. */2777.peach-settings-body,2778.peach-new-body,2779.peach-pwgen-body,2780.lock-screen,2781.peach-import-preview {2782  scrollbar-width: none;2783  -ms-overflow-style: none;2784  overscroll-behavior: contain;2785}2786.peach-settings-body::-webkit-scrollbar,2787.peach-new-body::-webkit-scrollbar,2788.peach-pwgen-body::-webkit-scrollbar,2789.lock-screen::-webkit-scrollbar,2790.peach-import-preview::-webkit-scrollbar {2791  width: 0;2792  height: 0;2793  display: none;2794}27952796.lock-screen {2797  height: 100%;2798  min-height: 100%;2799  overflow-y: auto;2800  padding: 18px 18px 16px;2801  gap: 14px;2802  grid-template-rows: auto auto auto 1fr auto;2803  align-content: stretch;2804  position: relative;2805  isolation: isolate;2806}2807.peach-screen.lock-screen--vault-stage {2808  display: flex;2809  flex-direction: column;2810  justify-content: flex-start;2811  gap: 18px;2812  padding: 20px 18px 18px;2813  overflow: hidden;2814}2815.peach-screen.lock-screen--vault-stage .peach-lock-panel {2816  margin-top: auto;2817}2818.lock-screen--onboarding {2819  display: flex;2820  flex-direction: column;2821  gap: 12px;2822  justify-content: flex-start;2823}28242825.lock-screen::before {2826  content: "";2827  position: absolute;2828  inset: 12px 18px auto auto;2829  width: 160px;2830  height: 160px;2831  border-radius: 999px;2832  background:2833    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%);2834  filter: blur(6px);2835  opacity: 0.7;2836  pointer-events: none;2837  z-index: 0;2838}28392840.lock-screen-header {2841  display: flex;2842  align-items: center;2843  justify-content: space-between;2844  position: relative;2845  z-index: 1;2846}28472848.lock-password-input.shake {2849  animation: peach-shake 300ms ease-in-out;2850}28512852.peach-hint-error {2853  color: rgba(220, 80, 60, 0.92);2854}28552856.peach-onboarding-headline {2857  margin: 0;2858  font-family: "Cormorant Garamond", "Times New Roman", serif;2859  font-size: 35px;2860  line-height: 0.88;2861  font-style: italic;2862  font-weight: 400;2863  max-width: 252px;2864}28652866.peach-lock-copy {2867  display: grid;2868  gap: 8px;2869  position: relative;2870  z-index: 1;2871}28722873.peach-lock-copy--onboarding {2874  gap: 10px;2875}28762877.peach-lock-hero {2878  position: relative;2879  z-index: 1;2880  display: grid;2881  gap: 8px;2882  min-height: 0;2883  padding: 4px 2px 0;2884  border: none;2885  border-radius: 0;2886  background: transparent;2887  box-shadow: none;2888}2889.peach-lock-hero-art {2890  position: absolute;2891  right: -8px;2892  top: -6px;2893  width: 120px;2894  height: 120px;2895  display: flex;2896  align-items: center;2897  justify-content: center;2898  pointer-events: none;2899  opacity: 0.12;2900  filter: saturate(0.9);2901}2902.peach-lock-hero-mark {2903  width: 100%;2904  height: 100%;2905}2906/* Peach body stays brand-peach across every accent — we don't want a2907   green or blue peach when sage/sky is selected. Leaf + stem keep the2908   sage tint because a real peach has a sage leaf. */2909.peach-lock-hero-mark path:nth-child(2),2910.peach-lock-hero-mark path:nth-child(3) {2911  stroke: rgba(123, 144, 96, 0.88);2912  fill: rgba(123, 144, 96, 0.88);2913}2914.peach-lock-hero > *:not(.peach-lock-hero-art) {2915  position: relative;2916  z-index: 1;2917}29182919.peach-lock-eyebrow {2920  display: inline-flex;2921  align-items: center;2922  width: fit-content;2923  padding: 4px 9px;2924  border-radius: 999px;2925  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);2926  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2927  color: var(--peach-t0);2928  font-family: "IBM Plex Mono", monospace;2929  font-size: 8px;2930  letter-spacing: 0.18em;2931  text-transform: uppercase;2932}29332934.peach-lock-label-row {2935  display: flex;2936  align-items: center;2937  justify-content: space-between;2938  margin-bottom: 0;2939}29402941.peach-lock-reveal-btn {2942  display: inline-flex;2943  align-items: center;2944  gap: 4px;2945  background: none;2946  border: none;2947  cursor: pointer;2948  font-family: "IBM Plex Mono", monospace;2949  font-size: 9px;2950  letter-spacing: 0.06em;2951  color: var(--peach-t2);2952  padding: 2px 0;2953  transition: color 150ms ease;2954}29552956.peach-lock-reveal-btn:hover {2957  color: var(--peach-t1);2958}29592960.peach-lock-warning {2961  color: rgba(220, 80, 60, 0.85) !important;2962  line-height: 1.5;2963}29642965.peach-onboarding-cards {2966  display: grid;2967  gap: 8px;2968  position: relative;2969  z-index: 1;2970}29712972.peach-lock-panel {2973  position: relative;2974  z-index: 1;2975  display: grid;2976  gap: 9px;2977  padding: 14px 16px 15px;2978  border-radius: 18px;2979  border: 1px solid var(--peach-t3);2980  background:2981    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));2982  box-shadow:2983    inset 0 1px 0 rgba(240, 232, 216, 0.04),2984    0 12px 28px rgba(0, 0, 0, 0.12);2985}29862987.peach-lock-panel--secondary {2988  gap: 12px;2989}29902991.peach-lock-panel-header {2992  display: flex;2993  align-items: baseline;2994  justify-content: space-between;2995  gap: 12px;2996}29972998.peach-lock-option-grid {2999  display: grid;3000  gap: 10px;3001}30023003.peach-lock-option {3004  width: 100%;3005  display: grid;3006  gap: 6px;3007  padding: 14px 15px;3008  border-radius: 16px;3009  border: 1px solid rgba(240, 232, 216, 0.08);3010  background: rgba(240, 232, 216, 0.02);3011  color: var(--peach-t0);3012  text-align: left;3013  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3014}30153016.peach-lock-option:hover {3017  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3018  background: rgba(240, 232, 216, 0.04);3019  transform: translateY(-1px);3020}30213022.peach-lock-option-title {3023  font-size: 12px;3024  color: var(--peach-t0);3025}30263027.peach-lock-option-copy {3028  font-size: 11px;3029  line-height: 1.55;3030  color: var(--peach-t1);3031}30323033.peach-onboarding-stack {3034  margin-top: 2px;3035}3036.peach-lock-panel-footer {3037  display: grid;3038  gap: 6px;3039  margin-top: 2px;3040  padding-top: 10px;3041  border-top: 1px solid rgba(240, 232, 216, 0.06);3042}30433044/* Restore picker panel — method option cards */3045.peach-lock-panel--restore {3046  gap: 10px;3047}3048.peach-lock-option--history {3049  border-color: rgba(240, 232, 216, 0.06);3050  opacity: 0.85;3051}30523053/* Snapshot restore panel */3054.peach-snapshot-panel {3055  gap: 10px;3056  overflow-y: auto;3057  max-height: 340px;3058}3059.peach-snapshot-list {3060  display: flex;3061  flex-direction: column;3062  gap: 4px;3063}3064.peach-snapshot-row {3065  display: flex;3066  align-items: center;3067  justify-content: space-between;3068  width: 100%;3069  padding: 8px 10px;3070  border-radius: 8px;3071  border: 1px solid rgba(240, 232, 216, 0.07);3072  background: transparent;3073  cursor: pointer;3074  transition: border-color 120ms, background 120ms;3075  text-align: left;3076  gap: 8px;3077}3078.peach-snapshot-row:hover {3079  border-color: rgba(240, 232, 216, 0.14);3080  background: rgba(240, 232, 216, 0.03);3081}3082.peach-snapshot-row.is-selected {3083  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3084  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3085}3086.peach-snapshot-time {3087  font-size: 11.5px;3088  color: var(--peach-t0);3089  flex: 1;3090}3091.peach-snapshot-count {3092  font-family: "IBM Plex Mono", monospace;3093  font-size: 10px;3094  color: var(--peach-t2);3095  flex-shrink: 0;3096}3097.peach-snapshot-confirm {3098  display: flex;3099  flex-direction: column;3100  gap: 8px;3101  padding-top: 10px;3102  border-top: 1px solid rgba(240, 232, 216, 0.06);3103}3104.peach-snapshot-warning {3105  display: flex;3106  align-items: flex-start;3107  gap: 6px;3108  font-size: 10.5px;3109  color: rgba(220, 80, 60, 0.85);3110  line-height: 1.55;3111}3112.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3113.peach-snapshot-confirm-row {3114  display: flex;3115  gap: 6px;3116  align-items: center;3117}3118.peach-snapshot-restore-btn {3119  width: 100%;3120}3121.peach-lock-hero--unlock .peach-lock-hero-art {3122  width: 112px;3123  height: 112px;3124  right: 0;3125  top: 2px;3126  opacity: 0.1;3127}31283129.peach-card {3130  border: 1px solid var(--peach-t3);3131  border-radius: 18px;3132  background:3133    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3134  box-shadow:3135    inset 0 0 0 1px var(--peach-border-accent),3136    inset 0 1px 0 rgba(240, 232, 216, 0.04),3137    0 12px 32px rgba(0, 0, 0, 0.14);3138  overflow: hidden;3139}31403141.peach-card-active {3142  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3143  box-shadow:3144    inset 0 1px 0 rgba(240, 232, 216, 0.05),3145    0 16px 38px rgba(0, 0, 0, 0.18),3146    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);3147}31483149.peach-card-disabled {3150  opacity: 0.72;3151}31523153.peach-card-header {3154  width: 100%;3155  padding: 13px 16px 11px;3156  background: transparent;3157  color: var(--peach-t0);3158  display: flex;3159  justify-content: space-between;3160  align-items: center;3161  text-align: left;3162  font-size: 12px;3163}31643165.peach-card-body {3166  padding: 0 16px 16px;3167  display: grid;3168  gap: 9px;3169}31703171.peach-card-tag {3172  color: var(--peach-t2);3173  font-family: "IBM Plex Mono", monospace;3174  font-size: 9px;3175  letter-spacing: 0.12em;3176  text-transform: uppercase;3177}31783179.peach-empty-copy {3180  display: grid;3181  gap: 6px;3182  color: var(--peach-t1);3183  font-size: 13px;3184}31853186.peach-lock-submit {3187  width: 100%;3188  box-shadow: 0 14px 36px color-mix(in srgb, var(--peach-accent) 22%, transparent);3189}31903191.peach-lock-secondary {3192  width: 100%;3193  border-color: var(--peach-t3);3194  background: rgba(240, 232, 216, 0.02);3195}31963197.peach-lock-secondary:hover {3198  background: rgba(240, 232, 216, 0.04);3199}32003201.peach-lock-note {3202  max-width: none;3203  line-height: 1.55;3204  margin: 0;3205}32063207.peach-overlay-action {3208  font-size: 10px;3209  padding: 4px 8px;3210  letter-spacing: 0.06em;3211  min-width: 44px;3212  text-align: center;3213}32143215.peach-overlay-spacer {3216  width: 32px;3217}32183219.peach-inline-action {3220  flex-shrink: 0;3221  font-size: 9px;3222  letter-spacing: 0.1em;3223  text-transform: uppercase;3224  padding: 4px 7px;3225}3226.peach-password-toggle-btn {3227  display: inline-flex;3228  align-items: center;3229  justify-content: center;3230  min-width: 30px;3231  min-height: 26px;3232  padding: 0 7px;3233  border: 1px solid var(--peach-t3);3234  border-radius: 999px;3235  background: rgba(240, 232, 216, 0.04);3236  color: var(--peach-t2);3237  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;3238}3239.peach-password-toggle-btn:hover {3240  border-color: var(--peach-t2);3241  color: var(--peach-t0);3242  background: rgba(240, 232, 216, 0.06);3243}32443245.peach-new-textarea {3246  width: 100%;3247  min-height: 88px;3248  resize: vertical;3249  border: 0;3250  outline: none;3251  background: transparent;3252  color: var(--peach-t1);3253  font-family: "IBM Plex Mono", monospace;3254  font-size: 12px;3255  line-height: 1.65;3256  caret-color: var(--peach-accent);3257}32583259.peach-new-textarea::placeholder {3260  color: var(--peach-t2);3261  opacity: 0.7;3262}32633264.peach-settings-actions {3265  display: grid;3266  gap: 8px;3267}32683269.peach-sync-section-label {3270  font-size: 11px;3271  color: var(--peach-t2);3272  text-transform: uppercase;3273  letter-spacing: 0.05em;3274}32753276.peach-sync-device-row {3277  display: flex;3278  justify-content: space-between;3279  align-items: center;3280  padding: 6px 0;3281  border-bottom: 1px solid var(--peach-t3);3282}32833284.peach-sync-device-info {3285  display: flex;3286  flex-direction: column;3287  gap: 2px;3288}32893290.peach-sync-device-name {3291  font-size: 13px;3292  color: var(--peach-t0);3293}32943295.peach-sync-device-meta {3296  font-size: 11px;3297  color: var(--peach-t2);3298}32993300.peach-sync-status-dot {3301  display: inline-block;3302  width: 8px;3303  height: 8px;3304  border-radius: 50%;3305  vertical-align: middle;3306}33073308.peach-sync-remove-btn {3309  color: var(--peach-breach);3310}33113312.peach-import-preview {3313  margin-bottom: 12px;3314  max-height: 152px;3315  overflow-y: auto;3316  border: 1px solid var(--peach-t3);3317  border-radius: 10px;3318  padding: 8px 10px;3319  display: grid;3320  gap: 8px;3321  background: rgba(240, 232, 216, 0.02);3322}33233324.peach-import-preview-row {3325  display: flex;3326  justify-content: space-between;3327  gap: 10px;3328  font-size: 11px;3329  color: var(--peach-t1);3330}33313332.peach-import-preview-title {3333  color: var(--peach-t0);3334  flex: 1;3335  min-width: 0;3336  overflow: hidden;3337  text-overflow: ellipsis;3338  white-space: nowrap;3339}33403341.peach-import-preview-meta {3342  color: var(--peach-t2);3343  flex-shrink: 0;3344  max-width: 42%;3345  overflow: hidden;3346  text-overflow: ellipsis;3347  white-space: nowrap;3348}33493350.peach-import-preview-more {3351  color: var(--peach-t2);3352  font-size: 10px;3353}33543355.peach-restore-copy {3356  margin: 0;3357  color: var(--peach-t1);3358  font-size: 11px;3359  line-height: 1.6;3360}33613362.peach-restore-warning {3363  padding: 10px 12px;3364  border-radius: 12px;3365  border: 1px solid rgba(220, 80, 60, 0.22);3366  background: rgba(220, 80, 60, 0.08);3367  color: rgba(240, 232, 216, 0.86);3368  font-size: 11px;3369  line-height: 1.55;3370}33713372.peach-provider-chips {3373  display: flex;3374  flex-wrap: wrap;3375  gap: 6px;3376}33773378.peach-provider-chip {3379  display: inline-flex;3380  align-items: center;3381  padding: 5px 8px;3382  border-radius: 999px;3383  border: 1px solid var(--peach-t3);3384  background: rgba(240, 232, 216, 0.02);3385  color: var(--peach-t1);3386  font-family: "IBM Plex Mono", monospace;3387  font-size: 8px;3388  letter-spacing: 0.08em;3389  text-transform: uppercase;3390}33913392.peach-restore-file,3393.peach-restore-input {3394  width: 100%;3395  border-radius: 10px;3396  border: 1px solid var(--peach-t3);3397  background: var(--peach-s2);3398  color: var(--peach-t0);3399  font-size: 12px;3400}34013402.peach-restore-file {3403  padding: 9px 10px;3404}34053406.peach-restore-file::file-selector-button {3407  margin-right: 10px;3408  padding: 7px 10px;3409  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);3410  border-radius: 999px;3411  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3412  color: var(--peach-t0);3413  font-size: 10px;3414  letter-spacing: 0.08em;3415  text-transform: uppercase;3416  cursor: pointer;3417}34183419.peach-restore-input {3420  padding: 10px 12px;3421}34223423.peach-auth-grid {3424  display: grid;3425  gap: 10px;3426}34273428.peach-import-summary {3429  color: var(--peach-t1);3430  font-size: 12px;3431  line-height: 1.6;3432  margin-bottom: 12px;3433}34343435.peach-restore-error {3436  color: rgba(220, 80, 60, 0.95);3437  font-size: 12px;3438  line-height: 1.55;3439}34403441.peach-cjk-qr-panel {3442  margin-top: 14px;3443  padding: 12px;3444  border-radius: 16px;3445  border: 1px solid var(--peach-t3);3446  background: rgba(240, 232, 216, 0.02);3447  display: grid;3448  gap: 10px;3449}34503451.peach-cjk-qr-frame {3452  display: grid;3453  place-items: center;3454  min-height: 212px;3455  border-radius: 14px;3456  background: #fff;3457  overflow: hidden;3458}34593460.peach-cjk-qr-frame svg {3461  display: block;3462  width: 196px;3463  height: 196px;3464}34653466.peach-cjk-qr-error,3467.peach-cjk-qr-caption {3468  color: var(--peach-t1);3469  font-size: 11px;3470  line-height: 1.55;3471}34723473.peach-cjk-qr-card {3474  max-width: 400px;3475  margin: auto;3476}34773478.peach-cjk-qr-body {3479  padding: 0 20px 20px;3480  text-align: center;3481}34823483.peach-cjk-qr-hint {3484  font-size: 11px;3485  color: var(--peach-t2);3486  margin: 0 0 14px;3487}34883489.peach-cjk-qr-image {3490  border-radius: 4px;3491  display: block;3492  margin: 0 auto;3493  width: 100%;3494  max-width: 320px;3495  height: auto;3496}34973498.peach-pro-badge {3499  padding: 2px 6px;3500  border-radius: 999px;3501  font-family: var(--font-ui);3502  font-size: 10px;3503  letter-spacing: 0.08em;3504  text-transform: uppercase;3505  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);3506  color: var(--peach-accent);3507}35083509.peach-loading {3510  position: absolute;3511  inset: 0;3512  display: flex;3513  align-items: center;3514  justify-content: center;3515  background: var(--bg);3516  animation: peach-loading-pulse 1.2s ease-in-out infinite;3517}35183519@keyframes peach-loading-pulse {3520  0%, 100% { opacity: 0.6; }3521  50% { opacity: 1; }3522}35233524/* ── Health Dashboard ─────────────────────────────────────────────────── */3525.peach-health-body {3526  flex: 1;3527  overflow-y: auto;3528  display: flex;3529  flex-direction: column;3530}35313532.peach-health-summary {3533  padding: 10px 16px 6px;3534  font-family: "IBM Plex Mono", monospace;3535  font-size: 11px;3536}3537.peach-health-summary-warn { color: rgba(220,80,60,0.9); }3538.peach-health-summary-ok { color: var(--peach-t2); }35393540.peach-health-check-row {3541  padding: 0 16px 10px;3542}3543.peach-health-check-btn {3544  width: 100%;3545  display: flex;3546  align-items: center;3547  justify-content: center;3548}35493550.peach-health-sections {3551  flex: 1;3552  display: flex;3553  flex-direction: column;3554}35553556.peach-health-section {3557  border-bottom: 1px solid var(--peach-t3);3558}35593560.peach-health-section-header {3561  width: 100%;3562  display: flex;3563  align-items: center;3564  justify-content: space-between;3565  padding: 9px 16px;3566  background: transparent;3567  cursor: pointer;3568  color: var(--peach-t0);3569}35703571.peach-health-section-title-row {3572  display: flex;3573  align-items: center;3574  gap: 8px;3575}35763577.peach-health-count-badge {3578  display: inline-flex;3579  align-items: center;3580  justify-content: center;3581  min-width: 20px;3582  height: 18px;3583  padding: 0 5px;3584  border-radius: 999px;3585  background: rgba(220,80,60,0.15);3586  border: 1px solid rgba(220,80,60,0.25);3587  font-family: "IBM Plex Mono", monospace;3588  font-size: 9px;3589  color: rgba(220,80,60,0.9);3590}35913592.peach-health-section-title {3593  font-family: "IBM Plex Mono", monospace;3594  font-size: 11px;3595  text-transform: uppercase;3596  letter-spacing: 0.1em;3597  color: var(--peach-t1);3598}35993600.peach-health-chevron {3601  color: var(--peach-t2);3602  transition: transform 200ms ease;3603  flex-shrink: 0;3604}3605.peach-health-chevron.is-expanded {3606  transform: rotate(180deg);3607}36083609.peach-health-section-body {3610  padding: 0 16px 10px;3611  display: flex;3612  flex-direction: column;3613  gap: 4px;3614}36153616.peach-health-row {3617  display: flex;3618  align-items: flex-start;3619  justify-content: space-between;3620  gap: 8px;3621  padding: 6px 8px;3622  border-radius: 8px;3623  background: rgba(240,232,216,0.02);3624}36253626.peach-health-row-info {3627  flex: 1;3628  min-width: 0;3629  display: flex;3630  flex-direction: column;3631  gap: 2px;3632}36333634.peach-health-row-name {3635  font-family: "Cormorant Garamond", serif;3636  font-size: 15px;3637  font-style: italic;3638  font-weight: 400;3639  color: var(--peach-t0);3640  white-space: nowrap;3641  overflow: hidden;3642  text-overflow: ellipsis;3643}36443645.peach-health-row-meta {3646  font-family: "IBM Plex Mono", monospace;3647  font-size: 9px;3648  color: var(--peach-t2);3649  letter-spacing: 0.05em;3650}36513652.peach-health-fix-btn {3653  font-size: 9px;3654  letter-spacing: 0.08em;3655  text-transform: uppercase;3656  padding: 4px 7px;3657  flex-shrink: 0;3658  display: flex;3659  align-items: center;3660}36613662.peach-health-empty {3663  font-family: "IBM Plex Mono", monospace;3664  font-size: 10px;3665  color: var(--peach-t2);3666  padding: 6px 0;3667}36683669.peach-health-loading {3670  font-family: "IBM Plex Mono", monospace;3671  font-size: 10px;3672  color: var(--peach-t2);3673  padding: 6px 0;3674  display: flex;3675  align-items: center;3676  gap: 6px;3677}36783679.peach-health-loading::before {3680  content: "";3681  width: 10px;3682  height: 10px;3683  border: 1.5px solid var(--peach-t3);3684  border-top-color: var(--peach-accent);3685  border-radius: 50%;3686  animation: peach-spin 600ms linear infinite;3687}36883689@keyframes peach-spin {3690  to { transform: rotate(360deg); }3691}36923693.peach-spinner {3694  width: 32px;3695  height: 32px;3696  border: 2px solid var(--peach-s2);3697  border-top-color: var(--peach-accent);3698  border-radius: 50%;3699  margin: 0 auto 16px;3700  animation: peach-spin 0.8s linear infinite;3701}37023703.peach-progress-screen {3704  text-align: center;3705  padding: 32px 16px;3706}37073708.peach-progress-screen-title {3709  font-size: 13px;3710  color: var(--peach-t0);3711  margin-bottom: 16px;3712}37133714.peach-progress-screen-stage {3715  font-size: 11px;3716  color: var(--peach-t2);3717  min-height: 14px;3718}37193720.peach-progress-screen-note {3721  font-size: 10px;3722  color: var(--peach-t2);3723  margin-top: 8px;3724}37253726.peach-pairing-body {3727  flex: 1;3728  overflow-y: auto;3729  display: flex;3730  flex-direction: column;3731}37323733.peach-pairing-content {3734  flex: 1;3735  display: flex;3736  flex-direction: column;3737  align-items: center;3738  justify-content: center;3739  gap: 14px;3740  padding: 28px 20px;3741  text-align: center;3742}37433744.peach-pairing-headline {3745  font-family: var(--font-display);3746  font-style: italic;3747  font-weight: 300;3748  font-size: 28px;3749  color: var(--peach-t0);3750  margin: 0;3751  line-height: 1;3752}37533754.peach-pairing-subline {3755  font-size: 12px;3756  color: var(--peach-t2);3757  max-width: 220px;3758  line-height: 1.5;3759  margin: 0;3760}37613762.peach-pairing-subline--center {3763  text-align: center;3764}37653766.peach-pairing-code-display {3767  display: flex;3768  gap: 6px;3769}37703771.peach-pairing-code-digit {3772  display: flex;3773  align-items: center;3774  justify-content: center;3775  width: 36px;3776  height: 48px;3777  background: var(--peach-s2);3778  border: 1px solid var(--peach-t3);3779  border-radius: 6px;3780  font-family: var(--font-mono);3781  font-size: 22px;3782  color: var(--peach-t0);3783  letter-spacing: 0;3784}37853786.peach-pairing-countdown-ring {3787  position: relative;3788  display: inline-flex;3789  align-items: center;3790  justify-content: center;3791}37923793.peach-pairing-countdown-num {3794  position: absolute;3795  font-family: var(--font-mono);3796  font-size: 14px;3797  color: var(--peach-t1);3798}37993800.peach-pairing-ring-track {3801  fill: none;3802  stroke: var(--peach-t3);3803  stroke-width: 2;3804}38053806.peach-pairing-ring-progress {3807  fill: none;3808  stroke: var(--peach-accent);3809  stroke-width: 2;3810  stroke-linecap: round;3811  transform: rotate(-90deg);3812  transform-origin: 50% 50%;3813  transition: stroke-dashoffset 0.5s linear;3814}38153816.peach-pairing-code-inputs {3817  display: flex;3818  gap: 8px;3819}38203821.peach-pairing-code-box {3822  width: 36px;3823  height: 48px;3824  text-align: center;3825  background: var(--peach-s2);3826  border: 1px solid var(--peach-t3);3827  border-radius: 6px;3828  font-family: var(--font-mono);3829  font-size: 20px;3830  color: var(--peach-t0);3831  outline: none;3832  transition: border-color 120ms ease;3833}38343835.peach-pairing-code-box:focus {3836  border-color: var(--peach-accent);3837}38383839.peach-pairing-code-box.has-error {3840  border-color: rgba(220, 80, 60, 0.45);3841}38423843.peach-pairing-status {3844  display: flex;3845  align-items: center;3846  gap: 8px;3847  margin: 0;3848  font-size: 12px;3849  color: var(--peach-t1);3850}38513852.peach-pairing-error {3853  margin: 0;3854  font-size: 11px;3855  color: var(--peach-breach);3856}38573858.peach-pairing-error-msg {3859  color: var(--peach-t1);3860}38613862.peach-pairing-spinner {3863  width: 12px;3864  height: 12px;3865  border: 1.5px solid var(--peach-t3);3866  border-top-color: var(--peach-accent);3867  border-radius: 50%;3868  animation: peach-spin 0.8s linear infinite;3869}38703871.peach-pairing-success-icon,3872.peach-pairing-error-icon,3873.peach-pairing-hero {3874  display: inline-flex;3875  align-items: center;3876  justify-content: center;3877}38783879/* Tag chips */3880.peach-tag-chip {3881  display: inline-flex;3882  align-items: center;3883  gap: 4px;3884  padding: 3px 8px;3885  border-radius: 999px;3886  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);3887  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3888  color: rgba(240, 232, 216, 0.85);3889  font-family: "IBM Plex Mono", monospace;3890  font-size: 10px;3891  letter-spacing: 0.04em;3892}38933894.peach-tag-chip-remove {3895  background: transparent;3896  border: none;3897  color: inherit;3898  opacity: 0.6;3899  cursor: pointer;3900  padding: 0;3901  font-size: 12px;3902  line-height: 1;3903}39043905.peach-tag-chip-remove:hover {3906  opacity: 1;3907}39083909/* Tag input */3910.peach-tag-input-wrap {3911  border-bottom: 1px solid var(--peach-t3);3912}39133914.peach-tag-suggestions {3915  display: flex;3916  flex-wrap: wrap;3917  gap: 4px;3918  padding: 6px 0;3919}39203921.peach-tag-suggestion {3922  padding: 2px 8px;3923  border-radius: 999px;3924  border: 1px solid var(--peach-t3);3925  background: var(--peach-s2);3926  color: var(--peach-t1);3927  font-family: "IBM Plex Mono", monospace;3928  font-size: 10px;3929  cursor: pointer;3930  transition: border-color 80ms ease, background 80ms ease;3931}39323933.peach-tag-suggestion:hover {3934  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3935  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3936}39373938/* Tag filter strip */3939.peach-tag-filter-strip {3940  border-bottom: 1px solid var(--peach-t3);3941  flex-shrink: 0;3942}39433944.peach-tag-filter-chip {3945  display: inline-flex;3946  align-items: center;3947  padding: 4px 10px;3948  border-radius: 999px;3949  border: 1px solid var(--peach-t3);3950  background: transparent;3951  color: var(--peach-t2);3952  font-family: "IBM Plex Mono", monospace;3953  font-size: 9px;3954  letter-spacing: 0.06em;3955  text-transform: uppercase;3956  cursor: pointer;3957  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;3958  white-space: nowrap;3959}39603961.peach-tag-filter-chip:hover {3962  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3963  color: var(--peach-t1);3964}39653966.peach-tag-filter-chip.is-selected {3967  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3968  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);3969  color: rgba(240, 232, 216, 0.9);3970}39713972/* ─────────────────────────────────────────────────────────────────────────3973   v1.4.12 additions3974   ─────────────────────────────────────────────────────────────────────── */39753976/* Sort bar */3977.peach-sort-bar {3978  display: flex;3979  align-items: center;3980  gap: 4px;3981  padding: 5px 12px;3982  border-bottom: 1px solid var(--peach-t3);3983  flex-shrink: 0;3984  overflow-x: auto;3985  scrollbar-width: none;3986}39873988.peach-sort-btn {3989  padding: 2px 9px;3990  border-radius: 999px;3991  border: 1px solid transparent;3992  background: transparent;3993  color: var(--peach-t2);3994  font-family: "IBM Plex Mono", monospace;3995  font-size: 9px;3996  letter-spacing: 0.07em;3997  text-transform: uppercase;3998  cursor: pointer;3999  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;4000  white-space: nowrap;4001}40024003.peach-sort-btn:hover {4004  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);4005  color: var(--peach-t1);4006}40074008.peach-sort-btn.is-active {4009  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);4010  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);4011  color: rgba(240, 232, 216, 0.9);4012}40134014.peach-sort-domain-hint {4015  margin-left: auto;4016  font-family: "IBM Plex Mono", monospace;4017  font-size: 9px;4018  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);4019  white-space: nowrap;4020  overflow: hidden;4021  text-overflow: ellipsis;4022  max-width: 110px;4023}40244025/* Tab-match badge on entry rows */4026.peach-tab-match-badge {4027  display: inline-block;4028  width: 6px;4029  height: 6px;4030  border-radius: 50%;4031  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);4032  margin-left: 5px;4033  vertical-align: middle;4034  flex-shrink: 0;4035  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);4036}40374038.peach-entry-row.is-tab-match {4039  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);4040  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);4041}40424043.peach-entry-row.is-tab-match:hover {4044  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4045}40464047/* Entry list stagger entrance */4048@keyframes peach-entry-fadein {4049  from { opacity: 0; transform: translateY(4px); }4050  to   { opacity: 1; transform: translateY(0); }4051}40524053.peach-vault-list .peach-entry-row {4054  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;4055  content-visibility: auto;4056  contain-intrinsic-size: auto 44px;4057}40584059/* Button press micro-interaction */4060.peach-btn:active {4061  transform: scale(0.95);4062  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);4063}40644065.peach-sort-btn:active,4066.peach-tag-filter-chip:active {4067  transform: scale(0.93);4068  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);4069}40704071/* Password strength bar (Lock view + shared) */4072.peach-password-strength {4073  display: flex;4074  align-items: center;4075  gap: 8px;4076  margin-top: 6px;4077}40784079.peach-strength-bar {4080  flex: 1;4081  height: 3px;4082  border-radius: 2px;4083  background: var(--peach-t3);4084  overflow: hidden;4085}40864087.peach-strength-fill {4088  height: 100%;4089  border-radius: 2px;4090  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),4091              background 300ms ease;4092}40934094.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }4095.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }4096.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }4097.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }40984099.peach-strength-label {4100  font-family: "IBM Plex Mono", monospace;4101  font-style: italic;4102  font-size: 9px;4103  font-weight: 300;4104  letter-spacing: 0.06em;4105  color: var(--peach-t2);4106  min-width: 36px;4107  text-align: right;4108}41094110.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }4111.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }4112.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }4113.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }41144115/* Duress form */4116.peach-duress-status {4117  padding: 2px 8px;4118  border-radius: 999px;4119  border: 1px solid var(--peach-t3);4120  font-family: "IBM Plex Mono", monospace;4121  font-size: 9px;4122  letter-spacing: 0.07em;4123  text-transform: uppercase;4124  color: var(--peach-t2);4125  flex-shrink: 0;4126}41274128.peach-duress-status.is-active {4129  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);4130  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4131  color: rgba(240, 232, 216, 0.85);4132}41334134.peach-duress-form {4135  padding: 8px 0 4px;4136  display: flex;4137  flex-direction: column;4138  gap: 6px;4139}41404141.peach-duress-form .peach-label {4142  margin-top: 4px;4143}41444145.peach-duress-actions {4146  display: flex;4147  gap: 6px;4148  align-items: center;4149  margin-top: 4px;4150}41514152.peach-duress-actions .peach-btn:first-child {4153  margin-right: auto;4154}41554156/* Improved overlay spring entrance */4157.peach-overlay-view.ov-enter-up {4158  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4159}41604161@keyframes ov-enter-up-spring {4162  from { opacity: 0; transform: translateY(16px) scale(0.98); }4163  to   { opacity: 1; transform: translateY(0) scale(1); }4164}41654166.peach-overlay-view.ov-enter-right {4167  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;4168}41694170@keyframes ov-enter-right-spring {4171  from { opacity: 0; transform: translateX(18px) scale(0.98); }4172  to   { opacity: 1; transform: translateX(0) scale(1); }4173}41744175/* ── Onboarding-mode restore screens (CJK phrase / file import) ── */4176/* Used when CJKImportView or MainImportView renders during onboarding4177   (no vault yet). Animates like a lock-screen transition. */4178.peach-lock-view {4179  position: absolute;4180  inset: 0;4181  display: flex;4182  flex-direction: column;4183  background:4184    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),4185    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),4186    var(--peach-bg);4187  z-index: 2;4188  overflow: hidden;4189  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4190}41914192.peach-lock-view-header {4193  display: flex;4194  align-items: center;4195  justify-content: space-between;4196  padding: 16px 18px 12px;4197  flex-shrink: 0;4198}41994200/* ───────── Settings: auto-lock select ───────── */4201.peach-settings-select {4202  font-family: "IBM Plex Mono", monospace;4203  font-size: 11px;4204  background: transparent;4205  border: 1px solid var(--peach-t3);4206  border-radius: 4px;4207  color: var(--peach-t1);4208  padding: 3px 6px;4209  cursor: pointer;4210  outline: none;4211}4212.peach-settings-select:focus {4213  border-color: var(--peach-accent);4214}42154216/* ───────── Duress status pill (new polished) ───────── */4217.peach-duress-status-pill {4218  font-family: "IBM Plex Mono", monospace;4219  font-size: 9px;4220  text-transform: uppercase;4221  letter-spacing: 0.12em;4222  padding: 2px 8px;4223  border-radius: 12px;4224  background: var(--peach-t3);4225  color: var(--peach-t2);4226  flex-shrink: 0;4227}4228.peach-duress-status-pill.is-active {4229  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);4230  color: var(--peach-accent);4231}42324233/* ───────── Entry advanced disclosure (canary) ───────── */4234.peach-entry-advanced {4235  margin-top: 12px;4236  border-top: 1px solid var(--peach-t3);4237  padding-top: 10px;4238  position: relative;4239  z-index: 1;4240}4241.peach-entry-advanced-toggle {4242  display: flex;4243  align-items: center;4244  justify-content: space-between;4245  width: 100%;4246  background: transparent;4247  border: none;4248  cursor: pointer;4249  padding: 0;4250  color: var(--peach-t2);4251}4252.peach-canary-section {4253  margin-top: 10px;4254  display: grid;4255  gap: 6px;4256}42574258/* ───────── Import: merge/replace radio choices ───────── */4259.peach-import-choice {4260  display: flex;4261  align-items: flex-start;4262  gap: 10px;4263  padding: 8px 10px;4264  border: 1px solid var(--peach-t3);4265  border-radius: 10px;4266  cursor: pointer;4267  margin-bottom: 6px;4268  transition: border-color 120ms ease, background 120ms ease;4269}4270.peach-import-choice:hover {4271  border-color: var(--peach-accent);4272}4273.peach-import-choice input[type="radio"] {4274  margin-top: 3px;4275  accent-color: var(--peach-accent);4276  flex-shrink: 0;4277}4278.peach-import-choice-main {4279  display: flex;4280  flex-direction: column;4281  gap: 2px;4282  min-width: 0;4283}4284.peach-import-choice-label {4285  font-size: 12px;4286  color: var(--peach-t0);4287}4288.peach-import-choice-sub {4289  font-size: 11px;4290  color: var(--peach-t2);4291  line-height: 1.5;4292}42934294/* ───────── Export: success confirmation strip ───────── */4295.peach-export-success {4296  display: flex;4297  align-items: flex-start;4298  gap: 10px;4299  padding: 12px;4300  border-radius: 12px;4301  border: 1px solid rgba(150, 175, 110, 0.3);4302  background: rgba(150, 175, 110, 0.08);4303  color: var(--peach-t0);4304  font-size: 12px;4305  line-height: 1.55;4306}4307.peach-export-success-check {4308  color: rgba(150, 175, 110, 0.9);4309  font-size: 14px;4310  flex-shrink: 0;4311}43124313/* ── Trash view ──────────────────────────────────────────────────────── */4314.peach-trash-entry-row {4315  display: flex;4316  align-items: center;4317  justify-content: space-between;4318  gap: 8px;4319  padding: 8px 0;4320  border-bottom: 1px solid var(--peach-t3);4321}4322.peach-trash-entry-row:last-child { border-bottom: none; }4323.peach-trash-entry-info {4324  flex: 1;4325  min-width: 0;4326  display: flex;4327  flex-direction: column;4328  gap: 2px;4329}4330.peach-trash-entry-title {4331  font-size: 12px;4332  color: var(--peach-t1);4333  overflow: hidden;4334  text-overflow: ellipsis;4335  white-space: nowrap;4336}4337.peach-trash-entry-meta {4338  font-family: var(--font-mono);4339  font-size: 9px;4340  color: var(--peach-t2);4341  letter-spacing: 0.06em;4342}4343.peach-trash-entry-actions {4344  display: flex;4345  align-items: center;4346  gap: 4px;4347  flex-shrink: 0;4348}43494350/* ── Settings shortcuts grid ─────────────────────────────────────────── */4351.peach-shortcuts-grid {4352  display: grid;4353  grid-template-columns: auto 1fr;4354  gap: 6px 12px;4355  align-items: center;4356  padding: 4px 0;4357}4358.peach-shortcut-key {4359  font-family: var(--font-mono);4360  font-size: 10px;4361  color: var(--peach-t0);4362  background: var(--peach-t3);4363  border-radius: 4px;4364  padding: 2px 6px;4365  white-space: nowrap;4366  text-align: center;4367}4368.peach-shortcut-desc {4369  font-size: 11px;4370  color: var(--peach-t1);4371}43724373/* ── Sort bar trash button ───────────────────────────────────────────── */4374.peach-sort-trash-btn {4375  display: flex;4376  align-items: center;4377  justify-content: center;4378  padding: 3px 5px;4379  background: transparent;4380  border: none;4381  cursor: pointer;4382  color: var(--peach-t2);4383  border-radius: 4px;4384  transition: color 140ms ease, background 140ms ease;4385}4386.peach-sort-trash-btn:hover {4387  color: var(--peach-t1);4388  background: var(--peach-t3);4389}4390.peach-sort-trash-btn.is-active {4391  color: var(--peach-accent);4392}43934394/* Accent color picker */4395.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }4396.peach-accent-picker {4397  display: flex;4398  flex-wrap: wrap;4399  gap: 7px;4400  padding: 2px 0;4401}4402.peach-accent-swatch {4403  width: 22px;4404  height: 22px;4405  border-radius: 50%;4406  border: 2px solid transparent;4407  cursor: pointer;4408  padding: 0;4409  transition: transform 100ms;4410  outline-offset: 2px;4411}4412.peach-accent-swatch:hover { transform: scale(1.15); }4413.peach-accent-swatch.is-active {4414  border-color: var(--peach-t0);4415  transform: scale(1.1);4416}44174418/* ── Card entry styles ───────────────────────────────────────── */4419.peach-card-number {4420  font-family: var(--peach-mono);4421  letter-spacing: 0.08em;4422}44234424.peach-card-network-badge {4425  font-size: 10px;4426  padding: 1px 5px;4427  border-radius: 4px;4428  border: 0.5px solid var(--peach-border);4429  color: var(--peach-text-dim);4430  margin-left: 6px;4431  vertical-align: middle;4432}44334434.peach-card-expiry-row {4435  display: flex;4436  align-items: center;4437  gap: 8px;4438}44394440.peach-card-expiry-sep {4441  color: var(--peach-text-dim);4442}