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%, var(--shell-accent-a) 0%, transparent 65%),83    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),84    var(--peach-bg);85  border: 1px solid var(--peach-t3);86  box-shadow:87    0 2px 8px rgba(0,0,0,0.55),88    0 14px 48px rgba(0,0,0,0.7),89    0 0 0 1px rgba(240,232,216,0.04);90  overflow: hidden;91}92.peach-shell {93  display: grid;94  grid-template-rows: auto 1fr;95  min-height: 520px;96  position: relative;97  isolation: isolate;98}99100.peach-shell[data-surface="extension"] {101  width: min(320px, 100vw);102  border-radius: 0;103  height: 520px;104  max-height: 520px;105  overflow: hidden;106}107108/* ── Lock screen – full-window lock/create stage ── */109.lock-screen--vault-stage {110  display: flex;111  flex-direction: column;112  gap: 18px;113  padding: 20px 18px 18px;114  justify-content: flex-start;115}116.lock-screen--vault-stage .peach-lock-panel {117  margin-top: auto;118}119.peach-lock-headline--unlock {120  max-width: 220px;121}122.peach-lock-hero--unlock {123  padding-top: 14px;124}125.peach-lock-panel--unlock {126  gap: 10px;127}128129.peach-lock-restore-link {130  background: transparent;131  border: none;132  cursor: pointer;133  font-family: var(--font-mono);134  font-size: 0.625rem;135  letter-spacing: 0.08em;136  color: var(--t1);137  padding: 5px 0;138  text-align: left;139  transition: color 150ms ease;140}141142.peach-lock-restore-link:hover {143  color: var(--t0);144}145.peach-shell[data-surface="extension"] .peach-stage {146  min-height: 250px;147}148149/* Screen (unlock) */150.peach-screen {151  width: min(320px, 100vw);152  min-height: 100%;153  height: 100%;154  border-radius: 0;155  padding: 16px 20px 18px;156  display: grid;157  gap: 14px;158}159.peach-screen[data-motion-phase="enter"] {160  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;161}162.peach-screen-header { min-height: 20px; }163164/* Wordmark */165.peach-wordmark {166  margin: 0;167  font-family: var(--font-display);168  font-size: 0.9375rem;169  font-style: italic;170  letter-spacing: 0.03em;171  color: var(--peach-t0);172  display: inline-flex;173  min-height: 1em;174}175176/* Motion text / char animation */177.peach-motion-text { display: inline-flex; min-height: 1em; }178.peach-motion-char {179  display: inline-block;180  white-space: pre;181  opacity: 0;182  transform: translateY(0.22em);183  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;184  animation-delay: calc(var(--peach-char-index, 0) * 20ms);185}186187/* Chrome */188.peach-chrome {189  position: relative;190  z-index: 10;191  padding: 16px 20px 0;192  display: flex;193  justify-content: space-between;194  align-items: center;195  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense196     fallback) per §15 regression guard. Without pointer-events:none, the197     empty header strip also sits above `.peach-overlay-view` (z-index:2)198     and swallows clicks meant for an overlay's back button / top search. */199  pointer-events: none;200}201.peach-chrome .peach-btn { pointer-events: auto; }202.peach-chrome.is-hidden-for-overlay,203.peach-search-wrap.is-hidden-for-overlay {204  opacity: 0;205  visibility: hidden;206  pointer-events: none;207}208.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }209.peach-status-pip {210  width: 5px;211  height: 5px;212  border-radius: 50%;213  background: var(--peach-t3);214  display: inline-flex;215  flex-shrink: 0;216  transition: background 400ms ease, box-shadow 400ms ease;217}218.peach-chrome-actions { display: flex; gap: 6px; }219220/* Shell body */221.peach-shell-body {222  position: relative;223  display: grid;224  grid-template-rows: 1fr auto;225  min-height: 0;226  min-width: 0;227  width: 100%;228  overflow: hidden;229  height: 100%;230}231.peach-shell-veil {232  position: absolute; inset: 0;233  background: #000; opacity: 0;234  pointer-events: none; z-index: 1;235}236.peach-shell[data-motion-phase="enter"] .peach-shell-body {237  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;238}239.peach-shell[data-motion-phase="exit"] .peach-shell-veil {240  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;241}242243/* Content frame */244.peach-content-frame {245  display: grid;246  grid-template-rows: 1fr auto;247  grid-template-columns: minmax(0, 1fr);248  align-content: start;249  min-height: 0;250  min-width: 0;251  overflow: hidden;252  transition: opacity 80ms ease, transform 80ms ease;253}254.peach-content-frame.navigating {255  opacity: 0.93;256  transform: translateX(2px);257}258.peach-content-frame[data-content-phase="enter"] {259  animation: peach-content-enter 135ms ease-out both;260}261.peach-content-frame[data-content-phase="exit"] {262  animation: peach-content-exit 95ms ease-in forwards;263}264.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }265266/* Stage */267.peach-stage {268  padding: 10px 20px 12px;269  display: grid;270  gap: 12px;271  align-content: start;272  min-width: 0;273  min-height: 0;274  max-width: 100%;275  overflow-y: auto;276  overflow-x: hidden;277  scrollbar-width: none;278  -ms-overflow-style: none;279  overscroll-behavior: contain;280}281.peach-stage::-webkit-scrollbar { display: none; }282283/* Entry name */284.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }285.peach-entry-header {286  position: relative;287  z-index: 1;288  display: flex;289  align-items: flex-start;290  gap: 6px;291  min-width: 0;292}293.peach-entry-header-name {294  flex: 1;295  min-width: 0;296}297.peach-entry-name {298  margin: 0;299  padding-bottom: 0.12em;300  font-family: var(--font-display);301  font-style: italic; font-weight: 400;302  font-size: 44px; line-height: 0.95;303  color: var(--peach-t0);304  display: -webkit-box;305  -webkit-line-clamp: 2;306  -webkit-box-orient: vertical;307  overflow: hidden;308  text-wrap: balance;309}310.peach-entry-name--lg { font-size: 40px; }311.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }312.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }313.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }314315/* Trash icon in entry header */316.peach-entry-trash-btn {317  flex-shrink: 0;318  padding: 4px;319  margin-top: 4px;320  background: transparent;321  border: none;322  cursor: pointer;323  color: var(--peach-t2);324  border-radius: 4px;325  transition: color 140ms ease, background 140ms ease;326  display: flex;327  align-items: center;328  justify-content: center;329}330.peach-entry-trash-btn:hover {331  color: var(--peach-t1);332  background: var(--peach-t3);333}334.peach-entry-trash-confirm {335  display: flex;336  align-items: center;337  gap: 6px;338  flex-shrink: 0;339  margin-top: 6px;340  flex-wrap: nowrap;341}342.peach-entry-trash-confirm-label {343  font-family: var(--font-mono);344  font-size: 0.5625rem;345  letter-spacing: 0.1em;346  color: var(--peach-t2);347  white-space: nowrap;348}349.peach-entry-name-button {350  padding: 0;351  background: transparent;352  text-align: left;353  cursor: pointer;354  max-width: 100%;355  overflow: hidden;356  display: block;357}358.peach-entry-name-char {359  display: inline-block;360  white-space: pre;361  opacity: 0;362  transform: translateY(0.22em);363  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;364  animation-delay: calc(var(--char-index, 0) * 20ms);365}366367/* Domain */368.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }369.peach-domain-row {370  width: 100%; border: 0; background: transparent; color: inherit;371  padding: 0; display: flex; justify-content: space-between; align-items: baseline;372  cursor: default;373}374.peach-domain-value {375  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;376  font-size: 0.625rem; font-style: italic;377  letter-spacing: 0.12em; color: var(--peach-t1);378}379380/* Fields */381.peach-fields { display: grid; gap: 10px; }382.peach-field-card { display: grid; gap: 7px; }383.peach-label {384  font-family: Inter, system-ui, sans-serif;385  text-transform: uppercase; letter-spacing: 0.2em;386  font-size: 0.5rem; color: var(--peach-t2);387}388.peach-add-field-btn {389  align-self: flex-start;390  background: none; border: none; padding: 2px 0;391  font-family: Inter, system-ui, sans-serif;392  font-size: 0.6875rem; color: var(--peach-accent);393  cursor: pointer; opacity: 0.75;394  letter-spacing: 0.02em;395}396.peach-add-field-btn:hover { opacity: 1; }397.peach-field-value-row {398  display: flex; justify-content: space-between;399  align-items: center; gap: 8px;400  min-width: 0;401}402.peach-field-value {403  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;404  font-size: 0.8125rem; color: var(--peach-t1);405  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;406  flex: 1;407  min-width: 0;408}409.peach-password-value {410  display: inline-flex;411  align-items: center;412  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;413  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);414  overflow: hidden;415  text-overflow: ellipsis;416  white-space: nowrap;417  flex: 1;418  min-width: 0;419  max-width: 100%;420}421.peach-password-value.is-revealed {422  font-size: 0.875rem;423  letter-spacing: 0.08em;424}425.peach-password-text,426.peach-password-mask {427  display: block;428  width: 100%;429  overflow: hidden;430  white-space: nowrap;431  /* Render as uniform mid-line bullets, not baseline periods */432  font-family: Inter, system-ui, sans-serif;433  font-size: 0.625rem;434  letter-spacing: 3px;435  user-select: none;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: 0.5625rem;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 (display) */475.peach-note-content {476  border-top: 1px solid var(--peach-t3);477  padding-top: 10px;478  font-family: var(--font-display);479  font-size: 0.9375rem;480  line-height: 1.75;481  color: var(--peach-t1);482}483484/* ── Inline editing ─────────────────────────────────────────────────── */485486/* Clickable display values */487.peach-inline-clickable {488  cursor: text;489  border-radius: 3px;490  transition: background 150ms ease;491}492.peach-inline-clickable:hover {493  background: rgba(240, 232, 216, 0.05);494}495496/* Subtle "edit" hint that appears on hover */497.peach-inline-edit-hint {498  font-family: Inter, system-ui, sans-serif;499  font-size: 0.5625rem;500  text-transform: uppercase;501  letter-spacing: 0.14em;502  color: var(--peach-t2);503  opacity: 0;504  transition: opacity 120ms ease;505  pointer-events: none;506  margin-left: 6px;507  flex-shrink: 0;508}509.peach-domain-row:hover .peach-inline-edit-hint {510  opacity: 1;511}512513/* Title editing */514.peach-inline-title-wrap {515  display: flex;516  flex-direction: column;517  gap: 6px;518}519.peach-inline-title-input {520  font-family: var(--font-display);521  font-style: italic;522  font-weight: 400;523  font-size: 40px;524  line-height: 0.95;525  color: var(--peach-t0);526  background: transparent;527  border: none;528  border-bottom: 1px solid var(--peach-accent);529  outline: none;530  width: 100%;531  padding: 2px 0;532}533534/* Generic inline field */535.peach-inline-field-wrap {536  display: flex;537  flex-direction: column;538  gap: 6px;539}540.peach-inline-input {541  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;542  font-size: 0.8125rem;543  color: var(--peach-t0);544  background: transparent;545  border: none;546  border-bottom: 1px solid var(--peach-accent);547  outline: none;548  width: 100%;549  padding: 3px 0;550}551.peach-inline-textarea {552  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;553  font-size: 0.6875rem;554  line-height: 1.7;555  color: var(--peach-t0);556  background: rgba(240, 232, 216, 0.04);557  border: 1px solid var(--peach-accent);558  border-radius: 4px;559  outline: none;560  width: 100%;561  padding: 8px;562  resize: vertical;563  min-height: 80px;564}565566/* Save / cancel row */567.peach-inline-actions {568  display: flex;569  gap: 6px;570  align-items: center;571}572.peach-inline-save-btn,573.peach-inline-cancel-btn {574  display: inline-flex;575  align-items: center;576  justify-content: center;577  width: 26px;578  height: 26px;579  border-radius: 4px;580  border: none;581  cursor: pointer;582  transition: background 140ms ease, opacity 140ms ease;583  flex-shrink: 0;584}585.peach-inline-save-btn {586  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);587  color: var(--peach-accent);588}589.peach-inline-save-btn:hover:not(:disabled) {590  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);591}592.peach-inline-cancel-btn {593  background: rgba(240, 232, 216, 0.06);594  color: var(--peach-t2);595}596.peach-inline-cancel-btn:hover:not(:disabled) {597  background: rgba(240, 232, 216, 0.12);598  color: var(--peach-t1);599}600.peach-inline-save-btn:disabled,601.peach-inline-cancel-btn:disabled {602  opacity: 0.4;603  cursor: not-allowed;604}605606/* Inline password generator wrapper */607.peach-inline-generator-wrap {608  margin-top: 10px;609  padding-top: 10px;610  border-top: 1px solid var(--peach-t3);611  display: flex;612  flex-direction: column;613  gap: 8px;614}615.peach-inline-generator-cancel {616  align-self: flex-start;617  font-size: 0.6875rem;618  color: var(--peach-t2);619}620621/* "is-editing" card state */622.peach-field-card.is-editing {623  background: rgba(240, 232, 216, 0.02);624  border-radius: 6px;625  padding: 8px;626  margin: -8px;627}628629/* Inline tag editor on Entry detail view */630.peach-inline-tag-editor {631  display: flex;632  flex-direction: column;633  gap: 6px;634}635636/* Quiet inline "+ add X" link in the entry detail body */637.peach-entry-add-link {638  justify-self: start;639  margin-top: 8px;640}641642/* Additional URLs editor revealed by clicking the URL field */643.peach-additional-urls {644  display: flex;645  flex-direction: column;646  gap: 6px;647  margin-top: 8px;648}649.peach-additional-urls-label {650  font-size: 0.5625rem;651  letter-spacing: 0.1em;652  text-transform: uppercase;653  color: var(--peach-t2);654  margin-bottom: 2px;655}656.peach-additional-url-row {657  display: flex;658  align-items: center;659  gap: 6px;660}661.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }662.peach-additional-url-remove {663  background: transparent;664  border: 1px solid var(--peach-t3);665  color: var(--peach-t2);666  width: 22px;667  height: 22px;668  border-radius: 4px;669  cursor: pointer;670  font-size: 0.875rem;671  line-height: 1;672  display: inline-flex;673  align-items: center;674  justify-content: center;675  flex-shrink: 0;676  transition: color 120ms ease, border-color 120ms ease;677}678.peach-additional-url-remove:hover:not(:disabled) {679  color: var(--peach-accent);680  border-color: var(--peach-border-accent);681}682.peach-additional-urls-add { align-self: flex-start; }683684/* Delete row */685.peach-entry-delete-row {686  display: flex;687  align-items: center;688  gap: 8px;689  padding-top: 18px;690  margin-top: 8px;691  border-top: 1px solid var(--peach-t3);692}693.peach-delete-btn {694  font-size: 0.6875rem;695  color: var(--peach-t2);696  padding: 4px 0;697}698.peach-delete-confirm-text {699  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;700  font-size: 0.6875rem;701  font-style: italic;702  color: var(--peach-t2);703  flex-shrink: 0;704}705706/* TOTP band */707.peach-totp-band {708  border-top: 1px solid var(--peach-t3);709  padding: 12px 20px 14px;710  position: relative;711  display: grid;712  grid-template-columns: 1fr auto;713  gap: 10px;714}715.peach-totp-main {716  min-width: 0;717  cursor: pointer;718  user-select: none;719}720.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }721.peach-totp-code-row {722  display: flex;723  align-items: flex-end;724  gap: 10px;725  min-width: 0;726}727.peach-totp-code {728  margin: 2px 0 0;729  font-family: var(--font-display);730  font-style: italic;731  font-weight: 300;732  font-size: 38px; color: var(--peach-accent);733  line-height: 0.95; min-height: 1em;734  min-width: 0;735}736.peach-totp-code-text {737  display: inline-flex;738  overflow: hidden;739  text-overflow: ellipsis;740  white-space: nowrap;741}742.peach-totp-copy-btn {743  margin-bottom: 2px;744  flex-shrink: 0;745  border-color: transparent;746}747.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }748.peach-totp-countdown {749  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;750  font-size: 22px; color: var(--peach-t1);751}752.peach-totp-ring { transform: rotate(-90deg); }753.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }754.peach-totp-ring-progress {755  fill: none; stroke: var(--peach-accent); stroke-width: 2;756  stroke-linecap: round;757  transition: stroke-dashoffset 1s linear, stroke 500ms ease;758}759/* Search bar */760.peach-search-wrap {761  border-top: 1px solid var(--peach-t3);762  background: var(--peach-s1);763  min-height: 54px; position: relative;764  box-shadow: inset 0 6px 18px transparent;765  transition: box-shadow 700ms ease;766}767.peach-search-wrap::before {768  content: "";769  position: absolute;770  left: 0;771  top: 0;772  height: 2px;773  width: var(--peach-totp-progress, 0%);774  background: var(--peach-accent);775  opacity: 0;776  transition: width 1s linear, opacity 180ms ease;777  pointer-events: none;778}779.peach-shell[data-totp-active="true"] .peach-search-wrap::before {780  opacity: 0.9;781}782.peach-shell[data-totp-active="true"] .peach-search-wrap {783  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);784}785786@keyframes peach-totp-code-flare {787  0%   { filter: brightness(1); }788  25%  { filter: brightness(1.3); }789  100% { filter: brightness(1); }790}791.peach-totp-code.is-hot {792  animation: peach-totp-code-flare 3000ms ease-in-out both;793}794.peach-search-bar {795  min-height: 54px;796  display: grid;797  grid-template-columns: auto minmax(0, 1fr) auto;798  align-items: center;799  gap: 8px; padding: 0 9px 0 12px;800}801.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }802.peach-search-input {803  border: 0; background: transparent; color: var(--peach-t0);804  font-family: var(--font-display);805  font-style: italic; font-size: 18px;806  outline: none; width: 100%; min-width: 0; padding: 0;807  caret-color: var(--peach-accent);808}809.peach-search-input::placeholder { color: var(--peach-t2); }810.peach-search-meta {811  display: grid;812  grid-auto-flow: column;813  align-items: center;814  justify-content: end;815  gap: 6px;816  min-width: max-content;817}818.peach-search-counter {819  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;820  font-size: 0.625rem; color: var(--peach-t2);821  display: inline-flex;822  align-items: center;823  line-height: 1;824}825.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }826827/* Buttons */828.peach-btn {829  border: 1px solid transparent; border-radius: 12px;830  background: transparent; color: var(--peach-t0);831  font-family: Inter, system-ui, sans-serif;832  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;833  cursor: pointer;834  transition:835    background-color var(--peach-dur-80) var(--peach-curve-arrival),836    color var(--peach-dur-80) var(--peach-curve-arrival),837    border-color var(--peach-dur-150) var(--peach-curve-arrival);838}839.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }840.peach-btn:disabled {841  opacity: 0.45;842  cursor: not-allowed;843}844.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }845.peach-btn--md { min-height: 38px; }846.peach-btn--accent {847  background: var(--peach-accent);848  color: rgba(0,0,0,0.92);849  font-weight: 500;850  box-shadow:851    0 1px 0 rgba(255,255,255,0.08) inset,852    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),853    0 3px 16px var(--peach-glow),854    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);855}856.peach-btn--accent:hover:not(:disabled) {857  background: var(--peach-accent);858  filter: brightness(1.10) saturate(1.05);859  box-shadow:860    0 1px 0 rgba(255,255,255,0.10) inset,861    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),862    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),863    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);864}865.peach-btn--ghost { border-color: var(--peach-t3); color: var(--peach-t1); }866.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }867.peach-icon-btn {868  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;869  display: inline-flex; align-items: center; justify-content: center;870}871872.peach-btn:focus-visible {873  outline: none;874  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);875}876877/* Lock button */878.peach-lock-icon { transform-origin: center; }879.peach-lock-btn.is-locking { color: var(--peach-accent); }880.peach-lock-btn.is-locking .peach-lock-icon {881  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);882}883884/* Biometric unlock button */885.peach-biometric-btn {886  display: flex;887  align-items: center;888  justify-content: center;889  gap: 6px;890  margin-top: 8px;891  width: 100%;892}893894/* Copy button */895.peach-copy-btn {896  position: relative; overflow: hidden;897  color: var(--peach-t2); border-color: var(--peach-t3);898}899.peach-copy-icon {900  display: inline-flex; align-items: center; justify-content: center;901  position: relative; z-index: 1;902}903.peach-copy-icon-svg { display: block; }904.peach-copy-sheen {905  position: absolute; inset: 0;906  background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 30%, color-mix(in srgb, var(--peach-accent) 8%, transparent) 100%);907  opacity: 0; transform: scaleX(0.15); transform-origin: left center;908}909.peach-copy-btn.is-copied {910  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;911  box-shadow:912    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),913    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),914    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);915}916.peach-copy-btn.is-copied .peach-copy-icon {917  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;918}919.peach-copy-btn.is-copied .peach-copy-sheen {920  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;921}922.peach-copy-btn.is-retreat {923  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;924}925.peach-copy-btn.is-retreat .peach-copy-sheen {926  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;927}928.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }929.peach-copy-drain-bar {930  display: block; width: 100%; height: 100%;931  background: var(--peach-accent); opacity: 0.7;932  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;933}934935/* Unlock screen elements */936.peach-unlock-headline {937  margin: 2px 0 0;938  font-family: var(--font-display);939  font-size: 52px; line-height: 0.95;940  font-style: italic; font-weight: 400;941}942.peach-subline {943  margin: 0;944  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;945  font-size: 0.625rem; color: var(--peach-t2); font-style: italic;946}947.peach-subline--lock {948  max-width: 248px;949  line-height: 1.5;950}951.peach-underline-input {952  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);953  padding: 6px 0; background: transparent; color: var(--peach-t0);954  outline: none;955  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;956  font-size: 0.8125rem;957  caret-color: var(--peach-accent);958}959.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }960.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }961.peach-hint {962  margin: 0;963  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;964  font-size: 0.625rem; color: var(--peach-t2);965}966.peach-unlock-footer {967  margin-top: 4px; display: flex; align-items: center; gap: 7px;968  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;969  font-size: 0.625rem; color: var(--peach-t2);970}971.peach-unlock-footer--lock {972  padding-top: 2px;973}974975/* Breach badge */976.peach-breach-badge {977  display: flex;978  position: relative;979  z-index: 1;980  align-items: center;981  gap: 7px;982  font-size: 0.5625rem;983  color: var(--peach-breach);984  padding: 5px 10px;985  margin-bottom: 4px;986  border-radius: 8px;987  background: rgba(220, 80, 60, 0.07);988  border: 1px solid rgba(220, 80, 60, 0.18);989  letter-spacing: 0.04em;990}991992.peach-breach-action {993  margin-left: auto;994  font-size: 0.625rem;995  padding: 3px 8px;996}997998.peach-password-value.is-breached {999  color: rgba(220, 80, 60, 0.75);1000  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1001}10021003/* ── Overlay views ─────────────────────────────────────────────────── */1004.peach-overlay-view {1005  position: absolute;1006  inset: 0;1007  display: flex;1008  flex-direction: column;1009  background:1010    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1011    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1012    var(--peach-bg);1013  z-index: 2;1014  overflow: hidden;1015  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1016}1017@keyframes overlay-in {1018  from { opacity: 0; transform: translateY(8px); }1019  to   { opacity: 1; transform: translateY(0); }1020}1021.peach-overlay-view.ov-enter-up {1022  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1023}1024.peach-overlay-view.ov-exit-up {1025  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1026}1027.peach-overlay-view.ov-enter-right {1028  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1029}1030.peach-overlay-view.ov-exit-right {1031  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1032}10331034@keyframes ov-enter-up {1035  from { opacity: 0; transform: translateY(18px); }1036  to   { opacity: 1; transform: translateY(0); }1037}1038@keyframes ov-exit-up {1039  from { opacity: 1; transform: translateY(0); }1040  to   { opacity: 0; transform: translateY(-12px); }1041}1042@keyframes ov-enter-right {1043  from { opacity: 0; transform: translateX(20px); }1044  to   { opacity: 1; transform: translateX(0); }1045}1046@keyframes ov-exit-right {1047  from { opacity: 1; transform: translateX(0); }1048  to   { opacity: 0; transform: translateX(20px); }1049}10501051/* Overlay shared header */1052.peach-overlay-header {1053  padding: 10px 12px;1054  display: flex;1055  align-items: center;1056  gap: 8px;1057  border-bottom: 1px solid var(--peach-t3);1058  flex-shrink: 0;1059}1060.peach-overlay-title {1061  font-family: "IBM Plex Mono", monospace;1062  font-size: 0.5625rem;1063  text-transform: uppercase;1064  letter-spacing: 0.18em;1065  color: var(--peach-t2);1066  flex: 1;1067  text-align: center;1068}10691070.peach-overlay-card {1071  background: var(--peach-s1);1072  border: 1px solid var(--peach-t3);1073  border-radius: 12px;1074  overflow: hidden;1075  width: 100%;1076}10771078.peach-onboarding-alt-actions {1079  display: flex;1080  flex-direction: column;1081  gap: 4px;1082  padding: 0;1083}10841085.peach-settings-copy {1086  margin: 0 0 10px;1087  font-size: 0.6875rem;1088  line-height: 1.5;1089  color: var(--peach-t2);1090}10911092.peach-settings-copy strong {1093  color: var(--peach-t0);1094}10951096.peach-settings-copy--spacious {1097  margin-bottom: 12px;1098}10991100.peach-settings-copy--result {1101  color: var(--peach-accent);1102  font-size: 0.8125rem;1103  text-align: center;1104  padding: 8px 0;1105}11061107.peach-settings-copy--danger {1108  color: var(--peach-breach);1109}11101111.peach-settings-copy--success {1112  color: var(--peach-accent);1113}11141115.peach-inline-feedback {1116  font-size: 0.6875rem;1117  margin: 10px 0 0;1118}11191120.peach-inline-feedback--ok {1121  color: var(--peach-accent);1122}11231124.peach-inline-feedback--error {1125  color: var(--peach-breach);1126}11271128.peach-inline-feedback--muted {1129  color: var(--peach-t2);1130  font-size: 0.625rem;1131  margin: 4px 0;1132}11331134.peach-inline-feedback--spaced {1135  margin-top: 12px;1136}11371138.peach-settings-actions--row {1139  display: flex;1140  gap: 6px;1141}11421143.peach-settings-actions--end {1144  margin-top: 14px;1145  justify-content: flex-end;1146}11471148.peach-settings-stack {1149  display: flex;1150  flex-direction: column;1151  gap: 6px;1152}11531154.peach-settings-stack--tight {1155  gap: 4px;1156}11571158.peach-settings-stack--spacious {1159  gap: 8px;1160}11611162.peach-settings-input {1163  width: 100%;1164  box-sizing: border-box;1165  padding: 8px 10px;1166  background: rgba(0, 0, 0, 0.22);1167  border: 1px solid transparent;1168  border-radius: 6px;1169  color: var(--peach-t0);1170  font-family: var(--font-ui);1171  font-size: 0.75rem;1172  outline: none;1173  transition: border-color 120ms ease, background 120ms ease;1174}11751176.peach-settings-input:focus {1177  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1178  background: rgba(0, 0, 0, 0.28);1179}11801181.peach-settings-input[type="password"] {1182  font-family: var(--font-mono);1183  letter-spacing: 0.04em;1184}11851186.peach-hidden-file-input {1187  display: none;1188}11891190.peach-checkbox-note {1191  display: flex;1192  align-items: flex-start;1193  gap: 8px;1194  font-size: 0.6875rem;1195  color: var(--peach-t1);1196  cursor: pointer;1197  margin: 12px 0;1198}11991200.peach-checkbox-note input {1201  margin-top: 1px;1202}12031204.peach-danger-notice {1205  background: rgba(220, 80, 60, 0.08);1206  border: 1px solid rgba(220, 80, 60, 0.2);1207  border-radius: 6px;1208  padding: 9px 11px;1209  font-size: 0.6875rem;1210  color: var(--peach-t1);1211  line-height: 1.5;1212}12131214.peach-info-notice {1215  font-size: 0.6875rem;1216  color: var(--peach-t1);1217  line-height: 1.5;1218  background: var(--surface-card);1219  border: 1px solid var(--peach-t3);1220  border-radius: 6px;1221  padding: 8px 10px;1222}12231224.peach-info-notice--warn {1225  border-color: rgba(220, 38, 38, 0.4);1226  background: rgba(220, 38, 38, 0.06);1227  color: rgba(220, 38, 38, 0.92);1228  margin-bottom: 8px;1229}12301231.peach-strength-row {1232  display: flex;1233  align-items: center;1234  gap: 8px;1235  margin-bottom: 10px;1236}12371238.peach-strength-track {1239  flex: 1;1240  height: 4px;1241  background: var(--peach-s2);1242  border-radius: 2px;1243  overflow: hidden;1244}12451246.peach-strength-fill {1247  height: 100%;1248  border-radius: 2px;1249  transition: width 120ms ease, background 120ms ease;1250}12511252/* ── Type selector tabs ── */1253.peach-type-tabs {1254  display: flex;1255  gap: 0;1256  background: var(--peach-t4);1257  border-radius: 8px;1258  padding: 3px;1259}12601261.peach-type-tab {1262  flex: 1;1263  display: flex;1264  align-items: center;1265  justify-content: center;1266  gap: 6px;1267  padding: 6px 10px;1268  border-radius: 6px;1269  border: none;1270  background: transparent;1271  cursor: pointer;1272  font-family: Inter, system-ui, sans-serif;1273  font-size: 0.6875rem;1274  font-weight: 400;1275  letter-spacing: 0.04em;1276  color: var(--peach-t1);1277  transition: background 150ms ease, color 150ms ease;1278}12791280.peach-type-tab.is-active {1281  background: var(--peach-s2);1282  color: var(--peach-t0);1283  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1284}12851286.peach-type-tab:not(.is-active):hover {1287  color: var(--peach-t0);1288}12891290.peach-type-tab svg {1291  opacity: 0.7;1292  flex-shrink: 0;1293}12941295.peach-type-tab.is-active svg {1296  opacity: 1;1297}12981299/* ── List view ───────────────────────────────────────────────────────── */1300.peach-list-top {1301  padding: 0 10px;1302  min-height: 46px;1303  display: flex;1304  align-items: center;1305  gap: 6px;1306  border-bottom: 1px solid var(--peach-t3);1307  flex-shrink: 0;1308  background: var(--peach-s1);1309}1310.peach-vault-list {1311  flex: 1;1312  overflow-y: auto;1313  scrollbar-width: none;1314}1315.peach-vault-list::-webkit-scrollbar { display: none; }13161317/* Scrollbar — vault list */1318.peach-vault-list {1319  scrollbar-width: thin;1320  scrollbar-color: var(--peach-t3) transparent;1321}13221323.peach-vault-list::-webkit-scrollbar {1324  width: 3px;1325}13261327.peach-vault-list::-webkit-scrollbar-thumb {1328  background: var(--peach-t3);1329  border-radius: 2px;1330}13311332.peach-entry-row {1333  width: 100%;1334  display: flex;1335  align-items: center;1336  gap: 10px;1337  padding: 9px 16px;1338  background: transparent;1339  border: none;1340  border-bottom: 1px solid var(--peach-t3);1341  cursor: pointer;1342  color: inherit;1343  text-align: left;1344  transition: background 80ms ease;1345}1346.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1347.peach-entry-row:last-child { border-bottom: none; }1348.peach-entry-row.is-active {1349  box-shadow: inset 2px 0 0 var(--peach-accent);1350  background: rgba(240,232,216,0.03);1351}1352.peach-entry-row:focus-visible {1353  outline: none;1354  box-shadow: 0 0 0 1px var(--peach-border-accent);1355  background: rgba(240,232,216,0.03);1356}1357.peach-entry-row-icon {1358  width: 26px; height: 26px;1359  border-radius: 7px;1360  border: 1px solid var(--peach-t3);1361  display: flex; align-items: center; justify-content: center;1362  color: var(--peach-t2);1363  flex-shrink: 0;1364}1365.peach-entry-row-icon.is-breach {1366  border-color: rgba(220,80,60,0.3);1367  color: rgba(220,80,60,0.7);1368}13691370/* Title-initials chip used as the favicon fallback for login entries whose1371 * real favicon hasn't been cached by the browser yet (freshly-imported,1372 * never-visited domains). Background colour is hashed from the title so1373 * the same entry always shows the same chip. The chip fits the same1374 * 26×26 row icon slot the favicon would take. */1375.peach-favicon-initials {1376  display: inline-flex;1377  align-items: center;1378  justify-content: center;1379  width: 100%;1380  height: 100%;1381  border-radius: 4px;1382  font-family: "IBM Plex Mono", monospace;1383  font-size: 0.5625rem;1384  font-weight: 600;1385  letter-spacing: 0.04em;1386  color: rgba(240, 232, 216, 0.92);1387  text-transform: uppercase;1388  user-select: none;1389}1390.peach-entry-row-info { flex: 1; min-width: 0; }1391.peach-entry-row-name {1392  display: block;1393  font-family: var(--font-display);1394  font-size: 1.0625rem;1395  font-style: italic;1396  font-weight: 400;1397  color: var(--peach-t0);1398  line-height: 1.2;1399  white-space: nowrap;1400  overflow: hidden;1401  text-overflow: ellipsis;1402}1403.peach-entry-row-meta {1404  display: block;1405  font-family: "IBM Plex Mono", monospace;1406  font-size: 0.5625rem;1407  color: var(--peach-t2);1408  margin-top: 1px;1409  letter-spacing: 0.05em;1410}1411.peach-entry-row-dot {1412  width: 5px; height: 5px;1413  border-radius: 50%;1414  background: rgba(220,80,60,0.7);1415  flex-shrink: 0;1416}1417.peach-new-entry-row {1418  display: flex;1419  align-items: center;1420  justify-content: center;1421  gap: 6px;1422  width: 100%;1423  padding: 11px;1424  background: transparent;1425  border: none;1426  border-top: 1px solid var(--peach-t3);1427  color: var(--peach-t2);1428  font-family: "IBM Plex Mono", monospace;1429  font-size: 0.5625rem;1430  text-transform: uppercase;1431  letter-spacing: 0.14em;1432  cursor: pointer;1433  flex-shrink: 0;1434  transition: color 120ms ease, background 120ms ease;1435}1436.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14371438/* ── Multi-select mode ─────────────────────────────────────────────── */14391440/* Select-mode trigger button in sort bar — same shape as trash btn */1441.peach-sort-select-btn {1442  display: flex;1443  align-items: center;1444  justify-content: center;1445  padding: 3px 5px;1446  background: transparent;1447  border: none;1448  cursor: pointer;1449  color: var(--peach-t2);1450  border-radius: 4px;1451  transition: color 140ms ease, background 140ms ease;1452}1453.peach-sort-select-btn:hover {1454  color: var(--peach-t1);1455  background: var(--peach-t3);1456}14571458/* Sort bar in select mode */1459.peach-select-cancel-btn {1460  background: transparent;1461  border: none;1462  padding: 0 4px;1463  cursor: pointer;1464  font-family: "IBM Plex Mono", monospace;1465  font-size: 0.5625rem;1466  letter-spacing: 0.12em;1467  text-transform: uppercase;1468  color: var(--peach-t2);1469  transition: color 140ms ease;1470  flex-shrink: 0;1471}1472.peach-select-cancel-btn:hover { color: var(--peach-t0); }14731474.peach-select-count-label {1475  flex: 1;1476  text-align: center;1477  font-family: "IBM Plex Mono", monospace;1478  font-size: 0.5625rem;1479  letter-spacing: 0.14em;1480  text-transform: uppercase;1481  color: var(--peach-t1);1482}14831484.peach-select-all-btn {1485  background: transparent;1486  border: none;1487  padding: 0 4px;1488  cursor: pointer;1489  font-family: "IBM Plex Mono", monospace;1490  font-size: 0.5625rem;1491  letter-spacing: 0.12em;1492  text-transform: uppercase;1493  color: var(--peach-t2);1494  transition: color 140ms ease;1495  flex-shrink: 0;1496}1497.peach-select-all-btn:hover { color: var(--peach-accent); }14981499/* List in select mode */1500.peach-vault-list.is-selecting .peach-entry-row {1501  cursor: default;1502}1503.peach-vault-list.is-selecting .peach-entry-row:hover {1504  background: rgba(240,232,216,0.02);1505}1506.peach-vault-list.is-selecting .peach-entry-row.is-selected {1507  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1508}1509.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1510  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1511}15121513/* Select indicator circles in icon slot */1514.peach-entry-row-icon.is-select-icon {1515  color: var(--peach-t2);1516}1517.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1518  color: var(--peach-accent);1519}15201521/* Delete action bar at bottom (replaces new-entry row) */1522.peach-select-action-bar {1523  display: flex;1524  align-items: center;1525  justify-content: center;1526  gap: 7px;1527  width: 100%;1528  padding: 11px;1529  background: transparent;1530  border: none;1531  border-top: 1px solid var(--peach-t3);1532  color: var(--peach-t1);1533  font-family: "IBM Plex Mono", monospace;1534  font-size: 0.5625rem;1535  text-transform: uppercase;1536  letter-spacing: 0.14em;1537  cursor: pointer;1538  flex-shrink: 0;1539  transition: color 120ms ease, background 120ms ease;1540}1541.peach-select-action-bar:not(:disabled):hover {1542  color: var(--peach-t0);1543  background: rgba(220,80,60,0.06);1544}1545.peach-select-action-bar:not(:disabled):hover svg {1546  stroke: rgba(220,80,60,0.8);1547}1548.peach-select-action-bar:disabled,1549.peach-select-action-bar.is-empty {1550  color: var(--peach-t2);1551  cursor: default;1552  opacity: 0.5;1553}1554.peach-search-counter-list {1555  white-space: nowrap;1556  flex-shrink: 0;1557}1558.peach-list-empty {1559  min-height: 180px;1560  display: grid;1561  place-items: center;1562  color: var(--peach-t2);1563  font-family: "IBM Plex Mono", monospace;1564  font-size: 0.6875rem;1565}15661567/* ── Settings view ───────────────────────────────────────────────────── */1568.peach-settings-body {1569  flex: 1;1570  overflow-y: auto;1571  min-height: 0;1572  display: flex;1573  flex-direction: column;1574  padding: 2px 0 10px;1575}1576.peach-settings-group {1577  margin: 4px 10px;1578  padding: 9px 14px 11px;1579  border-radius: 12px;1580  border: 1px solid rgba(255, 255, 255, 0.07);1581  background: rgba(26, 20, 16, 0.60);1582  backdrop-filter: blur(10px) saturate(1.3);1583  -webkit-backdrop-filter: blur(10px) saturate(1.3);1584}15851586.peach-settings-group + .peach-settings-group {1587  margin-top: 6px;1588}15891590@supports not (backdrop-filter: blur(1px)) {1591  .peach-settings-group {1592    background: rgba(26, 20, 16, 0.90);1593    border-color: rgba(255, 255, 255, 0.09);1594    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1595  }1596}15971598.light .peach-settings-group,1599[data-theme="light"] .peach-settings-group {1600  background: rgba(253, 248, 244, 0.68);1601  border-color: rgba(0, 0, 0, 0.07);1602  backdrop-filter: blur(10px) saturate(1.2);1603  -webkit-backdrop-filter: blur(10px) saturate(1.2);1604}16051606@supports not (backdrop-filter: blur(1px)) {1607  .light .peach-settings-group,1608  [data-theme="light"] .peach-settings-group {1609    background: rgba(253, 248, 244, 0.95);1610    border-color: rgba(0, 0, 0, 0.09);1611  }1612}1613.peach-export-intro {1614  padding-bottom: 8px;1615}1616.peach-export-card {1617  display: grid;1618  gap: 10px;1619}1620.peach-rune-canvas {1621  border-radius: 8px;1622  background: rgba(0, 0, 0, 0.22);1623  flex: 1;1624  align-self: center;1625}1626.peach-script-input {1627  font-family: "PeachScript", monospace;1628  font-size: 0.6875rem;1629  line-height: 1.9;1630  letter-spacing: 0.06em;1631  color: var(--peach-t0);1632  background: rgba(0, 0, 0, 0.22);1633  border: none;1634  border-radius: 6px;1635  padding: 12px;1636  width: 100%;1637  min-height: 96px;1638  resize: vertical;1639  word-break: break-all;1640  scrollbar-width: none;1641  -ms-overflow-style: none;1642}16431644.peach-script-input::-webkit-scrollbar { display: none; }1645.peach-csv-warning {1646  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1647  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1648  color: var(--peach-t0);1649  border-radius: 6px;1650  padding: 10px 12px;1651  margin-bottom: 8px;1652  font-size: 0.75rem;1653  line-height: 1.45;1654}1655.peach-export-card--primary {1656  background:1657    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1658}16591660/* Export menu — distribute the three format cards across the popup. */1661.peach-export-menu {1662  display: flex;1663  flex-direction: column;1664  flex: 1;1665  min-height: 0;1666}1667.peach-export-menu .peach-settings-group {1668  flex: 1;1669  display: flex;1670  flex-direction: column;1671  justify-content: center;1672  gap: 10px;1673}16741675/* Result view — the script-string fills the remaining vertical surface. */1676.peach-export-result-group {1677  flex: 1;1678  display: flex;1679  flex-direction: column;1680  min-height: 0;1681  border-bottom: none;1682}1683.peach-export-result-group .peach-export-card {1684  flex: 1;1685  min-height: 0;1686  display: flex;1687  flex-direction: column;1688  gap: 10px;1689}1690.peach-export-result-group .peach-export-card-copy {1691  flex-shrink: 0;1692}1693.peach-export-result-group .peach-settings-label {1694  flex-shrink: 0;1695}1696.peach-export-result-group button {1697  flex-shrink: 0;1698}1699.peach-export-card-head {1700  display: flex;1701  align-items: center;1702  justify-content: space-between;1703  gap: 10px;1704}1705.peach-export-card-copy {1706  margin: 0;1707  font-size: 0.75rem;1708  line-height: 1.55;1709  color: var(--peach-t1);1710}1711.peach-export-note {1712  margin: 0;1713  font-size: 0.625rem;1714  line-height: 1.5;1715  color: var(--peach-t2);1716}1717.peach-export-pill {1718  display: inline-flex;1719  align-items: center;1720  padding: 4px 8px;1721  border-radius: 999px;1722  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1723  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1724  color: var(--peach-accent);1725  font-family: "IBM Plex Mono", monospace;1726  font-size: 0.5rem;1727  letter-spacing: 0.12em;1728  text-transform: uppercase;1729  white-space: nowrap;1730}1731.peach-export-pill--danger {1732  border-color: rgba(220,80,60,0.22);1733  background: rgba(220,80,60,0.08);1734  color: var(--peach-breach);1735}1736.peach-settings-label {1737  margin: 0 0 6px;1738  font-family: "IBM Plex Mono", monospace;1739  font-size: 0.5rem;1740  text-transform: uppercase;1741  letter-spacing: 0.18em;1742  color: var(--peach-t2);1743}1744.peach-settings-row {1745  display: flex;1746  align-items: center;1747  justify-content: space-between;1748  gap: 12px;1749  min-height: 34px;1750  padding: 6px 0;1751  font-size: 0.8125rem;1752  color: var(--peach-t1);1753}1754.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1755.peach-settings-value {1756  font-family: "IBM Plex Mono", monospace;1757  font-size: 0.625rem;1758  color: var(--peach-t2);1759}17601761.peach-settings-value--status {1762  display: flex;1763  align-items: center;1764  gap: 6px;1765}17661767.peach-settings-link {1768  font-family: "IBM Plex Mono", monospace;1769  font-size: 0.625rem;1770  color: var(--peach-accent);1771  text-decoration: none;1772  cursor: pointer;1773}1774.peach-settings-link:hover {1775  text-decoration: underline;1776}17771778.peach-settings-row--stack {1779  flex-direction: column;1780  align-items: stretch;1781  gap: 6px;1782}17831784.peach-settings-row--top {1785  align-items: flex-start;1786}17871788.peach-settings-row-main {1789  display: flex;1790  flex-direction: column;1791  gap: 4px;1792  flex: 1;1793}1794.peach-toggle {1795  width: 28px; height: 16px;1796  border-radius: 999px;1797  background: var(--peach-t3);1798  border: 1px solid var(--peach-t3);1799  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1800  flex-shrink: 0;1801  transition: background 200ms ease, border-color 200ms ease;1802  cursor: pointer;1803}1804.peach-toggle.is-on {1805  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1806  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1807}1808.peach-toggle-knob {1809  width: 10px; height: 10px;1810  border-radius: 50%;1811  background: var(--peach-t2);1812  flex-shrink: 0;1813  transform: translateX(0px);1814  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1815}1816.peach-toggle.is-on .peach-toggle-knob {1817  background: var(--peach-accent);1818  transform: translateX(12px);1819}1820.peach-settings-footer {1821  display: flex;1822  align-items: center;1823  gap: 8px;1824  margin-top: auto;1825  padding: 14px 16px 8px;1826  font-family: "IBM Plex Mono", monospace;1827  font-size: 0.5625rem;1828  color: var(--peach-t2);1829}18301831/* ── Settings home navigation ──────────────────────────────────────────── */1832.peach-settings-nav-label {1833  margin: 0 0 2px;1834  padding: 12px 16px 4px;1835  font-family: "IBM Plex Mono", monospace;1836  font-size: 0.5rem;1837  text-transform: uppercase;1838  letter-spacing: 0.18em;1839  color: var(--peach-t2);1840}18411842.peach-settings-cat-row {1843  display: flex;1844  align-items: center;1845  gap: 10px;1846  width: 100%;1847  padding: 9px 16px;1848  background: none;1849  border: none;1850  border-bottom: 1px solid var(--peach-t3);1851  cursor: pointer;1852  text-align: left;1853  color: inherit;1854  transition: background var(--peach-dur-80) ease;1855}1856.peach-settings-cat-row:hover {1857  background: var(--peach-t3);1858}1859.peach-settings-cat-row:last-child {1860  border-bottom: none;1861}18621863.peach-settings-cat-icon {1864  width: 28px;1865  height: 28px;1866  border-radius: 7px;1867  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1868  color: var(--peach-accent);1869  display: flex;1870  align-items: center;1871  justify-content: center;1872  flex-shrink: 0;1873}1874/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1875   Darken the icon stroke to ink and bump the bg tint so the icon reads1876   sharply while the cell still feels accent-tinted. */1877.light .peach-settings-cat-icon {1878  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1879  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1880}18811882.peach-settings-cat-content {1883  flex: 1;1884  display: flex;1885  flex-direction: column;1886  gap: 2px;1887  min-width: 0;1888}18891890.peach-settings-cat-name {1891  font-size: 0.8125rem;1892  font-weight: 450;1893  color: var(--peach-t0);1894  line-height: 1.2;1895}18961897.peach-settings-cat-desc {1898  font-size: 0.625rem;1899  color: var(--peach-t2);1900  line-height: 1.3;1901  white-space: nowrap;1902  overflow: hidden;1903  text-overflow: ellipsis;1904}19051906.peach-settings-cat-chevron {1907  color: var(--peach-t2);1908  flex-shrink: 0;1909  opacity: 0.5;1910}19111912/* ── Settings sub-view section labels ──────────────────────────────────── */1913.peach-settings-sub-label {1914  margin: 12px 0 4px;1915  font-family: "IBM Plex Mono", monospace;1916  font-size: 0.5rem;1917  text-transform: uppercase;1918  letter-spacing: 0.18em;1919  color: var(--peach-t2);1920}1921.peach-settings-sub-label:first-child {1922  margin-top: 4px;1923}19241925/* ── Settings: collapsible Advanced section ─────────────────────────────── */1926.peach-settings-advanced-toggle {1927  display: flex;1928  align-items: center;1929  justify-content: space-between;1930  width: 100%;1931  background: none;1932  border: none;1933  cursor: pointer;1934  padding: 12px 0 4px;1935  margin: 0;1936  color: inherit;1937}1938.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {1939  color: var(--peach-t1);1940}1941.peach-settings-advanced-chevron {1942  font-size: 0.5625rem;1943  color: var(--peach-t3);1944  letter-spacing: 0;1945  transition: color 120ms ease;1946}19471948/* ── Feedback form ──────────────────────────────────────────────────────── */1949.peach-feedback-group {1950  flex: 1;1951  display: flex;1952  flex-direction: column;1953  border-bottom: none;1954}19551956.peach-feedback-intro {1957  margin: 4px 0 14px;1958  font-size: 0.75rem;1959  line-height: 1.55;1960  color: var(--peach-t1);1961}19621963.peach-feedback-chips {1964  display: flex;1965  flex-wrap: wrap;1966  gap: 6px;1967  margin-bottom: 14px;1968}19691970.peach-feedback-chip {1971  padding: 4px 10px;1972  border-radius: 999px;1973  border: 1px solid var(--peach-t3);1974  background: none;1975  color: var(--peach-t2);1976  font-size: 0.6875rem;1977  font-family: var(--font-ui);1978  cursor: pointer;1979  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,1980    background var(--peach-dur-80) ease;1981}1982.peach-feedback-chip:hover {1983  border-color: var(--peach-t2);1984  color: var(--peach-t1);1985}1986.peach-feedback-chip.is-active {1987  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);1988  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1989  color: var(--peach-accent);1990}19911992.peach-feedback-textarea {1993  flex: 1;1994  width: 100%;1995  min-height: 120px;1996  box-sizing: border-box;1997  background: rgba(0, 0, 0, 0.22);1998  border: 1px solid transparent;1999  border-radius: 6px;2000  color: var(--peach-t0);2001  font-size: 0.75rem;2002  font-family: var(--font-ui);2003  line-height: 1.5;2004  padding: 8px 10px;2005  resize: none;2006  outline: none;2007  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2008}2009.peach-feedback-textarea:focus {2010  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2011  background: rgba(0, 0, 0, 0.28);2012}2013.peach-feedback-textarea:focus {2014  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2015}2016.peach-feedback-textarea::placeholder {2017  color: var(--peach-t2);2018}20192020.peach-feedback-meta {2021  margin: 6px 0 0;2022  font-size: 0.625rem;2023  color: var(--peach-t2);2024  font-family: "IBM Plex Mono", monospace;2025}20262027.peach-feedback-result {2028  margin: 8px 0 0;2029  font-size: 0.6875rem;2030  font-family: "IBM Plex Mono", monospace;2031}2032.peach-feedback-result--ok { color: var(--peach-sync-ok); }2033.peach-feedback-result--err { color: var(--peach-breach); }20342035.peach-feedback-submit {2036  width: 100%;2037  margin-top: 12px;2038  justify-content: center;2039}20402041.peach-feedback-anon {2042  margin: 8px 0 0;2043  font-size: 0.625rem;2044  color: var(--peach-t2);2045  text-align: center;2046}20472048.peach-passkey-badge {2049  margin-left: 8px;2050  font-size: 0.625rem;2051  letter-spacing: 0.06em;2052  text-transform: uppercase;2053  color: var(--peach-t2);2054  font-family: var(--font-ui);2055  vertical-align: middle;2056}20572058.peach-passkey-delete-btn {2059  color: var(--peach-breach);2060  border-color: rgba(229, 85, 85, 0.25);2061}20622063.peach-passkey-delete-confirm {2064  display: flex;2065  align-items: center;2066  gap: 8px;2067  padding: 8px 10px;2068  background: rgba(229, 85, 85, 0.06);2069  border: 1px solid rgba(229, 85, 85, 0.2);2070  border-radius: 6px;2071}20722073.peach-passkey-delete-confirm-copy {2074  flex: 1;2075  font-size: 0.6875rem;2076  color: var(--peach-t1);2077}20782079.peach-passkey-delete-btn--confirm {2080  color: var(--peach-breach);2081  border-color: rgba(229, 85, 85, 0.4);2082}20832084.peach-passkey-activity {2085  flex-direction: column;2086  align-items: flex-start;2087  gap: 4px;2088}20892090.peach-passkey-meta {2091  font-size: 0.6875rem;2092  color: var(--peach-t2);2093}20942095.peach-passkey-actions {2096  position: relative;2097  z-index: 1;2098  margin-top: 14px;2099  display: flex;2100  flex-direction: column;2101  gap: 8px;2102}21032104.peach-passkey-approval {2105  display: flex;2106  flex-direction: column;2107  align-items: center;2108  padding: 22px 20px 18px;2109  gap: 10px;2110  text-align: center;2111}21122113.peach-passkey-approval-icon {2114  width: 46px;2115  height: 46px;2116  border-radius: 12px;2117  background: var(--peach-s2);2118  border: 1px solid var(--peach-t3);2119  display: flex;2120  align-items: center;2121  justify-content: center;2122  flex-shrink: 0;2123  color: var(--peach-accent);2124}21252126.peach-passkey-approval-icon img,2127.peach-passkey-approval-icon svg {2128  width: 28px;2129  height: 28px;2130  border-radius: 6px;2131}21322133.peach-passkey-approval-rp {2134  font-family: var(--font-ui);2135  font-size: 0.75rem;2136  color: var(--peach-t2);2137  letter-spacing: 0.03em;2138}21392140.peach-passkey-approval-action {2141  font-family: var(--font-display);2142  font-style: italic;2143  font-weight: 300;2144  font-size: 22px;2145  color: var(--peach-t0);2146  line-height: 1.1;2147  margin: 2px 0;2148}21492150.peach-passkey-approval-user {2151  font-family: var(--font-mono);2152  font-size: 0.6875rem;2153  color: var(--peach-t1);2154  background: var(--peach-s2);2155  border: 1px solid var(--peach-t3);2156  border-radius: 4px;2157  padding: 3px 8px;2158}21592160.peach-passkey-approval-notice {2161  font-size: 0.625rem;2162  color: var(--peach-t2);2163  line-height: 1.5;2164  max-width: 220px;2165}21662167.peach-passkey-approval-actions {2168  display: flex;2169  gap: 8px;2170  width: 100%;2171  margin-top: 6px;2172}21732174.peach-passkey-approval-actions .peach-btn {2175  flex: 1;2176}21772178/* ── Inline generator drawer ── */2179.peach-generator-drawer {2180  display: grid;2181  grid-template-rows: 0fr;2182  transition: grid-template-rows 320ms var(--peach-curve-arrival);2183  overflow: hidden;2184}2185.peach-generator-drawer.is-open {2186  grid-template-rows: 1fr;2187}2188.peach-generator-drawer-inner {2189  min-height: 0;2190  overflow: hidden;2191}2192.peach-generator-drawer-content {2193  border-top: 1px solid var(--peach-t3);2194  padding: 8px 0 4px;2195  display: flex;2196  flex-direction: column;2197  gap: 8px;2198}21992200/* ── Compact generator (inside entry edit) ── */2201.peach-generator-drawer-content--compact {2202  border-top: 1px solid var(--peach-t3);2203  padding: 8px 0 2px;2204  gap: 7px;2205}2206.peach-pwgen-compact-display-row {2207  display: flex;2208  align-items: center;2209  gap: 6px;2210}2211.peach-pwgen-compact-output {2212  flex: 1;2213  min-width: 0;2214  font-family: "IBM Plex Mono", monospace;2215  font-size: 0.6875rem;2216  font-weight: 400;2217  letter-spacing: 0.04em;2218  color: var(--peach-t0);2219  background: rgba(240, 232, 216, 0.04);2220  border: 1px solid var(--peach-t3);2221  border-radius: 5px;2222  padding: 5px 8px;2223  word-break: break-all;2224  line-height: 1.5;2225}2226.peach-pwgen-compact-controls {2227  display: flex;2228  align-items: center;2229  gap: 6px;2230}2231.peach-pwgen-compact-slider {2232  flex: 1;2233  min-width: 0;2234  height: 2px !important;2235}2236.peach-pwgen-compact-controls .peach-pwgen-len-num {2237  flex-shrink: 0;2238  min-width: 18px;2239  text-align: right;2240}2241.peach-pwgen-compact-pills {2242  display: flex;2243  gap: 3px;2244  flex-shrink: 0;2245}2246.peach-pwgen-compact-pills .peach-pwgen-pill {2247  padding: 2px 7px;2248  font-size: 0.5rem;2249}2250.peach-pwgen-compact-use {2251  flex-shrink: 0;2252  font-size: 0.625rem !important;2253  padding: 3px 9px !important;2254  min-height: 22px !important;2255  border-radius: 5px !important;2256}22572258/* ── Password edit row (input + eye toggle side-by-side) ── */2259.peach-password-edit-row {2260  display: flex;2261  align-items: center;2262  gap: 6px;2263}2264.peach-password-edit-row .peach-inline-input {2265  flex: 1;2266  min-width: 0;2267}22682269/* ── Generate toggle link ── */2270.peach-generate-toggle-link {2271  display: inline-flex;2272  align-items: center;2273  gap: 5px;2274  background: none;2275  border: none;2276  padding: 0;2277  cursor: pointer;2278  font-family: "IBM Plex Mono", monospace;2279  font-size: 0.625rem;2280  color: var(--peach-t2);2281  letter-spacing: 0.04em;2282  transition: color 120ms ease;2283  align-self: flex-start;2284}2285.peach-generate-toggle-link:hover {2286  color: var(--peach-accent);2287}22882289/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2290.peach-entry-body {2291  flex: 1;2292  overflow-y: auto;2293  overflow-x: hidden;2294  scrollbar-width: none;2295  -ms-overflow-style: none;2296  overscroll-behavior: contain;2297  display: grid;2298  gap: 10px;2299  align-content: start;2300  padding: 10px 20px 14px;2301  min-width: 0;2302  min-height: 0;2303}2304.peach-entry-body::-webkit-scrollbar { display: none; }23052306/* Type-toggle pills + inline note toolbar */2307.peach-new-type-row {2308  display: flex;2309  align-items: center;2310  gap: 6px;2311  margin-bottom: 2px;2312}2313.peach-new-type-btn {2314  background: transparent;2315  border: 1px solid var(--peach-t3);2316  border-radius: 12px;2317  padding: 3px 10px;2318  font-family: "IBM Plex Mono", monospace;2319  font-size: 0.5625rem;2320  letter-spacing: 0.12em;2321  text-transform: uppercase;2322  color: var(--peach-t2);2323  cursor: pointer;2324  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2325}2326.peach-new-type-btn.is-active {2327  color: var(--peach-t0);2328  border-color: var(--peach-accent);2329  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2330}2331.peach-new-type-btn:not(.is-active):hover {2332  color: var(--peach-t1);2333  border-color: var(--peach-t2);2334}23352336/* Editable title */2337.peach-new-title-wrap { margin: 0 0 2px; }2338.peach-new-title-input {2339  background: transparent;2340  border: none;2341  outline: none;2342  width: 100%;2343  color: var(--peach-t0);2344  font-family: var(--font-display);2345  font-style: italic;2346  font-weight: 400;2347  font-size: 40px;2348  line-height: 0.95;2349  caret-color: var(--peach-accent);2350}2351.peach-new-title-input::placeholder { color: var(--peach-t2); }23522353/* Editable domain field */2354.peach-domain-value--edit {2355  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2356  font-size: 0.625rem;2357  font-style: italic;2358  letter-spacing: 0.12em;2359  color: var(--peach-t1);2360  background: transparent;2361  border: none;2362  border-bottom: 1px solid var(--peach-t3);2363  outline: none;2364  width: 100%;2365  padding: 2px 0;2366  caret-color: var(--peach-accent);2367  transition: border-color 140ms ease, color 140ms ease;2368}2369.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2370.peach-domain-value--edit:focus {2371  border-bottom-color: rgba(240, 232, 216, 0.28);2372  color: var(--peach-t0);2373}23742375/* Editable field values (username, password, totp) */2376.peach-field-value--edit {2377  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2378  font-size: 0.8125rem;2379  color: var(--peach-t0);2380  background: transparent;2381  border: none;2382  border-bottom: 1px solid var(--peach-t3);2383  outline: none;2384  flex: 1;2385  min-width: 0;2386  padding: 3px 0;2387  caret-color: var(--peach-accent);2388  transition: border-color 140ms ease, color 140ms ease;2389}2390.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2391.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2392.peach-field-value--edit:focus {2393  border-bottom-color: rgba(240, 232, 216, 0.28);2394  color: var(--peach-t0);2395}23962397/* "+ add optional field" links */2398.peach-entry-add-links {2399  display: flex;2400  gap: 12px;2401  flex-wrap: wrap;2402  margin-top: -2px;2403}2404.peach-add-field-link {2405  background: transparent;2406  border: none;2407  padding: 0;2408  cursor: pointer;2409  font-family: "IBM Plex Mono", monospace;2410  font-size: 0.5625rem;2411  letter-spacing: 0.1em;2412  text-transform: uppercase;2413  color: var(--peach-t2);2414  transition: color 140ms ease;2415}2416.peach-add-field-link:hover { color: var(--peach-accent); }24172418/* ── New entry form (legacy classes) ────────────────────────────────── */2419.peach-new-body {2420  flex: 1;2421  overflow-y: auto;2422  padding: 10px 20px 14px;2423}2424.peach-new-name-input {2425  background: transparent;2426  border: none;2427  outline: none;2428  width: 100%;2429  color: var(--peach-t0);2430  font-family: var(--font-display);2431  font-style: italic;2432  font-weight: 400;2433  font-size: 40px;2434  line-height: 0.95;2435  caret-color: var(--peach-accent);2436}2437.peach-new-name-input::placeholder { color: var(--peach-t2); }2438.peach-new-field-input {2439  background: transparent;2440  border: none;2441  outline: none;2442  flex: 1;2443  min-width: 0;2444  caret-color: var(--peach-accent);2445}2446.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }24472448/* ── Canary card ── */2449.peach-canary-card {2450  border: 1px solid rgba(217, 160, 48, 0.2);2451  background: rgba(217, 160, 48, 0.03);2452  border-radius: 8px;2453  padding: 12px;2454}24552456.peach-canary-settings-header {2457  display: flex;2458  align-items: center;2459  justify-content: space-between;2460  cursor: pointer;2461  user-select: none;2462}24632464.peach-canary-card .peach-label {2465  color: rgba(217, 160, 48, 0.85);2466}24672468.peach-canary-card .peach-new-field-input {2469  border-color: rgba(217, 160, 48, 0.25);2470}24712472.peach-canary-card .peach-new-field-input:focus {2473  border-color: rgba(217, 160, 48, 0.5);2474}24752476.peach-canary-body {2477  margin-top: 12px;2478  display: flex;2479  flex-direction: column;2480  gap: 10px;2481}24822483.peach-canary-explainer {2484  display: flex;2485  gap: 10px;2486  padding: 10px 12px;2487  border-radius: 10px;2488  background: rgba(217, 160, 48, 0.06);2489  border: 1px solid rgba(217, 160, 48, 0.22);2490  margin-bottom: 4px;2491}24922493.peach-canary-explainer-icon {2494  font-size: 1rem;2495  flex-shrink: 0;2496  line-height: 1.2;2497}24982499.peach-canary-explainer-title {2500  font-family: var(--font-ui);2501  font-size: 0.6875rem;2502  font-weight: 500;2503  color: rgba(217, 160, 48, 0.9);2504  margin: 0 0 3px;2505}25062507.peach-canary-explainer-copy {2508  font-family: var(--font-ui);2509  font-size: 0.625rem;2510  color: var(--peach-t2);2511  line-height: 1.55;2512  margin: 0;2513}25142515.peach-canary-hint {2516  font-size: 0.625rem;2517  color: var(--peach-t2);2518  font-family: Inter, system-ui, sans-serif;2519  line-height: 1.5;2520  margin-top: 4px;2521}25222523.peach-canary-actions-row {2524  display: flex;2525  align-items: center;2526  gap: 8px;2527}25282529.peach-canary-test-btn {2530  border-color: rgba(217, 160, 48, 0.3);2531  color: rgba(217, 160, 48, 0.85);2532}25332534.peach-canary-test-result {2535  font-size: 0.625rem;2536  font-family: Inter, system-ui, sans-serif;2537}25382539.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2540.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }25412542.peach-canary-badge {2543  display: flex;2544  position: relative;2545  z-index: 1;2546  align-items: center;2547  gap: 5px;2548  padding: 4px 10px;2549  background: rgba(217, 160, 48, 0.12);2550  border: 1px solid rgba(217, 160, 48, 0.35);2551  border-radius: 6px;2552  margin-bottom: 6px;2553  width: fit-content;2554}25552556.peach-canary-badge-label {2557  font-size: 0.625rem;2558  letter-spacing: 0.06em;2559  color: rgba(217, 160, 48, 0.9);2560  font-family: var(--font-ui);2561  text-transform: uppercase;2562}25632564.peach-canary-badge-icon {2565  font-size: 0.6875rem;2566}25672568.peach-canary-suppress-row {2569  display: flex;2570  align-items: center;2571  gap: 8px;2572  padding: 6px 10px;2573  background: rgba(217, 160, 48, 0.08);2574  border-radius: 6px;2575  margin-bottom: 8px;2576}25772578.peach-canary-suppress-label {2579  font-size: 0.6875rem;2580  color: rgba(217, 160, 48, 0.85);2581  cursor: pointer;2582  font-family: var(--font-ui);2583  letter-spacing: 0.04em;2584}25852586.peach-regen-panel {2587  position: relative;2588  z-index: 1;2589  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2590  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2591  border-radius: 8px;2592  padding: 12px;2593  margin-bottom: 8px;2594}25952596.peach-regen-panel-header {2597  display: flex;2598  align-items: center;2599  justify-content: space-between;2600  margin-bottom: 10px;2601}26022603.peach-regen-panel-title {2604  font-size: 0.6875rem;2605  font-weight: 600;2606  letter-spacing: 0.06em;2607  text-transform: uppercase;2608  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2609}26102611.peach-regen-output {2612  background: rgba(0, 0, 0, 0.2);2613  border-radius: 6px;2614  padding: 10px;2615  margin-bottom: 10px;2616  font-family: var(--font-mono);2617  font-size: 0.8125rem;2618  word-break: break-all;2619  color: var(--peach-t1);2620}26212622.peach-regen-actions {2623  display: flex;2624  gap: 6px;2625}26262627.peach-regen-actions--spaced {2628  margin-bottom: 8px;2629}26302631.peach-regen-action-grow {2632  flex: 1;2633}26342635.peach-regen-copy-btn {2636  padding: 0 8px;2637}26382639.peach-regen-success {2640  position: relative;2641  z-index: 1;2642  background: rgba(40, 180, 80, 0.1);2643  border: 1px solid rgba(40, 180, 80, 0.3);2644  border-radius: 8px;2645  padding: 10px 12px;2646  margin-bottom: 8px;2647  display: flex;2648  align-items: center;2649  gap: 8px;2650  font-size: 0.6875rem;2651  color: rgba(40, 180, 80, 0.9);2652}26532654/* ── Note editor overlay ── */2655.peach-note-editor {2656  position: absolute;2657  inset: 0;2658  z-index: 200;2659  display: flex;2660  flex-direction: column;2661  background:2662    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2663    var(--peach-bg);2664  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2665}26662667.peach-note-editor-header {2668  display: flex;2669  align-items: center;2670  gap: 10px;2671  padding: 14px 16px 10px;2672  border-bottom: 1px solid var(--peach-t3);2673  flex-shrink: 0;2674}26752676.peach-note-editor-back {2677  background: transparent;2678  border: none;2679  cursor: pointer;2680  color: var(--peach-t2);2681  padding: 4px 6px;2682  border-radius: 6px;2683  display: flex;2684  align-items: center;2685  transition: color 120ms ease, background 120ms ease;2686  flex-shrink: 0;2687}2688.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }26892690.peach-note-editor-label {2691  flex: 1;2692  font-family: var(--font-display);2693  font-style: italic;2694  font-size: 0.9375rem;2695  color: var(--peach-t1);2696  letter-spacing: 0.02em;2697}26982699.peach-note-editor-save-btn {2700  background: transparent;2701  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2702  border-radius: 8px;2703  color: var(--peach-accent);2704  font-family: "IBM Plex Mono", monospace;2705  font-size: 0.625rem;2706  letter-spacing: 0.06em;2707  text-transform: uppercase;2708  padding: 3px 10px;2709  cursor: pointer;2710  transition: background 120ms ease, border-color 120ms ease;2711}2712.peach-note-editor-save-btn:hover:not(:disabled) {2713  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2714  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2715}2716.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }27172718.peach-note-toolbar {2719  display: flex;2720  align-items: center;2721  gap: 3px;2722  padding: 6px 14px 5px;2723  border-bottom: 1px solid var(--peach-t3);2724  flex-shrink: 0;2725}27262727.peach-note-tool-btn {2728  background: transparent;2729  border: 1px solid transparent;2730  border-radius: 5px;2731  color: var(--peach-t2);2732  font-family: "IBM Plex Mono", monospace;2733  font-size: 0.625rem;2734  letter-spacing: 0.04em;2735  padding: 2px 8px;2736  cursor: pointer;2737  line-height: 1.6;2738  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2739}2740.peach-note-tool-btn:hover {2741  background: var(--peach-t4);2742  color: var(--peach-t0);2743  border-color: var(--peach-t3);2744}27452746.peach-note-tool-icon {2747  padding: 3px 7px;2748  display: inline-flex;2749  align-items: center;2750  justify-content: center;2751}27522753.peach-note-tool-divider {2754  width: 1px;2755  height: 14px;2756  background: var(--peach-t3);2757  margin: 0 4px;2758  flex-shrink: 0;2759}27602761.peach-note-editor-body {2762  flex: 1;2763  overflow-y: auto;2764  padding: 16px 20px 20px;2765  outline: none;2766  font-family: var(--font-display);2767  font-size: 1rem;2768  line-height: 1.75;2769  color: var(--peach-t0);2770  scrollbar-width: none;2771  word-break: break-word;2772}2773.peach-note-editor-body:empty::before {2774  content: "write your note…";2775  color: var(--peach-t3);2776  font-style: italic;2777  pointer-events: none;2778}27792780/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2781.peach-note-editor-inline {2782  display: flex;2783  flex-direction: column;2784  flex: 1;2785  min-height: 0;2786}2787.peach-note-editor-body--inline {2788  flex: 1;2789  min-height: 0;2790  font-size: 0.9375rem;2791  padding: 10px 20px 14px;2792}27932794/* Full-width toolbar row inside the body (Add.tsx note type).2795   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2796.peach-note-toolbar-body {2797  display: flex;2798  align-items: center;2799  gap: 3px;2800  padding: 5px 20px 4px;2801  margin: 2px -20px 0;2802  border-bottom: 1px solid var(--peach-t3);2803  flex-shrink: 0;2804}28052806/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2807   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2808   and .peach-note-tool-divider button-level styles. */2809.peach-note-toolbar-inline {2810  display: flex;2811  align-items: center;2812  gap: 3px;2813  margin-left: auto;2814  padding-left: 10px;2815  border-left: 1px solid var(--peach-t3);2816  min-height: 22px;2817}28182819/* Entry.tsx toolbar row (no tabs, toolbar only) */2820.peach-entry-note-toolbar-row {2821  display: flex;2822  align-items: center;2823  margin: 4px 0 6px;2824  position: relative;2825  z-index: 1;2826}2827.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2828  border-left: none;2829  padding-left: 0;2830  margin-left: 0;2831}28322833/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2834.peach-note-body {2835  display: flex;2836  flex-direction: column;2837  flex: 1;2838  min-height: 0;2839  margin: 4px 0 0;2840}2841.peach-entry-body--new .peach-note-body {2842  margin: 8px -20px 0;2843}28442845/* Add.tsx body is a grid by default; swap to a flex column when a note is2846   active so the note body can stretch and pin the tags row to the bottom. */2847.peach-entry-body--new:has(.peach-note-body) {2848  display: flex;2849  flex-direction: column;2850}28512852/* Rich content element styles (editor + display) */2853.peach-note-editor-body h2,2854.peach-note-content h2 {2855  font-family: var(--font-display);2856  font-size: 20px;2857  font-weight: 600;2858  font-style: italic;2859  color: var(--peach-t0);2860  margin: 6px 0 2px;2861  line-height: 1.3;2862}2863.peach-note-editor-body ul,2864.peach-note-content ul {2865  padding-left: 18px;2866  margin: 3px 0;2867  list-style: disc;2868}2869.peach-note-editor-body ol,2870.peach-note-content ol {2871  padding-left: 18px;2872  margin: 3px 0;2873  list-style: decimal;2874}2875.peach-note-editor-body li,2876.peach-note-content li { margin: 2px 0; }2877.peach-note-editor-body hr,2878.peach-note-content hr {2879  border: none;2880  border-top: 1px solid var(--peach-t3);2881  margin: 10px 0;2882}28832884/* font size elements from execCommand */2885.peach-note-editor-body font[size="1"],2886.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }2887.peach-note-editor-body font[size="2"],2888.peach-note-content font[size="2"] { font-size: 0.8125rem; }2889.peach-note-editor-body font[size="3"],2890.peach-note-content font[size="3"] { font-size: 1rem; }2891.peach-note-editor-body font[size="4"],2892.peach-note-content font[size="4"] { font-size: 20px; }2893.peach-note-editor-body font[size="5"],2894.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }28952896/* bold / italic inside the editor and note display */2897.peach-note-editor-body b, .peach-note-editor-body strong,2898.peach-note-content b, .peach-note-content strong { font-weight: 700; }2899.peach-note-editor-body em, .peach-note-editor-body i,2900.peach-note-content em, .peach-note-content i { font-style: italic; }29012902/* note display — rendered HTML, no pre-wrap */2903.peach-note-content {2904  overflow: auto;2905  max-height: 340px;2906  word-break: break-word;2907}29082909/* ── Note textarea ── */2910.peach-note-textarea {2911  width: 100%;2912  min-height: 180px;2913  max-height: 280px;2914  resize: vertical;2915  background: var(--peach-t4);2916  border: 1px solid var(--peach-t3);2917  border-radius: 8px;2918  padding: 10px 12px;2919  font-family: "IBM Plex Mono", monospace;2920  font-size: 0.75rem;2921  line-height: 1.7;2922  color: var(--peach-t1);2923  outline: none;2924  transition: border-color 150ms ease;2925}29262927.peach-note-textarea:focus {2928  border-color: var(--peach-t2);2929}29302931.peach-note-char-count {2932  font-family: "IBM Plex Mono", monospace;2933  font-size: 0.5625rem;2934  color: var(--peach-t3);2935  text-align: right;2936  margin-top: 4px;2937  letter-spacing: 0.1em;2938}29392940/* ── Field input baseline ── */2941.peach-new-field-input {2942  width: 100%;2943  background: transparent;2944  border: none;2945  border-bottom: 1px solid var(--peach-t3);2946  padding: 4px 0;2947  color: var(--peach-t1);2948  font-family: "IBM Plex Mono", monospace;2949  font-size: 0.8125rem;2950  outline: none;2951  transition: border-color 150ms ease;2952}29532954.peach-new-field-input:focus {2955  border-bottom-color: var(--peach-t0);2956  color: var(--peach-t0);2957}29582959.peach-new-name-input {2960  width: 100%;2961  background: transparent;2962  border: none;2963  border-bottom: 1px solid var(--peach-t3);2964  padding: 6px 0;2965  font-family: var(--font-display);2966  font-style: italic;2967  font-size: 28px;2968  color: var(--peach-t0);2969  outline: none;2970  transition: border-color 150ms ease;2971}29722973.peach-new-name-input:focus {2974  border-bottom-color: var(--peach-t1);2975}29762977.peach-new-name-input::placeholder {2978  color: var(--peach-t2);2979  font-style: italic;2980}29812982.peach-new-field-input::placeholder {2983  color: var(--peach-t3);2984}29852986/* ── Demo entrance animation ── */2987#hd-shell {2988  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;2989}2990@keyframes hd-shell-enter {2991  from { opacity: 0; transform: scale(0.96) translateY(16px); }2992  to   { opacity: 1; transform: scale(1) translateY(0); }2993}29942995/* ── Keyframes ── */2996@keyframes peach-char-enter {2997  from { opacity: 0; transform: translateY(0.22em); }2998  to   { opacity: 1; transform: translateY(0); }2999}3000@keyframes peach-content-enter {3001  from { opacity: 0.96; transform: translateY(4px); }3002  to   { opacity: 1; transform: translateY(0); }3003}3004@keyframes peach-content-exit {3005  from { opacity: 1; transform: translateY(0); }3006  to   { opacity: 0.92; transform: translateY(-3px); }3007}3008@keyframes peach-screen-enter {3009  from { opacity: 0; transform: translateY(14px); }3010  to   { opacity: 1; transform: translateY(0); }3011}3012@keyframes peach-shell-fade-in {3013  from { opacity: 0; }3014  to   { opacity: 1; }3015}3016@keyframes peach-veil-in {3017  from { opacity: 0; }3018  to   { opacity: 1; }3019}3020@keyframes peach-lock-settle {3021  0%   { transform: scale(0.9); }3022  65%  { transform: scale(1.08); }3023  100% { transform: scale(1); }3024}3025@keyframes peach-copy-confirm {3026  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3027  to   { color: var(--peach-accent); border-color: color-mix(in srgb, var(--peach-accent) 42%, transparent); background-color: color-mix(in srgb, var(--peach-accent) 9%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--peach-accent) 12%, transparent); }3028}3029@keyframes peach-copy-retreat {3030  from { color: var(--peach-accent); border-color: color-mix(in srgb, var(--peach-accent) 42%, transparent); background-color: color-mix(in srgb, var(--peach-accent) 9%, transparent); box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 22%, transparent), inset 0 0 18px color-mix(in srgb, var(--peach-accent) 12%, transparent); }3031  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3032}3033@keyframes peach-copy-flood {3034  from { opacity: 0; transform: scaleX(0.15); }3035  to   { opacity: 1; transform: scaleX(1); }3036}3037@keyframes peach-copy-icon-settle {3038  from  { transform: scale(0.84); }3039  70%   { transform: scale(1.08); }3040  to    { transform: scale(1); }3041}3042@keyframes peach-copy-sheen-retreat {3043  from { opacity: 1; transform: scaleX(1); }3044  to   { opacity: 0; transform: scaleX(0.15); }3045}3046@keyframes peach-copy-drain {3047  from { width: 100%; }3048  to   { width: 0; }3049}3050@keyframes peach-shake {3051  0%, 100% { transform: translateX(0); }3052  20%      { transform: translateX(-6px); }3053  40%      { transform: translateX(6px); }3054  60%      { transform: translateX(-4px); }3055  80%      { transform: translateX(4px); }3056}30573058@keyframes pip-pulse {3059  0% { transform: scale(1); }3060  40% { transform: scale(2.2); }3061  100% { transform: scale(1); }3062}306330643065/* ── Password generator ── */3066.peach-pwgen-body {3067  flex: 1; overflow-y: auto;3068  display: flex; flex-direction: column;3069}3070.peach-policy-badge {3071  display: flex; align-items: center;3072  padding: 6px 20px 0;3073  font-size: 0.625rem; font-family: Inter, sans-serif;3074  color: var(--peach-t2); letter-spacing: 0.04em;3075}3076.peach-pwgen-display {3077  padding: 14px 20px 12px;3078  border-bottom: 1px solid var(--peach-t3);3079  display: flex; align-items: flex-start; gap: 10px;3080}3081.peach-pwgen-display-row {3082  display: flex;3083  align-items: flex-start;3084  gap: 8px;3085  padding-bottom: 8px;3086  border-bottom: 1px solid var(--peach-t3);3087}3088.peach-pwgen-output {3089  flex: 1; min-width: 0; margin: 0;3090  font-family: "IBM Plex Mono", monospace;3091  font-size: 0.8125rem; color: var(--peach-t0);3092  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3093  white-space: normal;3094  padding: 10px 12px;3095  background: var(--peach-t4);3096  border-radius: 6px;3097  min-height: 36px;3098}3099.peach-pwgen-output-display {3100  flex: 1;3101  min-width: 0;3102  margin: 0;3103  font-family: var(--font-display);3104  font-style: italic;3105  font-weight: 300;3106  font-size: 32px;3107  line-height: 1.05;3108  color: var(--peach-t0);3109  word-break: break-all;3110  overflow-wrap: break-word;3111  white-space: normal;3112  letter-spacing: 0.02em;3113}3114.peach-pwgen-display-actions {3115  display: flex;3116  flex-direction: column;3117  gap: 4px;3118  flex-shrink: 0;3119  margin-top: 2px;3120}3121.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3122.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3123.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3124.peach-pwgen-len-num {3125  font-family: "IBM Plex Mono", monospace;3126  font-size: 0.75rem; color: var(--peach-accent);3127}3128.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3129.peach-pwgen-toggles { display: flex; flex-direction: column; }3130.peach-pwgen-charset-pills {3131  display: flex;3132  gap: 6px;3133  flex-wrap: wrap;3134}3135.peach-pwgen-pill {3136  padding: 4px 11px;3137  border-radius: 999px;3138  border: 1px solid var(--peach-t3);3139  background: transparent;3140  color: var(--peach-t2);3141  font-family: "IBM Plex Mono", monospace;3142  font-size: 0.5625rem;3143  letter-spacing: 0.08em;3144  cursor: pointer;3145  transition: all 150ms ease;3146}3147.peach-pwgen-pill.is-on {3148  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3149  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3150  color: var(--peach-accent);3151}3152.peach-pwgen-pill:not(.is-on):hover {3153  color: var(--peach-t1);3154  border-color: var(--peach-t2);3155}3156.peach-pwgen-use-btn {3157  width: 100%;3158  min-height: 34px;3159  border-radius: 8px;3160  margin-top: 2px;3161}3162.peach-pwgen-toggle-row {3163  display: flex; align-items: center; justify-content: space-between;3164  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3165}3166.peach-pwgen-toggle-row:last-child { border-bottom: none; }3167.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }31683169.peach-screen-prelock {3170  z-index: 10;3171}31723173.prelock-form {3174  display: grid;3175  gap: 12px;3176}31773178/* Peach popup should not expose native scrollbars on internal panels. */3179.peach-settings-body,3180.peach-new-body,3181.peach-pwgen-body,3182.lock-screen,3183.peach-import-preview {3184  scrollbar-width: none;3185  -ms-overflow-style: none;3186  overscroll-behavior: contain;3187}3188.peach-settings-body::-webkit-scrollbar,3189.peach-new-body::-webkit-scrollbar,3190.peach-pwgen-body::-webkit-scrollbar,3191.lock-screen::-webkit-scrollbar,3192.peach-import-preview::-webkit-scrollbar {3193  width: 0;3194  height: 0;3195  display: none;3196}31973198.lock-screen {3199  height: 100%;3200  min-height: 100%;3201  overflow-y: auto;3202  padding: 18px 18px 16px;3203  gap: 14px;3204  grid-template-rows: auto auto auto 1fr auto;3205  align-content: stretch;3206  position: relative;3207  isolation: isolate;3208}3209.peach-screen.lock-screen--vault-stage {3210  display: flex;3211  flex-direction: column;3212  justify-content: flex-start;3213  gap: 18px;3214  padding: 20px 18px 18px;3215  overflow: hidden;3216}3217.peach-screen.lock-screen--vault-stage .peach-lock-panel {3218  margin-top: 0;3219}3220.lock-screen--onboarding {3221  display: flex;3222  flex-direction: column;3223  gap: 12px;3224  justify-content: flex-start;3225}32263227.lock-screen::before {3228  content: "";3229  position: absolute;3230  inset: 12px 18px auto auto;3231  width: 160px;3232  height: 160px;3233  border-radius: 999px;3234  background:3235    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 42%, transparent 72%);3236  filter: blur(6px);3237  opacity: 0.7;3238  pointer-events: none;3239  z-index: 0;3240}32413242.peach-lock-rune-string {3243  flex: 1;3244  display: flex;3245  align-items: center;3246  justify-content: center;3247  gap: 6px;3248  font-family: PeachScript, monospace;3249  font-size: 0.8125rem;3250  letter-spacing: 0.05em;3251  pointer-events: none;3252  user-select: none;3253  position: relative;3254  z-index: 1;3255}32563257.peach-lock-rune-string span {3258  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3259  text-shadow:3260    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3261    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3262  transition: color 0.9s ease, text-shadow 0.9s ease;3263}32643265.peach-lock-rune-string span.is-glowing {3266  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3267  text-shadow:3268    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3269    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3270}32713272.lock-screen-header {3273  display: flex;3274  align-items: center;3275  justify-content: space-between;3276  position: relative;3277  z-index: 1;3278}32793280.lock-password-input.shake {3281  animation: peach-shake 300ms ease-in-out;3282}32833284.peach-hint-error {3285  color: rgba(220, 80, 60, 0.92);3286}32873288.peach-onboarding-headline {3289  margin: 0;3290  font-family: var(--font-display);3291  font-size: 35px;3292  line-height: 0.88;3293  font-style: italic;3294  font-weight: 400;3295  max-width: 252px;3296}32973298.peach-lock-copy {3299  display: grid;3300  gap: 8px;3301  position: relative;3302  z-index: 1;3303}33043305.peach-lock-copy--onboarding {3306  gap: 10px;3307}33083309.peach-lock-hero {3310  position: relative;3311  z-index: 1;3312  display: grid;3313  gap: 8px;3314  min-height: 0;3315  padding: 4px 2px 0;3316  border: none;3317  border-radius: 0;3318  background: transparent;3319  box-shadow: none;3320}3321.peach-lock-hero-art {3322  position: absolute;3323  right: -8px;3324  top: -6px;3325  width: 120px;3326  height: 120px;3327  display: flex;3328  align-items: center;3329  justify-content: center;3330  pointer-events: none;3331  opacity: 0.12;3332  filter: saturate(0.9);3333}3334.peach-lock-hero-mark {3335  width: 100%;3336  height: 100%;3337}3338/* Peach body stays brand-peach across every accent — we don't want a3339   green or blue peach when sage/sky is selected. Leaf + stem keep the3340   sage tint because a real peach has a sage leaf. */3341.peach-lock-hero-mark path:nth-child(2),3342.peach-lock-hero-mark path:nth-child(3) {3343  stroke: rgba(123, 144, 96, 0.88);3344  fill: rgba(123, 144, 96, 0.88);3345}3346.peach-lock-hero > *:not(.peach-lock-hero-art) {3347  position: relative;3348  z-index: 1;3349}33503351.peach-lock-eyebrow {3352  display: inline-flex;3353  align-items: center;3354  width: fit-content;3355  padding: 4px 9px;3356  border-radius: 999px;3357  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3358  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3359  color: var(--peach-t0);3360  font-family: "IBM Plex Mono", monospace;3361  font-size: 0.5rem;3362  letter-spacing: 0.18em;3363  text-transform: uppercase;3364}33653366.peach-lock-label-row {3367  display: flex;3368  align-items: center;3369  justify-content: space-between;3370  margin-bottom: 0;3371}33723373.peach-lock-reveal-btn {3374  display: inline-flex;3375  align-items: center;3376  gap: 4px;3377  background: none;3378  border: none;3379  cursor: pointer;3380  font-family: "IBM Plex Mono", monospace;3381  font-size: 0.5625rem;3382  letter-spacing: 0.06em;3383  color: var(--peach-t2);3384  padding: 2px 0;3385  transition: color 150ms ease;3386}33873388.peach-lock-reveal-btn:hover {3389  color: var(--peach-t1);3390}33913392.peach-lock-warning {3393  color: rgba(220, 80, 60, 0.85) !important;3394  line-height: 1.5;3395}33963397.peach-onboarding-cards {3398  display: grid;3399  gap: 8px;3400  position: relative;3401  z-index: 1;3402}34033404.peach-lock-panel {3405  position: relative;3406  z-index: 1;3407  display: grid;3408  gap: 9px;3409  padding: 14px 16px 15px;3410  border-radius: 18px;3411  border: 1px solid var(--peach-t3);3412  background:3413    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3414  box-shadow:3415    inset 0 1px 0 rgba(240, 232, 216, 0.04),3416    0 12px 28px rgba(0, 0, 0, 0.12);3417}34183419/* Glass surface — lock panel and settings groups */3420.peach-glass {3421  background: rgba(26, 20, 16, 0.65);3422  border: 1px solid rgba(255, 255, 255, 0.08);3423  border-radius: 12px;3424  backdrop-filter: blur(12px) saturate(1.4);3425  -webkit-backdrop-filter: blur(12px) saturate(1.4);3426}34273428@supports not (backdrop-filter: blur(1px)) {3429  .peach-glass {3430    background: rgba(26, 20, 16, 0.92);3431    border: 1px solid rgba(255, 255, 255, 0.10);3432    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3433  }3434}34353436.light .peach-glass,3437[data-theme="light"] .peach-glass {3438  background: rgba(253, 248, 244, 0.70);3439  border: 1px solid rgba(0, 0, 0, 0.07);3440  backdrop-filter: blur(12px) saturate(1.2);3441  -webkit-backdrop-filter: blur(12px) saturate(1.2);3442}34433444@supports not (backdrop-filter: blur(1px)) {3445  .light .peach-glass,3446  [data-theme="light"] .peach-glass {3447    background: rgba(253, 248, 244, 0.95);3448    border: 1px solid rgba(0, 0, 0, 0.09);3449  }3450}34513452/* Lock panel keeps its own border-radius over the generic glass token */3453.peach-lock-panel.peach-glass {3454  border-radius: 18px;3455  background: rgba(26, 20, 16, 0.65);3456  border: 1px solid rgba(255, 255, 255, 0.08);3457  box-shadow:3458    inset 0 1px 0 rgba(255, 255, 255, 0.05),3459    0 12px 28px rgba(0, 0, 0, 0.3);3460}34613462.light .peach-lock-panel.peach-glass,3463[data-theme="light"] .peach-lock-panel.peach-glass {3464  background: rgba(238, 227, 204, 0.75);3465  border: 1px solid rgba(34, 24, 9, 0.10);3466  box-shadow:3467    inset 0 1px 0 rgba(255, 255, 255, 0.5),3468    0 8px 24px rgba(80, 56, 32, 0.15);3469}34703471@supports not (backdrop-filter: blur(1px)) {3472  .peach-lock-panel.peach-glass {3473    background: rgba(26, 20, 16, 0.92);3474    box-shadow:3475      inset 0 1px 0 rgba(255, 255, 255, 0.05),3476      0 12px 28px rgba(0, 0, 0, 0.4);3477  }3478  .light .peach-lock-panel.peach-glass,3479  [data-theme="light"] .peach-lock-panel.peach-glass {3480    background: rgba(238, 227, 204, 0.96);3481  }3482}34833484.peach-lock-panel--secondary {3485  gap: 12px;3486}34873488.peach-lock-panel-header {3489  display: flex;3490  align-items: baseline;3491  justify-content: space-between;3492  gap: 12px;3493}34943495.peach-lock-option-grid {3496  display: grid;3497  gap: 10px;3498}34993500.peach-lock-option {3501  width: 100%;3502  display: grid;3503  gap: 6px;3504  padding: 14px 15px;3505  border-radius: 16px;3506  border: 1px solid rgba(240, 232, 216, 0.08);3507  background: rgba(240, 232, 216, 0.02);3508  color: var(--peach-t0);3509  text-align: left;3510  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3511}35123513.peach-lock-option:hover {3514  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3515  background: rgba(240, 232, 216, 0.04);3516  transform: translateY(-1px);3517}35183519.peach-lock-option-title {3520  font-size: 0.75rem;3521  color: var(--peach-t0);3522}35233524.peach-lock-option-copy {3525  font-size: 0.6875rem;3526  line-height: 1.55;3527  color: var(--peach-t1);3528}35293530.peach-onboarding-stack {3531  margin-top: 2px;3532}3533.peach-lock-panel-footer {3534  display: grid;3535  gap: 6px;3536  margin-top: 2px;3537  padding-top: 10px;3538  border-top: 1px solid rgba(240, 232, 216, 0.06);3539}35403541/* ── Restore tab view ─────────────────────────────────────────────────────3542   Tab-based restore screen replacing the old three-card picker. */35433544.peach-restore-tabview {3545  overflow: hidden;3546}35473548.peach-restore-tabcard {3549  flex: 1;3550  display: flex;3551  flex-direction: column;3552  gap: 0;3553  padding: 0;3554  overflow: hidden;3555  cursor: default;3556  user-select: none;3557  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3558}35593560/* ── Tab selector ─────────────────────────────────────────────────────── */35613562.peach-restore-tabs {3563  display: flex;3564  justify-content: space-around;3565  padding: 14px 10px 10px;3566  border-bottom: 1px solid var(--peach-t3);3567  gap: 2px;3568  overflow: hidden;3569  scrollbar-width: none;3570}3571.peach-restore-tabs::-webkit-scrollbar { display: none; }35723573.peach-restore-tab {3574  background: none;3575  border: none;3576  cursor: pointer;3577  padding: 3px 2px;3578  font-family: 'Cormorant Garamond', Georgia, serif;3579  font-style: italic;3580  font-size: 11px;3581  color: var(--peach-t2);3582  transition: color 150ms ease, text-shadow 150ms ease;3583  flex: 1;3584  min-width: 0;3585  text-align: center;3586  white-space: nowrap;3587  overflow: hidden;3588  text-overflow: ellipsis;3589}3590.peach-restore-tab:hover {3591  color: var(--peach-accent);3592  text-shadow:3593    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3594    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3595}3596.peach-restore-tab.is-active {3597  color: var(--peach-accent);3598  text-shadow:3599    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3600    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3601}36023603/* ── Content area ─────────────────────────────────────────────────────── */36043605.peach-restore-content {3606  padding: 16px 16px 14px;3607  display: flex;3608  flex-direction: column;3609  gap: 8px;3610  overflow: hidden;3611  scrollbar-width: none;3612  flex: 1;3613}3614.peach-restore-content::-webkit-scrollbar { display: none; }3615.peach-restore-content > * {3616  overflow: hidden;3617  scrollbar-width: none;3618}3619.peach-restore-content > *::-webkit-scrollbar { display: none; }36203621/* ── Shared tab inner layout ──────────────────────────────────────────── */36223623.peach-rt-symbols,3624.peach-rt-csv,3625.peach-rt-phone {3626  display: flex;3627  flex-direction: column;3628  gap: 8px;3629  overflow: hidden;3630}36313632.peach-rt-submit {3633  width: 100%;3634}36353636.peach-rt-error {3637  margin: 0;3638  font-size: 0.6875rem;3639  color: var(--peach-breach);3640  line-height: 1.4;3641}36423643/* ── PeachScript tab ──────────────────────────────────────────────────── */36443645.peach-restore-symbols-textarea {3646  font-family: 'PeachScript', monospace;3647  font-size: 13px;3648  line-height: 1.9;3649  letter-spacing: 0.1em;3650  word-break: break-all;3651  resize: none;3652  width: 100%;3653  min-height: 56px;3654  max-height: 72px;3655  overflow: hidden;3656  scrollbar-width: none;3657  -ms-overflow-style: none;3658  box-sizing: border-box;3659  padding: 6px 8px;3660  border-radius: 8px;3661  border: 1px solid var(--peach-t3);3662  background: rgba(240, 232, 216, 0.03);3663  color: var(--peach-t0);3664}3665.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3666.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }36673668.peach-restore-symbols-pass {3669  width: 100%;3670  box-sizing: border-box;3671  padding: 7px 10px;3672  border-radius: 8px;3673  border: 1px solid var(--peach-t3);3674  background: rgba(240, 232, 216, 0.03);3675  color: var(--peach-t0);3676  font-size: 0.8125rem;3677}3678.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3679.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }36803681.peach-rt-divider {3682  text-align: center;3683  font-size: 0.6875rem;3684  color: var(--peach-t2);3685  font-style: italic;3686}36873688.peach-rt-file-label {3689  width: 100%;3690  justify-content: center;3691}36923693.peach-rt-anim-canvas {3694  width: 100%;3695  height: 180px;3696  border-radius: 10px;3697  overflow: hidden;3698  display: block;3699}37003701/* ── CSV tab ──────────────────────────────────────────────────────────── */37023703.peach-rt-csv-sources {3704  margin: 0;3705  font-size: 0.6875rem;3706  color: var(--peach-t2);3707  line-height: 1.5;3708  text-align: center;3709}37103711.peach-rt-csv-warning {3712  margin: 0;3713  font-family: "IBM Plex Mono", monospace;3714  font-size: 0.5625rem;3715  letter-spacing: 0.12em;3716  color: var(--peach-breach);3717  text-align: center;3718}37193720/* ── From Phone tab ───────────────────────────────────────────────────── */37213722.peach-rt-phone-code {3723  margin: 0;3724  text-align: center;3725  font-family: "IBM Plex Mono", monospace;3726  font-size: 22px;3727  letter-spacing: 0.18em;3728  color: var(--peach-t0);3729}37303731.peach-rt-phone-qr {3732  display: block;3733  width: 96px;3734  height: 96px;3735  margin: 0 auto;3736  border-radius: 6px;3737  image-rendering: pixelated;3738  overflow: hidden;3739}37403741.peach-rt-phone-hint {3742  margin: 0;3743  font-size: 0.6875rem;3744  color: var(--peach-t2);3745  line-height: 1.55;3746  text-align: center;3747}37483749/* ── Intro popup ──────────────────────────────────────────────────────── */37503751.peach-restore-intro-overlay {3752  position: absolute;3753  inset: 0;3754  z-index: 100;3755  display: flex;3756  align-items: center;3757  justify-content: center;3758  padding: 20px;3759  background: rgba(12, 10, 6, 0.7);3760  backdrop-filter: blur(4px);3761  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3762}37633764.peach-restore-intro-card {3765  width: 100%;3766  display: flex;3767  flex-direction: column;3768  gap: 12px;3769  padding: 22px 20px 20px;3770  border-radius: 16px;3771  border: 1px solid var(--peach-t3);3772  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3773  backdrop-filter: blur(4px);3774  -webkit-backdrop-filter: blur(4px);3775  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3776}37773778.peach-restore-intro-headline {3779  margin: 0;3780  font-family: var(--font-display);3781  font-style: italic;3782  font-size: 20px;3783  font-weight: 400;3784  color: var(--peach-t0);3785}37863787.peach-restore-intro-body {3788  display: flex;3789  flex-direction: column;3790  gap: 8px;3791}3792.peach-restore-intro-body p {3793  margin: 0;3794  font-size: 0.75rem;3795  color: var(--peach-t1);3796  line-height: 1.5;3797}37983799.peach-restore-intro-btn {3800  width: 100%;3801  margin-top: 4px;3802}38033804/* Snapshot restore panel */3805.peach-snapshot-panel {3806  gap: 10px;3807  overflow-y: auto;3808  max-height: 340px;3809}3810.peach-snapshot-list {3811  display: flex;3812  flex-direction: column;3813  gap: 4px;3814}3815.peach-snapshot-row {3816  display: flex;3817  align-items: center;3818  justify-content: space-between;3819  width: 100%;3820  padding: 8px 10px;3821  border-radius: 8px;3822  border: 1px solid rgba(240, 232, 216, 0.07);3823  background: transparent;3824  cursor: pointer;3825  transition: border-color 120ms, background 120ms;3826  text-align: left;3827  gap: 8px;3828}3829.peach-snapshot-row:hover {3830  border-color: rgba(240, 232, 216, 0.14);3831  background: rgba(240, 232, 216, 0.03);3832}3833.peach-snapshot-row.is-selected {3834  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3835  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3836}3837.peach-snapshot-time {3838  font-size: 11.5px;3839  color: var(--peach-t0);3840  flex: 1;3841}3842.peach-snapshot-count {3843  font-family: "IBM Plex Mono", monospace;3844  font-size: 0.625rem;3845  color: var(--peach-t2);3846  flex-shrink: 0;3847}3848.peach-snapshot-confirm {3849  display: flex;3850  flex-direction: column;3851  gap: 8px;3852  padding-top: 10px;3853  border-top: 1px solid rgba(240, 232, 216, 0.06);3854}3855.peach-snapshot-warning {3856  display: flex;3857  align-items: flex-start;3858  gap: 6px;3859  font-size: 10.5px;3860  color: rgba(220, 80, 60, 0.85);3861  line-height: 1.55;3862}3863.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3864.peach-snapshot-confirm-row {3865  display: flex;3866  gap: 6px;3867  align-items: center;3868}3869.peach-snapshot-restore-btn {3870  width: 100%;3871}3872.peach-lock-hero--unlock .peach-lock-hero-art {3873  width: 112px;3874  height: 112px;3875  right: 0;3876  top: 2px;3877  opacity: 0.1;3878}38793880.peach-card {3881  border: 1px solid var(--peach-t3);3882  border-radius: 18px;3883  background:3884    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3885  box-shadow:3886    inset 0 0 0 1px var(--peach-border-accent),3887    inset 0 1px 0 rgba(240, 232, 216, 0.04),3888    0 12px 32px rgba(0, 0, 0, 0.14);3889  overflow: hidden;3890}38913892.peach-card-active {3893  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3894  box-shadow:3895    inset 0 1px 0 rgba(240, 232, 216, 0.05),3896    0 16px 38px rgba(0, 0, 0, 0.18),3897    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);3898}38993900.peach-card-disabled {3901  opacity: 0.72;3902}39033904.peach-card-header {3905  width: 100%;3906  padding: 13px 16px 11px;3907  background: transparent;3908  color: var(--peach-t0);3909  display: flex;3910  justify-content: space-between;3911  align-items: center;3912  text-align: left;3913  font-size: 0.75rem;3914}39153916.peach-card-body {3917  padding: 0 16px 16px;3918  display: grid;3919  gap: 9px;3920}39213922.peach-card-tag {3923  color: var(--peach-t2);3924  font-family: "IBM Plex Mono", monospace;3925  font-size: 0.5625rem;3926  letter-spacing: 0.12em;3927  text-transform: uppercase;3928}39293930.peach-empty-copy {3931  display: grid;3932  gap: 6px;3933  color: var(--peach-t1);3934  font-size: 0.8125rem;3935}39363937.peach-lock-submit {3938  width: 100%;3939  box-shadow:3940    0 1px 0 rgba(255,255,255,0.10) inset,3941    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),3942    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),3943    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);3944}39453946.peach-lock-secondary {3947  width: 100%;3948  border-color: var(--peach-t3);3949  background: rgba(240, 232, 216, 0.02);3950}39513952.peach-lock-secondary:hover {3953  background: rgba(240, 232, 216, 0.04);3954}39553956.peach-lock-note {3957  max-width: none;3958  line-height: 1.55;3959  margin: 0;3960}39613962.peach-overlay-action {3963  font-size: 0.625rem;3964  padding: 4px 8px;3965  letter-spacing: 0.06em;3966  min-width: 44px;3967  text-align: center;3968}39693970.peach-overlay-spacer {3971  width: 32px;3972}39733974.peach-inline-action {3975  flex-shrink: 0;3976  font-size: 0.5625rem;3977  letter-spacing: 0.1em;3978  text-transform: uppercase;3979  padding: 4px 7px;3980}3981.peach-password-toggle-btn {3982  display: inline-flex;3983  align-items: center;3984  justify-content: center;3985  min-width: 30px;3986  min-height: 26px;3987  padding: 0 7px;3988  border: 1px solid var(--peach-t3);3989  border-radius: 999px;3990  background: rgba(240, 232, 216, 0.04);3991  color: var(--peach-t2);3992  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;3993}3994.peach-password-toggle-btn:hover {3995  border-color: var(--peach-t2);3996  color: var(--peach-t0);3997  background: rgba(240, 232, 216, 0.06);3998}39994000.peach-new-textarea {4001  width: 100%;4002  min-height: 88px;4003  resize: vertical;4004  border: 0;4005  outline: none;4006  background: transparent;4007  color: var(--peach-t1);4008  font-family: "IBM Plex Mono", monospace;4009  font-size: 0.75rem;4010  line-height: 1.65;4011  caret-color: var(--peach-accent);4012}40134014.peach-new-textarea::placeholder {4015  color: var(--peach-t2);4016  opacity: 0.7;4017}40184019.peach-settings-actions {4020  display: grid;4021  gap: 8px;4022}40234024.peach-sync-section-label {4025  font-size: 0.6875rem;4026  color: var(--peach-t2);4027  text-transform: uppercase;4028  letter-spacing: 0.05em;4029}40304031.peach-sync-network-note {4032  margin: 0 0 6px;4033  font-size: 0.75rem;4034  color: var(--peach-t2);4035  line-height: 1.4;4036}40374038.peach-settings-row--tappable {4039  background: none;4040  border: none;4041  width: 100%;4042  text-align: left;4043  cursor: pointer;4044  color: var(--peach-t1);4045  font-size: 0.8125rem;4046}4047.peach-settings-row--tappable:hover {4048  color: var(--peach-t0);4049}40504051.peach-sync-pro-hint {4052  display: flex;4053  flex-direction: column;4054  align-items: flex-start;4055  gap: 8px;4056  padding: 12px 0 4px;4057}40584059.peach-sync-device-row {4060  display: flex;4061  justify-content: space-between;4062  align-items: center;4063  padding: 6px 0;4064  border-bottom: 1px solid var(--peach-t3);4065}40664067.peach-sync-device-info {4068  display: flex;4069  flex-direction: column;4070  gap: 2px;4071}40724073.peach-sync-device-name {4074  font-size: 0.8125rem;4075  color: var(--peach-t0);4076}40774078.peach-sync-device-meta {4079  font-size: 0.6875rem;4080  color: var(--peach-t2);4081}40824083.peach-sync-status-dot {4084  display: inline-block;4085  width: 8px;4086  height: 8px;4087  border-radius: 50%;4088  vertical-align: middle;4089}40904091.peach-sync-remove-btn {4092  color: var(--peach-breach);4093}40944095.peach-sync-advanced-row {4096  display: flex;4097  justify-content: space-between;4098  align-items: center;4099  padding: 6px 0;4100  gap: 12px;4101}41024103.peach-sync-advanced-info {4104  display: flex;4105  flex-direction: column;4106  gap: 2px;4107  flex: 1;4108}41094110.peach-sync-advanced-name {4111  font-size: 0.8125rem;4112  color: var(--peach-t0);4113}41144115.peach-sync-reset-confirm {4116  display: flex;4117  flex-direction: column;4118  gap: 8px;4119  padding: 10px;4120  border: 1px solid var(--peach-breach);4121  border-radius: 10px;4122  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4123}41244125.peach-sync-reset-confirm-headline {4126  font-size: 0.8125rem;4127  font-weight: 600;4128  color: var(--peach-t0);4129  margin: 0;4130}41314132.peach-sync-reset-confirm-body {4133  font-size: 0.75rem;4134  color: var(--peach-t1);4135  margin: 0;4136  line-height: 1.4;4137}41384139.peach-btn--danger {4140  background: var(--peach-breach);4141  color: #fff;4142  border-color: var(--peach-breach);4143}4144.peach-btn--danger:hover:not(:disabled) {4145  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4146}4147.peach-btn--danger:disabled {4148  opacity: 0.55;4149  cursor: not-allowed;4150}41514152.peach-sync-hero-icon {4153  color: var(--peach-t1);4154  opacity: 0.85;4155}41564157.peach-import-preview {4158  margin-bottom: 12px;4159  max-height: 152px;4160  overflow-y: auto;4161  border: 1px solid var(--peach-t3);4162  border-radius: 10px;4163  padding: 8px 10px;4164  display: grid;4165  gap: 8px;4166  background: rgba(240, 232, 216, 0.02);4167}41684169.peach-import-preview-row {4170  display: flex;4171  justify-content: space-between;4172  gap: 10px;4173  font-size: 0.6875rem;4174  color: var(--peach-t1);4175}41764177.peach-import-preview-title {4178  color: var(--peach-t0);4179  flex: 1;4180  min-width: 0;4181  overflow: hidden;4182  text-overflow: ellipsis;4183  white-space: nowrap;4184}41854186.peach-import-preview-meta {4187  color: var(--peach-t2);4188  flex-shrink: 0;4189  max-width: 42%;4190  overflow: hidden;4191  text-overflow: ellipsis;4192  white-space: nowrap;4193}41944195.peach-import-preview-more {4196  color: var(--peach-t2);4197  font-size: 0.625rem;4198}41994200.peach-restore-copy {4201  margin: 0;4202  color: var(--peach-t1);4203  font-size: 0.6875rem;4204  line-height: 1.6;4205}42064207.peach-restore-warning {4208  padding: 10px 12px;4209  border-radius: 12px;4210  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4211  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4212  color: var(--peach-t0);4213  font-size: 0.6875rem;4214  line-height: 1.55;4215}42164217.peach-provider-chips {4218  display: flex;4219  flex-wrap: wrap;4220  gap: 6px;4221}42224223.peach-provider-chip {4224  display: inline-flex;4225  align-items: center;4226  padding: 5px 8px;4227  border-radius: 999px;4228  border: 1px solid var(--peach-t3);4229  background: rgba(240, 232, 216, 0.02);4230  color: var(--peach-t1);4231  font-family: "IBM Plex Mono", monospace;4232  font-size: 0.5rem;4233  letter-spacing: 0.08em;4234  text-transform: uppercase;4235}42364237.peach-restore-file,4238.peach-restore-input {4239  width: 100%;4240  border-radius: 10px;4241  border: 1px solid var(--peach-t3);4242  background: var(--peach-s2);4243  color: var(--peach-t0);4244  font-size: 0.75rem;4245}42464247.peach-restore-file {4248  padding: 9px 10px;4249}42504251.peach-restore-file::file-selector-button {4252  margin-right: 10px;4253  padding: 7px 10px;4254  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4255  border-radius: 999px;4256  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4257  color: var(--peach-t0);4258  font-size: 0.625rem;4259  letter-spacing: 0.08em;4260  text-transform: uppercase;4261  cursor: pointer;4262}42634264.peach-restore-input {4265  padding: 10px 12px;4266}42674268.peach-auth-grid {4269  display: grid;4270  gap: 10px;4271}42724273.peach-import-summary {4274  color: var(--peach-t1);4275  font-size: 0.75rem;4276  line-height: 1.6;4277  margin-bottom: 12px;4278}42794280.peach-restore-error {4281  color: rgba(220, 80, 60, 0.95);4282  font-size: 0.75rem;4283  line-height: 1.55;4284}42854286.peach-passkey-card {4287  max-width: 400px;4288  margin: auto 16px;4289  align-self: center;4290  width: calc(100% - 32px);4291}42924293/* Center the approval card vertically inside the overlay-view (which sets4294 * flex-direction: column without justify-content). Without this, the card4295 * sits at the top with a tall empty band below — looks unfinished on the4296 * 320px popup. */4297.peach-overlay-view:has(.peach-passkey-card) {4298  justify-content: center;4299}43004301.peach-pro-badge {4302  padding: 2px 6px;4303  border-radius: 999px;4304  font-family: var(--font-ui);4305  font-size: 0.625rem;4306  letter-spacing: 0.08em;4307  text-transform: uppercase;4308  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4309  color: var(--peach-accent);4310}43114312/* ── Shortcuts rebind table ─────────────────────────────────── */4313.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4314.peach-shortcut-row {4315  display: flex;4316  align-items: center;4317  gap: 10px;4318  padding: 6px 0;4319}4320.peach-shortcut-row-label {4321  flex: 1;4322  font-size: 0.75rem;4323  color: var(--peach-t0);4324}4325.peach-shortcut-chip {4326  min-width: 64px;4327  padding: 4px 10px;4328  border-radius: 6px;4329  border: 1px solid var(--peach-t3);4330  background: var(--peach-input-bg, var(--surface-card));4331  color: var(--peach-t0);4332  font-family: var(--font-mono);4333  font-size: 0.6875rem;4334  letter-spacing: 0.04em;4335  cursor: pointer;4336  text-align: center;4337  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4338}4339.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4340.peach-shortcut-chip.is-custom {4341  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4342  color: var(--peach-accent);4343}4344.peach-shortcut-chip.is-capturing {4345  border-color: var(--peach-accent);4346  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4347  color: var(--peach-accent);4348  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4349}4350@keyframes peach-shortcut-capture-pulse {4351  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4352  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4353}4354.peach-shortcut-reset {4355  background: transparent;4356  border: none;4357  cursor: pointer;4358  color: var(--peach-t2);4359  padding: 4px 6px;4360  border-radius: 5px;4361  font-size: 0.875rem;4362  line-height: 1;4363  transition: color 120ms ease, background 120ms ease;4364}4365.peach-shortcut-reset:hover {4366  color: var(--peach-t0);4367  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4368}4369.peach-shortcuts-conflict {4370  margin: 4px 0 0;4371  padding: 8px 10px;4372  border-radius: 7px;4373  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4374  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4375  font-family: var(--font-mono);4376  font-size: 0.6875rem;4377  color: var(--peach-t0);4378}43794380/* ── Help dialog overlay (? to open) ────────────────────────── */4381.peach-shortcuts-help-backdrop {4382  position: fixed;4383  inset: 0;4384  background: rgba(0, 0, 0, 0.55);4385  backdrop-filter: blur(2px);4386  display: flex;4387  align-items: center;4388  justify-content: center;4389  z-index: 1000;4390  animation: peach-help-fade-in 140ms ease forwards;4391}4392@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4393.peach-shortcuts-help-card {4394  width: min(320px, 92vw);4395  max-height: 80vh;4396  overflow-y: auto;4397  border-radius: 14px;4398  border: 1px solid var(--peach-t3);4399  background: var(--peach-bg);4400  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4401  padding: 16px 18px 18px;4402  display: flex;4403  flex-direction: column;4404  gap: 12px;4405}4406.peach-shortcuts-help-head {4407  display: flex; align-items: center; justify-content: space-between;4408}4409.peach-shortcuts-help-head h3 {4410  margin: 0;4411  font-family: var(--font-display);4412  font-style: italic;4413  font-weight: 400;4414  font-size: 22px;4415  color: var(--peach-t0);4416}4417.peach-shortcuts-help-close {4418  background: transparent;4419  border: none;4420  color: var(--peach-t2);4421  cursor: pointer;4422  font-size: 0.875rem;4423  padding: 4px 8px;4424  border-radius: 5px;4425}4426.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4427.peach-shortcuts-help-body ul {4428  list-style: none; padding: 0; margin: 4px 0 12px;4429  display: grid; gap: 8px;4430}4431.peach-shortcuts-help-body li {4432  display: flex; align-items: center; justify-content: space-between; gap: 12px;4433  font-size: 0.75rem; color: var(--peach-t0);4434}4435.peach-shortcuts-help-body kbd {4436  font-family: var(--font-mono);4437  font-size: 0.6875rem;4438  padding: 3px 8px;4439  border-radius: 6px;4440  background: var(--surface-card);4441  border: 1px solid var(--peach-t3);4442  color: var(--peach-accent);4443  letter-spacing: 0.04em;4444}44454446/* ── Pro promo on Account screen ────────────────────────────── */4447.peach-pro-promo {4448  position: relative;4449  border-radius: 14px;4450  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4451  background:4452    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4453    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4454    var(--surface-card);4455  overflow: hidden;4456  margin-bottom: 14px;4457}4458.peach-pro-promo-glow {4459  position: absolute;4460  inset: -40% -20% auto auto;4461  width: 220px; height: 220px;4462  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4463  pointer-events: none;4464  filter: blur(8px);4465}4466.peach-pro-promo-inner {4467  position: relative;4468  padding: 18px 18px 16px;4469}4470.peach-pro-promo-title {4471  font-family: var(--font-display);4472  font-style: italic;4473  font-weight: 400;4474  font-size: 28px;4475  line-height: 1;4476  letter-spacing: -0.005em;4477  color: var(--peach-t0);4478  margin: 0 0 4px;4479}4480.peach-pro-promo-tagline {4481  font-family: var(--font-mono);4482  font-size: 0.625rem;4483  letter-spacing: 0.06em;4484  color: var(--peach-t2);4485  margin: 0 0 14px;4486}4487.peach-pro-promo-list {4488  list-style: none;4489  margin: 0 0 16px;4490  padding: 0;4491  display: grid;4492  gap: 9px;4493}4494.peach-pro-promo-list li {4495  display: flex;4496  align-items: flex-start;4497  gap: 9px;4498  font-size: 0.75rem;4499  color: var(--peach-t1);4500  line-height: 1.4;4501}4502.peach-pro-promo-list svg {4503  width: 14px;4504  height: 14px;4505  flex-shrink: 0;4506  color: var(--peach-accent);4507  margin-top: 2px;4508}4509.peach-pro-promo-list span {4510  color: var(--peach-t0);4511}4512.peach-pro-promo-cta {4513  width: 100%;4514  background: var(--peach-accent);4515  color: #fff;4516  border: none;4517  padding: 9px 12px;4518  border-radius: 9px;4519  font-size: 0.75rem;4520  font-weight: 500;4521  font-family: var(--font-ui);4522  letter-spacing: 0.02em;4523  text-decoration: none;4524  display: inline-flex;4525  align-items: center;4526  justify-content: center;4527  cursor: pointer;4528  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4529  box-shadow: 0 2px 16px var(--peach-glow);4530}4531.peach-pro-promo-cta:hover {4532  filter: brightness(1.07);4533  box-shadow: 0 4px 24px var(--peach-glow);4534  transform: translateY(-1px);4535}4536.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }45374538.peach-pro-or-divider {4539  display: flex;4540  align-items: center;4541  gap: 10px;4542  margin: 4px 0 12px;4543  font-family: var(--font-mono);4544  font-size: 0.625rem;4545  letter-spacing: 0.06em;4546  color: var(--peach-t2);4547  text-transform: uppercase;4548}4549.peach-pro-or-divider::before,4550.peach-pro-or-divider::after {4551  content: "";4552  flex: 1;4553  height: 1px;4554  background: var(--peach-t3);4555}45564557.peach-loading {4558  position: absolute;4559  inset: 0;4560  display: flex;4561  align-items: center;4562  justify-content: center;4563  background: var(--bg);4564  animation: peach-loading-pulse 1.2s ease-in-out infinite;4565}45664567@keyframes peach-loading-pulse {4568  0%, 100% { opacity: 0.6; }4569  50% { opacity: 1; }4570}45714572/* ── Health Dashboard ─────────────────────────────────────────────────── */4573.peach-health-body {4574  flex: 1;4575  overflow-y: auto;4576  display: flex;4577  flex-direction: column;4578  /* Hide the platform scrollbar — every other scrollable surface in the4579   * popup hides it; the Health view was the one outlier and it ruined the4580   * polish. Behavior unchanged, just no rail rendered. */4581  scrollbar-width: none;4582  -ms-overflow-style: none;4583}4584.peach-health-body::-webkit-scrollbar { display: none; }45854586/* Loading screen for the Vault Health view. The advanced report computation4587 * can run for a few seconds on a large vault — without a clear loading4588 * screen the surface looked broken (the entry view bleeds through the4589 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4590.peach-health-loading-screen {4591  flex: 1;4592  display: flex;4593  flex-direction: column;4594  align-items: center;4595  justify-content: center;4596  gap: 14px;4597  padding: 32px 28px;4598  text-align: center;4599}46004601.peach-health-loading-glyph {4602  width: 48px;4603  height: 48px;4604  display: flex;4605  align-items: center;4606  justify-content: center;4607  border-radius: 14px;4608  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4609  color: var(--peach-accent);4610}46114612.peach-health-loading-title {4613  margin: 0;4614  font-family: var(--font-display);4615  font-style: italic;4616  font-weight: 300;4617  font-size: 19px;4618  line-height: 1.2;4619  color: var(--peach-t0);4620}46214622.peach-health-loading-copy {4623  margin: 0;4624  max-width: 240px;4625  font-size: 0.75rem;4626  line-height: 1.55;4627  color: var(--peach-t2);4628}46294630.peach-health-loading-track {4631  width: 200px;4632  height: 3px;4633  margin-top: 6px;4634  border-radius: 999px;4635  background: rgba(240, 232, 216, 0.06);4636  overflow: hidden;4637}46384639.peach-health-loading-fill {4640  width: 40%;4641  height: 100%;4642  border-radius: inherit;4643  background: linear-gradient(4644    90deg,4645    transparent 0%,4646    var(--peach-accent) 50%,4647    transparent 100%4648  );4649  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4650}46514652@keyframes peach-health-loading-sweep {4653  0%   { transform: translateX(-100%); }4654  100% { transform: translateX(350%); }4655}46564657[data-motion="reduce"] .peach-health-loading-fill,4658[data-motion="reduce"] .peach-health-loading-glyph svg path {4659  animation: none;4660}46614662.peach-health-summary {4663  padding: 10px 16px 6px;4664  font-family: "IBM Plex Mono", monospace;4665  font-size: 0.6875rem;4666}4667.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4668.peach-health-summary-ok { color: var(--peach-t2); }46694670.peach-health-check-row {4671  padding: 0 16px 10px;4672}4673.peach-health-check-btn {4674  width: 100%;4675  display: flex;4676  align-items: center;4677  justify-content: center;4678}46794680.peach-health-sections {4681  flex: 1;4682  display: flex;4683  flex-direction: column;4684}46854686.peach-health-section {4687  border-bottom: 1px solid var(--peach-t3);4688}46894690.peach-health-section-header {4691  width: 100%;4692  display: flex;4693  align-items: center;4694  justify-content: space-between;4695  padding: 9px 16px;4696  background: transparent;4697  cursor: pointer;4698  color: var(--peach-t0);4699}47004701.peach-health-section-title-row {4702  display: flex;4703  align-items: center;4704  gap: 8px;4705}47064707.peach-health-count-badge {4708  display: inline-flex;4709  align-items: center;4710  justify-content: center;4711  min-width: 20px;4712  height: 18px;4713  padding: 0 5px;4714  border-radius: 999px;4715  background: rgba(220,80,60,0.15);4716  border: 1px solid rgba(220,80,60,0.25);4717  font-family: "IBM Plex Mono", monospace;4718  font-size: 0.5625rem;4719  color: rgba(220,80,60,0.9);4720}47214722.peach-health-section-title {4723  font-family: "IBM Plex Mono", monospace;4724  font-size: 0.6875rem;4725  text-transform: uppercase;4726  letter-spacing: 0.1em;4727  color: var(--peach-t1);4728}47294730.peach-health-chevron {4731  color: var(--peach-t2);4732  transition: transform 200ms ease;4733  flex-shrink: 0;4734}4735.peach-health-chevron.is-expanded {4736  transform: rotate(180deg);4737}47384739.peach-health-section-body {4740  padding: 0 16px 10px;4741  display: flex;4742  flex-direction: column;4743  gap: 4px;4744}47454746.peach-health-row {4747  display: flex;4748  align-items: flex-start;4749  justify-content: space-between;4750  gap: 8px;4751  padding: 6px 8px;4752  border-radius: 8px;4753  background: rgba(240,232,216,0.02);4754}47554756.peach-health-row-info {4757  flex: 1;4758  min-width: 0;4759  display: flex;4760  flex-direction: column;4761  gap: 2px;4762}47634764.peach-health-row-name {4765  font-family: var(--font-display);4766  font-size: 0.9375rem;4767  font-style: italic;4768  font-weight: 400;4769  color: var(--peach-t0);4770  white-space: nowrap;4771  overflow: hidden;4772  text-overflow: ellipsis;4773}47744775.peach-health-row-meta {4776  font-family: "IBM Plex Mono", monospace;4777  font-size: 0.5625rem;4778  color: var(--peach-t2);4779  letter-spacing: 0.05em;4780}47814782.peach-health-fix-btn {4783  font-size: 0.5625rem;4784  letter-spacing: 0.08em;4785  text-transform: uppercase;4786  padding: 4px 7px;4787  flex-shrink: 0;4788  display: flex;4789  align-items: center;4790}47914792.peach-health-empty {4793  font-family: "IBM Plex Mono", monospace;4794  font-size: 0.625rem;4795  color: var(--peach-t2);4796  padding: 6px 0;4797}47984799.peach-health-loading {4800  font-family: "IBM Plex Mono", monospace;4801  font-size: 0.625rem;4802  color: var(--peach-t2);4803  padding: 6px 0;4804  display: flex;4805  align-items: center;4806  gap: 6px;4807}48084809.peach-health-loading::before {4810  content: "";4811  width: 10px;4812  height: 10px;4813  border: 1.5px solid var(--peach-t3);4814  border-top-color: var(--peach-accent);4815  border-radius: 50%;4816  animation: peach-spin 600ms linear infinite;4817}48184819@keyframes peach-spin {4820  to { transform: rotate(360deg); }4821}48224823.peach-spinner {4824  width: 32px;4825  height: 32px;4826  border: 2px solid var(--peach-s2);4827  border-top-color: var(--peach-accent);4828  border-radius: 50%;4829  margin: 0 auto 16px;4830  animation: peach-spin 0.8s linear infinite;4831}48324833.peach-progress-screen {4834  text-align: center;4835  padding: 32px 16px;4836}48374838.peach-progress-screen-title {4839  font-size: 0.8125rem;4840  color: var(--peach-t0);4841  margin-bottom: 16px;4842}48434844.peach-progress-screen-stage {4845  font-size: 0.6875rem;4846  color: var(--peach-t2);4847  min-height: 14px;4848}48494850.peach-progress-screen-note {4851  font-size: 0.625rem;4852  color: var(--peach-t2);4853  margin-top: 8px;4854}48554856.peach-pairing-body {4857  flex: 1;4858  overflow-y: auto;4859  display: flex;4860  flex-direction: column;4861}48624863.peach-pairing-content {4864  flex: 1;4865  display: flex;4866  flex-direction: column;4867  align-items: center;4868  justify-content: center;4869  gap: 14px;4870  padding: 28px 20px;4871  text-align: center;4872}48734874.peach-pairing-code-screen {4875  gap: 18px;4876}48774878.peach-pairing-headline {4879  font-family: var(--font-display);4880  font-style: italic;4881  font-weight: 300;4882  font-size: 28px;4883  color: var(--peach-t0);4884  margin: 0;4885  line-height: 1;4886}48874888.peach-pairing-subline {4889  font-size: 0.75rem;4890  color: var(--peach-t2);4891  max-width: 220px;4892  line-height: 1.5;4893  margin: 0;4894}48954896.peach-pairing-subline--center {4897  text-align: center;4898}48994900/* 6-digit pairing code — both display (.peach-pairing-code) and entry4901   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking4902   so the two modes feel like the same surface. */4903.peach-pairing-code {4904  font-family: "IBM Plex Mono", monospace;4905  font-size: 36px;4906  letter-spacing: 0.25em;4907  color: var(--peach-t0);4908  text-align: center;4909  padding: 24px 0;4910  text-shadow:4911    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),4912    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);4913  background: transparent;4914  border: 0;4915  cursor: default;4916  user-select: text;4917}49184919.peach-pairing-code--loading,4920.peach-pairing-code--expired {4921  font-size: 18px;4922  letter-spacing: 0.04em;4923  color: var(--peach-t2);4924  cursor: pointer;4925  text-shadow: none;4926}49274928.peach-pairing-qr-container {4929  display: flex;4930  flex-direction: column;4931  align-items: center;4932  gap: 10px;4933}49344935.peach-pairing-qr {4936  width: 240px;4937  height: 240px;4938  display: block;4939}49404941.peach-pairing-instruction {4942  font-size: 0.75rem;4943  color: var(--peach-t2);4944  text-align: center;4945  line-height: 1.5;4946  margin: 0;4947  max-width: 220px;4948}49494950.peach-pairing-expiry {4951  font-family: "IBM Plex Mono", monospace;4952  font-size: 13px;4953  letter-spacing: 0.06em;4954  color: var(--peach-t2);4955  margin: 0;4956}49574958.peach-pairing-regen {4959  font-size: 0.75rem;4960  color: var(--peach-accent);4961  background: transparent;4962  border: 0;4963  cursor: pointer;4964  padding: 4px 0;4965  text-decoration: underline;4966  text-underline-offset: 2px;4967}49684969.peach-pairing-code-input {4970  font-family: "IBM Plex Mono", monospace;4971  font-size: 36px;4972  letter-spacing: 0.25em;4973  color: var(--peach-t0);4974  background: transparent;4975  border: 0;4976  border-bottom: 1px solid var(--peach-t3);4977  outline: none;4978  text-align: center;4979  padding: 18px 0;4980  width: 220px;4981  caret-color: var(--peach-accent);4982  transition: border-color 160ms ease;4983}49844985.peach-pairing-code-input::placeholder {4986  color: var(--peach-t3);4987}49884989.peach-pairing-code-input:focus {4990  border-bottom-color: var(--peach-accent);4991}49924993.peach-pairing-toggle {4994  background: transparent;4995  border: 0;4996  color: var(--peach-t2);4997  font-size: 0.75rem;4998  padding: 8px 4px;4999  cursor: pointer;5000  transition: color 120ms ease;5001}50025003.peach-pairing-toggle:hover:not(:disabled) {5004  color: var(--peach-t1);5005}50065007.peach-pairing-toggle:disabled {5008  opacity: 0.5;5009  cursor: default;5010}50115012.peach-pairing-hint {5013  font-size: 0.6875rem;5014  color: var(--peach-t2);5015  margin: 0;5016  text-align: center;5017}50185019.peach-pairing-status {5020  display: flex;5021  align-items: center;5022  gap: 8px;5023  margin: 0;5024  font-size: 0.75rem;5025  color: var(--peach-t1);5026}50275028.peach-pairing-error {5029  margin: 0;5030  font-size: 0.6875rem;5031  color: var(--peach-breach);5032}50335034.peach-pairing-error--muted {5035  color: var(--peach-t2);5036}50375038.peach-pairing-spinner {5039  width: 12px;5040  height: 12px;5041  border: 1.5px solid var(--peach-t3);5042  border-top-color: var(--peach-accent);5043  border-radius: 50%;5044  animation: peach-spin 0.8s linear infinite;5045}50465047.peach-pairing-success-icon,5048.peach-pairing-error-icon,5049.peach-pairing-hero {5050  display: inline-flex;5051  align-items: center;5052  justify-content: center;5053}50545055/* Tag chips */5056.peach-tag-chip {5057  display: inline-flex;5058  align-items: center;5059  gap: 4px;5060  padding: 3px 8px;5061  border-radius: 999px;5062  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5063  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5064  color: var(--peach-t0);5065  font-family: "IBM Plex Mono", monospace;5066  font-size: 0.625rem;5067  letter-spacing: 0.04em;5068}50695070.peach-tag-chip-remove {5071  background: transparent;5072  border: none;5073  color: inherit;5074  opacity: 0.6;5075  cursor: pointer;5076  padding: 0;5077  font-size: 0.75rem;5078  line-height: 1;5079}50805081.peach-tag-chip-remove:hover {5082  opacity: 1;5083}50845085/* Tag input */5086.peach-tag-input-wrap {5087  border-bottom: 1px solid var(--peach-t3);5088}50895090.peach-tag-suggestions {5091  display: flex;5092  flex-wrap: wrap;5093  gap: 4px;5094  padding: 6px 0;5095}50965097.peach-tag-suggestion {5098  padding: 2px 8px;5099  border-radius: 999px;5100  border: 1px solid var(--peach-t3);5101  background: var(--peach-s2);5102  color: var(--peach-t1);5103  font-family: "IBM Plex Mono", monospace;5104  font-size: 0.625rem;5105  cursor: pointer;5106  transition: border-color 80ms ease, background 80ms ease;5107}51085109.peach-tag-suggestion:hover {5110  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5111  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5112}51135114/* Tag filter strip */5115.peach-tag-filter-strip {5116  border-bottom: 1px solid var(--peach-t3);5117  flex-shrink: 0;5118}51195120.peach-tag-filter-chip {5121  display: inline-flex;5122  align-items: center;5123  padding: 4px 10px;5124  border-radius: 999px;5125  border: 1px solid var(--peach-t3);5126  background: transparent;5127  color: var(--peach-t2);5128  font-family: "IBM Plex Mono", monospace;5129  font-size: 0.5625rem;5130  letter-spacing: 0.06em;5131  text-transform: uppercase;5132  cursor: pointer;5133  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5134  white-space: nowrap;5135}51365137.peach-tag-filter-chip:hover {5138  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5139  color: var(--peach-t1);5140}51415142.peach-tag-filter-chip.is-selected {5143  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5144  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5145  color: var(--peach-t0);5146}51475148/* ─────────────────────────────────────────────────────────────────────────5149   v1.4.12 additions5150   ─────────────────────────────────────────────────────────────────────── */51515152/* Sort bar */5153.peach-sort-bar {5154  display: flex;5155  align-items: center;5156  gap: 4px;5157  padding: 5px 12px;5158  border-bottom: 1px solid var(--peach-t3);5159  flex-shrink: 0;5160  overflow-x: auto;5161  scrollbar-width: none;5162}51635164.peach-sort-btn {5165  padding: 2px 9px;5166  border-radius: 999px;5167  border: 1px solid transparent;5168  background: transparent;5169  color: var(--peach-t2);5170  font-family: "IBM Plex Mono", monospace;5171  font-size: 0.5625rem;5172  letter-spacing: 0.07em;5173  text-transform: uppercase;5174  cursor: pointer;5175  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5176  white-space: nowrap;5177}51785179.peach-sort-btn:hover {5180  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5181  color: var(--peach-t1);5182}51835184.peach-sort-btn.is-active {5185  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5186  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5187  color: var(--peach-t0);5188}51895190.peach-sort-domain-hint {5191  margin-left: auto;5192  font-family: "IBM Plex Mono", monospace;5193  font-size: 0.5625rem;5194  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5195  white-space: nowrap;5196  overflow: hidden;5197  text-overflow: ellipsis;5198  max-width: 110px;5199}52005201/* Tab-match badge on entry rows */5202.peach-tab-match-badge {5203  display: inline-block;5204  width: 6px;5205  height: 6px;5206  border-radius: 50%;5207  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5208  margin-left: 5px;5209  vertical-align: middle;5210  flex-shrink: 0;5211  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5212}52135214.peach-entry-row.is-tab-match {5215  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5216  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5217}52185219.peach-entry-row.is-tab-match:hover {5220  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5221}52225223/* Entry list stagger entrance */5224@keyframes peach-entry-fadein {5225  from { opacity: 0; transform: translateY(4px); }5226  to   { opacity: 1; transform: translateY(0); }5227}52285229.peach-vault-list .peach-entry-row {5230  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5231  content-visibility: auto;5232  contain-intrinsic-size: auto 44px;5233}52345235/* Button press micro-interaction */5236.peach-btn:active {5237  transform: scale(0.95);5238  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5239}52405241.peach-sort-btn:active,5242.peach-tag-filter-chip:active {5243  transform: scale(0.93);5244  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5245}52465247/* Password strength bar (Lock view + shared) */5248.peach-password-strength {5249  display: flex;5250  align-items: center;5251  gap: 8px;5252  margin-top: 6px;5253}52545255.peach-strength-bar {5256  flex: 1;5257  height: 3px;5258  border-radius: 2px;5259  background: var(--peach-t3);5260  overflow: hidden;5261}52625263.peach-strength-fill {5264  height: 100%;5265  border-radius: 2px;5266  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5267              background 300ms ease;5268}52695270.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5271.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5272.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5273.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }52745275.peach-strength-label {5276  font-family: "IBM Plex Mono", monospace;5277  font-style: italic;5278  font-size: 0.5625rem;5279  font-weight: 300;5280  letter-spacing: 0.06em;5281  color: var(--peach-t2);5282  min-width: 36px;5283  text-align: right;5284}52855286.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5287.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5288.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5289.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }52905291/* Duress form */5292.peach-duress-status {5293  padding: 2px 8px;5294  border-radius: 999px;5295  border: 1px solid var(--peach-t3);5296  font-family: "IBM Plex Mono", monospace;5297  font-size: 0.5625rem;5298  letter-spacing: 0.07em;5299  text-transform: uppercase;5300  color: var(--peach-t2);5301  flex-shrink: 0;5302}53035304.peach-duress-status.is-active {5305  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5306  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5307  color: var(--peach-t0);5308}53095310.peach-duress-form {5311  padding: 8px 0 4px;5312  display: flex;5313  flex-direction: column;5314  gap: 6px;5315}53165317.peach-duress-form .peach-label {5318  margin-top: 4px;5319}53205321.peach-duress-actions {5322  display: flex;5323  gap: 6px;5324  align-items: center;5325  margin-top: 4px;5326}53275328.peach-duress-actions .peach-btn:first-child {5329  margin-right: auto;5330}53315332/* Improved overlay spring entrance */5333.peach-overlay-view.ov-enter-up {5334  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5335}53365337@keyframes ov-enter-up-spring {5338  from { opacity: 0; transform: translateY(16px) scale(0.98); }5339  to   { opacity: 1; transform: translateY(0) scale(1); }5340}53415342.peach-overlay-view.ov-enter-right {5343  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5344}53455346@keyframes ov-enter-right-spring {5347  from { opacity: 0; transform: translateX(18px) scale(0.98); }5348  to   { opacity: 1; transform: translateX(0) scale(1); }5349}53505351/* ── Onboarding-mode restore screens (file import) ── */5352/* Used when MainImportView renders during onboarding (no vault yet).5353   Animates like a lock-screen transition. */5354.peach-lock-view {5355  position: absolute;5356  inset: 0;5357  display: flex;5358  flex-direction: column;5359  background:5360    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5361    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5362    var(--peach-bg);5363  z-index: 2;5364  overflow: hidden;5365  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5366}53675368.peach-lock-view-header {5369  display: flex;5370  align-items: center;5371  justify-content: space-between;5372  padding: 16px 18px 12px;5373  flex-shrink: 0;5374}53755376/* ───────── Settings: auto-lock select ───────── */5377.peach-settings-select {5378  font-family: "IBM Plex Mono", monospace;5379  font-size: 0.6875rem;5380  background: transparent;5381  border: 1px solid var(--peach-t3);5382  border-radius: 4px;5383  color: var(--peach-t1);5384  padding: 3px 6px;5385  cursor: pointer;5386  outline: none;5387}5388.peach-settings-select:focus {5389  border-color: var(--peach-accent);5390}53915392/* ───────── Duress status pill (new polished) ───────── */5393.peach-duress-status-pill {5394  font-family: "IBM Plex Mono", monospace;5395  font-size: 0.5625rem;5396  text-transform: uppercase;5397  letter-spacing: 0.12em;5398  padding: 2px 8px;5399  border-radius: 12px;5400  background: var(--peach-t3);5401  color: var(--peach-t2);5402  flex-shrink: 0;5403}5404.peach-duress-status-pill.is-active {5405  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5406  color: var(--peach-accent);5407}54085409/* ───────── Entry advanced disclosure (canary) ───────── */5410.peach-entry-advanced {5411  margin-top: 12px;5412  border-top: 1px solid var(--peach-t3);5413  padding-top: 10px;5414  position: relative;5415  z-index: 1;5416}5417.peach-entry-advanced-toggle {5418  display: flex;5419  align-items: center;5420  justify-content: space-between;5421  width: 100%;5422  background: transparent;5423  border: none;5424  cursor: pointer;5425  padding: 0;5426  color: var(--peach-t2);5427}5428.peach-canary-section {5429  margin-top: 10px;5430  display: grid;5431  gap: 6px;5432}54335434/* ───────── Import: merge/replace radio choices ───────── */5435.peach-import-choice {5436  display: flex;5437  align-items: flex-start;5438  gap: 10px;5439  padding: 8px 10px;5440  border: 1px solid var(--peach-t3);5441  border-radius: 10px;5442  cursor: pointer;5443  margin-bottom: 6px;5444  transition: border-color 120ms ease, background 120ms ease;5445}5446.peach-import-choice:hover {5447  border-color: var(--peach-accent);5448}5449.peach-import-choice input[type="radio"] {5450  margin-top: 3px;5451  accent-color: var(--peach-accent);5452  flex-shrink: 0;5453}5454.peach-import-choice-main {5455  display: flex;5456  flex-direction: column;5457  gap: 2px;5458  min-width: 0;5459}5460.peach-import-choice-label {5461  font-size: 0.75rem;5462  color: var(--peach-t0);5463}5464.peach-import-choice-sub {5465  font-size: 0.6875rem;5466  color: var(--peach-t2);5467  line-height: 1.5;5468}54695470/* ───────── Export: success confirmation strip ───────── */5471.peach-export-success {5472  display: flex;5473  align-items: flex-start;5474  gap: 10px;5475  padding: 12px;5476  border-radius: 12px;5477  border: 1px solid rgba(150, 175, 110, 0.3);5478  background: rgba(150, 175, 110, 0.08);5479  color: var(--peach-t0);5480  font-size: 0.75rem;5481  line-height: 1.55;5482}5483.peach-export-success-check {5484  color: rgba(150, 175, 110, 0.9);5485  font-size: 0.875rem;5486  flex-shrink: 0;5487}54885489/* ── Trash view ──────────────────────────────────────────────────────── */5490.peach-trash-entry-row {5491  display: flex;5492  align-items: center;5493  justify-content: space-between;5494  gap: 8px;5495  padding: 8px 0;5496  border-bottom: 1px solid var(--peach-border);5497}5498.peach-trash-entry-info {5499  flex: 1;5500  min-width: 0;5501  display: flex;5502  flex-direction: column;5503  gap: 2px;5504}5505.peach-trash-entry-title {5506  font-size: 0.8125rem;5507  color: var(--peach-t0);5508  overflow: hidden;5509  text-overflow: ellipsis;5510  white-space: nowrap;5511}5512.peach-trash-entry-meta {5513  font-family: var(--font-mono);5514  font-size: 0.5625rem;5515  color: var(--peach-t2);5516  letter-spacing: 0.04em;5517}5518.peach-trash-entry-actions {5519  display: flex;5520  align-items: center;5521  gap: 4px;5522  flex-shrink: 0;5523}5524.peach-trash-delete-btn {5525  background: transparent;5526  border: 0;5527  color: var(--peach-t3);5528  font-size: 1rem;5529  line-height: 1;5530  cursor: pointer;5531  padding: 2px 5px;5532  transition: color 0.15s;5533}5534.peach-trash-delete-btn:hover { color: var(--peach-breach); }5535.peach-trash-list {5536  overflow-y: auto;5537}5538.peach-trash-footer {5539  display: flex;5540  align-items: center;5541  gap: 8px;5542  padding: 8px 0 0;5543  border-top: 1px solid var(--peach-border);5544  margin-top: 4px;5545}5546.peach-trash-purge-all {5547  background: transparent;5548  border: 0;5549  color: var(--peach-t3);5550  font-size: 0.625rem;5551  cursor: pointer;5552  padding: 4px 0;5553  letter-spacing: 0.03em;5554  transition: color 0.2s;5555}5556.peach-trash-purge-all:hover { color: var(--peach-breach); }5557.peach-trash-purge-confirm-label {5558  font-size: 0.625rem;5559  color: var(--peach-t1);5560  flex: 1;5561}55625563/* ── Settings shortcuts grid ─────────────────────────────────────────── */5564.peach-shortcuts-grid {5565  display: grid;5566  grid-template-columns: auto 1fr;5567  gap: 6px 12px;5568  align-items: center;5569  padding: 4px 0;5570}5571.peach-shortcut-key {5572  font-family: var(--font-mono);5573  font-size: 0.625rem;5574  color: var(--peach-t0);5575  background: var(--peach-t3);5576  border-radius: 4px;5577  padding: 2px 6px;5578  white-space: nowrap;5579  text-align: center;5580}5581.peach-shortcut-desc {5582  font-size: 0.6875rem;5583  color: var(--peach-t1);5584}55855586/* ── Sort bar trash button ───────────────────────────────────────────── */5587.peach-sort-trash-btn {5588  display: flex;5589  align-items: center;5590  justify-content: center;5591  padding: 3px 5px;5592  background: transparent;5593  border: none;5594  cursor: pointer;5595  color: var(--peach-t2);5596  border-radius: 4px;5597  transition: color 140ms ease, background 140ms ease;5598}5599.peach-sort-trash-btn:hover {5600  color: var(--peach-t1);5601  background: var(--peach-t3);5602}5603.peach-sort-trash-btn.is-active {5604  color: var(--peach-accent);5605}56065607/* Accent color picker */5608.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5609.peach-accent-picker {5610  display: flex;5611  flex-wrap: wrap;5612  gap: 7px;5613  padding: 2px 0;5614}5615.peach-accent-swatch {5616  width: 22px;5617  height: 22px;5618  border-radius: 50%;5619  border: 2px solid transparent;5620  cursor: pointer;5621  padding: 0;5622  transition: transform 100ms;5623  outline-offset: 2px;5624}5625.peach-accent-swatch:hover { transform: scale(1.15); }5626.peach-accent-swatch.is-active {5627  border-color: var(--peach-t0);5628  transform: scale(1.1);5629}56305631/* Display font picker — swatch shows an "Aa" preview rendered with each5632   font option so the user can see what they're picking before they pick. */5633.peach-settings-row--font { align-items: flex-start; padding-top: 10px; }5634.peach-font-picker {5635  display: flex;5636  flex-wrap: wrap;5637  gap: 6px;5638  padding: 2px 0;5639  flex: 1;5640  justify-content: flex-end;5641}5642.peach-font-swatch {5643  display: flex;5644  flex-direction: column;5645  align-items: center;5646  gap: 2px;5647  padding: 4px 8px;5648  background: transparent;5649  border: 1px solid var(--peach-t3);5650  border-radius: 6px;5651  cursor: pointer;5652  transition: border-color 100ms, background 100ms;5653  min-width: 56px;5654}5655.peach-font-swatch:hover {5656  border-color: var(--peach-accent-dim);5657  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5658}5659.peach-font-swatch.is-active {5660  border-color: var(--peach-accent);5661  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5662}5663.peach-font-swatch-glyph {5664  font-size: 18px;5665  line-height: 1;5666  color: var(--peach-t0);5667}5668.peach-font-swatch[data-font-preview="cormorant-italic"] .peach-font-swatch-glyph {5669  font-family: "Cormorant Garamond", serif;5670  font-style: italic;5671  font-weight: 400;5672}5673.peach-font-swatch[data-font-preview="cormorant"] .peach-font-swatch-glyph {5674  font-family: "Cormorant Garamond", serif;5675  font-style: normal;5676  font-weight: 400;5677}5678.peach-font-swatch[data-font-preview="inter"] .peach-font-swatch-glyph {5679  font-family: "Inter Variable", "Inter", sans-serif;5680  font-style: normal;5681  font-weight: 400;5682}5683.peach-font-swatch[data-font-preview="system"] .peach-font-swatch-glyph {5684  font-family: system-ui, -apple-system, sans-serif;5685  font-style: normal;5686  font-weight: 400;5687}5688.peach-font-swatch-name {5689  font-family: var(--font-mono);5690  font-size: 0.5rem;5691  letter-spacing: 0.06em;5692  color: var(--peach-t2);5693  text-transform: lowercase;5694}56955696.peach-pill-group {5697  display: flex;5698  gap: 6px;5699}5700.peach-pill-group .peach-btn.is-active {5701  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5702  border-color: var(--peach-accent);5703  color: var(--peach-t0);5704}57055706/* ── Card entry styles ───────────────────────────────────────── */5707.peach-card-number {5708  font-family: var(--peach-mono);5709  letter-spacing: 0.08em;5710}57115712.peach-card-network-badge {5713  font-size: 0.625rem;5714  padding: 1px 5px;5715  border-radius: 4px;5716  border: 0.5px solid var(--peach-border);5717  color: var(--peach-text-dim);5718  margin-left: 6px;5719  vertical-align: middle;5720}57215722.peach-card-expiry-row {5723  display: flex;5724  align-items: center;5725  gap: 8px;5726}57275728.peach-card-expiry-sep {5729  color: var(--peach-text-dim);5730}57315732/* ── Pro tier — upgrade screen ──────────────────────────────── */5733.peach-pro-mark {5734  font-size: 0.5625rem;5735  color: var(--peach-accent);5736  margin-left: 6px;5737  vertical-align: super;5738  opacity: 0.7;5739}57405741.peach-pro-mini-badge {5742  display: block;5743  font-size: 0.625rem;5744  font-style: italic;5745  color: var(--peach-accent);5746  letter-spacing: 0.04em;5747  margin-top: -2px;5748  padding-left: 2px;5749  opacity: 0.85;5750  text-align: center;5751}57525753.peach-wordmark-stack {5754  display: inline-flex;5755  flex-direction: column;5756  align-items: center;5757}57585759/* ── Pro tier — upgrade page ─────────────────────────────────── */5760.peach-pro-upgrade {5761  display: flex;5762  flex-direction: column;5763  align-items: stretch;5764  gap: 10px;5765  padding: 0 4px 8px;5766}57675768.peach-pro-upgrade-hero {5769  display: flex;5770  flex-direction: column;5771  align-items: center;5772  gap: 4px;5773  padding: 10px 0 6px;5774}57755776.peach-pro-upgrade-mark-wrap {5777  display: flex;5778  align-items: center;5779  justify-content: center;5780  margin-bottom: 2px;5781}57825783.peach-pro-upgrade-mark {5784  width: 38px;5785  height: 38px;5786  opacity: 0.9;5787}57885789.peach-pro-upgrade-title {5790  font-family: var(--font-display, var(--font-ui));5791  font-size: 22px;5792  margin: 0;5793  color: var(--peach-t0);5794  letter-spacing: 0.01em;5795}57965797.peach-pro-upgrade-tagline {5798  margin: 0;5799  font-style: italic;5800  color: var(--peach-t2);5801  font-size: 0.6875rem;5802}58035804.peach-pro-features {5805  display: flex;5806  flex-direction: column;5807  gap: 8px;5808  border-top: 1px solid var(--peach-border);5809  border-bottom: 1px solid var(--peach-border);5810  padding: 10px 4px;5811}58125813.peach-pro-feature {5814  display: flex;5815  gap: 9px;5816  align-items: baseline;5817}58185819.peach-pro-feature-mark {5820  color: var(--peach-accent);5821  font-size: 0.6875rem;5822  flex-shrink: 0;5823  display: inline-block;5824  transform-origin: center;5825  opacity: 0.8;5826}58275828.peach-pro-feature-text {5829  display: flex;5830  flex-direction: column;5831  gap: 1px;5832}58335834.peach-pro-feature-name {5835  font-size: 0.75rem;5836  color: var(--peach-t0);5837}58385839.peach-pro-feature-desc {5840  font-size: 0.625rem;5841  color: var(--peach-t2);5842}58435844.peach-pro-feature.is-highlighted .peach-pro-feature-mark {5845  animation: peach-pulse-accent 600ms ease-out forwards;5846}58475848@keyframes peach-pulse-accent {5849  0%   { opacity: 1; transform: scale(1.4); }5850  100% { opacity: 0.7; transform: scale(1); }5851}58525853.peach-pro-upgrade-actions {5854  display: flex;5855  flex-direction: column;5856  align-items: center;5857  gap: 8px;5858  padding-top: 2px;5859}58605861.peach-pro-pricing {5862  margin: 0;5863  text-align: center;5864  font-size: 0.6875rem;5865  color: var(--peach-t2);5866  letter-spacing: 0.04em;5867}58685869.peach-pro-upgrade-cta {5870  align-self: center;5871  text-align: center;5872  text-decoration: none;5873  display: block;5874  padding: 9px 32px;5875  font-size: 0.8125rem;5876  min-width: 180px;5877}58785879.peach-pro-key-divider {5880  display: flex;5881  align-items: center;5882  gap: 8px;5883  width: 100%;5884  color: var(--peach-t3);5885  font-size: 0.625rem;5886  letter-spacing: 0.08em;5887}58885889.peach-pro-key-divider::before,5890.peach-pro-key-divider::after {5891  content: "";5892  flex: 1;5893  height: 1px;5894  background: var(--peach-border);5895}58965897.peach-pro-key-link {5898  background: transparent;5899  border: 1px solid var(--peach-border);5900  border-radius: 8px;5901  color: var(--peach-t1);5902  font-size: 0.75rem;5903  cursor: pointer;5904  align-self: stretch;5905  padding: 8px 12px;5906  text-align: center;5907  transition: border-color 0.2s, color 0.2s;5908}59095910.peach-pro-key-link:hover {5911  border-color: var(--peach-accent);5912  color: var(--peach-accent);5913}59145915/* ── Pro tier — key ceremony ─────────────────────────────────── */5916.peach-pro-key-ceremony {5917  display: flex;5918  flex-direction: column;5919  align-items: center;5920  gap: 12px;5921  padding: 20px 4px 16px;5922}59235924.peach-pro-key-ceremony .peach-lock-rune-string {5925  font-size: 1rem;5926  gap: 12px;5927  flex: 0;5928  justify-content: center;5929}59305931.peach-pro-key-ceremony-label {5932  margin: 0;5933  font-size: 0.6875rem;5934  color: var(--peach-t2);5935  font-style: italic;5936  letter-spacing: 0.04em;5937}59385939.peach-pro-key-input {5940  font-family: var(--font-mono, monospace);5941  letter-spacing: 0.06em;5942  text-align: center;5943  width: 100%;5944  box-sizing: border-box;5945}59465947.peach-pro-key-error {5948  margin: 0;5949  font-size: 0.75rem;5950  text-align: center;5951  color: var(--peach-breach, #e55);5952  padding: 0;5953}59545955.peach-pro-key-activate {5956  width: 100%;5957  text-align: center;5958  box-sizing: border-box;5959  padding: 10px 20px;5960  font-size: 0.8125rem;5961}59625963.peach-pro-key-cancel {5964  background: transparent;5965  border: 0;5966  color: var(--peach-t2);5967  font-size: 0.6875rem;5968  cursor: pointer;5969  padding: 2px 8px;5970  transition: color 0.2s;5971}59725973.peach-pro-key-cancel:hover { color: var(--peach-accent); }59745975/* ── Pro tier — active state ─────────────────────────────────── */5976.peach-pro-active {5977  display: flex;5978  flex-direction: column;5979  align-items: center;5980  gap: 0;5981  padding: 8px 4px 16px;5982  min-height: 280px;5983}59845985.peach-pro-active-hero {5986  display: flex;5987  flex-direction: column;5988  align-items: center;5989  gap: 6px;5990  padding: 20px 0 22px;5991}59925993.peach-pro-active-mark-wrap {5994  display: flex;5995  align-items: center;5996  justify-content: center;5997  margin-bottom: 4px;5998}59996000.peach-pro-active-mark {6001  width: 60px;6002  height: 60px;6003  filter:6004    drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 55%, transparent))6005    drop-shadow(0 0 26px color-mix(in srgb, var(--peach-accent) 22%, transparent));6006}60076008.peach-pro-active-title {6009  font-family: var(--font-display, var(--font-ui));6010  font-size: 26px;6011  margin: 0;6012  color: var(--peach-t0);6013  letter-spacing: 0.01em;6014}60156016.peach-pro-active-since {6017  margin: 0;6018  font-size: 0.6875rem;6019  color: var(--peach-t2);6020  font-style: italic;6021}60226023.peach-pro-active-features {6024  display: flex;6025  flex-direction: column;6026  gap: 8px;6027  width: 100%;6028  padding: 14px 8px 0;6029  border-top: 1px solid var(--peach-border);6030  flex: 1;6031}60326033.peach-pro-active-feature {6034  display: flex;6035  align-items: center;6036  gap: 9px;6037}60386039.peach-pro-active-feature-mark {6040  color: var(--peach-accent);6041  font-size: 0.625rem;6042  opacity: 0.65;6043  flex-shrink: 0;6044}60456046.peach-pro-active-feature-name {6047  font-size: 0.75rem;6048  color: var(--peach-t1);6049}60506051.peach-pro-deactivate {6052  align-self: center;6053  background: transparent;6054  border: 0;6055  color: var(--peach-t3);6056  font-size: 0.625rem;6057  cursor: pointer;6058  padding: 8px 0 0;6059  margin-top: 16px;6060  letter-spacing: 0.03em;6061  transition: color 0.2s;6062}60636064.peach-pro-deactivate:hover { color: var(--peach-t2); }60656066.peach-pro-deactivate:disabled {6067  opacity: 0.5;6068  cursor: default;6069}60706071/* ── Pro advanced health remediation queue ──────────────────── */6072.peach-health-pro-queue {6073  display: flex;6074  flex-direction: column;6075  gap: 10px;6076  padding: 12px;6077  margin: 0 0 12px;6078  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6079  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6080  border-radius: 10px;6081}60826083.peach-health-pro-queue-head {6084  display: flex;6085  justify-content: space-between;6086  align-items: baseline;6087}60886089.peach-health-pro-queue-title {6090  font-size: 0.75rem;6091  font-weight: 500;6092  letter-spacing: 0.04em;6093  text-transform: uppercase;6094  color: var(--peach-accent);6095}60966097.peach-health-pro-queue-score {6098  font-size: 0.6875rem;6099  color: var(--peach-t2);6100}61016102.peach-health-pro-row {6103  display: flex;6104  gap: 10px;6105  align-items: center;6106  padding: 8px 0;6107  border-top: 1px solid var(--peach-border);6108}61096110.peach-health-pro-row-info {6111  flex: 1;6112  display: flex;6113  flex-direction: column;6114  gap: 4px;6115  min-width: 0;6116}61176118.peach-health-pro-row-name {6119  font-size: 0.8125rem;6120  color: var(--peach-t0);6121  overflow: hidden;6122  text-overflow: ellipsis;6123  white-space: nowrap;6124}61256126.peach-health-pro-row-meta {6127  font-size: 0.6875rem;6128  color: var(--peach-t2);6129}61306131.peach-health-pro-bar {6132  height: 2px;6133  background: var(--peach-border);6134  border-radius: 2px;6135  overflow: hidden;6136  margin-top: 2px;6137}61386139.peach-health-pro-bar-fill {6140  height: 100%;6141  background: var(--peach-accent);6142  transition: width 200ms ease-out;6143}61446145/* ── Pro activation celebration ── */6146@keyframes peach-pro-bloom {6147  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6148  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6149                 drop-shadow(0 0 48px var(--peach-glow)); }6150  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6151}61526153@keyframes peach-pro-wordmark-in {6154  from { opacity: 0; transform: translateY(4px); }6155  to   { opacity: 1; transform: translateY(0); }6156}61576158@keyframes peach-pro-fade-out {6159  from { opacity: 1; }6160  to   { opacity: 0; }6161}61626163.peach-pro-celebration {6164  background:6165    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6166    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6167    var(--peach-bg);6168  border: 1px solid var(--peach-t3);6169  box-shadow:6170    0 2px 8px rgba(0,0,0,0.55),6171    0 14px 48px rgba(0,0,0,0.7),6172    0 0 0 1px rgba(240,232,216,0.04);6173  overflow: hidden;6174  width: 320px;6175  height: 520px;6176  display: flex;6177  flex-direction: column;6178  align-items: center;6179  justify-content: center;6180  gap: 8px;6181  padding: 32px 24px;6182  text-align: center;6183}61846185.peach-pro-celebration.is-leaving {6186  animation: peach-pro-fade-out 400ms ease forwards;6187}61886189.peach-pro-bloom-target {6190  display: flex;6191  align-items: center;6192  justify-content: center;6193  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6194  margin-bottom: 12px;6195}61966197.peach-pro-bloom-icon {6198  width: 48px;6199  height: 48px;6200}62016202.peach-pro-wordmark {6203  font-family: var(--font-display);6204  font-size: 22px;6205  font-style: italic;6206  font-weight: 400;6207  color: var(--peach-accent);6208  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6209}62106211.peach-pro-thankyou {6212  font-size: 0.75rem;6213  font-style: italic;6214  color: var(--peach-t2);6215  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6216}621762186219/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6220.peach-pro-notice-banner {6221  display: flex;6222  align-items: center;6223  gap: 8px;6224  padding: 7px 12px;6225  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6226  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6227  font-size: 0.6875rem;6228  color: var(--peach-t2);6229  font-family: "IBM Plex Mono", monospace;6230  flex-shrink: 0;6231}62326233.peach-pro-notice-link {6234  background: none;6235  border: none;6236  padding: 0;6237  cursor: pointer;6238  font-size: 0.6875rem;6239  color: var(--peach-accent);6240  font-family: "IBM Plex Mono", monospace;6241  margin-left: auto;6242  white-space: nowrap;6243}62446245.peach-pro-notice-close {6246  background: none;6247  border: none;6248  padding: 0 0 0 4px;6249  cursor: pointer;6250  font-size: 0.625rem;6251  color: var(--peach-t3);6252  line-height: 1;6253}62546255/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6256   Renders over whatever view is showing. 60-second expiry; the popup ticks6257   the countdown each second and clears the banner when it hits zero. */6258.peach-pair-request-banner {6259  display: flex;6260  flex-direction: column;6261  gap: 8px;6262  padding: 10px 12px;6263  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6264  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6265  font-family: "IBM Plex Mono", monospace;6266  flex-shrink: 0;6267}62686269.peach-pair-toast {6270  padding: 8px 12px;6271  font-family: "IBM Plex Mono", monospace;6272  font-size: 0.75rem;6273  color: var(--peach-t1);6274  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6275  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6276  flex-shrink: 0;6277  text-align: center;6278}62796280.peach-pair-toast strong {6281  color: var(--peach-t0);6282  font-weight: 500;6283}62846285.peach-pair-request-header {6286  display: flex;6287  align-items: center;6288  gap: 8px;6289  font-size: 0.75rem;6290  color: var(--peach-t1);6291}62926293.peach-pair-request-mark {6294  font-size: 0.875rem;6295  display: inline-flex;6296  align-items: center;6297}62986299.peach-pair-request-icon {6300  width: 1em;6301  height: 1em;6302}63036304.peach-pair-request-title {6305  font-weight: 600;6306  color: var(--peach-t0);6307}63086309.peach-pair-request-countdown {6310  margin-left: auto;6311  font-variant-numeric: tabular-nums;6312  color: var(--peach-t2);6313  font-size: 0.6875rem;6314}63156316.peach-pair-request-body {6317  margin: 0;6318  font-size: 0.75rem;6319  color: var(--peach-t1);6320  line-height: 1.4;6321}63226323.peach-pair-request-body strong {6324  color: var(--peach-t0);6325  font-weight: 600;6326}63276328.peach-pair-request-actions {6329  display: flex;6330  gap: 8px;6331  justify-content: flex-end;6332}63336334/* ─── First-run onboarding ──────────────────────────────────────────────6335   Three-card welcome shown once before vault creation. The PeachScript6336   rune background drifts behind everything at very low opacity — it's6337   atmosphere, not focus. The cards themselves use the same panel6338   language as the rest of the popup so the transition into NewVault is6339   continuous, not a jarring switch of visual register. */63406341.peach-onboarding {6342  position: relative;6343  display: flex;6344  flex-direction: column;6345  width: 100%;6346  height: 100%;6347  padding: 16px 16px 18px;6348  box-sizing: border-box;6349  overflow: hidden;6350  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6351}63526353.peach-onboarding.is-completing {6354  animation: peach-onboard-exit 200ms ease-out forwards;6355}63566357.peach-rune-background {6358  position: absolute;6359  inset: 0;6360  width: 100%;6361  height: 100%;6362  pointer-events: none;6363  z-index: 0;6364  transition: opacity 500ms ease-out;6365}63666367.peach-onboarding.is-completing .peach-rune-background {6368  opacity: 0;6369}63706371.peach-onboarding-header {6372  position: relative;6373  z-index: 1;6374  display: flex;6375  align-items: center;6376  margin-bottom: 14px;6377}63786379.peach-onboarding-card {6380  position: relative;6381  z-index: 1;6382  flex: 1;6383  display: flex;6384  flex-direction: column;6385  gap: 10px;6386  padding: 22px 20px;6387  border-radius: 16px;6388  border: 1px solid var(--peach-t3);6389  background:6390    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6391  backdrop-filter: blur(3px);6392  -webkit-backdrop-filter: blur(3px);6393  box-shadow:6394    inset 0 1px 0 rgba(240, 232, 216, 0.04),6395    0 12px 28px rgba(0, 0, 0, 0.12);6396  cursor: pointer;6397  user-select: none;6398  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6399}64006401.peach-onboarding-card.is-exiting {6402  animation: peach-card-out 120ms ease-in forwards;6403  pointer-events: none;6404}64056406.peach-onboarding-card-headline {6407  margin: 0;6408  font-family: var(--font-display);6409  font-style: italic;6410  font-weight: 400;6411  font-size: 22px;6412  line-height: 1.05;6413  color: var(--peach-t0);6414  white-space: pre-line;6415}64166417.peach-onboarding-divider {6418  margin: 4px 0 6px;6419  border: 0;6420  border-top: 1px solid var(--peach-t3);6421  width: 100%;6422}64236424.peach-onboarding-body {6425  margin: 0;6426  font-size: 0.8125rem;6427  line-height: 1.6;6428  color: var(--peach-t1);6429}64306431.peach-onboarding-warning {6432  display: flex;6433  align-items: flex-start;6434  gap: 8px;6435  margin: 6px 0 0;6436  padding-top: 8px;6437  border-top: 1px dashed var(--peach-t3);6438  font-size: 0.8125rem;6439  line-height: 1.5;6440  color: var(--peach-t1);6441}64426443.peach-onboarding-warning-icon {6444  color: var(--peach-accent);6445  font-size: 0.8125rem;6446  line-height: 1.5;6447  flex: 0 0 auto;6448}64496450.peach-onboarding-nav {6451  position: relative;6452  z-index: 1;6453  display: flex;6454  align-items: center;6455  justify-content: space-between;6456  margin-top: 12px;6457  padding: 0 4px;6458}64596460.peach-onboarding-dots {6461  display: flex;6462  align-items: center;6463  gap: 6px;6464}64656466.peach-onboarding-dot {6467  width: 6px;6468  height: 6px;6469  border-radius: 50%;6470  background: var(--peach-t2);6471  transition: width 200ms ease, height 200ms ease, background 200ms ease;6472}64736474.peach-onboarding-dot.is-active {6475  width: 8px;6476  height: 8px;6477  background: var(--peach-accent);6478}64796480.peach-onboarding-next {6481  background: none;6482  border: none;6483  padding: 4px 0;6484  cursor: pointer;6485  font-family: "IBM Plex Mono", monospace;6486  font-size: 0.6875rem;6487  letter-spacing: 0.04em;6488  color: var(--peach-t1);6489  transition: color 150ms ease;6490}64916492.peach-onboarding-next:hover {6493  color: var(--peach-t0);6494}64956496.peach-onboarding-next:disabled {6497  opacity: 0.5;6498  cursor: default;6499}65006501.peach-onboarding-back {6502  background: none;6503  border: none;6504  padding: 4px 0;6505  cursor: pointer;6506  font-family: "IBM Plex Mono", monospace;6507  font-size: 0.6875rem;6508  letter-spacing: 0.04em;6509  color: var(--peach-t2);6510  transition: color 150ms ease;6511}65126513.peach-onboarding-back:hover {6514  color: var(--peach-t0);6515}65166517.peach-onboarding-back:disabled {6518  opacity: 0.5;6519  cursor: default;6520}65216522/* Reserve back-button width on the first card so the dots stay centred */6523.peach-onboarding-back-spacer {6524  width: 44px;6525}65266527.peach-onboarding-mobile-card-buttons {6528  display: flex;6529  flex-direction: column;6530  gap: 8px;6531  margin-top: 16px;6532}65336534@keyframes peach-onboard-enter {6535  from { opacity: 0; transform: translateY(20px); }6536  to   { opacity: 1; transform: translateY(0); }6537}65386539@keyframes peach-onboard-exit {6540  from { opacity: 1; }6541  to   { opacity: 0; }6542}65436544@keyframes peach-card-in {6545  from { opacity: 0; transform: translateX(12px); }6546  to   { opacity: 1; transform: translateX(0); }6547}65486549@keyframes peach-card-out {6550  from { opacity: 1; transform: translateX(0); }6551  to   { opacity: 0; transform: translateX(-12px); }6552}65536554/* ─── New vault screen — matched to onboarding card language ─────────── */65556556.peach-newvault {6557  position: relative;6558  display: flex;6559  flex-direction: column;6560  gap: 12px;6561  padding: 16px 16px 18px;6562  overflow: hidden;6563}65646565/* Suppress the warm-blob ambient art inherited from .lock-screen — the6566   new vault card now carries the visual weight. */6567.peach-newvault::before {6568  content: none;6569}65706571.peach-newvault-header {6572  position: relative;6573  z-index: 2;6574  display: flex;6575  align-items: center;6576  gap: 10px;6577  margin-bottom: 2px;6578}65796580.peach-newvault-back {6581  display: inline-flex;6582  align-items: center;6583  gap: 4px;6584  background: transparent;6585  border: none;6586  color: var(--peach-t2);6587  font-family: "IBM Plex Mono", monospace;6588  font-size: 0.625rem;6589  letter-spacing: 0.06em;6590  cursor: pointer;6591  padding: 4px 6px;6592  border-radius: 6px;6593  transition: color 120ms ease, background 120ms ease;6594}65956596.peach-newvault-back:hover {6597  color: var(--peach-t0);6598  background: rgba(240, 232, 216, 0.04);6599}66006601.peach-newvault-mark {6602  position: absolute;6603  right: -12px;6604  top: 6px;6605  width: 110px;6606  height: 110px;6607  pointer-events: none;6608  opacity: 0.10;6609  filter: saturate(0.9);6610  z-index: 0;6611}6612.peach-newvault-mark-art {6613  width: 100%;6614  height: 100%;6615}6616.peach-newvault-mark-art path:nth-child(2),6617.peach-newvault-mark-art path:nth-child(3) {6618  stroke: rgba(123, 144, 96, 0.88);6619  fill: rgba(123, 144, 96, 0.88);6620}66216622.peach-newvault-card {6623  position: relative;6624  z-index: 1;6625  display: flex;6626  flex-direction: column;6627  gap: 12px;6628  padding: 22px 20px 18px;6629  border-radius: 16px;6630  border: 1px solid var(--peach-t3);6631  background:6632    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6633  backdrop-filter: blur(3px);6634  -webkit-backdrop-filter: blur(3px);6635  box-shadow:6636    inset 0 1px 0 rgba(240, 232, 216, 0.04),6637    0 12px 28px rgba(0, 0, 0, 0.12);6638  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6639}66406641.peach-newvault-headline {6642  margin: 0;6643  font-family: var(--font-display);6644  font-style: italic;6645  font-weight: 400;6646  font-size: 24px;6647  line-height: 1.05;6648  color: var(--peach-t0);6649  white-space: pre-line;6650}66516652.peach-newvault-divider {6653  margin: 2px 0 4px;6654  border: 0;6655  border-top: 1px solid var(--peach-t3);6656  width: 100%;6657}66586659.peach-newvault-field {6660  display: flex;6661  flex-direction: column;6662  gap: 4px;6663}66646665.peach-newvault-label-row {6666  display: flex;6667  align-items: center;6668  justify-content: space-between;6669}66706671/* Monospace input scaled to the card. Replaces the 22px unlock-input6672   so the placeholder no longer overflows and the field reads as part6673   of the same surface as the body copy. */6674.peach-newvault-input {6675  font-size: 0.875rem;6676  letter-spacing: 0.18em;6677  padding: 8px 0;6678}6679.peach-newvault-input::placeholder {6680  letter-spacing: 0.18em;6681  color: var(--peach-t2);6682}66836684.peach-newvault-hint {6685  margin: 2px 0 0;6686  font-family: "IBM Plex Mono", monospace;6687  font-size: 0.625rem;6688  color: var(--peach-t2);6689  letter-spacing: 0.04em;6690}66916692.peach-newvault-submit {6693  margin-top: 4px;6694}66956696.peach-newvault-warning {6697  display: flex;6698  align-items: flex-start;6699  gap: 8px;6700  margin: 4px 0 0;6701  padding-top: 10px;6702  border-top: 1px dashed var(--peach-t3);6703  font-size: 0.75rem;6704  line-height: 1.5;6705  color: var(--peach-t1);6706}67076708.peach-newvault-warning-icon {6709  color: var(--peach-accent);6710  font-size: 0.8125rem;6711  line-height: 1.4;6712  flex: 0 0 auto;6713}67146715.peach-newvault-footer {6716  position: relative;6717  z-index: 1;6718  display: flex;6719  flex-direction: column;6720  gap: 4px;6721  padding: 4px 4px 0;6722}67236724/* Settings body — warm accent gradient gives the glass something to blur against */6725.peach-settings-body {6726  background:6727    radial-gradient(6728      ellipse at 30% 20%,6729      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6730      transparent 60%6731    );6732}67336734/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6735/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6736 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6737 * (replacing the vault from a backup file) and "hazard" for actions that6738 * are absolutely irreversible (Panic). Both use the same card scaffold so6739 * they read as a pair, but the colour family signals the severity at a6740 * glance — yellow for caution, red for don't.6741 */6742.peach-danger-card {6743  --danger-tint: 235, 158, 52; /* amber */6744  display: flex;6745  flex-direction: column;6746  gap: 8px;6747  padding: 14px;6748  margin-top: 10px;6749  border-radius: 12px;6750  border: 1px solid rgba(var(--danger-tint), 0.32);6751  background:6752    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6753    rgba(var(--danger-tint), 0.04);6754  box-shadow:6755    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6756    0 0 24px rgba(var(--danger-tint), 0.04);6757  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6758}67596760.peach-danger-card:hover {6761  border-color: rgba(var(--danger-tint), 0.55);6762  box-shadow:6763    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6764    0 0 36px rgba(var(--danger-tint), 0.10);6765}67666767.peach-danger-card--hazard {6768  --danger-tint: 220, 38, 38; /* red */6769}67706771.peach-danger-card-head {6772  display: flex;6773  align-items: center;6774  gap: 10px;6775}67766777.peach-danger-card-glyph {6778  width: 28px;6779  height: 28px;6780  flex-shrink: 0;6781  display: flex;6782  align-items: center;6783  justify-content: center;6784  border-radius: 8px;6785  background: rgba(var(--danger-tint), 0.12);6786  color: rgba(var(--danger-tint), 0.95);6787  font-size: 1rem;6788  line-height: 1;6789}67906791.peach-danger-card-title {6792  margin: 0;6793  font-size: 0.8125rem;6794  font-weight: 600;6795  color: rgba(var(--danger-tint), 0.92);6796  letter-spacing: 0.01em;6797}67986799.peach-danger-card-copy {6800  margin: 0;6801  font-size: 0.6875rem;6802  line-height: 1.5;6803  color: var(--peach-t2);6804}68056806.peach-danger-card-button {6807  width: 100%;6808  padding: 9px;6809  margin-top: 4px;6810  background: transparent;6811  border: 1px solid rgba(var(--danger-tint), 0.45);6812  border-radius: 8px;6813  color: rgba(var(--danger-tint), 0.9);6814  font-size: 0.75rem;6815  font-weight: 500;6816  letter-spacing: 0.02em;6817  cursor: pointer;6818  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6819}68206821.peach-danger-card-button:hover {6822  background: rgba(var(--danger-tint), 0.10);6823  border-color: rgba(var(--danger-tint), 0.75);6824  color: rgb(var(--danger-tint));6825}68266827/* ── Panic flow (three-step destruction) ───────────────────────────────── */6828.peach-panic {6829  display: flex;6830  flex-direction: column;6831  flex: 1;6832  min-height: 0;6833  padding: 28px 20px 20px;6834  gap: 18px;6835  overflow-y: auto;6836  scrollbar-width: none;6837  -ms-overflow-style: none;6838}68396840.peach-panic::-webkit-scrollbar { display: none; }68416842.peach-panic-step2 {6843  background: rgba(220, 38, 38, 0.04);6844}68456846.peach-panic-step3 {6847  position: relative;6848  background: #0f0505;6849  color: #ffffff;6850  overflow: hidden;6851}68526853.peach-panic-rune-bg {6854  position: absolute;6855  inset: 0;6856  opacity: 0.22;6857  pointer-events: none;6858  overflow: hidden;6859}68606861.peach-panic-rune-bg canvas {6862  width: 100% !important;6863  height: 100% !important;6864}68656866.peach-panic-icon {6867  font-size: 32px;6868  color: rgb(220, 38, 38);6869  line-height: 1;6870}68716872.peach-panic-title {6873  margin: 0;6874  font-size: 18px;6875  font-weight: 500;6876  color: var(--peach-t1);6877}68786879.peach-panic-title--severe {6880  font-size: 20px;6881  font-weight: 700;6882  color: rgb(220, 38, 38);6883}68846885.peach-panic-body {6886  margin: 0;6887  font-size: 0.8125rem;6888  line-height: 1.55;6889  color: var(--peach-t2);6890}68916892.peach-panic-body--severe {6893  color: rgba(220, 38, 38, 0.85);6894}68956896.peach-panic-body--final {6897  font-size: 1rem;6898  font-weight: 700;6899  color: rgb(255, 80, 80);6900  line-height: 1.4;6901}69026903.peach-panic-body--final-intro {6904  font-size: 1rem;6905  color: #ffffff;6906  font-weight: 400;6907}69086909.peach-panic-divider {6910  height: 1px;6911  background: rgba(255, 255, 255, 0.08);6912  margin: 4px 0;6913}69146915.peach-panic-confirm-input {6916  width: 100%;6917  padding: 10px 12px;6918  background: rgba(255, 255, 255, 0.02);6919  border: 1px solid rgba(220, 38, 38, 0.4);6920  border-radius: 8px;6921  color: var(--peach-t1);6922  font-family: "IBM Plex Mono", monospace;6923  font-size: 0.875rem;6924  letter-spacing: 0.12em;6925  text-transform: uppercase;6926}69276928.peach-panic-confirm-input:focus {6929  outline: none;6930  border-color: rgb(220, 38, 38);6931}69326933.peach-panic-confirm-input--match {6934  border-color: rgb(220, 38, 38);6935  color: rgb(220, 38, 38);6936}69376938.peach-panic-confirm-label {6939  font-size: 0.6875rem;6940  color: var(--peach-t2);6941  margin: 0 0 -8px;6942  letter-spacing: 0.06em;6943}69446945.peach-panic-actions {6946  display: flex;6947  flex-direction: column;6948  gap: 10px;6949  margin-top: auto;6950}69516952.peach-panic-button {6953  width: 100%;6954  padding: 12px;6955  border-radius: 8px;6956  font-size: 0.8125rem;6957  cursor: pointer;6958  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6959}69606961.peach-panic-button--primary {6962  background: var(--peach-accent);6963  border: 1px solid var(--peach-accent);6964  color: #ffffff;6965  font-weight: 600;6966}69676968.peach-panic-button--primary:hover {6969  background: color-mix(in srgb, var(--peach-accent) 88%, white);6970}69716972.peach-panic-button--danger {6973  background: rgb(220, 38, 38);6974  border: 1px solid rgb(220, 38, 38);6975  color: #ffffff;6976  font-weight: 600;6977}69786979.peach-panic-button--danger:disabled {6980  opacity: 0.35;6981  cursor: not-allowed;6982}69836984.peach-panic-button--ghost {6985  background: transparent;6986  border: 1px solid rgba(255, 255, 255, 0.18);6987  color: var(--peach-t2);6988}69896990.peach-panic-button--ghost:hover {6991  border-color: rgba(255, 255, 255, 0.32);6992  color: var(--peach-t1);6993}69946995.peach-panic-link {6996  background: transparent;6997  border: none;6998  padding: 4px 0;6999  color: rgba(220, 38, 38, 0.65);7000  font-size: 0.75rem;7001  cursor: pointer;7002  text-align: left;7003  text-decoration: underline;7004  text-underline-offset: 3px;7005}70067007.peach-panic-link:hover {7008  color: rgb(220, 38, 38);7009}70107011.peach-panic-bar {7012  background: rgb(220, 38, 38);7013  padding: 16px 20px;7014  margin: -28px -20px 0;7015  text-align: center;7016  font-size: 0.8125rem;7017  font-weight: 700;7018  letter-spacing: 0.12em;7019  color: #ffffff;7020}70217022.peach-panic-final-button {7023  width: 100%;7024  padding: 14px;7025  background: rgb(220, 38, 38);7026  border: none;7027  border-radius: 8px;7028  color: #ffffff;7029  font-size: 0.875rem;7030  font-weight: 700;7031  letter-spacing: 0.08em;7032  text-transform: uppercase;7033  cursor: pointer;7034  animation: peach-panic-pulse 2s ease-in-out infinite;7035}70367037.peach-settings-license {7038  margin-top: 10px;7039  padding-top: 10px;7040  border-top: 1px solid var(--peach-t3);7041}70427043.peach-settings-label {7044  font-size: 0.625rem;7045  letter-spacing: 0.08em;7046  color: var(--peach-t3);7047  display: block;7048  margin-bottom: 6px;7049}70507051.peach-settings-license-row {7052  display: flex;7053  align-items: center;7054  justify-content: space-between;7055  gap: 8px;7056}70577058.peach-settings-license-key {7059  font-family: 'IBM Plex Mono', monospace;7060  font-size: 0.75rem;7061  color: var(--peach-t0);7062  letter-spacing: 0.04em;7063  word-break: break-all;7064}70657066.peach-settings-license-copy {7067  font-size: 0.6875rem;7068  color: var(--peach-accent);7069  background: transparent;7070  border: none;7071  cursor: pointer;7072  padding: 4px 8px;7073  border-radius: 4px;7074  flex-shrink: 0;7075  transition: opacity 150ms ease;7076}70777078.peach-settings-license-copy:hover {7079  opacity: 0.75;7080}70817082@keyframes peach-panic-pulse {7083  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7084  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7085}70867087[data-motion="reduce"] .peach-panic-final-button {7088  animation: none;7089}70907091/* Vault History — Settings → Vault sub-view */70927093.peach-history-list {7094  border: 1px solid var(--peach-border);7095  border-radius: 8px;7096  overflow: hidden;7097  margin: 8px 0 4px;7098}70997100.peach-history-row {7101  display: flex;7102  align-items: center;7103  justify-content: space-between;7104  padding: 9px 12px;7105  gap: 10px;7106  border-bottom: 1px solid var(--peach-border);7107}71087109.peach-history-row:last-child {7110  border-bottom: none;7111}71127113.peach-history-meta {7114  display: flex;7115  flex-direction: column;7116  gap: 2px;7117  min-width: 0;7118  flex: 1;7119}71207121.peach-history-time {7122  font-size: 0.75rem;7123  font-family: 'IBM Plex Mono', ui-monospace, monospace;7124  color: var(--peach-t0);7125  white-space: nowrap;7126  overflow: hidden;7127  text-overflow: ellipsis;7128}71297130.peach-history-sub {7131  font-size: 0.625rem;7132  color: var(--peach-t2);7133  letter-spacing: 0.06em;7134  text-transform: uppercase;7135  white-space: nowrap;7136  overflow: hidden;7137  text-overflow: ellipsis;7138}71397140.peach-history-btn {7141  flex-shrink: 0;7142  white-space: nowrap;7143  min-width: 56px;7144  text-align: center;7145}71467147.peach-history-btn.is-busy {7148  opacity: 0.65;7149}71507151.peach-history-footer {7152  font-size: 0.625rem;7153  color: var(--peach-t3);7154  letter-spacing: 0.05em;7155  text-align: right;7156  margin: 0;7157  padding: 2px 0 0;7158}71597160/* ── Context menu + swipe-copy flash ─────────────────────── */7161.peach-context-menu-backdrop {7162  position: fixed;7163  inset: 0;7164  background: rgba(0, 0, 0, 0.45);7165  z-index: 100;7166  display: flex;7167  align-items: flex-end;7168  justify-content: center;7169  animation: peach-ctx-fade 140ms ease both;7170}7171.peach-context-menu {7172  width: min(360px, calc(100vw - 24px));7173  margin-bottom: max(env(safe-area-inset-bottom), 12px);7174  background: var(--peach-bg);7175  border: 1px solid var(--peach-t3);7176  border-radius: 14px;7177  padding: 6px;7178  display: flex;7179  flex-direction: column;7180  gap: 2px;7181  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7182  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7183}7184@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7185@keyframes peach-ctx-rise {7186  from { transform: translateY(16px); opacity: 0; }7187  to   { transform: translateY(0);    opacity: 1; }7188}7189.peach-context-menu-item {7190  background: transparent;7191  color: var(--peach-t0);7192  border: 0;7193  border-radius: 10px;7194  padding: 12px 14px;7195  text-align: left;7196  font: inherit;7197  cursor: pointer;7198}7199.peach-context-menu-item:hover,7200.peach-context-menu-item:focus-visible {7201  background: var(--peach-t3);7202}7203.peach-context-menu-item--danger {7204  color: var(--peach-health-bad, #d96868);7205}7206.peach-context-menu-item--cancel {7207  color: var(--peach-t2);7208  margin-top: 4px;7209  border-top: 1px solid var(--peach-t3);7210  border-radius: 0 0 10px 10px;7211}72127213/* Swipe-to-copy flash */7214.peach-entry-row.is-copy-flash {7215  animation: peach-copy-flash 600ms ease both;7216}7217@keyframes peach-copy-flash {7218  0%   { background: transparent; }7219  20%  { background: rgba(217, 153, 51, 0.32); }7220  100% { background: transparent; }7221}72227223html { font-size: 16px; }72247225/* ── Recovery word entry ─────────────────────────────────────────── */7226.peach-lock-recover-link {7227  display: block;7228  width: 100%;7229  margin-top: 12px;7230  background: none;7231  border: none;7232  font-family: "IBM Plex Mono", monospace;7233  font-size: 0.625rem;7234  letter-spacing: 0.06em;7235  color: var(--peach-t2);7236  cursor: pointer;7237  text-align: center;7238  padding: 4px;7239  transition: color 120ms ease;7240}7241.peach-lock-recover-link:hover {7242  color: var(--peach-t0);7243}72447245.lock-screen--recovery {7246  display: flex;7247  flex-direction: column;7248  align-items: stretch;7249  padding: 12px 20px 24px;7250  overflow: hidden;7251}72527253.peach-recovery-nav {7254  display: flex;7255  align-items: center;7256  position: relative;7257  z-index: 1;7258  margin-bottom: 4px;7259}72607261/* Mask runes to the top decorative band only — keep inputs and the7262   bottom CTA button clear. The bottom of the popup is reserved for7263   submit buttons; rendering runes there overlaps the button glyph. */7264.peach-rune-background--recovery {7265  -webkit-mask-image: linear-gradient(7266    to bottom,7267    black 0px, black 85px,7268    transparent 110px,7269    transparent 100%7270  );7271  mask-image: linear-gradient(7272    to bottom,7273    black 0px, black 85px,7274    transparent 110px,7275    transparent 100%7276  );7277}72787279.peach-recovery-header {7280  text-align: center;7281  margin-bottom: 16px;7282  margin-top: 4px;7283}7284.peach-recovery-header .peach-onboarding-headline {7285  font-size: 1.25rem;7286  font-weight: 300;7287  letter-spacing: 0.02em;7288  margin: 0 0 4px;7289}7290.peach-recovery-header .peach-hint {7291  font-family: "IBM Plex Mono", monospace;7292  font-size: 0.625rem;7293  color: var(--peach-t2);7294  letter-spacing: 0.04em;7295  margin: 0;7296}72977298/* 12-word grid: 2 columns × 6 rows */7299.peach-recovery-grid {7300  display: grid;7301  grid-template-columns: repeat(2, 1fr);7302  gap: 12px 20px;7303  width: 100%;7304  margin-bottom: 0;7305}73067307.peach-recovery-word-slot {7308  display: flex;7309  align-items: center;7310  gap: 6px;7311  min-width: 0;7312}73137314.peach-recovery-word-index {7315  font-family: "IBM Plex Mono", monospace;7316  font-size: 0.5rem;7317  color: rgba(255, 255, 255, 0.35);7318  min-width: 14px;7319  flex-shrink: 0;7320  text-align: right;7321  letter-spacing: 0.04em;7322}73237324.peach-recovery-word-input {7325  flex: 1;7326  min-width: 0;7327  background: transparent;7328  border: none;7329  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7330  color: var(--peach-t0);7331  font-family: "IBM Plex Mono", monospace;7332  font-size: 0.6875rem;7333  letter-spacing: 0.06em;7334  padding: 5px 2px 4px;7335  outline: none;7336  text-transform: lowercase;7337  transition: border-color 120ms ease;7338}7339.peach-recovery-word-input::placeholder {7340  color: rgba(255, 255, 255, 0.18);7341}7342.peach-recovery-word-input:focus {7343  border-bottom-color: var(--peach-accent);7344}73457346.peach-recovery-submit {7347  width: 100%;7348  margin-top: auto;7349}73507351.peach-recovery-new-password-form {7352  width: 100%;7353  display: flex;7354  flex-direction: column;7355  gap: 16px;7356  margin-bottom: 8px;7357}7358.peach-recovery-new-password-form .peach-newvault-field {7359  display: flex;7360  flex-direction: column;7361  gap: 4px;7362}73637364/* ── Recovery words display (post-create) ────────────────────────── */7365.lock-screen--recovery-display {7366  display: flex;7367  flex-direction: column;7368  align-items: stretch;7369  padding: 0 20px 20px;7370  min-height: 0;7371  overflow-y: auto;7372}73737374.peach-recovery-words-display {7375  width: 100%;7376  margin-bottom: 16px;7377  border: 1px solid var(--peach-t3);7378  border-radius: 8px;7379  padding: 12px 14px;7380  background: rgba(245, 240, 234, 0.04);7381}73827383.peach-recovery-words-label {7384  font-family: "IBM Plex Mono", monospace;7385  font-size: 0.5rem;7386  letter-spacing: 0.08em;7387  color: var(--peach-t2);7388  text-transform: uppercase;7389  margin-bottom: 10px;7390}73917392.peach-recovery-word-list {7393  list-style: none;7394  margin: 0;7395  padding: 0;7396  display: grid;7397  grid-template-columns: repeat(2, 1fr);7398  gap: 6px 16px;7399}74007401.peach-recovery-word-item {7402  display: flex;7403  align-items: baseline;7404  gap: 5px;7405}74067407.peach-recovery-word-num {7408  font-family: "IBM Plex Mono", monospace;7409  font-size: 0.5rem;7410  color: var(--peach-t2);7411  width: 14px;7412  flex: 0 0 14px;7413  text-align: right;7414  letter-spacing: 0.04em;7415  font-variant-numeric: tabular-nums;7416}74177418.peach-recovery-download-btn {7419  display: block;7420  margin: 10px auto 0;7421  padding: 4px 10px;7422  background: transparent;7423  border: 1px solid var(--peach-border);7424  border-radius: 6px;7425  color: var(--peach-t2);7426  font-family: "IBM Plex Mono", monospace;7427  font-size: 0.5625rem;7428  letter-spacing: 0.06em;7429  text-transform: lowercase;7430  cursor: pointer;7431  transition: border-color 0.15s, color 0.15s;7432}74337434.peach-recovery-download-btn:hover {7435  border-color: var(--peach-accent);7436  color: var(--peach-t0);7437}74387439.peach-recovery-word-text {7440  font-family: "IBM Plex Mono", monospace;7441  font-size: 0.6875rem;7442  letter-spacing: 0.06em;7443  color: var(--peach-t0);7444  text-transform: lowercase;7445}74467447.peach-hint--warning {7448  color: var(--peach-accent);7449  font-style: italic;7450}7451.peach-hint--success {7452  color: var(--peach-t2);7453  font-family: "IBM Plex Mono", monospace;7454  font-size: 0.625rem;7455  letter-spacing: 0.06em;7456}74577458/* Confirmation step */7459.peach-recovery-confirm {7460  width: 100%;7461  flex: 1;7462  display: flex;7463  flex-direction: column;7464}7465.peach-recovery-confirm-label {7466  font-family: "IBM Plex Mono", monospace;7467  font-size: 0.5625rem;7468  letter-spacing: 0.04em;7469  color: var(--peach-t2);7470  text-align: center;7471  margin: 0 0 12px;7472}7473.peach-recovery-confirm-fields {7474  display: flex;7475  flex-direction: column;7476  gap: 14px;7477  margin-bottom: 10px;7478}7479.peach-recovery-confirm-field {7480  display: flex;7481  align-items: center;7482  gap: 8px;7483}7484.peach-recovery-confirm-num {7485  font-family: "IBM Plex Mono", monospace;7486  font-size: 0.5rem;7487  color: var(--peach-t2);7488  min-width: 44px;7489  letter-spacing: 0.04em;7490}7491.peach-recovery-confirm-input {7492  flex: 1;7493  background: transparent;7494  border: none;7495  border-bottom: 1px solid var(--peach-t3);7496  color: var(--peach-t0);7497  font-family: "IBM Plex Mono", monospace;7498  font-size: 0.6875rem;7499  letter-spacing: 0.06em;7500  padding: 4px 2px 3px;7501  outline: none;7502  text-transform: lowercase;7503  transition: border-color 120ms ease;7504}7505.peach-recovery-confirm-input:focus {7506  border-bottom-color: var(--peach-accent);7507}7508.peach-recovery-confirm-input:disabled {7509  opacity: 0.4;7510  cursor: not-allowed;7511}7512.peach-recovery-confirm-btn {7513  width: 100%;7514  margin-top: auto;7515}75167517/* ============================================================7518   Sync info sheet7519   ============================================================ */75207521.peach-sync-info-backdrop {7522  position: fixed;7523  inset: 0;7524  z-index: 200;7525  background: rgba(0, 0, 0, 0.55);7526  display: flex;7527  align-items: flex-end;7528  animation: peach-fade-in 200ms ease forwards;7529}75307531@keyframes peach-fade-in {7532  from { opacity: 0; }7533  to   { opacity: 1; }7534}75357536.peach-sync-info-sheet {7537  width: 100%;7538  background: var(--peach-bg-card, var(--peach-bg));7539  border-top-left-radius: 20px;7540  border-top-right-radius: 20px;7541  padding: 12px 24px 32px;7542  display: flex;7543  flex-direction: column;7544  gap: 20px;7545  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7546}75477548@keyframes peach-sheet-up {7549  from { transform: translateY(100%); }7550  to   { transform: translateY(0); }7551}75527553.peach-sync-info-handle {7554  width: 36px;7555  height: 4px;7556  border-radius: 2px;7557  background: var(--peach-border);7558  margin: 0 auto 4px;7559  flex-shrink: 0;7560}75617562.peach-sync-info-title {7563  font-family: 'Cormorant Garamond', serif;7564  font-style: italic;7565  font-size: 26px;7566  font-weight: 600;7567  color: var(--peach-t0);7568  margin: 0;7569  line-height: 1.2;7570}75717572.peach-sync-info-body {7573  display: flex;7574  flex-direction: column;7575  gap: 14px;7576}75777578.peach-sync-info-point {7579  display: flex;7580  gap: 12px;7581  align-items: flex-start;7582  font-size: 14px;7583  color: var(--peach-t2);7584  line-height: 1.6;7585  margin: 0;7586}75877588.peach-sync-info-icon {7589  color: var(--peach-accent);7590  font-size: 16px;7591  flex-shrink: 0;7592  margin-top: 1px;7593}75947595.peach-sync-info-actions {7596  display: flex;7597  flex-direction: column;7598  gap: 12px;7599  margin-top: 4px;7600}76017602.peach-sync-info-pro-link {7603  background: none;7604  border: none;7605  font-size: 13px;7606  color: var(--peach-t3);7607  cursor: pointer;7608  padding: 0;7609  font-family: inherit;7610  text-align: center;7611  transition: color 150ms ease;7612}76137614.peach-sync-info-pro-link:hover {7615  color: var(--peach-accent);7616}76177618.peach-btn--full {7619  width: 100%;7620}76217622/* ── Sync screen ── */76237624.peach-sync-screen {7625  display: flex;7626  flex-direction: column;7627  height: 100%;7628}76297630.peach-sync-content {7631  flex: 1;7632  overflow-y: auto;7633  padding: 24px 20px 40px;7634  display: flex;7635  flex-direction: column;7636  gap: 24px;7637}76387639/* Intro (State A) */7640.peach-sync-headline {7641  font-family: 'Cormorant Garamond', serif;7642  font-style: italic;7643  font-size: 28px;7644  font-weight: 600;7645  color: var(--peach-t0);7646  margin: 0 0 10px;7647  line-height: 1.2;7648}76497650.peach-sync-intro-body {7651  font-size: 14px;7652  color: var(--peach-t2);7653  line-height: 1.6;7654  margin: 0;7655}76567657.peach-sync-pro-note {7658  display: flex;7659  flex-direction: column;7660  gap: 6px;7661  margin-top: -8px;7662}76637664.peach-sync-pro-note-text {7665  font-size: 12px;7666  color: var(--peach-t3);7667  line-height: 1.5;7668  margin: 0;7669}76707671.peach-sync-pro-link {7672  background: none;7673  border: none;7674  font-size: 12px;7675  color: var(--peach-accent);7676  cursor: pointer;7677  padding: 0;7678  font-family: inherit;7679  text-align: left;7680}76817682/* Status (State C) */7683.peach-sync-status {7684  padding: 12px 0;7685  border-bottom: 1px solid var(--peach-border);7686}76877688.peach-sync-status-row {7689  display: flex;7690  align-items: center;7691  gap: 8px;7692}76937694.peach-sync-dot {7695  width: 7px;7696  height: 7px;7697  border-radius: 50%;7698  flex-shrink: 0;7699}77007701.peach-sync-dot--green { background: var(--peach-health-ok); }7702.peach-sync-dot--amber { background: var(--peach-accent); }77037704.peach-sync-status-text {7705  font-family: 'IBM Plex Mono', monospace;7706  font-size: 11px;7707  color: var(--peach-t2);7708}77097710/* Paired devices */7711.peach-sync-section {7712  display: flex;7713  flex-direction: column;7714  gap: 2px;7715}77167717.peach-sync-section-label {7718  font-family: 'IBM Plex Mono', monospace;7719  font-size: 10px;7720  letter-spacing: 0.1em;7721  color: var(--peach-t3);7722  margin: 0 0 10px;7723}77247725.peach-sync-device-row {7726  display: flex;7727  justify-content: space-between;7728  align-items: baseline;7729  padding: 10px 0;7730  border-bottom: 1px solid var(--peach-border);7731  gap: 12px;7732}77337734.peach-sync-device-name {7735  font-size: 14px;7736  color: var(--peach-t1);7737}77387739.peach-sync-device-meta {7740  font-family: 'IBM Plex Mono', monospace;7741  font-size: 11px;7742  color: var(--peach-t3);7743  white-space: nowrap;7744}77457746/* Action buttons */7747.peach-sync-actions {7748  display: flex;7749  gap: 10px;7750  flex-wrap: wrap;7751}77527753/* Upgrade prompt (State B) */7754.peach-sync-upgrade {7755  display: flex;7756  flex-direction: column;7757  gap: 12px;7758  padding: 16px;7759  border: 1px solid var(--peach-border);7760  border-radius: 10px;7761}77627763.peach-sync-upgrade-text {7764  font-size: 13px;7765  color: var(--peach-t2);7766  line-height: 1.6;7767  margin: 0;7768}77697770/* Network note */7771.peach-sync-network-note {7772  font-size: 12px;7773  color: var(--peach-t3);7774  line-height: 1.6;7775  margin: 0;7776}77777778/* Advanced */7779.peach-sync-advanced {7780  margin-top: auto;7781  padding-top: 16px;7782  border-top: 1px solid var(--peach-border);7783}77847785.peach-sync-advanced-toggle {7786  display: flex;7787  align-items: center;7788  gap: 8px;7789  background: none;7790  border: none;7791  font-family: 'IBM Plex Mono', monospace;7792  font-size: 11px;7793  letter-spacing: 0.08em;7794  color: var(--peach-t3);7795  cursor: pointer;7796  padding: 0;7797  text-transform: uppercase;7798}77997800.peach-sync-advanced-chevron {7801  display: inline-block;7802  transition: transform 200ms ease;7803  font-size: 10px;7804}78057806.peach-sync-advanced-chevron.is-open {7807  transform: rotate(90deg);7808}78097810.peach-sync-advanced-content {7811  margin-top: 14px;7812}78137814.peach-sync-advanced-row {7815  display: flex;7816  justify-content: space-between;7817  align-items: center;7818  gap: 16px;7819}78207821.peach-sync-advanced-title {7822  font-size: 14px;7823  color: var(--peach-t1);7824  margin: 0 0 2px;7825}78267827.peach-sync-advanced-subtitle {7828  font-size: 12px;7829  color: var(--peach-t3);7830  margin: 0;7831  line-height: 1.5;7832}78337834/* ── Add Device — Android scan tabs ─────────────────────────────────────── */78357836.peach-pairing-tabs {7837  display: flex;7838  border: 1px solid var(--peach-border);7839  border-radius: 8px;7840  overflow: hidden;7841  margin-bottom: 4px;7842}78437844.peach-pairing-tab {7845  flex: 1;7846  padding: 10px 0;7847  background: none;7848  border: none;7849  font-family: 'IBM Plex Mono', monospace;7850  font-size: 11px;7851  letter-spacing: 0.06em;7852  color: var(--peach-t2);7853  cursor: pointer;7854  transition: background 150ms, color 150ms;7855}78567857.peach-pairing-tab.is-active {7858  background: var(--peach-accent);7859  color: #fff;7860  font-weight: 600;7861}78627863.peach-pairing-tab:not(.is-active):active {7864  background: var(--peach-border);7865}78667867/* Camera view */7868.peach-pairing-camera-container {7869  position: relative;7870  width: 100%;7871  aspect-ratio: 1;7872  border-radius: 12px;7873  overflow: hidden;7874  background: #000;7875  flex-shrink: 0;7876}78777878.peach-pairing-video {7879  width: 100%;7880  height: 100%;7881  object-fit: cover;7882}78837884.peach-pairing-scan-frame {7885  position: absolute;7886  top: 50%;7887  left: 50%;7888  transform: translate(-50%, -50%);7889  width: 60%;7890  aspect-ratio: 1;7891  border: 2px solid var(--peach-accent);7892  border-radius: 8px;7893  pointer-events: none;7894}