popup.css

1html,2body,3#app,4#pre-lock,5.popup-root {6  width: 320px;7  min-height: 520px;8  height: 520px;9  margin: 0;10}1112body {13  overflow: hidden;14  background: var(--bg);15  color: var(--t0);16  font-family: var(--font-ui);17  font-weight: 300;18  position: relative;19}2021* {22  box-sizing: border-box;23}2425button,26input,27textarea,28select {29  font: inherit;30}3132button {33  border: 0;34}3536#pre-lock {37  position: absolute;38  inset: 0;39  z-index: 10;40}4142#pre-lock[hidden] {43  display: none;44}4546.popup-root {47  position: relative;48  overflow: hidden;49}5051.peach-theme {52  color: var(--peach-t0);53  font-family: var(--font-ui);54  font-weight: 300;55  box-sizing: border-box;56  text-align: left;57}58.peach-theme, .peach-theme * { box-sizing: inherit; }5960.peach-brand-mark {61  width: 14px;62  height: 14px;63  flex-shrink: 0;64}6566.peach-status-pip.is-hidden {67  display: none;68}6970.peach-status-pip.unlocked {71  background: var(--peach-health-ok);72  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);73}7475.peach-status-pip.pulse {76  animation: pip-pulse 400ms var(--peach-curve-settle) both;77}7879/* Shell */80.peach-shell, .peach-screen {81  background:82    radial-gradient(120% 80% at 0% 0%, rgba(217,104,48,0.08) 0%, transparent 65%),83    radial-gradient(85% 100% at 100% 100%, rgba(217,104,48,0.06) 0%, transparent 70%),84    var(--peach-bg);85  border: 1px solid var(--peach-t3);86  box-shadow:87    0 2px 8px rgba(0,0,0,0.55),88    0 14px 48px rgba(0,0,0,0.7),89    0 0 0 1px rgba(240,232,216,0.04);90  overflow: hidden;91}92.peach-shell {93  display: grid;94  grid-template-rows: auto 1fr;95  min-height: 520px;96  position: relative;97  isolation: isolate;98}99.peach-shell::after {100  content: "";101  position: absolute;102  inset: 2px;103  border: 1px solid rgba(217, 104, 48, 0);104  box-shadow: 0 0 0 rgba(217, 104, 48, 0);105  border-radius: 1px;106  opacity: 0;107  transform: scale(0.998);108  pointer-events: none;109  z-index: 20;110}111.peach-shell.peach-shell--totp-ring::after {112  animation: peach-edge-ring-breath 920ms cubic-bezier(0.2, 0.72, 0.24, 1) both;113}114.peach-shell[data-surface="extension"] {115  width: min(320px, 100vw);116  border-radius: 0;117  height: 520px;118  max-height: 520px;119  overflow: hidden;120}121122/* ── Lock screen – full-window lock/create stage ── */123.lock-screen--vault-stage {124  display: flex;125  flex-direction: column;126  gap: 18px;127  padding: 20px 18px 18px;128  justify-content: flex-start;129}130.lock-screen--vault-stage .peach-lock-panel {131  margin-top: auto;132}133.peach-lock-headline--unlock {134  max-width: 220px;135}136.peach-lock-hero--unlock {137  padding-top: 14px;138}139.peach-lock-panel--unlock {140  gap: 10px;141}142143.peach-lock-restore-link {144  background: transparent;145  border: none;146  cursor: pointer;147  font-family: var(--font-mono);148  font-size: 10px;149  letter-spacing: 0.08em;150  color: var(--t1);151  padding: 5px 0;152  text-align: left;153  transition: color 150ms ease;154}155156.peach-lock-restore-link:hover {157  color: var(--t0);158}159.peach-shell[data-surface="extension"] .peach-stage {160  min-height: 250px;161}162163/* Screen (unlock) */164.peach-screen {165  width: min(320px, 100vw);166  min-height: 100%;167  height: 100%;168  border-radius: 0;169  padding: 16px 20px 18px;170  display: grid;171  gap: 14px;172}173.peach-screen[data-motion-phase="enter"] {174  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;175}176.peach-screen-header { min-height: 20px; }177178/* Wordmark */179.peach-wordmark {180  margin: 0;181  font-family: "Cormorant Garamond", "Times New Roman", serif;182  font-size: 15px;183  font-style: italic;184  letter-spacing: 0.03em;185  color: var(--peach-t0);186  display: inline-flex;187  min-height: 1em;188}189190/* Motion text / char animation */191.peach-motion-text { display: inline-flex; min-height: 1em; }192.peach-motion-char {193  display: inline-block;194  white-space: pre;195  opacity: 0;196  transform: translateY(0.22em);197  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;198  animation-delay: calc(var(--peach-char-index, 0) * 20ms);199}200201/* Chrome */202.peach-chrome {203  position: relative;204  z-index: 10;205  padding: 16px 20px 0;206  display: flex;207  justify-content: space-between;208  align-items: center;209  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense210     fallback) per §15 regression guard. Without pointer-events:none, the211     empty header strip also sits above `.peach-overlay-view` (z-index:2)212     and swallows clicks meant for an overlay's back button / top search. */213  pointer-events: none;214}215.peach-chrome .peach-btn { pointer-events: auto; }216.peach-chrome.is-hidden-for-overlay,217.peach-search-wrap.is-hidden-for-overlay {218  opacity: 0;219  visibility: hidden;220  pointer-events: none;221}222.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }223.peach-status-pip {224  width: 5px;225  height: 5px;226  border-radius: 50%;227  background: var(--peach-t3);228  display: inline-flex;229  flex-shrink: 0;230  transition: background 400ms ease, box-shadow 400ms ease;231}232.peach-chrome-actions { display: flex; gap: 6px; }233234/* Shell body */235.peach-shell-body {236  position: relative;237  display: grid;238  grid-template-rows: 1fr auto;239  min-height: 0;240  min-width: 0;241  width: 100%;242  overflow: hidden;243  height: 100%;244}245.peach-shell-veil {246  position: absolute; inset: 0;247  background: #000; opacity: 0;248  pointer-events: none; z-index: 1;249}250.peach-shell[data-motion-phase="enter"] .peach-shell-body {251  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;252}253.peach-shell[data-motion-phase="exit"] .peach-shell-veil {254  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;255}256257/* Content frame */258.peach-content-frame {259  display: grid;260  grid-template-rows: 1fr auto;261  grid-template-columns: minmax(0, 1fr);262  align-content: start;263  min-height: 0;264  min-width: 0;265  overflow: hidden;266  transition: opacity 80ms ease, transform 80ms ease;267}268.peach-content-frame.navigating {269  opacity: 0.93;270  transform: translateX(2px);271}272.peach-content-frame[data-content-phase="enter"] {273  animation: peach-content-enter 135ms ease-out both;274}275.peach-content-frame[data-content-phase="exit"] {276  animation: peach-content-exit 95ms ease-in forwards;277}278.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }279280/* Stage */281.peach-stage {282  padding: 10px 20px 12px;283  display: grid;284  gap: 12px;285  align-content: start;286  min-width: 0;287  min-height: 0;288  max-width: 100%;289  overflow-y: auto;290  overflow-x: hidden;291  scrollbar-width: none;292  -ms-overflow-style: none;293  overscroll-behavior: contain;294}295.peach-stage::-webkit-scrollbar { display: none; }296297/* Entry name */298.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }299.peach-entry-header {300  position: relative;301  z-index: 1;302  display: flex;303  align-items: flex-start;304  gap: 6px;305  min-width: 0;306}307.peach-entry-header-name {308  flex: 1;309  min-width: 0;310}311.peach-entry-name {312  margin: 0;313  font-family: "Cormorant Garamond", "Times New Roman", serif;314  font-style: italic; font-weight: 400;315  font-size: 44px; line-height: 0.95;316  color: var(--peach-t0);317  display: -webkit-box;318  -webkit-line-clamp: 2;319  -webkit-box-orient: vertical;320  overflow: hidden;321  text-wrap: balance;322}323.peach-entry-name--lg { font-size: 40px; }324.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }325.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }326.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; }327328/* Trash icon in entry header */329.peach-entry-trash-btn {330  flex-shrink: 0;331  padding: 4px;332  margin-top: 4px;333  background: transparent;334  border: none;335  cursor: pointer;336  color: var(--peach-t2);337  border-radius: 4px;338  transition: color 140ms ease, background 140ms ease;339  display: flex;340  align-items: center;341  justify-content: center;342}343.peach-entry-trash-btn:hover {344  color: var(--peach-t1);345  background: var(--peach-t3);346}347.peach-entry-trash-confirm {348  display: flex;349  align-items: center;350  gap: 6px;351  flex-shrink: 0;352  margin-top: 6px;353  flex-wrap: nowrap;354}355.peach-entry-trash-confirm-label {356  font-family: var(--font-mono);357  font-size: 9px;358  letter-spacing: 0.1em;359  color: var(--peach-t2);360  white-space: nowrap;361}362.peach-entry-name-button {363  padding: 0;364  background: transparent;365  text-align: left;366  cursor: pointer;367  max-width: 100%;368  overflow: hidden;369  display: block;370}371.peach-entry-name-char {372  display: inline-block;373  white-space: pre;374  opacity: 0;375  transform: translateY(0.22em);376  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;377  animation-delay: calc(var(--char-index, 0) * 20ms);378}379380/* Domain */381.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }382.peach-domain-row {383  width: 100%; border: 0; background: transparent; color: inherit;384  padding: 0; display: flex; justify-content: space-between; align-items: baseline;385  cursor: default;386}387.peach-domain-value {388  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;389  font-size: 10px; font-style: italic;390  letter-spacing: 0.12em; color: var(--peach-t1);391}392393/* Fields */394.peach-fields { display: grid; gap: 10px; }395.peach-field-card { display: grid; gap: 7px; }396.peach-label {397  font-family: Inter, system-ui, sans-serif;398  text-transform: uppercase; letter-spacing: 0.2em;399  font-size: 8px; color: var(--peach-t2);400}401.peach-field-value-row {402  display: flex; justify-content: space-between;403  align-items: center; gap: 8px;404  min-width: 0;405}406.peach-field-value {407  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;408  font-size: 13px; color: var(--peach-t1);409  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;410  flex: 1;411  min-width: 0;412}413.peach-password-value {414  display: inline-flex;415  align-items: center;416  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;417  font-size: 16px; letter-spacing: 0.3em; color: var(--peach-t0);418  overflow: hidden;419  text-overflow: ellipsis;420  white-space: nowrap;421  flex: 1;422  min-width: 0;423  max-width: 100%;424}425.peach-password-value.is-revealed {426  font-size: 14px;427  letter-spacing: 0.08em;428}429.peach-password-text,430.peach-password-mask {431  display: block;432  width: 100%;433  overflow: hidden;434  text-overflow: ellipsis;435  white-space: nowrap;436}437.peach-field-actions { display: flex; gap: 4px; align-items: center; }438.peach-password-strength { display: flex; align-items: center; gap: 8px; }439.peach-strength-bar { display: flex; gap: 3px; }440.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }441.peach-strength-label {442  font-family: "IBM Plex Mono", monospace;443  font-style: italic;444  font-size: 9px;445  font-weight: 300;446  min-width: 36px;447  text-align: right;448  color: var(--peach-t2);449  letter-spacing: 0.06em;450}451452.peach-strength-hairline {453  display: flex;454  align-items: center;455  gap: 10px;456  margin-top: -2px;457}458459.peach-strength-hairline-track {460  flex: 1;461  height: 3px;462  border-radius: 2px;463  background: var(--peach-s2);464  overflow: hidden;465}466467.peach-strength-hairline-fill {468  height: 100%;469  border-radius: 2px;470  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),471    background 400ms ease;472}473474/* Note content */475.peach-note-content {476  border-top: 1px solid var(--peach-t3);477  padding-top: 10px;478  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;479  font-size: 11px;480  line-height: 1.75;481  color: var(--peach-t1);482  white-space: pre-wrap;483}484485/* ── Inline editing ─────────────────────────────────────────────────── */486487/* Clickable display values */488.peach-inline-clickable {489  cursor: text;490  border-radius: 3px;491  transition: background 150ms ease;492}493.peach-inline-clickable:hover {494  background: rgba(240, 232, 216, 0.05);495}496497/* Subtle "edit" hint that appears on hover */498.peach-inline-edit-hint {499  font-family: Inter, system-ui, sans-serif;500  font-size: 9px;501  text-transform: uppercase;502  letter-spacing: 0.14em;503  color: var(--peach-t2);504  opacity: 0;505  transition: opacity 120ms ease;506  pointer-events: none;507  margin-left: 6px;508  flex-shrink: 0;509}510.peach-domain-row:hover .peach-inline-edit-hint {511  opacity: 1;512}513514/* Title editing */515.peach-inline-title-wrap {516  display: flex;517  flex-direction: column;518  gap: 6px;519}520.peach-inline-title-input {521  font-family: "Cormorant Garamond", "Times New Roman", serif;522  font-style: italic;523  font-weight: 400;524  font-size: 40px;525  line-height: 0.95;526  color: var(--peach-t0);527  background: transparent;528  border: none;529  border-bottom: 1px solid var(--peach-accent);530  outline: none;531  width: 100%;532  padding: 2px 0;533}534535/* Generic inline field */536.peach-inline-field-wrap {537  display: flex;538  flex-direction: column;539  gap: 6px;540}541.peach-inline-input {542  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;543  font-size: 13px;544  color: var(--peach-t0);545  background: transparent;546  border: none;547  border-bottom: 1px solid var(--peach-accent);548  outline: none;549  width: 100%;550  padding: 3px 0;551}552.peach-inline-textarea {553  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;554  font-size: 11px;555  line-height: 1.7;556  color: var(--peach-t0);557  background: rgba(240, 232, 216, 0.04);558  border: 1px solid var(--peach-accent);559  border-radius: 4px;560  outline: none;561  width: 100%;562  padding: 8px;563  resize: vertical;564  min-height: 80px;565}566567/* Save / cancel row */568.peach-inline-actions {569  display: flex;570  gap: 6px;571  align-items: center;572}573.peach-inline-save-btn,574.peach-inline-cancel-btn {575  display: inline-flex;576  align-items: center;577  justify-content: center;578  width: 26px;579  height: 26px;580  border-radius: 4px;581  border: none;582  cursor: pointer;583  transition: background 140ms ease, opacity 140ms ease;584  flex-shrink: 0;585}586.peach-inline-save-btn {587  background: rgba(var(--ac-r, 217), var(--ac-g, 104), var(--ac-b, 48), 0.18);588  color: var(--peach-accent);589}590.peach-inline-save-btn:hover:not(:disabled) {591  background: rgba(var(--ac-r, 217), var(--ac-g, 104), var(--ac-b, 48), 0.30);592}593.peach-inline-cancel-btn {594  background: rgba(240, 232, 216, 0.06);595  color: var(--peach-t2);596}597.peach-inline-cancel-btn:hover:not(:disabled) {598  background: rgba(240, 232, 216, 0.12);599  color: var(--peach-t1);600}601.peach-inline-save-btn:disabled,602.peach-inline-cancel-btn:disabled {603  opacity: 0.4;604  cursor: not-allowed;605}606607/* Inline password generator wrapper */608.peach-inline-generator-wrap {609  margin-top: 10px;610  padding-top: 10px;611  border-top: 1px solid var(--peach-t3);612  display: flex;613  flex-direction: column;614  gap: 8px;615}616.peach-inline-generator-cancel {617  align-self: flex-start;618  font-size: 11px;619  color: var(--peach-t2);620}621622/* "is-editing" card state */623.peach-field-card.is-editing {624  background: rgba(240, 232, 216, 0.02);625  border-radius: 6px;626  padding: 8px;627  margin: -8px;628}629630/* Add notes button */631.peach-add-notes-btn {632  font-size: 11px;633  color: var(--peach-t2);634  margin-top: 6px;635  align-self: flex-start;636  padding: 4px 0;637}638639/* Delete row */640.peach-entry-delete-row {641  display: flex;642  align-items: center;643  gap: 8px;644  padding-top: 18px;645  margin-top: 8px;646  border-top: 1px solid var(--peach-t3);647}648.peach-delete-btn {649  font-size: 11px;650  color: var(--peach-t2);651  padding: 4px 0;652}653.peach-delete-confirm-text {654  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;655  font-size: 11px;656  font-style: italic;657  color: var(--peach-t2);658  flex-shrink: 0;659}660661/* TOTP band */662.peach-totp-band {663  border-top: 1px solid var(--peach-t3);664  padding: 12px 20px 14px;665  position: relative;666  display: grid;667  grid-template-columns: 1fr auto;668  gap: 10px;669}670.peach-totp-main {671  min-width: 0;672}673.peach-totp-code-row {674  display: flex;675  align-items: flex-end;676  gap: 10px;677  min-width: 0;678}679.peach-totp-code {680  margin: 2px 0 0;681  font-family: "Cormorant Garamond", "Times New Roman", serif;682  font-style: italic;683  font-weight: 300;684  font-size: 38px; color: var(--peach-accent);685  line-height: 0.95; min-height: 1em;686  min-width: 0;687}688.peach-totp-code-text {689  display: inline-flex;690  overflow: hidden;691  text-overflow: ellipsis;692  white-space: nowrap;693}694.peach-totp-copy-btn {695  margin-bottom: 2px;696  flex-shrink: 0;697}698.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }699.peach-totp-countdown {700  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;701  font-size: 22px; color: var(--peach-t1);702}703.peach-totp-ring { transform: rotate(-90deg); }704.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }705.peach-totp-ring-progress {706  fill: none; stroke: var(--peach-accent); stroke-width: 2;707  stroke-linecap: round;708  transition: stroke-dashoffset 1s linear, stroke 500ms ease;709}710/* Search bar */711.peach-search-wrap {712  border-top: 1px solid var(--peach-t3);713  background: var(--peach-s1);714  min-height: 54px; position: relative;715}716.peach-search-wrap::before {717  content: "";718  position: absolute;719  left: 0;720  top: 0;721  height: 2px;722  width: var(--peach-totp-progress, 0%);723  background: var(--peach-accent);724  opacity: 0;725  transition: width 1s linear, opacity 180ms ease;726  pointer-events: none;727}728.peach-shell[data-totp-active="true"] .peach-search-wrap::before {729  opacity: 0.9;730}731732@keyframes peach-edge-ring-breath {733  0% {734    opacity: 0;735    border-color: rgba(217, 104, 48, 0);736    box-shadow: 0 0 0 rgba(217, 104, 48, 0);737    transform: scale(0.998);738  }739  36% {740    opacity: 0.88;741    border-color: rgba(217, 104, 48, 0.42);742    box-shadow:743      inset 0 0 0 1px rgba(217, 104, 48, 0.16),744      inset 0 0 16px rgba(217, 104, 48, 0.14),745      0 0 10px rgba(217, 104, 48, 0.08);746    transform: scale(1);747  }748  64% {749    opacity: 0.46;750    border-color: rgba(217, 104, 48, 0.24);751    box-shadow:752      inset 0 0 0 1px rgba(217, 104, 48, 0.1),753      inset 0 0 20px rgba(217, 104, 48, 0.1),754      0 0 12px rgba(217, 104, 48, 0.06);755    transform: scale(1.0005);756  }757  100% {758    opacity: 0;759    border-color: rgba(217, 104, 48, 0);760    box-shadow: 0 0 0 rgba(217, 104, 48, 0);761    transform: scale(1.0012);762  }763}764.peach-search-bar {765  min-height: 54px;766  display: grid;767  grid-template-columns: auto minmax(0, 1fr) auto;768  align-items: center;769  gap: 8px; padding: 0 9px 0 12px;770}771.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }772.peach-search-input {773  border: 0; background: transparent; color: var(--peach-t0);774  font-family: "Cormorant Garamond", "Times New Roman", serif;775  font-style: italic; font-size: 18px;776  outline: none; width: 100%; min-width: 0; padding: 0;777  caret-color: var(--peach-accent);778}779.peach-search-input::placeholder { color: var(--peach-t2); }780.peach-search-meta {781  display: grid;782  grid-auto-flow: column;783  align-items: center;784  justify-content: end;785  gap: 6px;786  min-width: max-content;787}788.peach-search-counter {789  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;790  font-size: 10px; color: var(--peach-t2);791  display: inline-flex;792  align-items: center;793  line-height: 1;794}795.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }796797/* Buttons */798.peach-btn {799  border: 1px solid transparent; border-radius: 12px;800  background: transparent; color: var(--peach-t0);801  font-family: Inter, system-ui, sans-serif;802  font-size: 12px; letter-spacing: 0.02em; padding: 8px 12px;803  cursor: pointer;804  transition:805    background-color var(--peach-dur-80) var(--peach-curve-arrival),806    color var(--peach-dur-80) var(--peach-curve-arrival),807    border-color var(--peach-dur-150) var(--peach-curve-arrival);808}809.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }810.peach-btn:disabled {811  opacity: 0.45;812  cursor: not-allowed;813}814.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 11px; }815.peach-btn--md { min-height: 38px; }816.peach-btn--accent { background: var(--peach-accent); color: rgba(0,0,0,0.75); }817.peach-btn--accent:hover:not(:disabled) { background: var(--peach-accent); filter: brightness(1.12); }818.peach-btn--ghost { border-color: var(--peach-t3); color: var(--peach-t1); }819.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }820.peach-icon-btn {821  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;822  display: inline-flex; align-items: center; justify-content: center;823}824825.peach-btn:focus-visible {826  outline: none;827  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px rgba(217, 104, 48, 0.5);828}829830/* Lock button */831.peach-lock-icon { transform-origin: center; }832.peach-lock-btn.is-locking { color: var(--peach-accent); }833.peach-lock-btn.is-locking .peach-lock-icon {834  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);835}836837/* Copy button */838.peach-copy-btn {839  position: relative; overflow: hidden;840  color: var(--peach-t2); border-color: var(--peach-t3);841}842.peach-copy-icon {843  display: inline-flex; align-items: center; justify-content: center;844  position: relative; z-index: 1;845}846.peach-copy-icon-svg { display: block; }847.peach-copy-sheen {848  position: absolute; inset: 0;849  background: linear-gradient(90deg, rgba(217,104,48,0) 0%, rgba(217,104,48,0.18) 30%, rgba(217,104,48,0.08) 100%);850  opacity: 0; transform: scaleX(0.15); transform-origin: left center;851}852.peach-copy-btn.is-copied {853  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;854  box-shadow:855    0 0 0 1px rgba(217,104,48,0.22),856    0 0 18px rgba(217,104,48,0.2),857    inset 0 0 20px rgba(217,104,48,0.12);858}859.peach-copy-btn.is-copied .peach-copy-icon {860  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;861}862.peach-copy-btn.is-copied .peach-copy-sheen {863  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;864}865.peach-copy-btn.is-retreat {866  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;867}868.peach-copy-btn.is-retreat .peach-copy-sheen {869  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;870}871.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }872.peach-copy-drain-bar {873  display: block; width: 100%; height: 100%;874  background: var(--peach-accent); opacity: 0.7;875  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;876}877878/* Unlock screen elements */879.peach-unlock-headline {880  margin: 2px 0 0;881  font-family: "Cormorant Garamond", "Times New Roman", serif;882  font-size: 52px; line-height: 0.95;883  font-style: italic; font-weight: 400;884}885.peach-subline {886  margin: 0;887  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;888  font-size: 10px; color: var(--peach-t2); font-style: italic;889}890.peach-subline--lock {891  max-width: 248px;892  line-height: 1.5;893}894.peach-underline-input {895  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);896  padding: 6px 0; background: transparent; color: var(--peach-t0);897  outline: none;898  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;899  font-size: 13px;900  caret-color: var(--peach-accent);901}902.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }903.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }904.peach-hint {905  margin: 0;906  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;907  font-size: 10px; color: var(--peach-t2);908}909.peach-unlock-footer {910  margin-top: 4px; display: flex; align-items: center; gap: 7px;911  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;912  font-size: 10px; color: var(--peach-t2);913}914.peach-unlock-footer--lock {915  padding-top: 2px;916}917918/* Breach badge */919.peach-breach-badge {920  display: flex;921  position: relative;922  z-index: 1;923  align-items: center;924  gap: 7px;925  font-size: 9px;926  color: var(--peach-breach);927  padding: 5px 10px;928  margin-bottom: 4px;929  border-radius: 8px;930  background: rgba(220, 80, 60, 0.07);931  border: 1px solid rgba(220, 80, 60, 0.18);932  letter-spacing: 0.04em;933}934935.peach-breach-action {936  margin-left: auto;937  font-size: 10px;938  padding: 3px 8px;939}940941.peach-password-value.is-breached {942  color: rgba(220, 80, 60, 0.75);943  border-bottom: 1px solid rgba(220, 80, 60, 0.22);944}945946/* ── Overlay views ─────────────────────────────────────────────────── */947.peach-overlay-view {948  position: absolute;949  inset: 0;950  display: flex;951  flex-direction: column;952  background:953    radial-gradient(120% 80% at 0% 0%, rgba(217,104,48,0.08) 0%, transparent 65%),954    radial-gradient(85% 100% at 100% 100%, rgba(217,104,48,0.06) 0%, transparent 70%),955    var(--peach-bg);956  z-index: 2;957  overflow: hidden;958  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;959}960@keyframes overlay-in {961  from { opacity: 0; transform: translateY(8px); }962  to   { opacity: 1; transform: translateY(0); }963}964.peach-overlay-view.ov-enter-up {965  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;966}967.peach-overlay-view.ov-exit-up {968  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;969}970.peach-overlay-view.ov-enter-right {971  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;972}973.peach-overlay-view.ov-exit-right {974  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;975}976977@keyframes ov-enter-up {978  from { opacity: 0; transform: translateY(18px); }979  to   { opacity: 1; transform: translateY(0); }980}981@keyframes ov-exit-up {982  from { opacity: 1; transform: translateY(0); }983  to   { opacity: 0; transform: translateY(-12px); }984}985@keyframes ov-enter-right {986  from { opacity: 0; transform: translateX(20px); }987  to   { opacity: 1; transform: translateX(0); }988}989@keyframes ov-exit-right {990  from { opacity: 1; transform: translateX(0); }991  to   { opacity: 0; transform: translateX(20px); }992}993994/* Overlay shared header */995.peach-overlay-header {996  padding: 10px 12px;997  display: flex;998  align-items: center;999  gap: 8px;1000  border-bottom: 1px solid var(--peach-t3);1001  flex-shrink: 0;1002}1003.peach-overlay-title {1004  font-family: "IBM Plex Mono", monospace;1005  font-size: 9px;1006  text-transform: uppercase;1007  letter-spacing: 0.18em;1008  color: var(--peach-t2);1009  flex: 1;1010  text-align: center;1011}10121013.peach-overlay-card {1014  background: var(--peach-s1);1015  border: 1px solid var(--peach-t3);1016  border-radius: 12px;1017  overflow: hidden;1018  width: 100%;1019}10201021.peach-onboarding-alt-actions {1022  display: flex;1023  flex-direction: column;1024  gap: 4px;1025  padding: 0;1026}10271028.peach-settings-copy {1029  margin: 0 0 10px;1030  font-size: 11px;1031  line-height: 1.5;1032  color: var(--peach-t2);1033}10341035.peach-settings-copy strong {1036  color: var(--peach-t0);1037}10381039.peach-settings-copy--spacious {1040  margin-bottom: 12px;1041}10421043.peach-settings-copy--result {1044  color: var(--peach-accent);1045  font-size: 13px;1046  text-align: center;1047  padding: 8px 0;1048}10491050.peach-settings-copy--danger {1051  color: var(--peach-breach);1052}10531054.peach-settings-copy--success {1055  color: var(--peach-accent);1056}10571058.peach-inline-feedback {1059  font-size: 11px;1060  margin: 10px 0 0;1061}10621063.peach-inline-feedback--ok {1064  color: var(--peach-accent);1065}10661067.peach-inline-feedback--error {1068  color: var(--peach-breach);1069}10701071.peach-inline-feedback--muted {1072  color: var(--peach-t2);1073  font-size: 10px;1074  margin: 4px 0;1075}10761077.peach-inline-feedback--spaced {1078  margin-top: 12px;1079}10801081.peach-settings-actions--row {1082  display: flex;1083  gap: 6px;1084}10851086.peach-settings-actions--end {1087  margin-top: 14px;1088  justify-content: flex-end;1089}10901091.peach-settings-stack {1092  display: flex;1093  flex-direction: column;1094  gap: 6px;1095}10961097.peach-settings-stack--tight {1098  gap: 4px;1099}11001101.peach-settings-stack--spacious {1102  gap: 8px;1103}11041105.peach-settings-input {1106  width: 100%;1107  box-sizing: border-box;1108  padding: 8px 10px;1109  background: var(--peach-s2);1110  border: 1px solid var(--peach-t3);1111  border-radius: 6px;1112  color: var(--peach-t0);1113  font-family: var(--font-ui);1114  font-size: 12px;1115  outline: none;1116  transition: border-color 120ms ease;1117}11181119.peach-settings-input:focus {1120  border-color: var(--peach-accent);1121}11221123.peach-settings-input[type="password"] {1124  font-family: var(--font-mono);1125  letter-spacing: 0.04em;1126}11271128.peach-phrase-textarea {1129  width: 100%;1130  box-sizing: border-box;1131  min-height: 120px;1132  padding: 10px 12px;1133  background: var(--peach-s2);1134  border: 1px solid var(--peach-t3);1135  border-radius: 6px;1136  color: var(--peach-t0);1137  font-size: 12px;1138  font-family: "Noto Sans CJK SC", "PingFang SC", monospace;1139  line-height: 1.5;1140  resize: vertical;1141  outline: none;1142}11431144.peach-phrase-textarea:focus {1145  border-color: var(--peach-accent);1146}11471148.peach-hidden-file-input {1149  display: none;1150}11511152.peach-checkbox-note {1153  display: flex;1154  align-items: flex-start;1155  gap: 8px;1156  font-size: 11px;1157  color: var(--peach-t1);1158  cursor: pointer;1159  margin: 12px 0;1160}11611162.peach-checkbox-note input {1163  margin-top: 1px;1164}11651166.peach-cjk-phrase-box {1167  font-family: "Noto Sans CJK SC", "PingFang SC", "Hiragino Sans GB", sans-serif;1168  font-size: 13px;1169  line-height: 1.5;1170  background: var(--peach-s2);1171  border: 1px solid var(--peach-t3);1172  border-radius: 6px;1173  padding: 10px 12px;1174  margin: 0 0 10px;1175  word-break: break-all;1176  white-space: pre-wrap;1177  max-height: 220px;1178  overflow-y: auto;1179  color: var(--peach-t0);1180  user-select: all;1181  scrollbar-width: none;1182  -ms-overflow-style: none;1183}1184.peach-cjk-phrase-box::-webkit-scrollbar { display: none; }11851186.peach-danger-notice {1187  background: rgba(220, 80, 60, 0.08);1188  border: 1px solid rgba(220, 80, 60, 0.2);1189  border-radius: 6px;1190  padding: 9px 11px;1191  font-size: 11px;1192  color: var(--peach-t1);1193  line-height: 1.5;1194}11951196.peach-info-notice {1197  font-size: 11px;1198  color: var(--peach-t2);1199  line-height: 1.5;1200  background: rgba(240, 232, 216, 0.04);1201  border: 1px solid var(--peach-t3);1202  border-radius: 6px;1203  padding: 8px 10px;1204}12051206.peach-strength-row {1207  display: flex;1208  align-items: center;1209  gap: 8px;1210  margin-bottom: 10px;1211}12121213.peach-strength-track {1214  flex: 1;1215  height: 4px;1216  background: var(--peach-s2);1217  border-radius: 2px;1218  overflow: hidden;1219}12201221.peach-strength-fill {1222  height: 100%;1223  border-radius: 2px;1224  transition: width 120ms ease, background 120ms ease;1225}12261227/* ── Type selector tabs ── */1228.peach-type-tabs {1229  display: flex;1230  gap: 0;1231  background: var(--peach-t4);1232  border-radius: 8px;1233  padding: 3px;1234}12351236.peach-type-tab {1237  flex: 1;1238  display: flex;1239  align-items: center;1240  justify-content: center;1241  gap: 6px;1242  padding: 6px 10px;1243  border-radius: 6px;1244  border: none;1245  background: transparent;1246  cursor: pointer;1247  font-family: Inter, system-ui, sans-serif;1248  font-size: 11px;1249  font-weight: 400;1250  letter-spacing: 0.04em;1251  color: var(--peach-t1);1252  transition: background 150ms ease, color 150ms ease;1253}12541255.peach-type-tab.is-active {1256  background: var(--peach-s2);1257  color: var(--peach-t0);1258  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1259}12601261.peach-type-tab:not(.is-active):hover {1262  color: var(--peach-t0);1263}12641265.peach-type-tab svg {1266  opacity: 0.7;1267  flex-shrink: 0;1268}12691270.peach-type-tab.is-active svg {1271  opacity: 1;1272}12731274/* ── List view ───────────────────────────────────────────────────────── */1275.peach-list-top {1276  padding: 0 10px;1277  min-height: 46px;1278  display: flex;1279  align-items: center;1280  gap: 6px;1281  border-bottom: 1px solid var(--peach-t3);1282  flex-shrink: 0;1283  background: var(--peach-s1);1284}1285.peach-vault-list {1286  flex: 1;1287  overflow-y: auto;1288  scrollbar-width: none;1289}1290.peach-vault-list::-webkit-scrollbar { display: none; }12911292/* Scrollbar — vault list */1293.peach-vault-list {1294  scrollbar-width: thin;1295  scrollbar-color: var(--peach-t3) transparent;1296}12971298.peach-vault-list::-webkit-scrollbar {1299  width: 3px;1300}13011302.peach-vault-list::-webkit-scrollbar-thumb {1303  background: var(--peach-t3);1304  border-radius: 2px;1305}13061307.peach-entry-row {1308  width: 100%;1309  display: flex;1310  align-items: center;1311  gap: 10px;1312  padding: 9px 16px;1313  background: transparent;1314  border: none;1315  border-bottom: 1px solid var(--peach-t3);1316  cursor: pointer;1317  color: inherit;1318  text-align: left;1319  transition: background 80ms ease;1320}1321.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1322.peach-entry-row:last-child { border-bottom: none; }1323.peach-entry-row.is-active {1324  box-shadow: inset 2px 0 0 var(--peach-accent);1325  background: rgba(240,232,216,0.03);1326}1327.peach-entry-row-icon {1328  width: 26px; height: 26px;1329  border-radius: 7px;1330  border: 1px solid var(--peach-t3);1331  display: flex; align-items: center; justify-content: center;1332  color: var(--peach-t2);1333  flex-shrink: 0;1334}1335.peach-entry-row-icon.is-breach {1336  border-color: rgba(220,80,60,0.3);1337  color: rgba(220,80,60,0.7);1338}1339.peach-entry-row-info { flex: 1; min-width: 0; }1340.peach-entry-row-name {1341  display: block;1342  font-family: "Cormorant Garamond", serif;1343  font-size: 17px;1344  font-style: italic;1345  font-weight: 400;1346  color: var(--peach-t0);1347  line-height: 1.2;1348  white-space: nowrap;1349  overflow: hidden;1350  text-overflow: ellipsis;1351}1352.peach-entry-row-meta {1353  display: block;1354  font-family: "IBM Plex Mono", monospace;1355  font-size: 9px;1356  color: var(--peach-t2);1357  margin-top: 1px;1358  letter-spacing: 0.05em;1359}1360.peach-entry-row-dot {1361  width: 5px; height: 5px;1362  border-radius: 50%;1363  background: rgba(220,80,60,0.7);1364  flex-shrink: 0;1365}1366.peach-new-entry-row {1367  display: flex;1368  align-items: center;1369  justify-content: center;1370  gap: 6px;1371  width: 100%;1372  padding: 11px;1373  background: transparent;1374  border: none;1375  border-top: 1px solid var(--peach-t3);1376  color: var(--peach-t2);1377  font-family: "IBM Plex Mono", monospace;1378  font-size: 9px;1379  text-transform: uppercase;1380  letter-spacing: 0.14em;1381  cursor: pointer;1382  flex-shrink: 0;1383  transition: color 120ms ease, background 120ms ease;1384}1385.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }13861387/* ── Multi-select mode ─────────────────────────────────────────────── */13881389/* Select-mode trigger button in sort bar — same shape as trash btn */1390.peach-sort-select-btn {1391  display: flex;1392  align-items: center;1393  justify-content: center;1394  padding: 3px 5px;1395  background: transparent;1396  border: none;1397  cursor: pointer;1398  color: var(--peach-t2);1399  border-radius: 4px;1400  transition: color 140ms ease, background 140ms ease;1401}1402.peach-sort-select-btn:hover {1403  color: var(--peach-t1);1404  background: var(--peach-t3);1405}14061407/* Sort bar in select mode */1408.peach-select-cancel-btn {1409  background: transparent;1410  border: none;1411  padding: 0 4px;1412  cursor: pointer;1413  font-family: "IBM Plex Mono", monospace;1414  font-size: 9px;1415  letter-spacing: 0.12em;1416  text-transform: uppercase;1417  color: var(--peach-t2);1418  transition: color 140ms ease;1419  flex-shrink: 0;1420}1421.peach-select-cancel-btn:hover { color: var(--peach-t0); }14221423.peach-select-count-label {1424  flex: 1;1425  text-align: center;1426  font-family: "IBM Plex Mono", monospace;1427  font-size: 9px;1428  letter-spacing: 0.14em;1429  text-transform: uppercase;1430  color: var(--peach-t1);1431}14321433.peach-select-all-btn {1434  background: transparent;1435  border: none;1436  padding: 0 4px;1437  cursor: pointer;1438  font-family: "IBM Plex Mono", monospace;1439  font-size: 9px;1440  letter-spacing: 0.12em;1441  text-transform: uppercase;1442  color: var(--peach-t2);1443  transition: color 140ms ease;1444  flex-shrink: 0;1445}1446.peach-select-all-btn:hover { color: var(--peach-accent); }14471448/* List in select mode */1449.peach-vault-list.is-selecting .peach-entry-row {1450  cursor: default;1451}1452.peach-vault-list.is-selecting .peach-entry-row:hover {1453  background: rgba(240,232,216,0.02);1454}1455.peach-vault-list.is-selecting .peach-entry-row.is-selected {1456  background: rgba(217,104,48,0.06);1457}1458.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1459  background: rgba(217,104,48,0.1);1460}14611462/* Select indicator circles in icon slot */1463.peach-entry-row-icon.is-select-icon {1464  color: var(--peach-t2);1465}1466.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1467  color: var(--peach-accent);1468}14691470/* Delete action bar at bottom (replaces new-entry row) */1471.peach-select-action-bar {1472  display: flex;1473  align-items: center;1474  justify-content: center;1475  gap: 7px;1476  width: 100%;1477  padding: 11px;1478  background: transparent;1479  border: none;1480  border-top: 1px solid var(--peach-t3);1481  color: var(--peach-t1);1482  font-family: "IBM Plex Mono", monospace;1483  font-size: 9px;1484  text-transform: uppercase;1485  letter-spacing: 0.14em;1486  cursor: pointer;1487  flex-shrink: 0;1488  transition: color 120ms ease, background 120ms ease;1489}1490.peach-select-action-bar:not(:disabled):hover {1491  color: var(--peach-t0);1492  background: rgba(220,80,60,0.06);1493}1494.peach-select-action-bar:not(:disabled):hover svg {1495  stroke: rgba(220,80,60,0.8);1496}1497.peach-select-action-bar:disabled,1498.peach-select-action-bar.is-empty {1499  color: var(--peach-t2);1500  cursor: default;1501  opacity: 0.5;1502}1503.peach-search-counter-list {1504  white-space: nowrap;1505  flex-shrink: 0;1506}1507.peach-list-empty {1508  min-height: 180px;1509  display: grid;1510  place-items: center;1511  color: var(--peach-t2);1512  font-family: "IBM Plex Mono", monospace;1513  font-size: 11px;1514}15151516/* ── Settings view ───────────────────────────────────────────────────── */1517.peach-settings-body {1518  flex: 1;1519  overflow-y: auto;1520  min-height: 0;1521  display: flex;1522  flex-direction: column;1523  padding: 2px 0 10px;1524}1525.peach-settings-group {1526  padding: 9px 16px 11px;1527  border-bottom: 1px solid var(--peach-t3);1528}1529.peach-export-intro {1530  padding-bottom: 8px;1531}1532.peach-export-card {1533  display: grid;1534  gap: 10px;1535}1536.peach-export-card--primary {1537  background:1538    linear-gradient(180deg, rgba(217,104,48,0.08), rgba(217,104,48,0.02));1539}1540.peach-export-card-head {1541  display: flex;1542  align-items: center;1543  justify-content: space-between;1544  gap: 10px;1545}1546.peach-export-card-copy {1547  margin: 0;1548  font-size: 12px;1549  line-height: 1.55;1550  color: var(--peach-t1);1551}1552.peach-export-note {1553  margin: 0;1554  font-size: 10px;1555  line-height: 1.5;1556  color: var(--peach-t2);1557}1558.peach-export-pill {1559  display: inline-flex;1560  align-items: center;1561  padding: 4px 8px;1562  border-radius: 999px;1563  border: 1px solid rgba(217,104,48,0.22);1564  background: rgba(217,104,48,0.08);1565  color: var(--peach-accent);1566  font-family: "IBM Plex Mono", monospace;1567  font-size: 8px;1568  letter-spacing: 0.12em;1569  text-transform: uppercase;1570  white-space: nowrap;1571}1572.peach-export-pill--danger {1573  border-color: rgba(220,80,60,0.22);1574  background: rgba(220,80,60,0.08);1575  color: var(--peach-breach);1576}1577.peach-export-password-stack {1578  gap: 8px;1579}1580.peach-settings-label {1581  margin: 0 0 6px;1582  font-family: "IBM Plex Mono", monospace;1583  font-size: 8px;1584  text-transform: uppercase;1585  letter-spacing: 0.18em;1586  color: var(--peach-t2);1587}1588.peach-settings-row {1589  display: flex;1590  align-items: center;1591  justify-content: space-between;1592  gap: 12px;1593  min-height: 34px;1594  padding: 6px 0;1595  font-size: 13px;1596  color: var(--peach-t1);1597}1598.peach-settings-row--meta { color: var(--peach-t2); font-size: 12px; }1599.peach-settings-value {1600  font-family: "IBM Plex Mono", monospace;1601  font-size: 10px;1602  color: var(--peach-t2);1603}16041605.peach-settings-value--status {1606  display: flex;1607  align-items: center;1608  gap: 6px;1609}16101611.peach-settings-row--stack {1612  flex-direction: column;1613  align-items: stretch;1614  gap: 6px;1615}16161617.peach-settings-row--top {1618  align-items: flex-start;1619}16201621.peach-settings-row-main {1622  display: flex;1623  flex-direction: column;1624  gap: 4px;1625  flex: 1;1626}1627.peach-toggle {1628  width: 28px; height: 16px;1629  border-radius: 999px;1630  background: var(--peach-t3);1631  border: 1px solid var(--peach-t3);1632  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1633  flex-shrink: 0;1634  transition: background 200ms ease, border-color 200ms ease;1635  cursor: pointer;1636}1637.peach-toggle.is-on {1638  background: rgba(217,104,48,0.22);1639  border-color: rgba(217,104,48,0.4);1640}1641.peach-toggle-knob {1642  width: 10px; height: 10px;1643  border-radius: 50%;1644  background: var(--peach-t2);1645  flex-shrink: 0;1646  transform: translateX(0px);1647  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1648}1649.peach-toggle.is-on .peach-toggle-knob {1650  background: var(--peach-accent);1651  transform: translateX(12px);1652}1653.peach-settings-footer {1654  display: flex;1655  align-items: center;1656  gap: 8px;1657  margin-top: auto;1658  padding: 14px 16px 8px;1659  font-family: "IBM Plex Mono", monospace;1660  font-size: 9px;1661  color: var(--peach-t2);1662}16631664.peach-passkey-badge {1665  margin-left: 8px;1666  font-size: 10px;1667  letter-spacing: 0.06em;1668  text-transform: uppercase;1669  color: var(--peach-t2);1670  font-family: var(--font-ui);1671  vertical-align: middle;1672}16731674.peach-passkey-delete-btn {1675  color: var(--peach-breach);1676  border-color: rgba(229, 85, 85, 0.25);1677}16781679.peach-passkey-delete-confirm {1680  display: flex;1681  align-items: center;1682  gap: 8px;1683  padding: 8px 10px;1684  background: rgba(229, 85, 85, 0.06);1685  border: 1px solid rgba(229, 85, 85, 0.2);1686  border-radius: 6px;1687}16881689.peach-passkey-delete-confirm-copy {1690  flex: 1;1691  font-size: 11px;1692  color: var(--peach-t1);1693}16941695.peach-passkey-delete-btn--confirm {1696  color: var(--peach-breach);1697  border-color: rgba(229, 85, 85, 0.4);1698}16991700.peach-passkey-activity {1701  flex-direction: column;1702  align-items: flex-start;1703  gap: 4px;1704}17051706.peach-passkey-meta {1707  font-size: 11px;1708  color: var(--peach-t2);1709}17101711.peach-passkey-actions {1712  position: relative;1713  z-index: 1;1714  margin-top: 14px;1715  display: flex;1716  flex-direction: column;1717  gap: 8px;1718}17191720.peach-passkey-approval {1721  display: flex;1722  flex-direction: column;1723  align-items: center;1724  padding: 28px 22px 22px;1725  gap: 14px;1726  text-align: center;1727}17281729.peach-passkey-approval-icon {1730  width: 46px;1731  height: 46px;1732  border-radius: 12px;1733  background: var(--peach-s2);1734  border: 1px solid var(--peach-t3);1735  display: flex;1736  align-items: center;1737  justify-content: center;1738  flex-shrink: 0;1739  color: var(--peach-accent);1740}17411742.peach-passkey-approval-icon img,1743.peach-passkey-approval-icon svg {1744  width: 28px;1745  height: 28px;1746  border-radius: 6px;1747}17481749.peach-passkey-approval-rp {1750  font-family: var(--font-ui);1751  font-size: 12px;1752  color: var(--peach-t2);1753  letter-spacing: 0.03em;1754}17551756.peach-passkey-approval-action {1757  font-family: var(--font-display);1758  font-style: italic;1759  font-weight: 300;1760  font-size: 26px;1761  color: var(--peach-t0);1762  line-height: 1;1763}17641765.peach-passkey-approval-user {1766  font-family: var(--font-mono);1767  font-size: 11px;1768  color: var(--peach-t1);1769  background: var(--peach-s2);1770  border: 1px solid var(--peach-t3);1771  border-radius: 4px;1772  padding: 3px 8px;1773}17741775.peach-passkey-approval-notice {1776  font-size: 10px;1777  color: var(--peach-t2);1778  line-height: 1.5;1779  max-width: 220px;1780}17811782.peach-passkey-approval-actions {1783  display: flex;1784  gap: 8px;1785  width: 100%;1786  margin-top: 6px;1787}17881789.peach-passkey-approval-actions .peach-btn {1790  flex: 1;1791}17921793/* ── Inline generator drawer ── */1794.peach-generator-drawer {1795  display: grid;1796  grid-template-rows: 0fr;1797  transition: grid-template-rows 320ms var(--peach-curve-arrival);1798  overflow: hidden;1799}1800.peach-generator-drawer.is-open {1801  grid-template-rows: 1fr;1802}1803.peach-generator-drawer-inner {1804  min-height: 0;1805  overflow: hidden;1806}1807.peach-generator-drawer-content {1808  border-top: 1px solid var(--peach-t3);1809  padding: 8px 0 4px;1810  display: flex;1811  flex-direction: column;1812  gap: 8px;1813}18141815/* ── Compact generator (inside entry edit) ── */1816.peach-generator-drawer-content--compact {1817  border-top: 1px solid var(--peach-t3);1818  padding: 8px 0 2px;1819  gap: 7px;1820}1821.peach-pwgen-compact-display-row {1822  display: flex;1823  align-items: center;1824  gap: 6px;1825}1826.peach-pwgen-compact-output {1827  flex: 1;1828  min-width: 0;1829  font-family: "IBM Plex Mono", monospace;1830  font-size: 11px;1831  font-weight: 400;1832  letter-spacing: 0.04em;1833  color: var(--peach-t0);1834  background: rgba(240, 232, 216, 0.04);1835  border: 1px solid var(--peach-t3);1836  border-radius: 5px;1837  padding: 5px 8px;1838  word-break: break-all;1839  line-height: 1.5;1840}1841.peach-pwgen-compact-controls {1842  display: flex;1843  align-items: center;1844  gap: 6px;1845}1846.peach-pwgen-compact-slider {1847  flex: 1;1848  min-width: 0;1849  height: 2px !important;1850}1851.peach-pwgen-compact-controls .peach-pwgen-len-num {1852  flex-shrink: 0;1853  min-width: 18px;1854  text-align: right;1855}1856.peach-pwgen-compact-pills {1857  display: flex;1858  gap: 3px;1859  flex-shrink: 0;1860}1861.peach-pwgen-compact-pills .peach-pwgen-pill {1862  padding: 2px 7px;1863  font-size: 8px;1864}1865.peach-pwgen-compact-use {1866  flex-shrink: 0;1867  font-size: 10px !important;1868  padding: 3px 9px !important;1869  min-height: 22px !important;1870  border-radius: 5px !important;1871}18721873/* ── Password edit row (input + eye toggle side-by-side) ── */1874.peach-password-edit-row {1875  display: flex;1876  align-items: center;1877  gap: 6px;1878}1879.peach-password-edit-row .peach-inline-input {1880  flex: 1;1881  min-width: 0;1882}18831884/* ── Generate toggle link ── */1885.peach-generate-toggle-link {1886  display: inline-flex;1887  align-items: center;1888  gap: 5px;1889  background: none;1890  border: none;1891  padding: 0;1892  cursor: pointer;1893  font-family: "IBM Plex Mono", monospace;1894  font-size: 10px;1895  color: var(--peach-t2);1896  letter-spacing: 0.04em;1897  transition: color 120ms ease;1898  align-self: flex-start;1899}1900.peach-generate-toggle-link:hover {1901  color: var(--peach-accent);1902}19031904/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */1905.peach-entry-body {1906  flex: 1;1907  overflow-y: auto;1908  overflow-x: hidden;1909  scrollbar-width: none;1910  -ms-overflow-style: none;1911  overscroll-behavior: contain;1912  display: grid;1913  gap: 10px;1914  align-content: start;1915  padding: 10px 20px 14px;1916  min-width: 0;1917  min-height: 0;1918}1919.peach-entry-body::-webkit-scrollbar { display: none; }19201921/* Type-toggle pills (new entry only) */1922.peach-new-type-row {1923  display: flex;1924  gap: 6px;1925  margin-bottom: 2px;1926}1927.peach-new-type-btn {1928  background: transparent;1929  border: 1px solid var(--peach-t3);1930  border-radius: 12px;1931  padding: 3px 10px;1932  font-family: "IBM Plex Mono", monospace;1933  font-size: 9px;1934  letter-spacing: 0.12em;1935  text-transform: uppercase;1936  color: var(--peach-t2);1937  cursor: pointer;1938  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;1939}1940.peach-new-type-btn.is-active {1941  color: var(--peach-t0);1942  border-color: var(--peach-accent);1943  background: rgba(217, 104, 48, 0.08);1944}1945.peach-new-type-btn:not(.is-active):hover {1946  color: var(--peach-t1);1947  border-color: var(--peach-t2);1948}19491950/* Editable title */1951.peach-new-title-wrap { margin: 0 0 2px; }1952.peach-new-title-input {1953  background: transparent;1954  border: none;1955  outline: none;1956  width: 100%;1957  color: var(--peach-t0);1958  font-family: "Cormorant Garamond", Georgia, serif;1959  font-style: italic;1960  font-weight: 400;1961  font-size: 40px;1962  line-height: 0.95;1963  caret-color: var(--peach-accent);1964}1965.peach-new-title-input::placeholder { color: var(--peach-t2); }19661967/* Editable domain field */1968.peach-domain-value--edit {1969  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1970  font-size: 10px;1971  font-style: italic;1972  letter-spacing: 0.12em;1973  color: var(--peach-t1);1974  background: transparent;1975  border: none;1976  border-bottom: 1px solid var(--peach-t3);1977  outline: none;1978  width: 100%;1979  padding: 2px 0;1980  caret-color: var(--peach-accent);1981  transition: border-color 140ms ease, color 140ms ease;1982}1983.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }1984.peach-domain-value--edit:focus {1985  border-bottom-color: rgba(240, 232, 216, 0.28);1986  color: var(--peach-t0);1987}19881989/* Editable field values (username, password, totp) */1990.peach-field-value--edit {1991  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1992  font-size: 13px;1993  color: var(--peach-t0);1994  background: transparent;1995  border: none;1996  border-bottom: 1px solid var(--peach-t3);1997  outline: none;1998  flex: 1;1999  min-width: 0;2000  padding: 3px 0;2001  caret-color: var(--peach-accent);2002  transition: border-color 140ms ease, color 140ms ease;2003}2004.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2005.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2006.peach-field-value--edit:focus {2007  border-bottom-color: rgba(240, 232, 216, 0.28);2008  color: var(--peach-t0);2009}20102011/* "+ add optional field" links */2012.peach-entry-add-links {2013  display: flex;2014  gap: 12px;2015  flex-wrap: wrap;2016  margin-top: -2px;2017}2018.peach-add-field-link {2019  background: transparent;2020  border: none;2021  padding: 0;2022  cursor: pointer;2023  font-family: "IBM Plex Mono", monospace;2024  font-size: 9px;2025  letter-spacing: 0.1em;2026  text-transform: uppercase;2027  color: var(--peach-t2);2028  transition: color 140ms ease;2029}2030.peach-add-field-link:hover { color: var(--peach-accent); }20312032/* ── New entry form (legacy classes) ────────────────────────────────── */2033.peach-new-body {2034  flex: 1;2035  overflow-y: auto;2036  padding: 10px 20px 14px;2037}2038.peach-new-name-input {2039  background: transparent;2040  border: none;2041  outline: none;2042  width: 100%;2043  color: var(--peach-t0);2044  font-family: "Cormorant Garamond", Georgia, serif;2045  font-style: italic;2046  font-weight: 400;2047  font-size: 40px;2048  line-height: 0.95;2049  caret-color: var(--peach-accent);2050}2051.peach-new-name-input::placeholder { color: var(--peach-t2); }2052.peach-new-field-input {2053  background: transparent;2054  border: none;2055  outline: none;2056  flex: 1;2057  min-width: 0;2058  caret-color: var(--peach-accent);2059}2060.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }20612062/* ── Canary card ── */2063.peach-canary-card {2064  border: 1px solid rgba(217, 160, 48, 0.2);2065  background: rgba(217, 160, 48, 0.03);2066  border-radius: 8px;2067  padding: 12px;2068}20692070.peach-canary-settings-header {2071  display: flex;2072  align-items: center;2073  justify-content: space-between;2074  cursor: pointer;2075  user-select: none;2076}20772078.peach-canary-card .peach-label {2079  color: rgba(217, 160, 48, 0.85);2080}20812082.peach-canary-card .peach-new-field-input {2083  border-color: rgba(217, 160, 48, 0.25);2084}20852086.peach-canary-card .peach-new-field-input:focus {2087  border-color: rgba(217, 160, 48, 0.5);2088}20892090.peach-canary-body {2091  margin-top: 12px;2092  display: flex;2093  flex-direction: column;2094  gap: 10px;2095}20962097.peach-canary-explainer {2098  display: flex;2099  gap: 10px;2100  padding: 10px 12px;2101  border-radius: 10px;2102  background: rgba(217, 160, 48, 0.06);2103  border: 1px solid rgba(217, 160, 48, 0.22);2104  margin-bottom: 4px;2105}21062107.peach-canary-explainer-icon {2108  font-size: 16px;2109  flex-shrink: 0;2110  line-height: 1.2;2111}21122113.peach-canary-explainer-title {2114  font-family: var(--font-ui);2115  font-size: 11px;2116  font-weight: 500;2117  color: rgba(217, 160, 48, 0.9);2118  margin: 0 0 3px;2119}21202121.peach-canary-explainer-copy {2122  font-family: var(--font-ui);2123  font-size: 10px;2124  color: var(--peach-t2);2125  line-height: 1.55;2126  margin: 0;2127}21282129.peach-canary-hint {2130  font-size: 10px;2131  color: var(--peach-t2);2132  font-family: Inter, system-ui, sans-serif;2133  line-height: 1.5;2134  margin-top: 4px;2135}21362137.peach-canary-actions-row {2138  display: flex;2139  align-items: center;2140  gap: 8px;2141}21422143.peach-canary-test-btn {2144  border-color: rgba(217, 160, 48, 0.3);2145  color: rgba(217, 160, 48, 0.85);2146}21472148.peach-canary-test-result {2149  font-size: 10px;2150  font-family: Inter, system-ui, sans-serif;2151}21522153.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2154.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }21552156.peach-canary-badge {2157  display: flex;2158  position: relative;2159  z-index: 1;2160  align-items: center;2161  gap: 5px;2162  padding: 4px 10px;2163  background: rgba(217, 160, 48, 0.12);2164  border: 1px solid rgba(217, 160, 48, 0.35);2165  border-radius: 6px;2166  margin-bottom: 6px;2167  width: fit-content;2168}21692170.peach-canary-badge-label {2171  font-size: 10px;2172  letter-spacing: 0.06em;2173  color: rgba(217, 160, 48, 0.9);2174  font-family: var(--font-ui);2175  text-transform: uppercase;2176}21772178.peach-canary-badge-icon {2179  font-size: 11px;2180}21812182.peach-canary-suppress-row {2183  display: flex;2184  align-items: center;2185  gap: 8px;2186  padding: 6px 10px;2187  background: rgba(217, 160, 48, 0.08);2188  border-radius: 6px;2189  margin-bottom: 8px;2190}21912192.peach-canary-suppress-label {2193  font-size: 11px;2194  color: rgba(217, 160, 48, 0.85);2195  cursor: pointer;2196  font-family: var(--font-ui);2197  letter-spacing: 0.04em;2198}21992200.peach-regen-panel {2201  position: relative;2202  z-index: 1;2203  background: rgba(217, 104, 48, 0.08);2204  border: 1px solid rgba(217, 104, 48, 0.25);2205  border-radius: 8px;2206  padding: 12px;2207  margin-bottom: 8px;2208}22092210.peach-regen-panel-header {2211  display: flex;2212  align-items: center;2213  justify-content: space-between;2214  margin-bottom: 10px;2215}22162217.peach-regen-panel-title {2218  font-size: 11px;2219  font-weight: 600;2220  letter-spacing: 0.06em;2221  text-transform: uppercase;2222  color: rgba(217, 104, 48, 0.9);2223}22242225.peach-regen-output {2226  background: rgba(0, 0, 0, 0.2);2227  border-radius: 6px;2228  padding: 10px;2229  margin-bottom: 10px;2230  font-family: var(--font-mono);2231  font-size: 13px;2232  word-break: break-all;2233  color: var(--peach-t1);2234}22352236.peach-regen-actions {2237  display: flex;2238  gap: 6px;2239}22402241.peach-regen-actions--spaced {2242  margin-bottom: 8px;2243}22442245.peach-regen-action-grow {2246  flex: 1;2247}22482249.peach-regen-copy-btn {2250  padding: 0 8px;2251}22522253.peach-regen-success {2254  position: relative;2255  z-index: 1;2256  background: rgba(40, 180, 80, 0.1);2257  border: 1px solid rgba(40, 180, 80, 0.3);2258  border-radius: 8px;2259  padding: 10px 12px;2260  margin-bottom: 8px;2261  display: flex;2262  align-items: center;2263  gap: 8px;2264  font-size: 11px;2265  color: rgba(40, 180, 80, 0.9);2266}22672268/* ── Note textarea ── */2269.peach-note-textarea {2270  width: 100%;2271  min-height: 180px;2272  max-height: 280px;2273  resize: vertical;2274  background: var(--peach-t4);2275  border: 1px solid var(--peach-t3);2276  border-radius: 8px;2277  padding: 10px 12px;2278  font-family: "IBM Plex Mono", monospace;2279  font-size: 12px;2280  line-height: 1.7;2281  color: var(--peach-t1);2282  outline: none;2283  transition: border-color 150ms ease;2284}22852286.peach-note-textarea:focus {2287  border-color: var(--peach-t2);2288}22892290.peach-note-char-count {2291  font-family: "IBM Plex Mono", monospace;2292  font-size: 9px;2293  color: var(--peach-t3);2294  text-align: right;2295  margin-top: 4px;2296  letter-spacing: 0.1em;2297}22982299/* ── Field input baseline ── */2300.peach-new-field-input {2301  width: 100%;2302  background: transparent;2303  border: none;2304  border-bottom: 1px solid var(--peach-t3);2305  padding: 4px 0;2306  color: var(--peach-t1);2307  font-family: "IBM Plex Mono", monospace;2308  font-size: 13px;2309  outline: none;2310  transition: border-color 150ms ease;2311}23122313.peach-new-field-input:focus {2314  border-bottom-color: var(--peach-t0);2315  color: var(--peach-t0);2316}23172318.peach-new-name-input {2319  width: 100%;2320  background: transparent;2321  border: none;2322  border-bottom: 1px solid var(--peach-t3);2323  padding: 6px 0;2324  font-family: "Cormorant Garamond", Georgia, serif;2325  font-style: italic;2326  font-size: 28px;2327  color: var(--peach-t0);2328  outline: none;2329  transition: border-color 150ms ease;2330}23312332.peach-new-name-input:focus {2333  border-bottom-color: var(--peach-t1);2334}23352336.peach-new-name-input::placeholder {2337  color: var(--peach-t2);2338  font-style: italic;2339}23402341.peach-new-field-input::placeholder {2342  color: var(--peach-t3);2343}23442345/* ── Demo entrance animation ── */2346#hd-shell {2347  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;2348}2349@keyframes hd-shell-enter {2350  from { opacity: 0; transform: scale(0.96) translateY(16px); }2351  to   { opacity: 1; transform: scale(1) translateY(0); }2352}23532354/* ── Keyframes ── */2355@keyframes peach-char-enter {2356  from { opacity: 0; transform: translateY(0.22em); }2357  to   { opacity: 1; transform: translateY(0); }2358}2359@keyframes peach-content-enter {2360  from { opacity: 0.96; transform: translateY(4px); }2361  to   { opacity: 1; transform: translateY(0); }2362}2363@keyframes peach-content-exit {2364  from { opacity: 1; transform: translateY(0); }2365  to   { opacity: 0.92; transform: translateY(-3px); }2366}2367@keyframes peach-screen-enter {2368  from { opacity: 0; transform: translateY(14px); }2369  to   { opacity: 1; transform: translateY(0); }2370}2371@keyframes peach-shell-fade-in {2372  from { opacity: 0; }2373  to   { opacity: 1; }2374}2375@keyframes peach-veil-in {2376  from { opacity: 0; }2377  to   { opacity: 1; }2378}2379@keyframes peach-lock-settle {2380  0%   { transform: scale(0.9); }2381  65%  { transform: scale(1.08); }2382  100% { transform: scale(1); }2383}2384@keyframes peach-copy-confirm {2385  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2386  to   { color: var(--peach-accent); border-color: rgba(217,104,48,0.42); background-color: rgba(217,104,48,0.09); box-shadow: 0 0 18px rgba(217,104,48,0.22), inset 0 0 18px rgba(217,104,48,0.12); }2387}2388@keyframes peach-copy-retreat {2389  from { color: var(--peach-accent); border-color: rgba(217,104,48,0.42); background-color: rgba(217,104,48,0.09); box-shadow: 0 0 18px rgba(217,104,48,0.22), inset 0 0 18px rgba(217,104,48,0.12); }2390  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }2391}2392@keyframes peach-copy-flood {2393  from { opacity: 0; transform: scaleX(0.15); }2394  to   { opacity: 1; transform: scaleX(1); }2395}2396@keyframes peach-copy-icon-settle {2397  from  { transform: scale(0.84); }2398  70%   { transform: scale(1.08); }2399  to    { transform: scale(1); }2400}2401@keyframes peach-copy-sheen-retreat {2402  from { opacity: 1; transform: scaleX(1); }2403  to   { opacity: 0; transform: scaleX(0.15); }2404}2405@keyframes peach-copy-drain {2406  from { width: 100%; }2407  to   { width: 0; }2408}2409@keyframes peach-shake {2410  0%, 100% { transform: translateX(0); }2411  20%      { transform: translateX(-6px); }2412  40%      { transform: translateX(6px); }2413  60%      { transform: translateX(-4px); }2414  80%      { transform: translateX(4px); }2415}24162417@keyframes pip-pulse {2418  0% { transform: scale(1); }2419  40% { transform: scale(2.2); }2420  100% { transform: scale(1); }2421}242224232424/* ── Password generator ── */2425.peach-pwgen-body {2426  flex: 1; overflow-y: auto;2427  display: flex; flex-direction: column;2428}2429.peach-policy-badge {2430  display: flex; align-items: center;2431  padding: 6px 20px 0;2432  font-size: 10px; font-family: Inter, sans-serif;2433  color: var(--peach-t2); letter-spacing: 0.04em;2434}2435.peach-pwgen-display {2436  padding: 14px 20px 12px;2437  border-bottom: 1px solid var(--peach-t3);2438  display: flex; align-items: flex-start; gap: 10px;2439}2440.peach-pwgen-display-row {2441  display: flex;2442  align-items: flex-start;2443  gap: 8px;2444  padding-bottom: 8px;2445  border-bottom: 1px solid var(--peach-t3);2446}2447.peach-pwgen-output {2448  flex: 1; min-width: 0; margin: 0;2449  font-family: "IBM Plex Mono", monospace;2450  font-size: 13px; color: var(--peach-t0);2451  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;2452  white-space: normal;2453  padding: 10px 12px;2454  background: var(--peach-t4);2455  border-radius: 6px;2456  min-height: 36px;2457}2458.peach-pwgen-output-display {2459  flex: 1;2460  min-width: 0;2461  margin: 0;2462  font-family: "Cormorant Garamond", "Times New Roman", serif;2463  font-style: italic;2464  font-weight: 300;2465  font-size: 32px;2466  line-height: 1.05;2467  color: var(--peach-t0);2468  word-break: break-all;2469  overflow-wrap: break-word;2470  white-space: normal;2471  letter-spacing: 0.02em;2472}2473.peach-pwgen-display-actions {2474  display: flex;2475  flex-direction: column;2476  gap: 4px;2477  flex-shrink: 0;2478  margin-top: 2px;2479}2480.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }2481.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }2482.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }2483.peach-pwgen-len-num {2484  font-family: "IBM Plex Mono", monospace;2485  font-size: 12px; color: var(--peach-accent);2486}2487.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }2488.peach-pwgen-toggles { display: flex; flex-direction: column; }2489.peach-pwgen-charset-pills {2490  display: flex;2491  gap: 6px;2492  flex-wrap: wrap;2493}2494.peach-pwgen-pill {2495  padding: 4px 11px;2496  border-radius: 999px;2497  border: 1px solid var(--peach-t3);2498  background: transparent;2499  color: var(--peach-t2);2500  font-family: "IBM Plex Mono", monospace;2501  font-size: 9px;2502  letter-spacing: 0.08em;2503  cursor: pointer;2504  transition: all 150ms ease;2505}2506.peach-pwgen-pill.is-on {2507  border-color: rgba(217, 104, 48, 0.5);2508  background: rgba(217, 104, 48, 0.1);2509  color: var(--peach-accent);2510}2511.peach-pwgen-pill:not(.is-on):hover {2512  color: var(--peach-t1);2513  border-color: var(--peach-t2);2514}2515.peach-pwgen-use-btn {2516  width: 100%;2517  min-height: 34px;2518  border-radius: 8px;2519  margin-top: 2px;2520}2521.peach-pwgen-toggle-row {2522  display: flex; align-items: center; justify-content: space-between;2523  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);2524}2525.peach-pwgen-toggle-row:last-child { border-bottom: none; }2526.peach-pwgen-toggle-label { font-size: 13px; color: var(--peach-t1); }25272528.peach-screen-prelock {2529  z-index: 10;2530}25312532.prelock-form {2533  display: grid;2534  gap: 12px;2535}25362537/* Peach popup should not expose native scrollbars on internal panels. */2538.peach-settings-body,2539.peach-new-body,2540.peach-pwgen-body,2541.lock-screen,2542.peach-import-preview {2543  scrollbar-width: none;2544  -ms-overflow-style: none;2545  overscroll-behavior: contain;2546}2547.peach-settings-body::-webkit-scrollbar,2548.peach-new-body::-webkit-scrollbar,2549.peach-pwgen-body::-webkit-scrollbar,2550.lock-screen::-webkit-scrollbar,2551.peach-import-preview::-webkit-scrollbar {2552  width: 0;2553  height: 0;2554  display: none;2555}25562557.lock-screen {2558  height: 100%;2559  min-height: 100%;2560  overflow-y: auto;2561  padding: 18px 18px 16px;2562  gap: 14px;2563  grid-template-rows: auto auto auto 1fr auto;2564  align-content: stretch;2565  position: relative;2566  isolation: isolate;2567}2568.peach-screen.lock-screen--vault-stage {2569  display: flex;2570  flex-direction: column;2571  justify-content: flex-start;2572  gap: 18px;2573  padding: 20px 18px 18px;2574  overflow: hidden;2575}2576.peach-screen.lock-screen--vault-stage .peach-lock-panel {2577  margin-top: auto;2578}2579.lock-screen--onboarding {2580  display: flex;2581  flex-direction: column;2582  gap: 12px;2583  justify-content: flex-start;2584}25852586.lock-screen::before {2587  content: "";2588  position: absolute;2589  inset: 12px 18px auto auto;2590  width: 160px;2591  height: 160px;2592  border-radius: 999px;2593  background:2594    radial-gradient(circle at 50% 50%, rgba(217, 104, 48, 0.18) 0%, rgba(217, 104, 48, 0.06) 42%, transparent 72%);2595  filter: blur(6px);2596  opacity: 0.7;2597  pointer-events: none;2598  z-index: 0;2599}26002601.lock-screen-header {2602  display: flex;2603  align-items: center;2604  justify-content: space-between;2605  position: relative;2606  z-index: 1;2607}26082609.lock-password-input.shake {2610  animation: peach-shake 300ms ease-in-out;2611}26122613.peach-hint-error {2614  color: rgba(220, 80, 60, 0.92);2615}26162617.peach-onboarding-headline {2618  margin: 0;2619  font-family: "Cormorant Garamond", "Times New Roman", serif;2620  font-size: 35px;2621  line-height: 0.88;2622  font-style: italic;2623  font-weight: 400;2624  max-width: 252px;2625}26262627.peach-lock-copy {2628  display: grid;2629  gap: 8px;2630  position: relative;2631  z-index: 1;2632}26332634.peach-lock-copy--onboarding {2635  gap: 10px;2636}26372638.peach-lock-hero {2639  position: relative;2640  z-index: 1;2641  display: grid;2642  gap: 8px;2643  min-height: 0;2644  padding: 4px 2px 0;2645  border: none;2646  border-radius: 0;2647  background: transparent;2648  box-shadow: none;2649}2650.peach-lock-hero-art {2651  position: absolute;2652  right: -8px;2653  top: -6px;2654  width: 120px;2655  height: 120px;2656  display: flex;2657  align-items: center;2658  justify-content: center;2659  pointer-events: none;2660  opacity: 0.12;2661  filter: saturate(0.9);2662}2663.peach-lock-hero-mark {2664  width: 100%;2665  height: 100%;2666}2667.peach-lock-hero-mark path:first-child {2668  fill: rgba(217, 104, 48, 0.92);2669}2670.peach-lock-hero-mark path:nth-child(2),2671.peach-lock-hero-mark path:nth-child(3) {2672  stroke: rgba(123, 144, 96, 0.88);2673  fill: rgba(123, 144, 96, 0.88);2674}2675.peach-lock-hero > *:not(.peach-lock-hero-art) {2676  position: relative;2677  z-index: 1;2678}26792680.peach-lock-eyebrow {2681  display: inline-flex;2682  align-items: center;2683  width: fit-content;2684  padding: 4px 9px;2685  border-radius: 999px;2686  border: 1px solid rgba(217, 104, 48, 0.22);2687  background: rgba(217, 104, 48, 0.08);2688  color: var(--peach-t0);2689  font-family: "IBM Plex Mono", monospace;2690  font-size: 8px;2691  letter-spacing: 0.18em;2692  text-transform: uppercase;2693}26942695.peach-lock-label-row {2696  display: flex;2697  align-items: center;2698  justify-content: space-between;2699  margin-bottom: 0;2700}27012702.peach-lock-reveal-btn {2703  display: inline-flex;2704  align-items: center;2705  gap: 4px;2706  background: none;2707  border: none;2708  cursor: pointer;2709  font-family: "IBM Plex Mono", monospace;2710  font-size: 9px;2711  letter-spacing: 0.06em;2712  color: var(--peach-t2);2713  padding: 2px 0;2714  transition: color 150ms ease;2715}27162717.peach-lock-reveal-btn:hover {2718  color: var(--peach-t1);2719}27202721.peach-lock-warning {2722  color: rgba(220, 80, 60, 0.85) !important;2723  line-height: 1.5;2724}27252726.peach-onboarding-cards {2727  display: grid;2728  gap: 8px;2729  position: relative;2730  z-index: 1;2731}27322733.peach-lock-panel {2734  position: relative;2735  z-index: 1;2736  display: grid;2737  gap: 9px;2738  padding: 14px 16px 15px;2739  border-radius: 18px;2740  border: 1px solid var(--peach-t3);2741  background:2742    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));2743  box-shadow:2744    inset 0 1px 0 rgba(240, 232, 216, 0.04),2745    0 12px 28px rgba(0, 0, 0, 0.12);2746}27472748.peach-lock-panel--secondary {2749  gap: 12px;2750}27512752.peach-lock-panel-header {2753  display: flex;2754  align-items: baseline;2755  justify-content: space-between;2756  gap: 12px;2757}27582759.peach-lock-option-grid {2760  display: grid;2761  gap: 10px;2762}27632764.peach-lock-option {2765  width: 100%;2766  display: grid;2767  gap: 6px;2768  padding: 14px 15px;2769  border-radius: 16px;2770  border: 1px solid rgba(240, 232, 216, 0.08);2771  background: rgba(240, 232, 216, 0.02);2772  color: var(--peach-t0);2773  text-align: left;2774  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;2775}27762777.peach-lock-option:hover {2778  border-color: rgba(217, 104, 48, 0.28);2779  background: rgba(240, 232, 216, 0.04);2780  transform: translateY(-1px);2781}27822783.peach-lock-option-title {2784  font-size: 12px;2785  color: var(--peach-t0);2786}27872788.peach-lock-option-copy {2789  font-size: 11px;2790  line-height: 1.55;2791  color: var(--peach-t1);2792}27932794.peach-onboarding-stack {2795  margin-top: 2px;2796}2797.peach-lock-panel-footer {2798  display: grid;2799  gap: 6px;2800  margin-top: 2px;2801  padding-top: 10px;2802  border-top: 1px solid rgba(240, 232, 216, 0.06);2803}28042805/* Restore picker panel — method option cards */2806.peach-lock-panel--restore {2807  gap: 10px;2808}2809.peach-lock-option--history {2810  border-color: rgba(240, 232, 216, 0.06);2811  opacity: 0.85;2812}28132814/* Snapshot restore panel */2815.peach-snapshot-panel {2816  gap: 10px;2817  overflow-y: auto;2818  max-height: 340px;2819}2820.peach-snapshot-list {2821  display: flex;2822  flex-direction: column;2823  gap: 4px;2824}2825.peach-snapshot-row {2826  display: flex;2827  align-items: center;2828  justify-content: space-between;2829  width: 100%;2830  padding: 8px 10px;2831  border-radius: 8px;2832  border: 1px solid rgba(240, 232, 216, 0.07);2833  background: transparent;2834  cursor: pointer;2835  transition: border-color 120ms, background 120ms;2836  text-align: left;2837  gap: 8px;2838}2839.peach-snapshot-row:hover {2840  border-color: rgba(240, 232, 216, 0.14);2841  background: rgba(240, 232, 216, 0.03);2842}2843.peach-snapshot-row.is-selected {2844  border-color: rgba(217, 104, 48, 0.4);2845  background: rgba(217, 104, 48, 0.07);2846}2847.peach-snapshot-time {2848  font-size: 11.5px;2849  color: var(--peach-t0);2850  flex: 1;2851}2852.peach-snapshot-count {2853  font-family: "IBM Plex Mono", monospace;2854  font-size: 10px;2855  color: var(--peach-t2);2856  flex-shrink: 0;2857}2858.peach-snapshot-confirm {2859  display: flex;2860  flex-direction: column;2861  gap: 8px;2862  padding-top: 10px;2863  border-top: 1px solid rgba(240, 232, 216, 0.06);2864}2865.peach-snapshot-warning {2866  display: flex;2867  align-items: flex-start;2868  gap: 6px;2869  font-size: 10.5px;2870  color: rgba(220, 80, 60, 0.85);2871  line-height: 1.55;2872}2873.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }2874.peach-snapshot-confirm-row {2875  display: flex;2876  gap: 6px;2877  align-items: center;2878}2879.peach-snapshot-restore-btn {2880  width: 100%;2881}2882.peach-lock-hero--unlock .peach-lock-hero-art {2883  width: 112px;2884  height: 112px;2885  right: 0;2886  top: 2px;2887  opacity: 0.1;2888}28892890.peach-card {2891  border: 1px solid var(--peach-t3);2892  border-radius: 18px;2893  background:2894    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);2895  box-shadow:2896    inset 0 1px 0 rgba(240, 232, 216, 0.04),2897    0 12px 32px rgba(0, 0, 0, 0.14);2898  overflow: hidden;2899}29002901.peach-card-active {2902  border-color: rgba(217, 104, 48, 0.35);2903  box-shadow:2904    inset 0 1px 0 rgba(240, 232, 216, 0.05),2905    0 16px 38px rgba(0, 0, 0, 0.18),2906    0 0 0 1px rgba(217, 104, 48, 0.08);2907}29082909.peach-card-disabled {2910  opacity: 0.72;2911}29122913.peach-card-header {2914  width: 100%;2915  padding: 13px 16px 11px;2916  background: transparent;2917  color: var(--peach-t0);2918  display: flex;2919  justify-content: space-between;2920  align-items: center;2921  text-align: left;2922  font-size: 12px;2923}29242925.peach-card-body {2926  padding: 0 16px 16px;2927  display: grid;2928  gap: 9px;2929}29302931.peach-card-tag {2932  color: var(--peach-t2);2933  font-family: "IBM Plex Mono", monospace;2934  font-size: 9px;2935  letter-spacing: 0.12em;2936  text-transform: uppercase;2937}29382939.peach-empty-copy {2940  display: grid;2941  gap: 6px;2942  color: var(--peach-t1);2943  font-size: 13px;2944}29452946.peach-lock-submit {2947  width: 100%;2948  box-shadow: 0 14px 36px rgba(217, 104, 48, 0.22);2949}29502951.peach-lock-secondary {2952  width: 100%;2953  border-color: var(--peach-t3);2954  background: rgba(240, 232, 216, 0.02);2955}29562957.peach-lock-secondary:hover {2958  background: rgba(240, 232, 216, 0.04);2959}29602961.peach-lock-note {2962  max-width: none;2963  line-height: 1.55;2964  margin: 0;2965}29662967.peach-overlay-action {2968  font-size: 10px;2969  padding: 4px 8px;2970  letter-spacing: 0.06em;2971  min-width: 44px;2972  text-align: center;2973}29742975.peach-overlay-spacer {2976  width: 32px;2977}29782979.peach-inline-action {2980  flex-shrink: 0;2981  font-size: 9px;2982  letter-spacing: 0.1em;2983  text-transform: uppercase;2984  padding: 4px 7px;2985}2986.peach-password-toggle-btn {2987  display: inline-flex;2988  align-items: center;2989  justify-content: center;2990  min-width: 30px;2991  min-height: 26px;2992  padding: 0 7px;2993  border: 1px solid var(--peach-t3);2994  border-radius: 999px;2995  background: rgba(240, 232, 216, 0.04);2996  color: var(--peach-t2);2997  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;2998}2999.peach-password-toggle-btn:hover {3000  border-color: var(--peach-t2);3001  color: var(--peach-t0);3002  background: rgba(240, 232, 216, 0.06);3003}30043005.peach-new-textarea {3006  width: 100%;3007  min-height: 88px;3008  resize: vertical;3009  border: 0;3010  outline: none;3011  background: transparent;3012  color: var(--peach-t1);3013  font-family: "IBM Plex Mono", monospace;3014  font-size: 12px;3015  line-height: 1.65;3016  caret-color: var(--peach-accent);3017}30183019.peach-new-textarea::placeholder {3020  color: var(--peach-t2);3021  opacity: 0.7;3022}30233024.peach-settings-actions {3025  display: grid;3026  gap: 8px;3027}30283029.peach-sync-section-label {3030  font-size: 11px;3031  color: var(--peach-t2);3032  text-transform: uppercase;3033  letter-spacing: 0.05em;3034}30353036.peach-sync-device-row {3037  display: flex;3038  justify-content: space-between;3039  align-items: center;3040  padding: 6px 0;3041  border-bottom: 1px solid var(--peach-t3);3042}30433044.peach-sync-device-info {3045  display: flex;3046  flex-direction: column;3047  gap: 2px;3048}30493050.peach-sync-device-name {3051  font-size: 13px;3052  color: var(--peach-t0);3053}30543055.peach-sync-device-meta {3056  font-size: 11px;3057  color: var(--peach-t2);3058}30593060.peach-sync-status-dot {3061  display: inline-block;3062  width: 8px;3063  height: 8px;3064  border-radius: 50%;3065  vertical-align: middle;3066}30673068.peach-sync-remove-btn {3069  color: var(--peach-breach);3070}30713072.peach-import-preview {3073  margin-bottom: 12px;3074  max-height: 152px;3075  overflow-y: auto;3076  border: 1px solid var(--peach-t3);3077  border-radius: 10px;3078  padding: 8px 10px;3079  display: grid;3080  gap: 8px;3081  background: rgba(240, 232, 216, 0.02);3082}30833084.peach-import-preview-row {3085  display: flex;3086  justify-content: space-between;3087  gap: 10px;3088  font-size: 11px;3089  color: var(--peach-t1);3090}30913092.peach-import-preview-title {3093  color: var(--peach-t0);3094  flex: 1;3095  min-width: 0;3096  overflow: hidden;3097  text-overflow: ellipsis;3098  white-space: nowrap;3099}31003101.peach-import-preview-meta {3102  color: var(--peach-t2);3103  flex-shrink: 0;3104  max-width: 42%;3105  overflow: hidden;3106  text-overflow: ellipsis;3107  white-space: nowrap;3108}31093110.peach-import-preview-more {3111  color: var(--peach-t2);3112  font-size: 10px;3113}31143115.peach-restore-copy {3116  margin: 0;3117  color: var(--peach-t1);3118  font-size: 11px;3119  line-height: 1.6;3120}31213122.peach-restore-warning {3123  padding: 10px 12px;3124  border-radius: 12px;3125  border: 1px solid rgba(220, 80, 60, 0.22);3126  background: rgba(220, 80, 60, 0.08);3127  color: rgba(240, 232, 216, 0.86);3128  font-size: 11px;3129  line-height: 1.55;3130}31313132.peach-provider-chips {3133  display: flex;3134  flex-wrap: wrap;3135  gap: 6px;3136}31373138.peach-provider-chip {3139  display: inline-flex;3140  align-items: center;3141  padding: 5px 8px;3142  border-radius: 999px;3143  border: 1px solid var(--peach-t3);3144  background: rgba(240, 232, 216, 0.02);3145  color: var(--peach-t1);3146  font-family: "IBM Plex Mono", monospace;3147  font-size: 8px;3148  letter-spacing: 0.08em;3149  text-transform: uppercase;3150}31513152.peach-restore-file,3153.peach-restore-input {3154  width: 100%;3155  border-radius: 10px;3156  border: 1px solid var(--peach-t3);3157  background: var(--peach-s2);3158  color: var(--peach-t0);3159  font-size: 12px;3160}31613162.peach-restore-file {3163  padding: 9px 10px;3164}31653166.peach-restore-file::file-selector-button {3167  margin-right: 10px;3168  padding: 7px 10px;3169  border: 1px solid rgba(217, 104, 48, 0.28);3170  border-radius: 999px;3171  background: rgba(217, 104, 48, 0.08);3172  color: var(--peach-t0);3173  font-size: 10px;3174  letter-spacing: 0.08em;3175  text-transform: uppercase;3176  cursor: pointer;3177}31783179.peach-restore-input {3180  padding: 10px 12px;3181}31823183.peach-auth-grid {3184  display: grid;3185  gap: 10px;3186}31873188.peach-import-summary {3189  color: var(--peach-t1);3190  font-size: 12px;3191  line-height: 1.6;3192  margin-bottom: 12px;3193}31943195.peach-restore-error {3196  color: rgba(220, 80, 60, 0.95);3197  font-size: 12px;3198  line-height: 1.55;3199}32003201.peach-cjk-qr-panel {3202  margin-top: 14px;3203  padding: 12px;3204  border-radius: 16px;3205  border: 1px solid var(--peach-t3);3206  background: rgba(240, 232, 216, 0.02);3207  display: grid;3208  gap: 10px;3209}32103211.peach-cjk-qr-frame {3212  display: grid;3213  place-items: center;3214  min-height: 212px;3215  border-radius: 14px;3216  background: #fff;3217  overflow: hidden;3218}32193220.peach-cjk-qr-frame svg {3221  display: block;3222  width: 196px;3223  height: 196px;3224}32253226.peach-cjk-qr-error,3227.peach-cjk-qr-caption {3228  color: var(--peach-t1);3229  font-size: 11px;3230  line-height: 1.55;3231}32323233.peach-cjk-qr-card {3234  max-width: 400px;3235  margin: auto;3236}32373238.peach-cjk-qr-body {3239  padding: 0 20px 20px;3240  text-align: center;3241}32423243.peach-cjk-qr-hint {3244  font-size: 11px;3245  color: var(--peach-t2);3246  margin: 0 0 14px;3247}32483249.peach-cjk-qr-image {3250  border-radius: 4px;3251  display: block;3252  margin: 0 auto;3253  width: 100%;3254  max-width: 320px;3255  height: auto;3256}32573258.peach-pro-badge {3259  padding: 2px 6px;3260  border-radius: 999px;3261  font-family: var(--font-ui);3262  font-size: 10px;3263  letter-spacing: 0.08em;3264  text-transform: uppercase;3265  background: rgba(217, 104, 48, 0.14);3266  color: var(--peach-accent);3267}32683269.peach-loading {3270  position: absolute;3271  inset: 0;3272  display: flex;3273  align-items: center;3274  justify-content: center;3275  background: var(--bg);3276  animation: peach-loading-pulse 1.2s ease-in-out infinite;3277}32783279@keyframes peach-loading-pulse {3280  0%, 100% { opacity: 0.6; }3281  50% { opacity: 1; }3282}32833284/* ── Health Dashboard ─────────────────────────────────────────────────── */3285.peach-health-body {3286  flex: 1;3287  overflow-y: auto;3288  display: flex;3289  flex-direction: column;3290}32913292.peach-health-summary {3293  padding: 10px 16px 6px;3294  font-family: "IBM Plex Mono", monospace;3295  font-size: 11px;3296}3297.peach-health-summary-warn { color: rgba(220,80,60,0.9); }3298.peach-health-summary-ok { color: var(--peach-t2); }32993300.peach-health-check-row {3301  padding: 0 16px 10px;3302}3303.peach-health-check-btn {3304  width: 100%;3305  display: flex;3306  align-items: center;3307  justify-content: center;3308}33093310.peach-health-sections {3311  flex: 1;3312  display: flex;3313  flex-direction: column;3314}33153316.peach-health-section {3317  border-bottom: 1px solid var(--peach-t3);3318}33193320.peach-health-section-header {3321  width: 100%;3322  display: flex;3323  align-items: center;3324  justify-content: space-between;3325  padding: 9px 16px;3326  background: transparent;3327  cursor: pointer;3328  color: var(--peach-t0);3329}33303331.peach-health-section-title-row {3332  display: flex;3333  align-items: center;3334  gap: 8px;3335}33363337.peach-health-count-badge {3338  display: inline-flex;3339  align-items: center;3340  justify-content: center;3341  min-width: 20px;3342  height: 18px;3343  padding: 0 5px;3344  border-radius: 999px;3345  background: rgba(220,80,60,0.15);3346  border: 1px solid rgba(220,80,60,0.25);3347  font-family: "IBM Plex Mono", monospace;3348  font-size: 9px;3349  color: rgba(220,80,60,0.9);3350}33513352.peach-health-section-title {3353  font-family: "IBM Plex Mono", monospace;3354  font-size: 11px;3355  text-transform: uppercase;3356  letter-spacing: 0.1em;3357  color: var(--peach-t1);3358}33593360.peach-health-chevron {3361  color: var(--peach-t2);3362  transition: transform 200ms ease;3363  flex-shrink: 0;3364}3365.peach-health-chevron.is-expanded {3366  transform: rotate(180deg);3367}33683369.peach-health-section-body {3370  padding: 0 16px 10px;3371  display: flex;3372  flex-direction: column;3373  gap: 4px;3374}33753376.peach-health-row {3377  display: flex;3378  align-items: flex-start;3379  justify-content: space-between;3380  gap: 8px;3381  padding: 6px 8px;3382  border-radius: 8px;3383  background: rgba(240,232,216,0.02);3384}33853386.peach-health-row-info {3387  flex: 1;3388  min-width: 0;3389  display: flex;3390  flex-direction: column;3391  gap: 2px;3392}33933394.peach-health-row-name {3395  font-family: "Cormorant Garamond", serif;3396  font-size: 15px;3397  font-style: italic;3398  font-weight: 400;3399  color: var(--peach-t0);3400  white-space: nowrap;3401  overflow: hidden;3402  text-overflow: ellipsis;3403}34043405.peach-health-row-meta {3406  font-family: "IBM Plex Mono", monospace;3407  font-size: 9px;3408  color: var(--peach-t2);3409  letter-spacing: 0.05em;3410}34113412.peach-health-fix-btn {3413  font-size: 9px;3414  letter-spacing: 0.08em;3415  text-transform: uppercase;3416  padding: 4px 7px;3417  flex-shrink: 0;3418  display: flex;3419  align-items: center;3420}34213422.peach-health-empty {3423  font-family: "IBM Plex Mono", monospace;3424  font-size: 10px;3425  color: var(--peach-t2);3426  padding: 6px 0;3427}34283429.peach-health-loading {3430  font-family: "IBM Plex Mono", monospace;3431  font-size: 10px;3432  color: var(--peach-t2);3433  padding: 6px 0;3434  display: flex;3435  align-items: center;3436  gap: 6px;3437}34383439.peach-health-loading::before {3440  content: "";3441  width: 10px;3442  height: 10px;3443  border: 1.5px solid var(--peach-t3);3444  border-top-color: var(--peach-accent);3445  border-radius: 50%;3446  animation: peach-spin 600ms linear infinite;3447}34483449@keyframes peach-spin {3450  to { transform: rotate(360deg); }3451}34523453.peach-spinner {3454  width: 32px;3455  height: 32px;3456  border: 2px solid var(--peach-s2);3457  border-top-color: var(--peach-accent);3458  border-radius: 50%;3459  margin: 0 auto 16px;3460  animation: peach-spin 0.8s linear infinite;3461}34623463.peach-progress-screen {3464  text-align: center;3465  padding: 32px 16px;3466}34673468.peach-progress-screen-title {3469  font-size: 13px;3470  color: var(--peach-t0);3471  margin-bottom: 16px;3472}34733474.peach-progress-screen-stage {3475  font-size: 11px;3476  color: var(--peach-t2);3477  min-height: 14px;3478}34793480.peach-progress-screen-note {3481  font-size: 10px;3482  color: var(--peach-t2);3483  margin-top: 8px;3484}34853486.peach-pairing-body {3487  flex: 1;3488  overflow-y: auto;3489  display: flex;3490  flex-direction: column;3491}34923493.peach-pairing-content {3494  flex: 1;3495  display: flex;3496  flex-direction: column;3497  align-items: center;3498  justify-content: center;3499  gap: 14px;3500  padding: 28px 20px;3501  text-align: center;3502}35033504.peach-pairing-headline {3505  font-family: var(--font-display);3506  font-style: italic;3507  font-weight: 300;3508  font-size: 28px;3509  color: var(--peach-t0);3510  margin: 0;3511  line-height: 1;3512}35133514.peach-pairing-subline {3515  font-size: 12px;3516  color: var(--peach-t2);3517  max-width: 220px;3518  line-height: 1.5;3519  margin: 0;3520}35213522.peach-pairing-subline--center {3523  text-align: center;3524}35253526.peach-pairing-code-display {3527  display: flex;3528  gap: 6px;3529}35303531.peach-pairing-code-digit {3532  display: flex;3533  align-items: center;3534  justify-content: center;3535  width: 36px;3536  height: 48px;3537  background: var(--peach-s2);3538  border: 1px solid var(--peach-t3);3539  border-radius: 6px;3540  font-family: var(--font-mono);3541  font-size: 22px;3542  color: var(--peach-t0);3543  letter-spacing: 0;3544}35453546.peach-pairing-countdown-ring {3547  position: relative;3548  display: inline-flex;3549  align-items: center;3550  justify-content: center;3551}35523553.peach-pairing-countdown-num {3554  position: absolute;3555  font-family: var(--font-mono);3556  font-size: 14px;3557  color: var(--peach-t1);3558}35593560.peach-pairing-ring-track {3561  fill: none;3562  stroke: var(--peach-t3);3563  stroke-width: 2;3564}35653566.peach-pairing-ring-progress {3567  fill: none;3568  stroke: var(--peach-accent);3569  stroke-width: 2;3570  stroke-linecap: round;3571  transform: rotate(-90deg);3572  transform-origin: 50% 50%;3573  transition: stroke-dashoffset 0.5s linear;3574}35753576.peach-pairing-code-inputs {3577  display: flex;3578  gap: 8px;3579}35803581.peach-pairing-code-box {3582  width: 36px;3583  height: 48px;3584  text-align: center;3585  background: var(--peach-s2);3586  border: 1px solid var(--peach-t3);3587  border-radius: 6px;3588  font-family: var(--font-mono);3589  font-size: 20px;3590  color: var(--peach-t0);3591  outline: none;3592  transition: border-color 120ms ease;3593}35943595.peach-pairing-code-box:focus {3596  border-color: var(--peach-accent);3597}35983599.peach-pairing-code-box.has-error {3600  border-color: rgba(220, 80, 60, 0.45);3601}36023603.peach-pairing-status {3604  display: flex;3605  align-items: center;3606  gap: 8px;3607  margin: 0;3608  font-size: 12px;3609  color: var(--peach-t1);3610}36113612.peach-pairing-error {3613  margin: 0;3614  font-size: 11px;3615  color: var(--peach-breach);3616}36173618.peach-pairing-error-msg {3619  color: var(--peach-t1);3620}36213622.peach-pairing-spinner {3623  width: 12px;3624  height: 12px;3625  border: 1.5px solid var(--peach-t3);3626  border-top-color: var(--peach-accent);3627  border-radius: 50%;3628  animation: peach-spin 0.8s linear infinite;3629}36303631.peach-pairing-success-icon,3632.peach-pairing-error-icon,3633.peach-pairing-hero {3634  display: inline-flex;3635  align-items: center;3636  justify-content: center;3637}36383639/* Tag chips */3640.peach-tag-chip {3641  display: inline-flex;3642  align-items: center;3643  gap: 4px;3644  padding: 3px 8px;3645  border-radius: 999px;3646  border: 1px solid rgba(217, 104, 48, 0.28);3647  background: rgba(217, 104, 48, 0.08);3648  color: rgba(240, 232, 216, 0.85);3649  font-family: "IBM Plex Mono", monospace;3650  font-size: 10px;3651  letter-spacing: 0.04em;3652}36533654.peach-tag-chip-remove {3655  background: transparent;3656  border: none;3657  color: inherit;3658  opacity: 0.6;3659  cursor: pointer;3660  padding: 0;3661  font-size: 12px;3662  line-height: 1;3663}36643665.peach-tag-chip-remove:hover {3666  opacity: 1;3667}36683669/* Tag input */3670.peach-tag-input-wrap {3671  border-bottom: 1px solid var(--peach-t3);3672}36733674.peach-tag-suggestions {3675  display: flex;3676  flex-wrap: wrap;3677  gap: 4px;3678  padding: 6px 0;3679}36803681.peach-tag-suggestion {3682  padding: 2px 8px;3683  border-radius: 999px;3684  border: 1px solid var(--peach-t3);3685  background: var(--peach-s2);3686  color: var(--peach-t1);3687  font-family: "IBM Plex Mono", monospace;3688  font-size: 10px;3689  cursor: pointer;3690  transition: border-color 80ms ease, background 80ms ease;3691}36923693.peach-tag-suggestion:hover {3694  border-color: rgba(217, 104, 48, 0.4);3695  background: rgba(217, 104, 48, 0.08);3696}36973698/* Tag filter strip */3699.peach-tag-filter-strip {3700  border-bottom: 1px solid var(--peach-t3);3701  flex-shrink: 0;3702}37033704.peach-tag-filter-chip {3705  display: inline-flex;3706  align-items: center;3707  padding: 4px 10px;3708  border-radius: 999px;3709  border: 1px solid var(--peach-t3);3710  background: transparent;3711  color: var(--peach-t2);3712  font-family: "IBM Plex Mono", monospace;3713  font-size: 9px;3714  letter-spacing: 0.06em;3715  text-transform: uppercase;3716  cursor: pointer;3717  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;3718  white-space: nowrap;3719}37203721.peach-tag-filter-chip:hover {3722  border-color: rgba(217, 104, 48, 0.35);3723  color: var(--peach-t1);3724}37253726.peach-tag-filter-chip.is-selected {3727  border-color: rgba(217, 104, 48, 0.5);3728  background: rgba(217, 104, 48, 0.12);3729  color: rgba(240, 232, 216, 0.9);3730}37313732/* ─────────────────────────────────────────────────────────────────────────3733   v1.4.12 additions3734   ─────────────────────────────────────────────────────────────────────── */37353736/* Sort bar */3737.peach-sort-bar {3738  display: flex;3739  align-items: center;3740  gap: 4px;3741  padding: 5px 12px;3742  border-bottom: 1px solid var(--peach-t3);3743  flex-shrink: 0;3744  overflow-x: auto;3745  scrollbar-width: none;3746}37473748.peach-sort-btn {3749  padding: 2px 9px;3750  border-radius: 999px;3751  border: 1px solid transparent;3752  background: transparent;3753  color: var(--peach-t2);3754  font-family: "IBM Plex Mono", monospace;3755  font-size: 9px;3756  letter-spacing: 0.07em;3757  text-transform: uppercase;3758  cursor: pointer;3759  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;3760  white-space: nowrap;3761}37623763.peach-sort-btn:hover {3764  border-color: rgba(217, 104, 48, 0.3);3765  color: var(--peach-t1);3766}37673768.peach-sort-btn.is-active {3769  border-color: rgba(217, 104, 48, 0.5);3770  background: rgba(217, 104, 48, 0.12);3771  color: rgba(240, 232, 216, 0.9);3772}37733774.peach-sort-domain-hint {3775  margin-left: auto;3776  font-family: "IBM Plex Mono", monospace;3777  font-size: 9px;3778  color: rgba(217, 104, 48, 0.6);3779  white-space: nowrap;3780  overflow: hidden;3781  text-overflow: ellipsis;3782  max-width: 110px;3783}37843785/* Tab-match badge on entry rows */3786.peach-tab-match-badge {3787  display: inline-block;3788  width: 6px;3789  height: 6px;3790  border-radius: 50%;3791  background: rgba(217, 104, 48, 0.75);3792  margin-left: 5px;3793  vertical-align: middle;3794  flex-shrink: 0;3795  box-shadow: 0 0 4px rgba(217, 104, 48, 0.4);3796}37973798.peach-entry-row.is-tab-match {3799  background: rgba(217, 104, 48, 0.04);3800  border-bottom-color: rgba(217, 104, 48, 0.08);3801}38023803.peach-entry-row.is-tab-match:hover {3804  background: rgba(217, 104, 48, 0.08);3805}38063807/* Entry list stagger entrance */3808@keyframes peach-entry-fadein {3809  from { opacity: 0; transform: translateY(4px); }3810  to   { opacity: 1; transform: translateY(0); }3811}38123813.peach-vault-list .peach-entry-row {3814  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;3815  content-visibility: auto;3816  contain-intrinsic-size: auto 44px;3817}38183819/* Button press micro-interaction */3820.peach-btn:active {3821  transform: scale(0.95);3822  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);3823}38243825.peach-sort-btn:active,3826.peach-tag-filter-chip:active {3827  transform: scale(0.93);3828  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);3829}38303831/* Password strength bar (Lock view + shared) */3832.peach-password-strength {3833  display: flex;3834  align-items: center;3835  gap: 8px;3836  margin-top: 6px;3837}38383839.peach-strength-bar {3840  flex: 1;3841  height: 3px;3842  border-radius: 2px;3843  background: var(--peach-t3);3844  overflow: hidden;3845}38463847.peach-strength-fill {3848  height: 100%;3849  border-radius: 2px;3850  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),3851              background 300ms ease;3852}38533854.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }3855.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }3856.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }3857.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }38583859.peach-strength-label {3860  font-family: "IBM Plex Mono", monospace;3861  font-style: italic;3862  font-size: 9px;3863  font-weight: 300;3864  letter-spacing: 0.06em;3865  color: var(--peach-t2);3866  min-width: 36px;3867  text-align: right;3868}38693870.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }3871.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }3872.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }3873.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }38743875/* Duress form */3876.peach-duress-status {3877  padding: 2px 8px;3878  border-radius: 999px;3879  border: 1px solid var(--peach-t3);3880  font-family: "IBM Plex Mono", monospace;3881  font-size: 9px;3882  letter-spacing: 0.07em;3883  text-transform: uppercase;3884  color: var(--peach-t2);3885  flex-shrink: 0;3886}38873888.peach-duress-status.is-active {3889  border-color: rgba(217, 104, 48, 0.45);3890  background: rgba(217, 104, 48, 0.1);3891  color: rgba(240, 232, 216, 0.85);3892}38933894.peach-duress-form {3895  padding: 8px 0 4px;3896  display: flex;3897  flex-direction: column;3898  gap: 6px;3899}39003901.peach-duress-form .peach-label {3902  margin-top: 4px;3903}39043905.peach-duress-actions {3906  display: flex;3907  gap: 6px;3908  align-items: center;3909  margin-top: 4px;3910}39113912.peach-duress-actions .peach-btn:first-child {3913  margin-right: auto;3914}39153916/* Improved overlay spring entrance */3917.peach-overlay-view.ov-enter-up {3918  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;3919}39203921@keyframes ov-enter-up-spring {3922  from { opacity: 0; transform: translateY(16px) scale(0.98); }3923  to   { opacity: 1; transform: translateY(0) scale(1); }3924}39253926.peach-overlay-view.ov-enter-right {3927  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;3928}39293930@keyframes ov-enter-right-spring {3931  from { opacity: 0; transform: translateX(18px) scale(0.98); }3932  to   { opacity: 1; transform: translateX(0) scale(1); }3933}39343935/* ── Onboarding-mode restore screens (CJK phrase / file import) ── */3936/* Used when CJKImportView or MainImportView renders during onboarding3937   (no vault yet). Animates like a lock-screen transition. */3938.peach-lock-view {3939  position: absolute;3940  inset: 0;3941  display: flex;3942  flex-direction: column;3943  background:3944    radial-gradient(120% 80% at 0% 0%, rgba(217,104,48,0.08) 0%, transparent 65%),3945    radial-gradient(85% 100% at 100% 100%, rgba(217,104,48,0.06) 0%, transparent 70%),3946    var(--peach-bg);3947  z-index: 2;3948  overflow: hidden;3949  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3950}39513952.peach-lock-view-header {3953  display: flex;3954  align-items: center;3955  justify-content: space-between;3956  padding: 16px 18px 12px;3957  flex-shrink: 0;3958}39593960/* ───────── Settings: auto-lock select ───────── */3961.peach-settings-select {3962  font-family: "IBM Plex Mono", monospace;3963  font-size: 11px;3964  background: transparent;3965  border: 1px solid var(--peach-t3);3966  border-radius: 4px;3967  color: var(--peach-t1);3968  padding: 3px 6px;3969  cursor: pointer;3970  outline: none;3971}3972.peach-settings-select:focus {3973  border-color: var(--peach-accent);3974}39753976/* ───────── Duress status pill (new polished) ───────── */3977.peach-duress-status-pill {3978  font-family: "IBM Plex Mono", monospace;3979  font-size: 9px;3980  text-transform: uppercase;3981  letter-spacing: 0.12em;3982  padding: 2px 8px;3983  border-radius: 12px;3984  background: var(--peach-t3);3985  color: var(--peach-t2);3986  flex-shrink: 0;3987}3988.peach-duress-status-pill.is-active {3989  background: rgba(217, 104, 48, 0.15);3990  color: var(--peach-accent);3991}39923993/* ───────── Entry advanced disclosure (canary) ───────── */3994.peach-entry-advanced {3995  margin-top: 12px;3996  border-top: 1px solid var(--peach-t3);3997  padding-top: 10px;3998  position: relative;3999  z-index: 1;4000}4001.peach-entry-advanced-toggle {4002  display: flex;4003  align-items: center;4004  justify-content: space-between;4005  width: 100%;4006  background: transparent;4007  border: none;4008  cursor: pointer;4009  padding: 0;4010  color: var(--peach-t2);4011}4012.peach-canary-section {4013  margin-top: 10px;4014  display: grid;4015  gap: 6px;4016}40174018/* ───────── Import: merge/replace radio choices ───────── */4019.peach-import-choice {4020  display: flex;4021  align-items: flex-start;4022  gap: 10px;4023  padding: 8px 10px;4024  border: 1px solid var(--peach-t3);4025  border-radius: 10px;4026  cursor: pointer;4027  margin-bottom: 6px;4028  transition: border-color 120ms ease, background 120ms ease;4029}4030.peach-import-choice:hover {4031  border-color: var(--peach-accent);4032}4033.peach-import-choice input[type="radio"] {4034  margin-top: 3px;4035  accent-color: var(--peach-accent);4036  flex-shrink: 0;4037}4038.peach-import-choice-main {4039  display: flex;4040  flex-direction: column;4041  gap: 2px;4042  min-width: 0;4043}4044.peach-import-choice-label {4045  font-size: 12px;4046  color: var(--peach-t0);4047}4048.peach-import-choice-sub {4049  font-size: 11px;4050  color: var(--peach-t2);4051  line-height: 1.5;4052}40534054/* ───────── Export: success confirmation strip ───────── */4055.peach-export-success {4056  display: flex;4057  align-items: flex-start;4058  gap: 10px;4059  padding: 12px;4060  border-radius: 12px;4061  border: 1px solid rgba(150, 175, 110, 0.3);4062  background: rgba(150, 175, 110, 0.08);4063  color: var(--peach-t0);4064  font-size: 12px;4065  line-height: 1.55;4066}4067.peach-export-success-check {4068  color: rgba(150, 175, 110, 0.9);4069  font-size: 14px;4070  flex-shrink: 0;4071}40724073/* ── Trash view ──────────────────────────────────────────────────────── */4074.peach-trash-entry-row {4075  display: flex;4076  align-items: center;4077  justify-content: space-between;4078  gap: 8px;4079  padding: 8px 0;4080  border-bottom: 1px solid var(--peach-t3);4081}4082.peach-trash-entry-row:last-child { border-bottom: none; }4083.peach-trash-entry-info {4084  flex: 1;4085  min-width: 0;4086  display: flex;4087  flex-direction: column;4088  gap: 2px;4089}4090.peach-trash-entry-title {4091  font-size: 12px;4092  color: var(--peach-t1);4093  overflow: hidden;4094  text-overflow: ellipsis;4095  white-space: nowrap;4096}4097.peach-trash-entry-meta {4098  font-family: var(--font-mono);4099  font-size: 9px;4100  color: var(--peach-t2);4101  letter-spacing: 0.06em;4102}4103.peach-trash-entry-actions {4104  display: flex;4105  align-items: center;4106  gap: 4px;4107  flex-shrink: 0;4108}41094110/* ── Settings shortcuts grid ─────────────────────────────────────────── */4111.peach-shortcuts-grid {4112  display: grid;4113  grid-template-columns: auto 1fr;4114  gap: 6px 12px;4115  align-items: center;4116  padding: 4px 0;4117}4118.peach-shortcut-key {4119  font-family: var(--font-mono);4120  font-size: 10px;4121  color: var(--peach-t0);4122  background: var(--peach-t3);4123  border-radius: 4px;4124  padding: 2px 6px;4125  white-space: nowrap;4126  text-align: center;4127}4128.peach-shortcut-desc {4129  font-size: 11px;4130  color: var(--peach-t1);4131}41324133/* ── Sort bar trash button ───────────────────────────────────────────── */4134.peach-sort-trash-btn {4135  display: flex;4136  align-items: center;4137  justify-content: center;4138  padding: 3px 5px;4139  background: transparent;4140  border: none;4141  cursor: pointer;4142  color: var(--peach-t2);4143  border-radius: 4px;4144  transition: color 140ms ease, background 140ms ease;4145}4146.peach-sort-trash-btn:hover {4147  color: var(--peach-t1);4148  background: var(--peach-t3);4149}