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-edit-row {2355  display: flex;2356  align-items: center;2357  gap: 6px;2358}23592360.peach-domain-edit-row .peach-domain-value--edit {2361  flex: 1;2362  width: 0;2363}23642365.peach-domain-url-btn {2366  flex-shrink: 0;2367  background: transparent;2368  border: none;2369  cursor: pointer;2370  color: var(--peach-t3);2371  padding: 2px 3px;2372  display: flex;2373  align-items: center;2374  line-height: 0;2375  border-radius: 3px;2376  transition: color 120ms ease;2377}23782379.peach-domain-url-btn:hover {2380  color: var(--peach-accent);2381}23822383.peach-domain-value--edit {2384  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2385  font-size: 0.625rem;2386  font-style: italic;2387  letter-spacing: 0.12em;2388  color: var(--peach-t1);2389  background: transparent;2390  border: none;2391  border-bottom: 1px solid var(--peach-t3);2392  outline: none;2393  width: 100%;2394  padding: 2px 0;2395  caret-color: var(--peach-accent);2396  transition: border-color 140ms ease, color 140ms ease;2397}2398.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2399.peach-domain-value--edit:focus {2400  border-bottom-color: rgba(240, 232, 216, 0.28);2401  color: var(--peach-t0);2402}24032404/* Editable field values (username, password, totp) */2405.peach-field-value--edit {2406  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2407  font-size: 0.8125rem;2408  color: var(--peach-t0);2409  background: transparent;2410  border: none;2411  border-bottom: 1px solid var(--peach-t3);2412  outline: none;2413  flex: 1;2414  min-width: 0;2415  padding: 3px 0;2416  caret-color: var(--peach-accent);2417  transition: border-color 140ms ease, color 140ms ease;2418}2419.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2420.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2421.peach-field-value--edit:focus {2422  border-bottom-color: rgba(240, 232, 216, 0.28);2423  color: var(--peach-t0);2424}24252426/* "+ add optional field" links */2427.peach-entry-add-links {2428  display: flex;2429  gap: 12px;2430  flex-wrap: wrap;2431  margin-top: -2px;2432}2433.peach-add-field-link {2434  background: transparent;2435  border: none;2436  padding: 0;2437  cursor: pointer;2438  font-family: "IBM Plex Mono", monospace;2439  font-size: 0.5625rem;2440  letter-spacing: 0.1em;2441  text-transform: uppercase;2442  color: var(--peach-t2);2443  transition: color 140ms ease;2444}2445.peach-add-field-link:hover { color: var(--peach-accent); }24462447/* ── New entry form (legacy classes) ────────────────────────────────── */2448.peach-new-body {2449  flex: 1;2450  overflow-y: auto;2451  padding: 10px 20px 14px;2452}2453.peach-new-name-input {2454  background: transparent;2455  border: none;2456  outline: none;2457  width: 100%;2458  color: var(--peach-t0);2459  font-family: var(--font-display);2460  font-style: italic;2461  font-weight: 400;2462  font-size: 40px;2463  line-height: 0.95;2464  caret-color: var(--peach-accent);2465}2466.peach-new-name-input::placeholder { color: var(--peach-t2); }2467.peach-new-field-input {2468  background: transparent;2469  border: none;2470  outline: none;2471  flex: 1;2472  min-width: 0;2473  caret-color: var(--peach-accent);2474}2475.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }24762477/* ── Canary card ── */2478.peach-canary-card {2479  border: 1px solid rgba(217, 160, 48, 0.2);2480  background: rgba(217, 160, 48, 0.03);2481  border-radius: 8px;2482  padding: 12px;2483}24842485.peach-canary-settings-header {2486  display: flex;2487  align-items: center;2488  justify-content: space-between;2489  cursor: pointer;2490  user-select: none;2491}24922493.peach-canary-card .peach-label {2494  color: rgba(217, 160, 48, 0.85);2495}24962497.peach-canary-card .peach-new-field-input {2498  border-color: rgba(217, 160, 48, 0.25);2499}25002501.peach-canary-card .peach-new-field-input:focus {2502  border-color: rgba(217, 160, 48, 0.5);2503}25042505.peach-canary-body {2506  margin-top: 12px;2507  display: flex;2508  flex-direction: column;2509  gap: 10px;2510}25112512.peach-canary-explainer {2513  display: flex;2514  gap: 10px;2515  padding: 10px 12px;2516  border-radius: 10px;2517  background: rgba(217, 160, 48, 0.06);2518  border: 1px solid rgba(217, 160, 48, 0.22);2519  margin-bottom: 4px;2520}25212522.peach-canary-explainer-icon {2523  font-size: 1rem;2524  flex-shrink: 0;2525  line-height: 1.2;2526}25272528.peach-canary-explainer-title {2529  font-family: var(--font-ui);2530  font-size: 0.6875rem;2531  font-weight: 500;2532  color: rgba(217, 160, 48, 0.9);2533  margin: 0 0 3px;2534}25352536.peach-canary-explainer-copy {2537  font-family: var(--font-ui);2538  font-size: 0.625rem;2539  color: var(--peach-t2);2540  line-height: 1.55;2541  margin: 0;2542}25432544.peach-canary-hint {2545  font-size: 0.625rem;2546  color: var(--peach-t2);2547  font-family: Inter, system-ui, sans-serif;2548  line-height: 1.5;2549  margin-top: 4px;2550}25512552.peach-canary-actions-row {2553  display: flex;2554  align-items: center;2555  gap: 8px;2556}25572558.peach-canary-test-btn {2559  border-color: rgba(217, 160, 48, 0.3);2560  color: rgba(217, 160, 48, 0.85);2561}25622563.peach-canary-test-result {2564  font-size: 0.625rem;2565  font-family: Inter, system-ui, sans-serif;2566}25672568.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2569.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }25702571.peach-canary-badge {2572  display: flex;2573  position: relative;2574  z-index: 1;2575  align-items: center;2576  gap: 5px;2577  padding: 4px 10px;2578  background: rgba(217, 160, 48, 0.12);2579  border: 1px solid rgba(217, 160, 48, 0.35);2580  border-radius: 6px;2581  margin-bottom: 6px;2582  width: fit-content;2583}25842585.peach-canary-badge-label {2586  font-size: 0.625rem;2587  letter-spacing: 0.06em;2588  color: rgba(217, 160, 48, 0.9);2589  font-family: var(--font-ui);2590  text-transform: uppercase;2591}25922593.peach-canary-badge-icon {2594  font-size: 0.6875rem;2595}25962597.peach-canary-suppress-row {2598  display: flex;2599  align-items: center;2600  gap: 8px;2601  padding: 6px 10px;2602  background: rgba(217, 160, 48, 0.08);2603  border-radius: 6px;2604  margin-bottom: 8px;2605}26062607.peach-canary-suppress-label {2608  font-size: 0.6875rem;2609  color: rgba(217, 160, 48, 0.85);2610  cursor: pointer;2611  font-family: var(--font-ui);2612  letter-spacing: 0.04em;2613}26142615.peach-regen-panel {2616  position: relative;2617  z-index: 1;2618  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2619  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2620  border-radius: 8px;2621  padding: 12px;2622  margin-bottom: 8px;2623}26242625.peach-regen-panel-header {2626  display: flex;2627  align-items: center;2628  justify-content: space-between;2629  margin-bottom: 10px;2630}26312632.peach-regen-panel-title {2633  font-size: 0.6875rem;2634  font-weight: 600;2635  letter-spacing: 0.06em;2636  text-transform: uppercase;2637  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2638}26392640.peach-regen-output {2641  background: rgba(0, 0, 0, 0.2);2642  border-radius: 6px;2643  padding: 10px;2644  margin-bottom: 10px;2645  font-family: var(--font-mono);2646  font-size: 0.8125rem;2647  word-break: break-all;2648  color: var(--peach-t1);2649}26502651.peach-regen-actions {2652  display: flex;2653  gap: 6px;2654}26552656.peach-regen-actions--spaced {2657  margin-bottom: 8px;2658}26592660.peach-regen-action-grow {2661  flex: 1;2662}26632664.peach-regen-copy-btn {2665  padding: 0 8px;2666}26672668.peach-regen-success {2669  position: relative;2670  z-index: 1;2671  background: rgba(40, 180, 80, 0.1);2672  border: 1px solid rgba(40, 180, 80, 0.3);2673  border-radius: 8px;2674  padding: 10px 12px;2675  margin-bottom: 8px;2676  display: flex;2677  align-items: center;2678  gap: 8px;2679  font-size: 0.6875rem;2680  color: rgba(40, 180, 80, 0.9);2681}26822683/* ── Note editor overlay ── */2684.peach-note-editor {2685  position: absolute;2686  inset: 0;2687  z-index: 200;2688  display: flex;2689  flex-direction: column;2690  background:2691    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2692    var(--peach-bg);2693  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2694}26952696.peach-note-editor-header {2697  display: flex;2698  align-items: center;2699  gap: 10px;2700  padding: 14px 16px 10px;2701  border-bottom: 1px solid var(--peach-t3);2702  flex-shrink: 0;2703}27042705.peach-note-editor-back {2706  background: transparent;2707  border: none;2708  cursor: pointer;2709  color: var(--peach-t2);2710  padding: 4px 6px;2711  border-radius: 6px;2712  display: flex;2713  align-items: center;2714  transition: color 120ms ease, background 120ms ease;2715  flex-shrink: 0;2716}2717.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }27182719.peach-note-editor-label {2720  flex: 1;2721  font-family: var(--font-display);2722  font-style: italic;2723  font-size: 0.9375rem;2724  color: var(--peach-t1);2725  letter-spacing: 0.02em;2726}27272728.peach-note-editor-save-btn {2729  background: transparent;2730  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2731  border-radius: 8px;2732  color: var(--peach-accent);2733  font-family: "IBM Plex Mono", monospace;2734  font-size: 0.625rem;2735  letter-spacing: 0.06em;2736  text-transform: uppercase;2737  padding: 3px 10px;2738  cursor: pointer;2739  transition: background 120ms ease, border-color 120ms ease;2740}2741.peach-note-editor-save-btn:hover:not(:disabled) {2742  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2743  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2744}2745.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }27462747.peach-note-toolbar {2748  display: flex;2749  align-items: center;2750  gap: 3px;2751  padding: 6px 14px 5px;2752  border-bottom: 1px solid var(--peach-t3);2753  flex-shrink: 0;2754}27552756.peach-note-tool-btn {2757  background: transparent;2758  border: 1px solid transparent;2759  border-radius: 5px;2760  color: var(--peach-t2);2761  font-family: "IBM Plex Mono", monospace;2762  font-size: 0.625rem;2763  letter-spacing: 0.04em;2764  padding: 2px 8px;2765  cursor: pointer;2766  line-height: 1.6;2767  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2768}2769.peach-note-tool-btn:hover {2770  background: var(--peach-t4);2771  color: var(--peach-t0);2772  border-color: var(--peach-t3);2773}27742775.peach-note-tool-icon {2776  padding: 3px 7px;2777  display: inline-flex;2778  align-items: center;2779  justify-content: center;2780}27812782.peach-note-tool-divider {2783  width: 1px;2784  height: 14px;2785  background: var(--peach-t3);2786  margin: 0 4px;2787  flex-shrink: 0;2788}27892790.peach-note-editor-body {2791  flex: 1;2792  overflow-y: auto;2793  padding: 16px 20px 20px;2794  outline: none;2795  font-family: var(--font-display);2796  font-size: 1rem;2797  line-height: 1.75;2798  color: var(--peach-t0);2799  scrollbar-width: none;2800  word-break: break-word;2801}2802.peach-note-editor-body:empty::before {2803  content: "write your note…";2804  color: var(--peach-t3);2805  font-style: italic;2806  pointer-events: none;2807}28082809/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2810.peach-note-editor-inline {2811  display: flex;2812  flex-direction: column;2813  flex: 1;2814  min-height: 0;2815}2816.peach-note-editor-body--inline {2817  flex: 1;2818  min-height: 0;2819  font-size: 0.9375rem;2820  padding: 10px 20px 14px;2821}28222823/* Full-width toolbar row inside the body (Add.tsx note type).2824   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2825.peach-note-toolbar-body {2826  display: flex;2827  align-items: center;2828  gap: 3px;2829  padding: 5px 20px 4px;2830  margin: 2px -20px 0;2831  border-bottom: 1px solid var(--peach-t3);2832  flex-shrink: 0;2833}28342835/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2836   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2837   and .peach-note-tool-divider button-level styles. */2838.peach-note-toolbar-inline {2839  display: flex;2840  align-items: center;2841  gap: 3px;2842  margin-left: auto;2843  padding-left: 10px;2844  border-left: 1px solid var(--peach-t3);2845  min-height: 22px;2846}28472848/* Entry.tsx toolbar row (no tabs, toolbar only) */2849.peach-entry-note-toolbar-row {2850  display: flex;2851  align-items: center;2852  margin: 4px 0 6px;2853  position: relative;2854  z-index: 1;2855}2856.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2857  border-left: none;2858  padding-left: 0;2859  margin-left: 0;2860}28612862/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2863.peach-note-body {2864  display: flex;2865  flex-direction: column;2866  flex: 1;2867  min-height: 0;2868  margin: 4px 0 0;2869}2870.peach-entry-body--new .peach-note-body {2871  margin: 8px -20px 0;2872}28732874/* Add.tsx body is a grid by default; swap to a flex column when a note is2875   active so the note body can stretch and pin the tags row to the bottom. */2876.peach-entry-body--new:has(.peach-note-body) {2877  display: flex;2878  flex-direction: column;2879}28802881/* Rich content element styles (editor + display) */2882.peach-note-editor-body h2,2883.peach-note-content h2 {2884  font-family: var(--font-display);2885  font-size: 20px;2886  font-weight: 600;2887  font-style: italic;2888  color: var(--peach-t0);2889  margin: 6px 0 2px;2890  line-height: 1.3;2891}2892.peach-note-editor-body ul,2893.peach-note-content ul {2894  padding-left: 18px;2895  margin: 3px 0;2896  list-style: disc;2897}2898.peach-note-editor-body ol,2899.peach-note-content ol {2900  padding-left: 18px;2901  margin: 3px 0;2902  list-style: decimal;2903}2904.peach-note-editor-body li,2905.peach-note-content li { margin: 2px 0; }2906.peach-note-editor-body hr,2907.peach-note-content hr {2908  border: none;2909  border-top: 1px solid var(--peach-t3);2910  margin: 10px 0;2911}29122913/* font size elements from execCommand */2914.peach-note-editor-body font[size="1"],2915.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }2916.peach-note-editor-body font[size="2"],2917.peach-note-content font[size="2"] { font-size: 0.8125rem; }2918.peach-note-editor-body font[size="3"],2919.peach-note-content font[size="3"] { font-size: 1rem; }2920.peach-note-editor-body font[size="4"],2921.peach-note-content font[size="4"] { font-size: 20px; }2922.peach-note-editor-body font[size="5"],2923.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }29242925/* bold / italic inside the editor and note display */2926.peach-note-editor-body b, .peach-note-editor-body strong,2927.peach-note-content b, .peach-note-content strong { font-weight: 700; }2928.peach-note-editor-body em, .peach-note-editor-body i,2929.peach-note-content em, .peach-note-content i { font-style: italic; }29302931/* note display — rendered HTML, no pre-wrap */2932.peach-note-content {2933  overflow: auto;2934  max-height: 340px;2935  word-break: break-word;2936}29372938/* ── Note textarea ── */2939.peach-note-textarea {2940  width: 100%;2941  min-height: 180px;2942  max-height: 280px;2943  resize: vertical;2944  background: var(--peach-t4);2945  border: 1px solid var(--peach-t3);2946  border-radius: 8px;2947  padding: 10px 12px;2948  font-family: "IBM Plex Mono", monospace;2949  font-size: 0.75rem;2950  line-height: 1.7;2951  color: var(--peach-t1);2952  outline: none;2953  transition: border-color 150ms ease;2954}29552956.peach-note-textarea:focus {2957  border-color: var(--peach-t2);2958}29592960.peach-note-char-count {2961  font-family: "IBM Plex Mono", monospace;2962  font-size: 0.5625rem;2963  color: var(--peach-t3);2964  text-align: right;2965  margin-top: 4px;2966  letter-spacing: 0.1em;2967}29682969/* ── Field input baseline ── */2970.peach-new-field-input {2971  width: 100%;2972  background: transparent;2973  border: none;2974  border-bottom: 1px solid var(--peach-t3);2975  padding: 4px 0;2976  color: var(--peach-t1);2977  font-family: "IBM Plex Mono", monospace;2978  font-size: 0.8125rem;2979  outline: none;2980  transition: border-color 150ms ease;2981}29822983.peach-new-field-input:focus {2984  border-bottom-color: var(--peach-t0);2985  color: var(--peach-t0);2986}29872988.peach-new-name-input {2989  width: 100%;2990  background: transparent;2991  border: none;2992  border-bottom: 1px solid var(--peach-t3);2993  padding: 6px 0;2994  font-family: var(--font-display);2995  font-style: italic;2996  font-size: 28px;2997  color: var(--peach-t0);2998  outline: none;2999  transition: border-color 150ms ease;3000}30013002.peach-new-name-input:focus {3003  border-bottom-color: var(--peach-t1);3004}30053006.peach-new-name-input::placeholder {3007  color: var(--peach-t2);3008  font-style: italic;3009}30103011.peach-new-field-input::placeholder {3012  color: var(--peach-t3);3013}30143015/* ── Demo entrance animation ── */3016#hd-shell {3017  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3018}3019@keyframes hd-shell-enter {3020  from { opacity: 0; transform: scale(0.96) translateY(16px); }3021  to   { opacity: 1; transform: scale(1) translateY(0); }3022}30233024/* ── Keyframes ── */3025@keyframes peach-char-enter {3026  from { opacity: 0; transform: translateY(0.22em); }3027  to   { opacity: 1; transform: translateY(0); }3028}3029@keyframes peach-content-enter {3030  from { opacity: 0.96; transform: translateY(4px); }3031  to   { opacity: 1; transform: translateY(0); }3032}3033@keyframes peach-content-exit {3034  from { opacity: 1; transform: translateY(0); }3035  to   { opacity: 0.92; transform: translateY(-3px); }3036}3037@keyframes peach-screen-enter {3038  from { opacity: 0; transform: translateY(14px); }3039  to   { opacity: 1; transform: translateY(0); }3040}3041@keyframes peach-shell-fade-in {3042  from { opacity: 0; }3043  to   { opacity: 1; }3044}3045@keyframes peach-veil-in {3046  from { opacity: 0; }3047  to   { opacity: 1; }3048}3049@keyframes peach-lock-settle {3050  0%   { transform: scale(0.9); }3051  65%  { transform: scale(1.08); }3052  100% { transform: scale(1); }3053}3054@keyframes peach-copy-confirm {3055  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3056  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); }3057}3058@keyframes peach-copy-retreat {3059  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); }3060  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3061}3062@keyframes peach-copy-flood {3063  from { opacity: 0; transform: scaleX(0.15); }3064  to   { opacity: 1; transform: scaleX(1); }3065}3066@keyframes peach-copy-icon-settle {3067  from  { transform: scale(0.84); }3068  70%   { transform: scale(1.08); }3069  to    { transform: scale(1); }3070}3071@keyframes peach-copy-sheen-retreat {3072  from { opacity: 1; transform: scaleX(1); }3073  to   { opacity: 0; transform: scaleX(0.15); }3074}3075@keyframes peach-copy-drain {3076  from { width: 100%; }3077  to   { width: 0; }3078}3079@keyframes peach-shake {3080  0%, 100% { transform: translateX(0); }3081  20%      { transform: translateX(-6px); }3082  40%      { transform: translateX(6px); }3083  60%      { transform: translateX(-4px); }3084  80%      { transform: translateX(4px); }3085}30863087@keyframes pip-pulse {3088  0% { transform: scale(1); }3089  40% { transform: scale(2.2); }3090  100% { transform: scale(1); }3091}309230933094/* ── Password generator ── */3095.peach-pwgen-body {3096  flex: 1; overflow-y: auto;3097  display: flex; flex-direction: column;3098}3099.peach-policy-badge {3100  display: flex; align-items: center;3101  padding: 6px 20px 0;3102  font-size: 0.625rem; font-family: Inter, sans-serif;3103  color: var(--peach-t2); letter-spacing: 0.04em;3104}3105.peach-pwgen-display {3106  padding: 14px 20px 12px;3107  border-bottom: 1px solid var(--peach-t3);3108  display: flex; align-items: flex-start; gap: 10px;3109}3110.peach-pwgen-display-row {3111  display: flex;3112  align-items: flex-start;3113  gap: 8px;3114  padding-bottom: 8px;3115  border-bottom: 1px solid var(--peach-t3);3116}3117.peach-pwgen-output {3118  flex: 1; min-width: 0; margin: 0;3119  font-family: "IBM Plex Mono", monospace;3120  font-size: 0.8125rem; color: var(--peach-t0);3121  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3122  white-space: normal;3123  padding: 10px 12px;3124  background: var(--peach-t4);3125  border-radius: 6px;3126  min-height: 36px;3127}3128.peach-pwgen-output-display {3129  flex: 1;3130  min-width: 0;3131  margin: 0;3132  font-family: var(--font-display);3133  font-style: italic;3134  font-weight: 300;3135  font-size: 32px;3136  line-height: 1.05;3137  color: var(--peach-t0);3138  word-break: break-all;3139  overflow-wrap: break-word;3140  white-space: normal;3141  letter-spacing: 0.02em;3142}3143.peach-pwgen-display-actions {3144  display: flex;3145  flex-direction: column;3146  gap: 4px;3147  flex-shrink: 0;3148  margin-top: 2px;3149}3150.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3151.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3152.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3153.peach-pwgen-len-num {3154  font-family: "IBM Plex Mono", monospace;3155  font-size: 0.75rem; color: var(--peach-accent);3156}3157.peach-pwgen-len-num--edit {3158  cursor: text;3159  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3160}3161.peach-pwgen-len-input {3162  font-family: "IBM Plex Mono", monospace;3163  font-size: 0.75rem;3164  color: var(--peach-accent);3165  background: transparent;3166  border: none;3167  border-bottom: 1px solid var(--peach-accent);3168  outline: none;3169  width: 32px;3170  text-align: right;3171  padding: 0;3172}3173.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3174.peach-pwgen-toggles { display: flex; flex-direction: column; }3175.peach-pwgen-charset-pills {3176  display: flex;3177  gap: 6px;3178  flex-wrap: wrap;3179}3180.peach-pwgen-pill {3181  padding: 4px 11px;3182  border-radius: 999px;3183  border: 1px solid var(--peach-t3);3184  background: transparent;3185  color: var(--peach-t2);3186  font-family: "IBM Plex Mono", monospace;3187  font-size: 0.5625rem;3188  letter-spacing: 0.08em;3189  cursor: pointer;3190  transition: all 150ms ease;3191}3192.peach-pwgen-pill.is-on {3193  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3194  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3195  color: var(--peach-accent);3196}3197.peach-pwgen-pill:not(.is-on):hover {3198  color: var(--peach-t1);3199  border-color: var(--peach-t2);3200}3201.peach-pwgen-use-btn {3202  width: 100%;3203  min-height: 34px;3204  border-radius: 8px;3205  margin-top: 2px;3206}3207.peach-pwgen-toggle-row {3208  display: flex; align-items: center; justify-content: space-between;3209  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3210}3211.peach-pwgen-toggle-row:last-child { border-bottom: none; }3212.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }32133214.peach-screen-prelock {3215  z-index: 10;3216}32173218.prelock-form {3219  display: grid;3220  gap: 12px;3221}32223223/* Peach popup should not expose native scrollbars on internal panels. */3224.peach-settings-body,3225.peach-new-body,3226.peach-pwgen-body,3227.lock-screen,3228.peach-import-preview {3229  scrollbar-width: none;3230  -ms-overflow-style: none;3231  overscroll-behavior: contain;3232}3233.peach-settings-body::-webkit-scrollbar,3234.peach-new-body::-webkit-scrollbar,3235.peach-pwgen-body::-webkit-scrollbar,3236.lock-screen::-webkit-scrollbar,3237.peach-import-preview::-webkit-scrollbar {3238  width: 0;3239  height: 0;3240  display: none;3241}32423243.lock-screen {3244  height: 100%;3245  min-height: 100%;3246  overflow-y: auto;3247  padding: 18px 18px 16px;3248  gap: 14px;3249  grid-template-rows: auto auto auto 1fr auto;3250  align-content: stretch;3251  position: relative;3252  isolation: isolate;3253}3254.peach-screen.lock-screen--vault-stage {3255  display: flex;3256  flex-direction: column;3257  justify-content: flex-start;3258  gap: 18px;3259  padding: 20px 18px 18px;3260  overflow: hidden;3261}3262.peach-screen.lock-screen--vault-stage .peach-lock-panel {3263  margin-top: 0;3264}3265.lock-screen--onboarding {3266  display: flex;3267  flex-direction: column;3268  gap: 12px;3269  justify-content: flex-start;3270}32713272.lock-screen::before {3273  content: "";3274  position: absolute;3275  inset: 12px 18px auto auto;3276  width: 160px;3277  height: 160px;3278  border-radius: 999px;3279  background:3280    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%);3281  filter: blur(6px);3282  opacity: 0.7;3283  pointer-events: none;3284  z-index: 0;3285}32863287.peach-lock-rune-string {3288  flex: 1;3289  display: flex;3290  align-items: center;3291  justify-content: center;3292  gap: 6px;3293  font-family: PeachScript, monospace;3294  font-size: 0.8125rem;3295  letter-spacing: 0.05em;3296  pointer-events: none;3297  user-select: none;3298  position: relative;3299  z-index: 1;3300}33013302.peach-lock-rune-string span {3303  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3304  text-shadow:3305    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3306    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3307  transition: color 0.9s ease, text-shadow 0.9s ease;3308}33093310.peach-lock-rune-string span.is-glowing {3311  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3312  text-shadow:3313    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3314    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3315}33163317.lock-screen-header {3318  display: flex;3319  align-items: center;3320  justify-content: space-between;3321  position: relative;3322  z-index: 1;3323}33243325.lock-password-input.shake {3326  animation: peach-shake 300ms ease-in-out;3327}33283329.peach-hint-error {3330  color: rgba(220, 80, 60, 0.92);3331}33323333.peach-onboarding-headline {3334  margin: 0;3335  font-family: var(--font-display);3336  font-size: 35px;3337  line-height: 0.88;3338  font-style: italic;3339  font-weight: 400;3340  max-width: 252px;3341}33423343.peach-lock-copy {3344  display: grid;3345  gap: 8px;3346  position: relative;3347  z-index: 1;3348}33493350.peach-lock-copy--onboarding {3351  gap: 10px;3352}33533354.peach-lock-hero {3355  position: relative;3356  z-index: 1;3357  display: grid;3358  gap: 8px;3359  min-height: 0;3360  padding: 4px 2px 0;3361  border: none;3362  border-radius: 0;3363  background: transparent;3364  box-shadow: none;3365}3366.peach-lock-hero-art {3367  position: absolute;3368  right: -8px;3369  top: -6px;3370  width: 120px;3371  height: 120px;3372  display: flex;3373  align-items: center;3374  justify-content: center;3375  pointer-events: none;3376  opacity: 0.12;3377  filter: saturate(0.9);3378}3379.peach-lock-hero-mark {3380  width: 100%;3381  height: 100%;3382}3383/* Peach body stays brand-peach across every accent — we don't want a3384   green or blue peach when sage/sky is selected. Leaf + stem keep the3385   sage tint because a real peach has a sage leaf. */3386.peach-lock-hero-mark path:nth-child(2),3387.peach-lock-hero-mark path:nth-child(3) {3388  stroke: rgba(123, 144, 96, 0.88);3389  fill: rgba(123, 144, 96, 0.88);3390}3391.peach-lock-hero > *:not(.peach-lock-hero-art) {3392  position: relative;3393  z-index: 1;3394}33953396.peach-lock-eyebrow {3397  display: inline-flex;3398  align-items: center;3399  width: fit-content;3400  padding: 4px 9px;3401  border-radius: 999px;3402  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3403  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3404  color: var(--peach-t0);3405  font-family: "IBM Plex Mono", monospace;3406  font-size: 0.5rem;3407  letter-spacing: 0.18em;3408  text-transform: uppercase;3409}34103411.peach-lock-label-row {3412  display: flex;3413  align-items: center;3414  justify-content: space-between;3415  margin-bottom: 0;3416}34173418.peach-lock-reveal-btn {3419  display: inline-flex;3420  align-items: center;3421  gap: 4px;3422  background: none;3423  border: none;3424  cursor: pointer;3425  font-family: "IBM Plex Mono", monospace;3426  font-size: 0.5625rem;3427  letter-spacing: 0.06em;3428  color: var(--peach-t2);3429  padding: 2px 0;3430  transition: color 150ms ease;3431}34323433.peach-lock-reveal-btn:hover {3434  color: var(--peach-t1);3435}34363437.peach-lock-warning {3438  color: rgba(220, 80, 60, 0.85) !important;3439  line-height: 1.5;3440}34413442.peach-onboarding-cards {3443  display: grid;3444  gap: 8px;3445  position: relative;3446  z-index: 1;3447}34483449.peach-lock-panel {3450  position: relative;3451  z-index: 1;3452  display: grid;3453  gap: 9px;3454  padding: 14px 16px 15px;3455  border-radius: 18px;3456  border: 1px solid var(--peach-t3);3457  background:3458    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3459  box-shadow:3460    inset 0 1px 0 rgba(240, 232, 216, 0.04),3461    0 12px 28px rgba(0, 0, 0, 0.12);3462}34633464/* Glass surface — lock panel and settings groups */3465.peach-glass {3466  background: rgba(26, 20, 16, 0.65);3467  border: 1px solid rgba(255, 255, 255, 0.08);3468  border-radius: 12px;3469  backdrop-filter: blur(12px) saturate(1.4);3470  -webkit-backdrop-filter: blur(12px) saturate(1.4);3471}34723473@supports not (backdrop-filter: blur(1px)) {3474  .peach-glass {3475    background: rgba(26, 20, 16, 0.92);3476    border: 1px solid rgba(255, 255, 255, 0.10);3477    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3478  }3479}34803481.light .peach-glass,3482[data-theme="light"] .peach-glass {3483  background: rgba(253, 248, 244, 0.70);3484  border: 1px solid rgba(0, 0, 0, 0.07);3485  backdrop-filter: blur(12px) saturate(1.2);3486  -webkit-backdrop-filter: blur(12px) saturate(1.2);3487}34883489@supports not (backdrop-filter: blur(1px)) {3490  .light .peach-glass,3491  [data-theme="light"] .peach-glass {3492    background: rgba(253, 248, 244, 0.95);3493    border: 1px solid rgba(0, 0, 0, 0.09);3494  }3495}34963497/* Lock panel keeps its own border-radius over the generic glass token */3498.peach-lock-panel.peach-glass {3499  border-radius: 18px;3500  background: rgba(26, 20, 16, 0.65);3501  border: 1px solid rgba(255, 255, 255, 0.08);3502  box-shadow:3503    inset 0 1px 0 rgba(255, 255, 255, 0.05),3504    0 12px 28px rgba(0, 0, 0, 0.3);3505}35063507.light .peach-lock-panel.peach-glass,3508[data-theme="light"] .peach-lock-panel.peach-glass {3509  background: rgba(238, 227, 204, 0.75);3510  border: 1px solid rgba(34, 24, 9, 0.10);3511  box-shadow:3512    inset 0 1px 0 rgba(255, 255, 255, 0.5),3513    0 8px 24px rgba(80, 56, 32, 0.15);3514}35153516@supports not (backdrop-filter: blur(1px)) {3517  .peach-lock-panel.peach-glass {3518    background: rgba(26, 20, 16, 0.92);3519    box-shadow:3520      inset 0 1px 0 rgba(255, 255, 255, 0.05),3521      0 12px 28px rgba(0, 0, 0, 0.4);3522  }3523  .light .peach-lock-panel.peach-glass,3524  [data-theme="light"] .peach-lock-panel.peach-glass {3525    background: rgba(238, 227, 204, 0.96);3526  }3527}35283529.peach-lock-panel--secondary {3530  gap: 12px;3531}35323533.peach-lock-panel-header {3534  display: flex;3535  align-items: baseline;3536  justify-content: space-between;3537  gap: 12px;3538}35393540.peach-lock-option-grid {3541  display: grid;3542  gap: 10px;3543}35443545.peach-lock-option {3546  width: 100%;3547  display: grid;3548  gap: 6px;3549  padding: 14px 15px;3550  border-radius: 16px;3551  border: 1px solid rgba(240, 232, 216, 0.08);3552  background: rgba(240, 232, 216, 0.02);3553  color: var(--peach-t0);3554  text-align: left;3555  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3556}35573558.peach-lock-option:hover {3559  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3560  background: rgba(240, 232, 216, 0.04);3561  transform: translateY(-1px);3562}35633564.peach-lock-option-title {3565  font-size: 0.75rem;3566  color: var(--peach-t0);3567}35683569.peach-lock-option-copy {3570  font-size: 0.6875rem;3571  line-height: 1.55;3572  color: var(--peach-t1);3573}35743575.peach-onboarding-stack {3576  margin-top: 2px;3577}3578.peach-lock-panel-footer {3579  display: grid;3580  gap: 6px;3581  margin-top: 2px;3582  padding-top: 10px;3583  border-top: 1px solid rgba(240, 232, 216, 0.06);3584}35853586/* ── Restore tab view ─────────────────────────────────────────────────────3587   Tab-based restore screen replacing the old three-card picker. */35883589.peach-restore-tabview {3590  overflow: hidden;3591}35923593.peach-restore-tabcard {3594  flex: 1;3595  display: flex;3596  flex-direction: column;3597  gap: 0;3598  padding: 0;3599  overflow: hidden;3600  cursor: default;3601  user-select: none;3602  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3603}36043605/* ── Tab selector ─────────────────────────────────────────────────────── */36063607.peach-restore-tabs {3608  display: flex;3609  justify-content: space-around;3610  padding: 14px 10px 10px;3611  border-bottom: 1px solid var(--peach-t3);3612  gap: 2px;3613  overflow: hidden;3614  scrollbar-width: none;3615}3616.peach-restore-tabs::-webkit-scrollbar { display: none; }36173618.peach-restore-tab {3619  background: none;3620  border: none;3621  cursor: pointer;3622  padding: 3px 2px;3623  font-family: 'Cormorant Garamond', Georgia, serif;3624  font-style: italic;3625  font-size: 11px;3626  color: var(--peach-t2);3627  transition: color 150ms ease, text-shadow 150ms ease;3628  flex: 1;3629  min-width: 0;3630  text-align: center;3631  white-space: nowrap;3632  overflow: hidden;3633  text-overflow: ellipsis;3634}3635.peach-restore-tab:hover {3636  color: var(--peach-accent);3637  text-shadow:3638    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3639    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3640}3641.peach-restore-tab.is-active {3642  color: var(--peach-accent);3643  text-shadow:3644    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3645    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3646}36473648/* ── Content area ─────────────────────────────────────────────────────── */36493650.peach-restore-content {3651  padding: 16px 16px 14px;3652  display: flex;3653  flex-direction: column;3654  gap: 8px;3655  overflow: hidden;3656  scrollbar-width: none;3657  flex: 1;3658}3659.peach-restore-content::-webkit-scrollbar { display: none; }3660.peach-restore-content > * {3661  overflow: hidden;3662  scrollbar-width: none;3663}3664.peach-restore-content > *::-webkit-scrollbar { display: none; }36653666/* ── Shared tab inner layout ──────────────────────────────────────────── */36673668.peach-rt-symbols,3669.peach-rt-csv,3670.peach-rt-phone {3671  display: flex;3672  flex-direction: column;3673  gap: 8px;3674  overflow: hidden;3675}36763677.peach-rt-submit {3678  width: 100%;3679}36803681.peach-rt-error {3682  margin: 0;3683  font-size: 0.6875rem;3684  color: var(--peach-breach);3685  line-height: 1.4;3686}36873688/* ── PeachScript tab ──────────────────────────────────────────────────── */36893690.peach-restore-symbols-textarea {3691  font-family: 'PeachScript', monospace;3692  font-size: 13px;3693  line-height: 1.9;3694  letter-spacing: 0.1em;3695  word-break: break-all;3696  resize: none;3697  width: 100%;3698  min-height: 56px;3699  max-height: 72px;3700  overflow: hidden;3701  scrollbar-width: none;3702  -ms-overflow-style: none;3703  box-sizing: border-box;3704  padding: 6px 8px;3705  border-radius: 8px;3706  border: 1px solid var(--peach-t3);3707  background: rgba(240, 232, 216, 0.03);3708  color: var(--peach-t0);3709}3710.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3711.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37123713.peach-restore-symbols-pass {3714  width: 100%;3715  box-sizing: border-box;3716  padding: 7px 10px;3717  border-radius: 8px;3718  border: 1px solid var(--peach-t3);3719  background: rgba(240, 232, 216, 0.03);3720  color: var(--peach-t0);3721  font-size: 0.8125rem;3722}3723.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3724.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37253726.peach-rt-divider {3727  text-align: center;3728  font-size: 0.6875rem;3729  color: var(--peach-t2);3730  font-style: italic;3731}37323733.peach-rt-file-label {3734  width: 100%;3735  justify-content: center;3736}37373738.peach-rt-anim-canvas {3739  width: 100%;3740  height: 180px;3741  border-radius: 10px;3742  overflow: hidden;3743  display: block;3744}37453746/* ── CSV tab ──────────────────────────────────────────────────────────── */37473748.peach-rt-csv-sources {3749  margin: 0;3750  font-size: 0.6875rem;3751  color: var(--peach-t2);3752  line-height: 1.5;3753  text-align: center;3754}37553756.peach-rt-csv-warning {3757  margin: 0;3758  font-family: "IBM Plex Mono", monospace;3759  font-size: 0.5625rem;3760  letter-spacing: 0.12em;3761  color: var(--peach-breach);3762  text-align: center;3763}37643765/* ── From Phone tab ───────────────────────────────────────────────────── */37663767.peach-rt-phone-code {3768  margin: 0;3769  text-align: center;3770  font-family: "IBM Plex Mono", monospace;3771  font-size: 22px;3772  letter-spacing: 0.18em;3773  color: var(--peach-t0);3774}37753776.peach-rt-phone-qr {3777  display: block;3778  width: 96px;3779  height: 96px;3780  margin: 0 auto;3781  border-radius: 6px;3782  image-rendering: pixelated;3783  overflow: hidden;3784}37853786.peach-rt-phone-hint {3787  margin: 0;3788  font-size: 0.6875rem;3789  color: var(--peach-t2);3790  line-height: 1.55;3791  text-align: center;3792}37933794/* ── Intro popup ──────────────────────────────────────────────────────── */37953796.peach-restore-intro-overlay {3797  position: absolute;3798  inset: 0;3799  z-index: 100;3800  display: flex;3801  align-items: center;3802  justify-content: center;3803  padding: 20px;3804  background: rgba(12, 10, 6, 0.7);3805  backdrop-filter: blur(4px);3806  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3807}38083809.peach-restore-intro-card {3810  width: 100%;3811  display: flex;3812  flex-direction: column;3813  gap: 12px;3814  padding: 22px 20px 20px;3815  border-radius: 16px;3816  border: 1px solid var(--peach-t3);3817  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3818  backdrop-filter: blur(4px);3819  -webkit-backdrop-filter: blur(4px);3820  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3821}38223823.peach-restore-intro-headline {3824  margin: 0;3825  font-family: var(--font-display);3826  font-style: italic;3827  font-size: 20px;3828  font-weight: 400;3829  color: var(--peach-t0);3830}38313832.peach-restore-intro-body {3833  display: flex;3834  flex-direction: column;3835  gap: 8px;3836}3837.peach-restore-intro-body p {3838  margin: 0;3839  font-size: 0.75rem;3840  color: var(--peach-t1);3841  line-height: 1.5;3842}38433844.peach-restore-intro-btn {3845  width: 100%;3846  margin-top: 4px;3847}38483849/* Snapshot restore panel */3850.peach-snapshot-panel {3851  gap: 10px;3852  overflow-y: auto;3853  max-height: 340px;3854}3855.peach-snapshot-list {3856  display: flex;3857  flex-direction: column;3858  gap: 4px;3859}3860.peach-snapshot-row {3861  display: flex;3862  align-items: center;3863  justify-content: space-between;3864  width: 100%;3865  padding: 8px 10px;3866  border-radius: 8px;3867  border: 1px solid rgba(240, 232, 216, 0.07);3868  background: transparent;3869  cursor: pointer;3870  transition: border-color 120ms, background 120ms;3871  text-align: left;3872  gap: 8px;3873}3874.peach-snapshot-row:hover {3875  border-color: rgba(240, 232, 216, 0.14);3876  background: rgba(240, 232, 216, 0.03);3877}3878.peach-snapshot-row.is-selected {3879  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3880  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3881}3882.peach-snapshot-time {3883  font-size: 11.5px;3884  color: var(--peach-t0);3885  flex: 1;3886}3887.peach-snapshot-count {3888  font-family: "IBM Plex Mono", monospace;3889  font-size: 0.625rem;3890  color: var(--peach-t2);3891  flex-shrink: 0;3892}3893.peach-snapshot-confirm {3894  display: flex;3895  flex-direction: column;3896  gap: 8px;3897  padding-top: 10px;3898  border-top: 1px solid rgba(240, 232, 216, 0.06);3899}3900.peach-snapshot-warning {3901  display: flex;3902  align-items: flex-start;3903  gap: 6px;3904  font-size: 10.5px;3905  color: rgba(220, 80, 60, 0.85);3906  line-height: 1.55;3907}3908.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3909.peach-snapshot-confirm-row {3910  display: flex;3911  gap: 6px;3912  align-items: center;3913}3914.peach-snapshot-restore-btn {3915  width: 100%;3916}3917.peach-lock-hero--unlock .peach-lock-hero-art {3918  width: 112px;3919  height: 112px;3920  right: 0;3921  top: 2px;3922  opacity: 0.1;3923}39243925.peach-card {3926  border: 1px solid var(--peach-t3);3927  border-radius: 18px;3928  background:3929    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3930  box-shadow:3931    inset 0 0 0 1px var(--peach-border-accent),3932    inset 0 1px 0 rgba(240, 232, 216, 0.04),3933    0 12px 32px rgba(0, 0, 0, 0.14);3934  overflow: hidden;3935}39363937.peach-card-active {3938  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3939  box-shadow:3940    inset 0 1px 0 rgba(240, 232, 216, 0.05),3941    0 16px 38px rgba(0, 0, 0, 0.18),3942    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);3943}39443945.peach-card-disabled {3946  opacity: 0.72;3947}39483949.peach-card-header {3950  width: 100%;3951  padding: 13px 16px 11px;3952  background: transparent;3953  color: var(--peach-t0);3954  display: flex;3955  justify-content: space-between;3956  align-items: center;3957  text-align: left;3958  font-size: 0.75rem;3959}39603961.peach-card-body {3962  padding: 0 16px 16px;3963  display: grid;3964  gap: 9px;3965}39663967.peach-card-tag {3968  color: var(--peach-t2);3969  font-family: "IBM Plex Mono", monospace;3970  font-size: 0.5625rem;3971  letter-spacing: 0.12em;3972  text-transform: uppercase;3973}39743975.peach-empty-copy {3976  display: grid;3977  gap: 6px;3978  color: var(--peach-t1);3979  font-size: 0.8125rem;3980}39813982.peach-lock-submit {3983  width: 100%;3984  box-shadow:3985    0 1px 0 rgba(255,255,255,0.10) inset,3986    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),3987    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),3988    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);3989}39903991.peach-lock-secondary {3992  width: 100%;3993  border-color: var(--peach-t3);3994  background: rgba(240, 232, 216, 0.02);3995}39963997.peach-lock-secondary:hover {3998  background: rgba(240, 232, 216, 0.04);3999}40004001.peach-lock-note {4002  max-width: none;4003  line-height: 1.55;4004  margin: 0;4005}40064007.peach-overlay-action {4008  font-size: 0.625rem;4009  padding: 4px 8px;4010  letter-spacing: 0.06em;4011  min-width: 44px;4012  text-align: center;4013}40144015.peach-overlay-spacer {4016  width: 32px;4017}40184019.peach-inline-action {4020  flex-shrink: 0;4021  font-size: 0.5625rem;4022  letter-spacing: 0.1em;4023  text-transform: uppercase;4024  padding: 4px 7px;4025}4026.peach-password-toggle-btn {4027  display: inline-flex;4028  align-items: center;4029  justify-content: center;4030  min-width: 30px;4031  min-height: 26px;4032  padding: 0 7px;4033  border: 1px solid var(--peach-t3);4034  border-radius: 999px;4035  background: rgba(240, 232, 216, 0.04);4036  color: var(--peach-t2);4037  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4038}4039.peach-password-toggle-btn:hover {4040  border-color: var(--peach-t2);4041  color: var(--peach-t0);4042  background: rgba(240, 232, 216, 0.06);4043}40444045.peach-new-textarea {4046  width: 100%;4047  min-height: 88px;4048  resize: vertical;4049  border: 0;4050  outline: none;4051  background: transparent;4052  color: var(--peach-t1);4053  font-family: "IBM Plex Mono", monospace;4054  font-size: 0.75rem;4055  line-height: 1.65;4056  caret-color: var(--peach-accent);4057}40584059.peach-new-textarea::placeholder {4060  color: var(--peach-t2);4061  opacity: 0.7;4062}40634064.peach-settings-actions {4065  display: grid;4066  gap: 8px;4067}40684069.peach-sync-section-label {4070  font-size: 0.6875rem;4071  color: var(--peach-t2);4072  text-transform: uppercase;4073  letter-spacing: 0.05em;4074}40754076.peach-sync-network-note {4077  margin: 0 0 6px;4078  font-size: 0.75rem;4079  color: var(--peach-t2);4080  line-height: 1.4;4081}40824083.peach-settings-row--tappable {4084  background: none;4085  border: none;4086  width: 100%;4087  text-align: left;4088  cursor: pointer;4089  color: var(--peach-t1);4090  font-size: 0.8125rem;4091}4092.peach-settings-row--tappable:hover {4093  color: var(--peach-t0);4094}40954096.peach-sync-pro-hint {4097  display: flex;4098  flex-direction: column;4099  align-items: flex-start;4100  gap: 8px;4101  padding: 12px 0 4px;4102}41034104.peach-sync-device-row {4105  display: flex;4106  justify-content: space-between;4107  align-items: center;4108  padding: 6px 0;4109  border-bottom: 1px solid var(--peach-t3);4110}41114112.peach-sync-device-info {4113  display: flex;4114  flex-direction: column;4115  gap: 2px;4116}41174118.peach-sync-device-name {4119  font-size: 0.8125rem;4120  color: var(--peach-t0);4121}41224123.peach-sync-device-meta {4124  font-size: 0.6875rem;4125  color: var(--peach-t2);4126}41274128.peach-sync-status-dot {4129  display: inline-block;4130  width: 8px;4131  height: 8px;4132  border-radius: 50%;4133  vertical-align: middle;4134}41354136.peach-sync-remove-btn {4137  color: var(--peach-breach);4138}41394140.peach-sync-advanced-row {4141  display: flex;4142  justify-content: space-between;4143  align-items: center;4144  padding: 6px 0;4145  gap: 12px;4146}41474148.peach-sync-advanced-info {4149  display: flex;4150  flex-direction: column;4151  gap: 2px;4152  flex: 1;4153}41544155.peach-sync-advanced-name {4156  font-size: 0.8125rem;4157  color: var(--peach-t0);4158}41594160.peach-sync-reset-confirm {4161  display: flex;4162  flex-direction: column;4163  gap: 8px;4164  padding: 10px;4165  border: 1px solid var(--peach-breach);4166  border-radius: 10px;4167  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4168}41694170.peach-sync-reset-confirm-headline {4171  font-size: 0.8125rem;4172  font-weight: 600;4173  color: var(--peach-t0);4174  margin: 0;4175}41764177.peach-sync-reset-confirm-body {4178  font-size: 0.75rem;4179  color: var(--peach-t1);4180  margin: 0;4181  line-height: 1.4;4182}41834184.peach-btn--danger {4185  background: var(--peach-breach);4186  color: #fff;4187  border-color: var(--peach-breach);4188}4189.peach-btn--danger:hover:not(:disabled) {4190  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4191}4192.peach-btn--danger:disabled {4193  opacity: 0.55;4194  cursor: not-allowed;4195}41964197.peach-sync-hero-icon {4198  color: var(--peach-t1);4199  opacity: 0.85;4200}42014202.peach-import-preview {4203  margin-bottom: 12px;4204  max-height: 152px;4205  overflow-y: auto;4206  border: 1px solid var(--peach-t3);4207  border-radius: 10px;4208  padding: 8px 10px;4209  display: grid;4210  gap: 8px;4211  background: rgba(240, 232, 216, 0.02);4212}42134214.peach-import-preview-row {4215  display: flex;4216  justify-content: space-between;4217  gap: 10px;4218  font-size: 0.6875rem;4219  color: var(--peach-t1);4220}42214222.peach-import-preview-title {4223  color: var(--peach-t0);4224  flex: 1;4225  min-width: 0;4226  overflow: hidden;4227  text-overflow: ellipsis;4228  white-space: nowrap;4229}42304231.peach-import-preview-meta {4232  color: var(--peach-t2);4233  flex-shrink: 0;4234  max-width: 42%;4235  overflow: hidden;4236  text-overflow: ellipsis;4237  white-space: nowrap;4238}42394240.peach-import-preview-more {4241  color: var(--peach-t2);4242  font-size: 0.625rem;4243}42444245.peach-restore-copy {4246  margin: 0;4247  color: var(--peach-t1);4248  font-size: 0.6875rem;4249  line-height: 1.6;4250}42514252.peach-restore-warning {4253  padding: 10px 12px;4254  border-radius: 12px;4255  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4256  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4257  color: var(--peach-t0);4258  font-size: 0.6875rem;4259  line-height: 1.55;4260}42614262.peach-provider-chips {4263  display: flex;4264  flex-wrap: wrap;4265  gap: 6px;4266}42674268.peach-provider-chip {4269  display: inline-flex;4270  align-items: center;4271  padding: 5px 8px;4272  border-radius: 999px;4273  border: 1px solid var(--peach-t3);4274  background: rgba(240, 232, 216, 0.02);4275  color: var(--peach-t1);4276  font-family: "IBM Plex Mono", monospace;4277  font-size: 0.5rem;4278  letter-spacing: 0.08em;4279  text-transform: uppercase;4280}42814282.peach-restore-file,4283.peach-restore-input {4284  width: 100%;4285  border-radius: 10px;4286  border: 1px solid var(--peach-t3);4287  background: var(--peach-s2);4288  color: var(--peach-t0);4289  font-size: 0.75rem;4290}42914292.peach-restore-file {4293  padding: 9px 10px;4294}42954296.peach-restore-file::file-selector-button {4297  margin-right: 10px;4298  padding: 7px 10px;4299  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4300  border-radius: 999px;4301  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4302  color: var(--peach-t0);4303  font-size: 0.625rem;4304  letter-spacing: 0.08em;4305  text-transform: uppercase;4306  cursor: pointer;4307}43084309.peach-restore-input {4310  padding: 10px 12px;4311}43124313.peach-auth-grid {4314  display: grid;4315  gap: 10px;4316}43174318.peach-import-summary {4319  color: var(--peach-t1);4320  font-size: 0.75rem;4321  line-height: 1.6;4322  margin-bottom: 12px;4323}43244325.peach-restore-error {4326  color: rgba(220, 80, 60, 0.95);4327  font-size: 0.75rem;4328  line-height: 1.55;4329}43304331.peach-passkey-card {4332  max-width: 400px;4333  margin: auto 16px;4334  align-self: center;4335  width: calc(100% - 32px);4336}43374338/* Center the approval card vertically inside the overlay-view (which sets4339 * flex-direction: column without justify-content). Without this, the card4340 * sits at the top with a tall empty band below — looks unfinished on the4341 * 320px popup. */4342.peach-overlay-view:has(.peach-passkey-card) {4343  justify-content: center;4344}43454346.peach-pro-badge {4347  padding: 2px 6px;4348  border-radius: 999px;4349  font-family: var(--font-ui);4350  font-size: 0.625rem;4351  letter-spacing: 0.08em;4352  text-transform: uppercase;4353  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4354  color: var(--peach-accent);4355}43564357/* ── Shortcuts rebind table ─────────────────────────────────── */4358.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4359.peach-shortcut-row {4360  display: flex;4361  align-items: center;4362  gap: 10px;4363  padding: 6px 0;4364}4365.peach-shortcut-row-label {4366  flex: 1;4367  font-size: 0.75rem;4368  color: var(--peach-t0);4369}4370.peach-shortcut-chip {4371  min-width: 64px;4372  padding: 4px 10px;4373  border-radius: 6px;4374  border: 1px solid var(--peach-t3);4375  background: var(--peach-input-bg, var(--surface-card));4376  color: var(--peach-t0);4377  font-family: var(--font-mono);4378  font-size: 0.6875rem;4379  letter-spacing: 0.04em;4380  cursor: pointer;4381  text-align: center;4382  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4383}4384.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4385.peach-shortcut-chip.is-custom {4386  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4387  color: var(--peach-accent);4388}4389.peach-shortcut-chip.is-capturing {4390  border-color: var(--peach-accent);4391  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4392  color: var(--peach-accent);4393  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4394}4395@keyframes peach-shortcut-capture-pulse {4396  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4397  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4398}4399.peach-shortcut-reset {4400  background: transparent;4401  border: none;4402  cursor: pointer;4403  color: var(--peach-t2);4404  padding: 4px 6px;4405  border-radius: 5px;4406  font-size: 0.875rem;4407  line-height: 1;4408  transition: color 120ms ease, background 120ms ease;4409}4410.peach-shortcut-reset:hover {4411  color: var(--peach-t0);4412  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4413}4414.peach-shortcuts-conflict {4415  margin: 4px 0 0;4416  padding: 8px 10px;4417  border-radius: 7px;4418  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4419  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4420  font-family: var(--font-mono);4421  font-size: 0.6875rem;4422  color: var(--peach-t0);4423}44244425/* ── Help dialog overlay (? to open) ────────────────────────── */4426.peach-shortcuts-help-backdrop {4427  position: fixed;4428  inset: 0;4429  background: rgba(0, 0, 0, 0.55);4430  backdrop-filter: blur(2px);4431  display: flex;4432  align-items: center;4433  justify-content: center;4434  z-index: 1000;4435  animation: peach-help-fade-in 140ms ease forwards;4436}4437@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4438.peach-shortcuts-help-card {4439  width: min(320px, 92vw);4440  max-height: 80vh;4441  overflow-y: auto;4442  border-radius: 14px;4443  border: 1px solid var(--peach-t3);4444  background: var(--peach-bg);4445  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4446  padding: 16px 18px 18px;4447  display: flex;4448  flex-direction: column;4449  gap: 12px;4450}4451.peach-shortcuts-help-head {4452  display: flex; align-items: center; justify-content: space-between;4453}4454.peach-shortcuts-help-head h3 {4455  margin: 0;4456  font-family: var(--font-display);4457  font-style: italic;4458  font-weight: 400;4459  font-size: 22px;4460  color: var(--peach-t0);4461}4462.peach-shortcuts-help-close {4463  background: transparent;4464  border: none;4465  color: var(--peach-t2);4466  cursor: pointer;4467  font-size: 0.875rem;4468  padding: 4px 8px;4469  border-radius: 5px;4470}4471.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4472.peach-shortcuts-help-body ul {4473  list-style: none; padding: 0; margin: 4px 0 12px;4474  display: grid; gap: 8px;4475}4476.peach-shortcuts-help-body li {4477  display: flex; align-items: center; justify-content: space-between; gap: 12px;4478  font-size: 0.75rem; color: var(--peach-t0);4479}4480.peach-shortcuts-help-body kbd {4481  font-family: var(--font-mono);4482  font-size: 0.6875rem;4483  padding: 3px 8px;4484  border-radius: 6px;4485  background: var(--surface-card);4486  border: 1px solid var(--peach-t3);4487  color: var(--peach-accent);4488  letter-spacing: 0.04em;4489}44904491/* ── Pro promo on Account screen ────────────────────────────── */4492.peach-pro-promo {4493  position: relative;4494  border-radius: 14px;4495  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4496  background:4497    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4498    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4499    var(--surface-card);4500  overflow: hidden;4501  margin-bottom: 14px;4502}4503.peach-pro-promo-glow {4504  position: absolute;4505  inset: -40% -20% auto auto;4506  width: 220px; height: 220px;4507  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4508  pointer-events: none;4509  filter: blur(8px);4510}4511.peach-pro-promo-inner {4512  position: relative;4513  padding: 18px 18px 16px;4514}4515.peach-pro-promo-title {4516  font-family: var(--font-display);4517  font-style: italic;4518  font-weight: 400;4519  font-size: 28px;4520  line-height: 1;4521  letter-spacing: -0.005em;4522  color: var(--peach-t0);4523  margin: 0 0 4px;4524}4525.peach-pro-promo-tagline {4526  font-family: var(--font-mono);4527  font-size: 0.625rem;4528  letter-spacing: 0.06em;4529  color: var(--peach-t2);4530  margin: 0 0 14px;4531}4532.peach-pro-promo-list {4533  list-style: none;4534  margin: 0 0 16px;4535  padding: 0;4536  display: grid;4537  gap: 9px;4538}4539.peach-pro-promo-list li {4540  display: flex;4541  align-items: flex-start;4542  gap: 9px;4543  font-size: 0.75rem;4544  color: var(--peach-t1);4545  line-height: 1.4;4546}4547.peach-pro-promo-list svg {4548  width: 14px;4549  height: 14px;4550  flex-shrink: 0;4551  color: var(--peach-accent);4552  margin-top: 2px;4553}4554.peach-pro-promo-list span {4555  color: var(--peach-t0);4556}4557.peach-pro-promo-cta {4558  width: 100%;4559  background: var(--peach-accent);4560  color: #fff;4561  border: none;4562  padding: 9px 12px;4563  border-radius: 9px;4564  font-size: 0.75rem;4565  font-weight: 500;4566  font-family: var(--font-ui);4567  letter-spacing: 0.02em;4568  text-decoration: none;4569  display: inline-flex;4570  align-items: center;4571  justify-content: center;4572  cursor: pointer;4573  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4574  box-shadow: 0 2px 16px var(--peach-glow);4575}4576.peach-pro-promo-cta:hover {4577  filter: brightness(1.07);4578  box-shadow: 0 4px 24px var(--peach-glow);4579  transform: translateY(-1px);4580}4581.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }45824583.peach-pro-or-divider {4584  display: flex;4585  align-items: center;4586  gap: 10px;4587  margin: 4px 0 12px;4588  font-family: var(--font-mono);4589  font-size: 0.625rem;4590  letter-spacing: 0.06em;4591  color: var(--peach-t2);4592  text-transform: uppercase;4593}4594.peach-pro-or-divider::before,4595.peach-pro-or-divider::after {4596  content: "";4597  flex: 1;4598  height: 1px;4599  background: var(--peach-t3);4600}46014602.peach-loading {4603  position: absolute;4604  inset: 0;4605  display: flex;4606  align-items: center;4607  justify-content: center;4608  background: var(--bg);4609  animation: peach-loading-pulse 1.2s ease-in-out infinite;4610}46114612@keyframes peach-loading-pulse {4613  0%, 100% { opacity: 0.6; }4614  50% { opacity: 1; }4615}46164617/* ── Health Dashboard ─────────────────────────────────────────────────── */4618.peach-health-body {4619  flex: 1;4620  overflow-y: auto;4621  display: flex;4622  flex-direction: column;4623  /* Hide the platform scrollbar — every other scrollable surface in the4624   * popup hides it; the Health view was the one outlier and it ruined the4625   * polish. Behavior unchanged, just no rail rendered. */4626  scrollbar-width: none;4627  -ms-overflow-style: none;4628}4629.peach-health-body::-webkit-scrollbar { display: none; }46304631/* Loading screen for the Vault Health view. The advanced report computation4632 * can run for a few seconds on a large vault — without a clear loading4633 * screen the surface looked broken (the entry view bleeds through the4634 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4635.peach-health-loading-screen {4636  flex: 1;4637  display: flex;4638  flex-direction: column;4639  align-items: center;4640  justify-content: center;4641  gap: 14px;4642  padding: 32px 28px;4643  text-align: center;4644}46454646.peach-health-loading-glyph {4647  width: 48px;4648  height: 48px;4649  display: flex;4650  align-items: center;4651  justify-content: center;4652  border-radius: 14px;4653  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4654  color: var(--peach-accent);4655}46564657.peach-health-loading-title {4658  margin: 0;4659  font-family: var(--font-display);4660  font-style: italic;4661  font-weight: 300;4662  font-size: 19px;4663  line-height: 1.2;4664  color: var(--peach-t0);4665}46664667.peach-health-loading-copy {4668  margin: 0;4669  max-width: 240px;4670  font-size: 0.75rem;4671  line-height: 1.55;4672  color: var(--peach-t2);4673}46744675.peach-health-loading-track {4676  width: 200px;4677  height: 3px;4678  margin-top: 6px;4679  border-radius: 999px;4680  background: rgba(240, 232, 216, 0.06);4681  overflow: hidden;4682}46834684.peach-health-loading-fill {4685  width: 40%;4686  height: 100%;4687  border-radius: inherit;4688  background: linear-gradient(4689    90deg,4690    transparent 0%,4691    var(--peach-accent) 50%,4692    transparent 100%4693  );4694  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4695}46964697@keyframes peach-health-loading-sweep {4698  0%   { transform: translateX(-100%); }4699  100% { transform: translateX(350%); }4700}47014702[data-motion="reduce"] .peach-health-loading-fill,4703[data-motion="reduce"] .peach-health-loading-glyph svg path {4704  animation: none;4705}47064707.peach-health-summary {4708  padding: 10px 16px 6px;4709  font-family: "IBM Plex Mono", monospace;4710  font-size: 0.6875rem;4711}4712.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4713.peach-health-summary-ok { color: var(--peach-t2); }47144715.peach-health-check-row {4716  padding: 0 16px 10px;4717}4718.peach-health-check-btn {4719  width: 100%;4720  display: flex;4721  align-items: center;4722  justify-content: center;4723}47244725.peach-health-sections {4726  flex: 1;4727  display: flex;4728  flex-direction: column;4729}47304731.peach-health-section {4732  border-bottom: 1px solid var(--peach-t3);4733}47344735.peach-health-section-header {4736  width: 100%;4737  display: flex;4738  align-items: center;4739  justify-content: space-between;4740  padding: 9px 16px;4741  background: transparent;4742  cursor: pointer;4743  color: var(--peach-t0);4744}47454746.peach-health-section-title-row {4747  display: flex;4748  align-items: center;4749  gap: 8px;4750}47514752.peach-health-count-badge {4753  display: inline-flex;4754  align-items: center;4755  justify-content: center;4756  min-width: 20px;4757  height: 18px;4758  padding: 0 5px;4759  border-radius: 999px;4760  background: rgba(220,80,60,0.15);4761  border: 1px solid rgba(220,80,60,0.25);4762  font-family: "IBM Plex Mono", monospace;4763  font-size: 0.5625rem;4764  color: rgba(220,80,60,0.9);4765}47664767.peach-health-section-title {4768  font-family: "IBM Plex Mono", monospace;4769  font-size: 0.6875rem;4770  text-transform: uppercase;4771  letter-spacing: 0.1em;4772  color: var(--peach-t1);4773}47744775.peach-health-chevron {4776  color: var(--peach-t2);4777  transition: transform 200ms ease;4778  flex-shrink: 0;4779}4780.peach-health-chevron.is-expanded {4781  transform: rotate(180deg);4782}47834784.peach-health-section-body {4785  padding: 0 16px 10px;4786  display: flex;4787  flex-direction: column;4788  gap: 4px;4789}47904791.peach-health-row {4792  display: flex;4793  align-items: flex-start;4794  justify-content: space-between;4795  gap: 8px;4796  padding: 6px 8px;4797  border-radius: 8px;4798  background: rgba(240,232,216,0.02);4799}48004801.peach-health-row-info {4802  flex: 1;4803  min-width: 0;4804  display: flex;4805  flex-direction: column;4806  gap: 2px;4807}48084809.peach-health-row-name {4810  font-family: var(--font-display);4811  font-size: 0.9375rem;4812  font-style: italic;4813  font-weight: 400;4814  color: var(--peach-t0);4815  white-space: nowrap;4816  overflow: hidden;4817  text-overflow: ellipsis;4818}48194820.peach-health-row-meta {4821  font-family: "IBM Plex Mono", monospace;4822  font-size: 0.5625rem;4823  color: var(--peach-t2);4824  letter-spacing: 0.05em;4825}48264827.peach-health-fix-btn {4828  font-size: 0.5625rem;4829  letter-spacing: 0.08em;4830  text-transform: uppercase;4831  padding: 4px 7px;4832  flex-shrink: 0;4833  display: flex;4834  align-items: center;4835}48364837.peach-health-empty {4838  font-family: "IBM Plex Mono", monospace;4839  font-size: 0.625rem;4840  color: var(--peach-t2);4841  padding: 6px 0;4842}48434844.peach-health-loading {4845  font-family: "IBM Plex Mono", monospace;4846  font-size: 0.625rem;4847  color: var(--peach-t2);4848  padding: 6px 0;4849  display: flex;4850  align-items: center;4851  gap: 6px;4852}48534854.peach-health-loading::before {4855  content: "";4856  width: 10px;4857  height: 10px;4858  border: 1.5px solid var(--peach-t3);4859  border-top-color: var(--peach-accent);4860  border-radius: 50%;4861  animation: peach-spin 600ms linear infinite;4862}48634864@keyframes peach-spin {4865  to { transform: rotate(360deg); }4866}48674868.peach-spinner {4869  width: 32px;4870  height: 32px;4871  border: 2px solid var(--peach-s2);4872  border-top-color: var(--peach-accent);4873  border-radius: 50%;4874  margin: 0 auto 16px;4875  animation: peach-spin 0.8s linear infinite;4876}48774878.peach-progress-screen {4879  text-align: center;4880  padding: 32px 16px;4881}48824883.peach-progress-screen-title {4884  font-size: 0.8125rem;4885  color: var(--peach-t0);4886  margin-bottom: 16px;4887}48884889.peach-progress-screen-stage {4890  font-size: 0.6875rem;4891  color: var(--peach-t2);4892  min-height: 14px;4893}48944895.peach-progress-screen-note {4896  font-size: 0.625rem;4897  color: var(--peach-t2);4898  margin-top: 8px;4899}49004901.peach-pairing-body {4902  flex: 1;4903  overflow-y: auto;4904  display: flex;4905  flex-direction: column;4906}49074908.peach-pairing-content {4909  flex: 1;4910  display: flex;4911  flex-direction: column;4912  align-items: center;4913  justify-content: center;4914  gap: 14px;4915  padding: 28px 20px;4916  text-align: center;4917}49184919.peach-pairing-code-screen {4920  gap: 18px;4921}49224923.peach-pairing-headline {4924  font-family: var(--font-display);4925  font-style: italic;4926  font-weight: 300;4927  font-size: 28px;4928  color: var(--peach-t0);4929  margin: 0;4930  line-height: 1;4931}49324933.peach-pairing-subline {4934  font-size: 0.75rem;4935  color: var(--peach-t2);4936  max-width: 220px;4937  line-height: 1.5;4938  margin: 0;4939}49404941.peach-pairing-subline--center {4942  text-align: center;4943}49444945/* 6-digit pairing code — both display (.peach-pairing-code) and entry4946   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking4947   so the two modes feel like the same surface. */4948.peach-pairing-code {4949  font-family: "IBM Plex Mono", monospace;4950  font-size: 36px;4951  letter-spacing: 0.25em;4952  color: var(--peach-t0);4953  text-align: center;4954  padding: 24px 0;4955  text-shadow:4956    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),4957    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);4958  background: transparent;4959  border: 0;4960  cursor: default;4961  user-select: text;4962}49634964.peach-pairing-code--loading,4965.peach-pairing-code--expired {4966  font-size: 18px;4967  letter-spacing: 0.04em;4968  color: var(--peach-t2);4969  cursor: pointer;4970  text-shadow: none;4971}49724973.peach-pairing-qr-container {4974  display: flex;4975  flex-direction: column;4976  align-items: center;4977  gap: 10px;4978}49794980.peach-pairing-qr {4981  width: 240px;4982  height: 240px;4983  display: block;4984}49854986.peach-pairing-instruction {4987  font-size: 0.75rem;4988  color: var(--peach-t2);4989  text-align: center;4990  line-height: 1.5;4991  margin: 0;4992  max-width: 220px;4993}49944995.peach-pairing-expiry {4996  font-family: "IBM Plex Mono", monospace;4997  font-size: 13px;4998  letter-spacing: 0.06em;4999  color: var(--peach-t2);5000  margin: 0;5001}50025003.peach-pairing-regen {5004  font-size: 0.75rem;5005  color: var(--peach-accent);5006  background: transparent;5007  border: 0;5008  cursor: pointer;5009  padding: 4px 0;5010  text-decoration: underline;5011  text-underline-offset: 2px;5012}50135014.peach-pairing-code-input {5015  font-family: "IBM Plex Mono", monospace;5016  font-size: 36px;5017  letter-spacing: 0.25em;5018  color: var(--peach-t0);5019  background: transparent;5020  border: 0;5021  border-bottom: 1px solid var(--peach-t3);5022  outline: none;5023  text-align: center;5024  padding: 18px 0;5025  width: 220px;5026  caret-color: var(--peach-accent);5027  transition: border-color 160ms ease;5028}50295030.peach-pairing-code-input::placeholder {5031  color: var(--peach-t3);5032}50335034.peach-pairing-code-input:focus {5035  border-bottom-color: var(--peach-accent);5036}50375038.peach-pairing-toggle {5039  background: transparent;5040  border: 0;5041  color: var(--peach-t2);5042  font-size: 0.75rem;5043  padding: 8px 4px;5044  cursor: pointer;5045  transition: color 120ms ease;5046}50475048.peach-pairing-toggle:hover:not(:disabled) {5049  color: var(--peach-t1);5050}50515052.peach-pairing-toggle:disabled {5053  opacity: 0.5;5054  cursor: default;5055}50565057.peach-pairing-hint {5058  font-size: 0.6875rem;5059  color: var(--peach-t2);5060  margin: 0;5061  text-align: center;5062}50635064.peach-pairing-status {5065  display: flex;5066  align-items: center;5067  gap: 8px;5068  margin: 0;5069  font-size: 0.75rem;5070  color: var(--peach-t1);5071}50725073.peach-pairing-error {5074  margin: 0;5075  font-size: 0.6875rem;5076  color: var(--peach-breach);5077}50785079.peach-pairing-error--muted {5080  color: var(--peach-t2);5081}50825083.peach-pairing-spinner {5084  width: 12px;5085  height: 12px;5086  border: 1.5px solid var(--peach-t3);5087  border-top-color: var(--peach-accent);5088  border-radius: 50%;5089  animation: peach-spin 0.8s linear infinite;5090}50915092.peach-pairing-success-icon,5093.peach-pairing-error-icon,5094.peach-pairing-hero {5095  display: inline-flex;5096  align-items: center;5097  justify-content: center;5098}50995100/* Tag chips */5101.peach-tag-chip {5102  display: inline-flex;5103  align-items: center;5104  gap: 4px;5105  padding: 3px 8px;5106  border-radius: 999px;5107  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5108  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5109  color: var(--peach-t0);5110  font-family: "IBM Plex Mono", monospace;5111  font-size: 0.625rem;5112  letter-spacing: 0.04em;5113}51145115.peach-tag-chip-remove {5116  background: transparent;5117  border: none;5118  color: inherit;5119  opacity: 0.6;5120  cursor: pointer;5121  padding: 0;5122  font-size: 0.75rem;5123  line-height: 1;5124}51255126.peach-tag-chip-remove:hover {5127  opacity: 1;5128}51295130/* Tag input */5131.peach-tag-input-wrap {5132  border-bottom: 1px solid var(--peach-t3);5133}51345135.peach-tag-suggestions {5136  display: flex;5137  flex-wrap: wrap;5138  gap: 4px;5139  padding: 6px 0;5140}51415142.peach-tag-suggestion {5143  padding: 2px 8px;5144  border-radius: 999px;5145  border: 1px solid var(--peach-t3);5146  background: var(--peach-s2);5147  color: var(--peach-t1);5148  font-family: "IBM Plex Mono", monospace;5149  font-size: 0.625rem;5150  cursor: pointer;5151  transition: border-color 80ms ease, background 80ms ease;5152}51535154.peach-tag-suggestion:hover {5155  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5156  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5157}51585159/* Identity suggestions — shown below username/email inputs in new-entry form */5160@keyframes peach-suggest-in {5161  from { opacity: 0; transform: translateY(-4px); }5162  to   { opacity: 1; transform: none; }5163}51645165.peach-identity-suggestions {5166  display: flex;5167  flex-direction: column;5168  gap: 1px;5169  margin-top: 4px;5170  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5171}51725173.peach-identity-filter-row {5174  display: flex;5175  align-items: center;5176  gap: 4px;5177  padding: 2px 0 5px;5178}51795180.peach-identity-collapse-btn {5181  margin-left: auto;5182  background: transparent;5183  border: none;5184  cursor: pointer;5185  color: var(--peach-t3);5186  padding: 2px 4px;5187  display: flex;5188  align-items: center;5189  line-height: 0;5190  border-radius: 3px;5191  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5192}51935194.peach-identity-collapse-btn:hover {5195  color: var(--peach-t1);5196}51975198.peach-identity-collapse-btn.is-collapsed {5199  transform: rotate(-90deg);5200}52015202.peach-identity-rows {5203  display: grid;5204  grid-template-rows: 1fr;5205  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5206}52075208.peach-identity-rows.is-collapsed {5209  grid-template-rows: 0fr;5210}52115212.peach-identity-rows-inner {5213  overflow-y: auto;5214  min-height: 0;5215  max-height: 148px;5216  scrollbar-width: thin;5217  scrollbar-color: var(--peach-t3) transparent;5218  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5219  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5220}52215222.peach-identity-rows-inner::-webkit-scrollbar {5223  width: 4px;5224}52255226.peach-identity-rows-inner::-webkit-scrollbar-track {5227  background: transparent;5228}52295230.peach-identity-rows-inner::-webkit-scrollbar-thumb {5231  background: var(--peach-t3);5232  border-radius: 2px;5233}52345235.peach-identity-filter-pill {5236  padding: 2px 7px;5237  border-radius: 999px;5238  border: 1px solid var(--peach-t3);5239  background: transparent;5240  color: var(--peach-t2);5241  font-family: "IBM Plex Mono", monospace;5242  font-size: 0.6rem;5243  cursor: pointer;5244  transition: border-color 80ms, background 80ms, color 80ms;5245}52465247.peach-identity-filter-pill.is-on {5248  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5249  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5250  color: var(--peach-accent);5251}52525253.peach-identity-suggestion {5254  display: flex;5255  align-items: center;5256  gap: 6px;5257  width: 100%;5258  padding: 4px 6px;5259  border-radius: 5px;5260  border: none;5261  background: transparent;5262  cursor: pointer;5263  text-align: left;5264  transition: background 80ms ease;5265}52665267.peach-identity-suggestion:hover,5268.peach-identity-suggestion:focus {5269  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5270  outline: none;5271}52725273.peach-identity-suggestion-value {5274  font-family: "IBM Plex Mono", monospace;5275  font-size: 0.7rem;5276  color: var(--peach-t1);5277  overflow: hidden;5278  text-overflow: ellipsis;5279  white-space: nowrap;5280  flex: 1;5281  min-width: 0;5282}52835284.peach-identity-suggestion-type {5285  font-family: "IBM Plex Mono", monospace;5286  font-size: 0.55rem;5287  font-weight: 600;5288  flex-shrink: 0;5289  padding: 1px 4px;5290  border-radius: 3px;5291}52925293.peach-identity-suggestion-type--email {5294  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5295  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5296}52975298.peach-identity-suggestion-type--username {5299  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5300  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5301}53025303.peach-identity-suggestion-meta {5304  font-family: "IBM Plex Mono", monospace;5305  font-size: 0.6rem;5306  color: var(--peach-t3);5307  flex-shrink: 0;5308}53095310/* Tag filter strip */5311.peach-tag-filter-strip {5312  border-bottom: 1px solid var(--peach-t3);5313  flex-shrink: 0;5314}53155316.peach-tag-filter-chip {5317  display: inline-flex;5318  align-items: center;5319  padding: 4px 10px;5320  border-radius: 999px;5321  border: 1px solid var(--peach-t3);5322  background: transparent;5323  color: var(--peach-t2);5324  font-family: "IBM Plex Mono", monospace;5325  font-size: 0.5625rem;5326  letter-spacing: 0.06em;5327  text-transform: uppercase;5328  cursor: pointer;5329  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5330  white-space: nowrap;5331}53325333.peach-tag-filter-chip:hover {5334  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5335  color: var(--peach-t1);5336}53375338.peach-tag-filter-chip.is-selected {5339  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5340  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5341  color: var(--peach-t0);5342}53435344/* ─────────────────────────────────────────────────────────────────────────5345   v1.4.12 additions5346   ─────────────────────────────────────────────────────────────────────── */53475348/* Sort bar */5349.peach-sort-bar {5350  display: flex;5351  align-items: center;5352  gap: 4px;5353  padding: 5px 12px;5354  border-bottom: 1px solid var(--peach-t3);5355  flex-shrink: 0;5356  overflow-x: auto;5357  scrollbar-width: none;5358}53595360.peach-sort-btn {5361  padding: 2px 9px;5362  border-radius: 999px;5363  border: 1px solid transparent;5364  background: transparent;5365  color: var(--peach-t2);5366  font-family: "IBM Plex Mono", monospace;5367  font-size: 0.5625rem;5368  letter-spacing: 0.07em;5369  text-transform: uppercase;5370  cursor: pointer;5371  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5372  white-space: nowrap;5373}53745375.peach-sort-btn:hover {5376  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5377  color: var(--peach-t1);5378}53795380.peach-sort-btn.is-active {5381  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5382  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5383  color: var(--peach-t0);5384}53855386.peach-sort-domain-hint {5387  margin-left: auto;5388  font-family: "IBM Plex Mono", monospace;5389  font-size: 0.5625rem;5390  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5391  white-space: nowrap;5392  overflow: hidden;5393  text-overflow: ellipsis;5394  max-width: 110px;5395}53965397/* Tab-match badge on entry rows */5398.peach-tab-match-badge {5399  display: inline-block;5400  width: 6px;5401  height: 6px;5402  border-radius: 50%;5403  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5404  margin-left: 5px;5405  vertical-align: middle;5406  flex-shrink: 0;5407  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5408}54095410.peach-entry-row.is-tab-match {5411  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5412  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5413}54145415.peach-entry-row.is-tab-match:hover {5416  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5417}54185419/* Entry list stagger entrance */5420@keyframes peach-entry-fadein {5421  from { opacity: 0; transform: translateY(4px); }5422  to   { opacity: 1; transform: translateY(0); }5423}54245425.peach-vault-list .peach-entry-row {5426  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5427  content-visibility: auto;5428  contain-intrinsic-size: auto 44px;5429}54305431/* Button press micro-interaction */5432.peach-btn:active {5433  transform: scale(0.95);5434  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5435}54365437.peach-sort-btn:active,5438.peach-tag-filter-chip:active {5439  transform: scale(0.93);5440  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5441}54425443/* Password strength bar (Lock view + shared) */5444.peach-password-strength {5445  display: flex;5446  align-items: center;5447  gap: 8px;5448  margin-top: 6px;5449}54505451.peach-strength-bar {5452  flex: 1;5453  height: 3px;5454  border-radius: 2px;5455  background: var(--peach-t3);5456  overflow: hidden;5457}54585459.peach-strength-fill {5460  height: 100%;5461  border-radius: 2px;5462  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5463              background 300ms ease;5464}54655466.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5467.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5468.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5469.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }54705471.peach-strength-label {5472  font-family: "IBM Plex Mono", monospace;5473  font-style: italic;5474  font-size: 0.5625rem;5475  font-weight: 300;5476  letter-spacing: 0.06em;5477  color: var(--peach-t2);5478  min-width: 36px;5479  text-align: right;5480}54815482.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5483.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5484.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5485.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }54865487/* Duress form */5488.peach-duress-status {5489  padding: 2px 8px;5490  border-radius: 999px;5491  border: 1px solid var(--peach-t3);5492  font-family: "IBM Plex Mono", monospace;5493  font-size: 0.5625rem;5494  letter-spacing: 0.07em;5495  text-transform: uppercase;5496  color: var(--peach-t2);5497  flex-shrink: 0;5498}54995500.peach-duress-status.is-active {5501  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5502  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5503  color: var(--peach-t0);5504}55055506.peach-duress-form {5507  padding: 8px 0 4px;5508  display: flex;5509  flex-direction: column;5510  gap: 6px;5511}55125513.peach-duress-form .peach-label {5514  margin-top: 4px;5515}55165517.peach-duress-actions {5518  display: flex;5519  gap: 6px;5520  align-items: center;5521  margin-top: 4px;5522}55235524.peach-duress-actions .peach-btn:first-child {5525  margin-right: auto;5526}55275528/* Improved overlay spring entrance */5529.peach-overlay-view.ov-enter-up {5530  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5531}55325533@keyframes ov-enter-up-spring {5534  from { opacity: 0; transform: translateY(16px) scale(0.98); }5535  to   { opacity: 1; transform: translateY(0) scale(1); }5536}55375538.peach-overlay-view.ov-enter-right {5539  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5540}55415542@keyframes ov-enter-right-spring {5543  from { opacity: 0; transform: translateX(18px) scale(0.98); }5544  to   { opacity: 1; transform: translateX(0) scale(1); }5545}55465547/* ── Onboarding-mode restore screens (file import) ── */5548/* Used when MainImportView renders during onboarding (no vault yet).5549   Animates like a lock-screen transition. */5550.peach-lock-view {5551  position: absolute;5552  inset: 0;5553  display: flex;5554  flex-direction: column;5555  background:5556    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5557    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5558    var(--peach-bg);5559  z-index: 2;5560  overflow: hidden;5561  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5562}55635564.peach-lock-view-header {5565  display: flex;5566  align-items: center;5567  justify-content: space-between;5568  padding: 16px 18px 12px;5569  flex-shrink: 0;5570}55715572/* ───────── Settings: auto-lock select ───────── */5573.peach-settings-select {5574  font-family: "IBM Plex Mono", monospace;5575  font-size: 0.6875rem;5576  background: transparent;5577  border: 1px solid var(--peach-t3);5578  border-radius: 4px;5579  color: var(--peach-t1);5580  padding: 3px 6px;5581  cursor: pointer;5582  outline: none;5583}5584.peach-settings-select:focus {5585  border-color: var(--peach-accent);5586}55875588/* ───────── Duress status pill (new polished) ───────── */5589.peach-duress-status-pill {5590  font-family: "IBM Plex Mono", monospace;5591  font-size: 0.5625rem;5592  text-transform: uppercase;5593  letter-spacing: 0.12em;5594  padding: 2px 8px;5595  border-radius: 12px;5596  background: var(--peach-t3);5597  color: var(--peach-t2);5598  flex-shrink: 0;5599}5600.peach-duress-status-pill.is-active {5601  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5602  color: var(--peach-accent);5603}56045605/* ───────── Entry advanced disclosure (canary) ───────── */5606.peach-entry-advanced {5607  margin-top: 12px;5608  border-top: 1px solid var(--peach-t3);5609  padding-top: 10px;5610  position: relative;5611  z-index: 1;5612}5613.peach-entry-advanced-toggle {5614  display: flex;5615  align-items: center;5616  justify-content: space-between;5617  width: 100%;5618  background: transparent;5619  border: none;5620  cursor: pointer;5621  padding: 0;5622  color: var(--peach-t2);5623}5624.peach-canary-section {5625  margin-top: 10px;5626  display: grid;5627  gap: 6px;5628}56295630/* ───────── Import: merge/replace radio choices ───────── */5631.peach-import-choice {5632  display: flex;5633  align-items: flex-start;5634  gap: 10px;5635  padding: 8px 10px;5636  border: 1px solid var(--peach-t3);5637  border-radius: 10px;5638  cursor: pointer;5639  margin-bottom: 6px;5640  transition: border-color 120ms ease, background 120ms ease;5641}5642.peach-import-choice:hover {5643  border-color: var(--peach-accent);5644}5645.peach-import-choice input[type="radio"] {5646  margin-top: 3px;5647  accent-color: var(--peach-accent);5648  flex-shrink: 0;5649}5650.peach-import-choice-main {5651  display: flex;5652  flex-direction: column;5653  gap: 2px;5654  min-width: 0;5655}5656.peach-import-choice-label {5657  font-size: 0.75rem;5658  color: var(--peach-t0);5659}5660.peach-import-choice-sub {5661  font-size: 0.6875rem;5662  color: var(--peach-t2);5663  line-height: 1.5;5664}56655666/* ───────── Export: success confirmation strip ───────── */5667.peach-export-success {5668  display: flex;5669  align-items: flex-start;5670  gap: 10px;5671  padding: 12px;5672  border-radius: 12px;5673  border: 1px solid rgba(150, 175, 110, 0.3);5674  background: rgba(150, 175, 110, 0.08);5675  color: var(--peach-t0);5676  font-size: 0.75rem;5677  line-height: 1.55;5678}5679.peach-export-success-check {5680  color: rgba(150, 175, 110, 0.9);5681  font-size: 0.875rem;5682  flex-shrink: 0;5683}56845685/* ── Trash view ──────────────────────────────────────────────────────── */5686.peach-trash-entry-row {5687  display: flex;5688  align-items: center;5689  justify-content: space-between;5690  gap: 8px;5691  padding: 8px 0;5692  border-bottom: 1px solid var(--peach-border);5693}5694.peach-trash-entry-info {5695  flex: 1;5696  min-width: 0;5697  display: flex;5698  flex-direction: column;5699  gap: 2px;5700}5701.peach-trash-entry-title {5702  font-size: 0.8125rem;5703  color: var(--peach-t0);5704  overflow: hidden;5705  text-overflow: ellipsis;5706  white-space: nowrap;5707}5708.peach-trash-entry-meta {5709  font-family: var(--font-mono);5710  font-size: 0.5625rem;5711  color: var(--peach-t2);5712  letter-spacing: 0.04em;5713}5714.peach-trash-entry-actions {5715  display: flex;5716  align-items: center;5717  gap: 4px;5718  flex-shrink: 0;5719}5720.peach-trash-delete-btn {5721  background: transparent;5722  border: 0;5723  color: var(--peach-t3);5724  font-size: 1rem;5725  line-height: 1;5726  cursor: pointer;5727  padding: 2px 5px;5728  transition: color 0.15s;5729}5730.peach-trash-delete-btn:hover { color: var(--peach-breach); }5731.peach-trash-list {5732  overflow-y: auto;5733}5734.peach-trash-footer {5735  display: flex;5736  align-items: center;5737  gap: 8px;5738  padding: 8px 0 0;5739  border-top: 1px solid var(--peach-border);5740  margin-top: 4px;5741}5742.peach-trash-purge-all {5743  background: transparent;5744  border: 0;5745  color: var(--peach-t3);5746  font-size: 0.625rem;5747  cursor: pointer;5748  padding: 4px 0;5749  letter-spacing: 0.03em;5750  transition: color 0.2s;5751}5752.peach-trash-purge-all:hover { color: var(--peach-breach); }5753.peach-trash-purge-confirm-label {5754  font-size: 0.625rem;5755  color: var(--peach-t1);5756  flex: 1;5757}57585759/* ── Settings shortcuts grid ─────────────────────────────────────────── */5760.peach-shortcuts-grid {5761  display: grid;5762  grid-template-columns: auto 1fr;5763  gap: 6px 12px;5764  align-items: center;5765  padding: 4px 0;5766}5767.peach-shortcut-key {5768  font-family: var(--font-mono);5769  font-size: 0.625rem;5770  color: var(--peach-t0);5771  background: var(--peach-t3);5772  border-radius: 4px;5773  padding: 2px 6px;5774  white-space: nowrap;5775  text-align: center;5776}5777.peach-shortcut-desc {5778  font-size: 0.6875rem;5779  color: var(--peach-t1);5780}57815782/* ── Sort bar trash button ───────────────────────────────────────────── */5783.peach-sort-trash-btn {5784  display: flex;5785  align-items: center;5786  justify-content: center;5787  padding: 3px 5px;5788  background: transparent;5789  border: none;5790  cursor: pointer;5791  color: var(--peach-t2);5792  border-radius: 4px;5793  transition: color 140ms ease, background 140ms ease;5794}5795.peach-sort-trash-btn:hover {5796  color: var(--peach-t1);5797  background: var(--peach-t3);5798}5799.peach-sort-trash-btn.is-active {5800  color: var(--peach-accent);5801}58025803/* Accent color picker */5804.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5805.peach-accent-picker {5806  display: flex;5807  flex-wrap: wrap;5808  gap: 7px;5809  padding: 2px 0;5810}5811.peach-accent-swatch {5812  width: 22px;5813  height: 22px;5814  border-radius: 50%;5815  border: 2px solid transparent;5816  cursor: pointer;5817  padding: 0;5818  transition: transform 100ms;5819  outline-offset: 2px;5820}5821.peach-accent-swatch:hover { transform: scale(1.15); }5822.peach-accent-swatch.is-active {5823  border-color: var(--peach-t0);5824  transform: scale(1.1);5825}58265827/* Display font picker — swatch shows an "Aa" preview rendered with each5828   font option so the user can see what they're picking before they pick. */5829.peach-settings-row--font { align-items: flex-start; padding-top: 10px; }5830.peach-font-picker {5831  display: flex;5832  flex-wrap: wrap;5833  gap: 6px;5834  padding: 2px 0;5835  flex: 1;5836  justify-content: flex-end;5837}5838.peach-font-swatch {5839  display: flex;5840  flex-direction: column;5841  align-items: center;5842  gap: 2px;5843  padding: 4px 8px;5844  background: transparent;5845  border: 1px solid var(--peach-t3);5846  border-radius: 6px;5847  cursor: pointer;5848  transition: border-color 100ms, background 100ms;5849  min-width: 56px;5850}5851.peach-font-swatch:hover {5852  border-color: var(--peach-accent-dim);5853  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5854}5855.peach-font-swatch.is-active {5856  border-color: var(--peach-accent);5857  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5858}5859.peach-font-swatch-glyph {5860  font-size: 18px;5861  line-height: 1;5862  color: var(--peach-t0);5863}5864.peach-font-swatch[data-font-preview="cormorant-italic"] .peach-font-swatch-glyph {5865  font-family: "Cormorant Garamond", serif;5866  font-style: italic;5867  font-weight: 400;5868}5869.peach-font-swatch[data-font-preview="cormorant"] .peach-font-swatch-glyph {5870  font-family: "Cormorant Garamond", serif;5871  font-style: normal;5872  font-weight: 400;5873}5874.peach-font-swatch[data-font-preview="inter"] .peach-font-swatch-glyph {5875  font-family: "Inter Variable", "Inter", sans-serif;5876  font-style: normal;5877  font-weight: 400;5878}5879.peach-font-swatch[data-font-preview="system"] .peach-font-swatch-glyph {5880  font-family: system-ui, -apple-system, sans-serif;5881  font-style: normal;5882  font-weight: 400;5883}5884.peach-font-swatch-name {5885  font-family: var(--font-mono);5886  font-size: 0.5rem;5887  letter-spacing: 0.06em;5888  color: var(--peach-t2);5889  text-transform: lowercase;5890}58915892.peach-pill-group {5893  display: flex;5894  gap: 6px;5895}5896.peach-pill-group .peach-btn.is-active {5897  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5898  border-color: var(--peach-accent);5899  color: var(--peach-t0);5900}59015902/* ── Card entry styles ───────────────────────────────────────── */5903.peach-card-number {5904  font-family: var(--peach-mono);5905  letter-spacing: 0.08em;5906}59075908.peach-card-network-badge {5909  font-size: 0.625rem;5910  padding: 1px 5px;5911  border-radius: 4px;5912  border: 0.5px solid var(--peach-border);5913  color: var(--peach-text-dim);5914  margin-left: 6px;5915  vertical-align: middle;5916}59175918.peach-card-expiry-row {5919  display: flex;5920  align-items: center;5921  gap: 8px;5922}59235924.peach-card-expiry-sep {5925  color: var(--peach-text-dim);5926}59275928/* ── Pro tier — upgrade screen ──────────────────────────────── */5929.peach-pro-mark {5930  font-size: 0.5625rem;5931  color: var(--peach-accent);5932  margin-left: 6px;5933  vertical-align: super;5934  opacity: 0.7;5935}59365937.peach-pro-mini-badge {5938  display: block;5939  font-size: 0.625rem;5940  font-style: italic;5941  color: var(--peach-accent);5942  letter-spacing: 0.04em;5943  margin-top: -2px;5944  padding-left: 2px;5945  opacity: 0.85;5946  text-align: center;5947}59485949.peach-wordmark-stack {5950  display: inline-flex;5951  flex-direction: column;5952  align-items: center;5953}59545955/* ── Pro tier — upgrade page ─────────────────────────────────── */5956.peach-pro-upgrade {5957  display: flex;5958  flex-direction: column;5959  align-items: stretch;5960  gap: 10px;5961  padding: 0 4px 8px;5962}59635964.peach-pro-upgrade-hero {5965  display: flex;5966  flex-direction: column;5967  align-items: center;5968  gap: 4px;5969  padding: 10px 0 6px;5970}59715972.peach-pro-upgrade-mark-wrap {5973  display: flex;5974  align-items: center;5975  justify-content: center;5976  margin-bottom: 2px;5977}59785979.peach-pro-upgrade-mark {5980  width: 38px;5981  height: 38px;5982  opacity: 0.9;5983}59845985.peach-pro-upgrade-title {5986  font-family: var(--font-display, var(--font-ui));5987  font-size: 22px;5988  margin: 0;5989  color: var(--peach-t0);5990  letter-spacing: 0.01em;5991}59925993.peach-pro-upgrade-tagline {5994  margin: 0;5995  font-style: italic;5996  color: var(--peach-t2);5997  font-size: 0.6875rem;5998}59996000.peach-pro-features {6001  display: flex;6002  flex-direction: column;6003  gap: 8px;6004  border-top: 1px solid var(--peach-border);6005  border-bottom: 1px solid var(--peach-border);6006  padding: 10px 4px;6007}60086009.peach-pro-feature {6010  display: flex;6011  gap: 9px;6012  align-items: baseline;6013}60146015.peach-pro-feature-mark {6016  color: var(--peach-accent);6017  font-size: 0.6875rem;6018  flex-shrink: 0;6019  display: inline-block;6020  transform-origin: center;6021  opacity: 0.8;6022}60236024.peach-pro-feature-text {6025  display: flex;6026  flex-direction: column;6027  gap: 1px;6028}60296030.peach-pro-feature-name {6031  font-size: 0.75rem;6032  color: var(--peach-t0);6033}60346035.peach-pro-feature-desc {6036  font-size: 0.625rem;6037  color: var(--peach-t2);6038}60396040.peach-pro-feature.is-highlighted .peach-pro-feature-mark {6041  animation: peach-pulse-accent 600ms ease-out forwards;6042}60436044@keyframes peach-pulse-accent {6045  0%   { opacity: 1; transform: scale(1.4); }6046  100% { opacity: 0.7; transform: scale(1); }6047}60486049.peach-pro-upgrade-actions {6050  display: flex;6051  flex-direction: column;6052  align-items: center;6053  gap: 8px;6054  padding-top: 2px;6055}60566057.peach-pro-pricing {6058  margin: 0;6059  text-align: center;6060  font-size: 0.6875rem;6061  color: var(--peach-t2);6062  letter-spacing: 0.04em;6063}60646065.peach-pro-upgrade-cta {6066  align-self: center;6067  text-align: center;6068  text-decoration: none;6069  display: block;6070  padding: 9px 32px;6071  font-size: 0.8125rem;6072  min-width: 180px;6073}60746075.peach-pro-key-divider {6076  display: flex;6077  align-items: center;6078  gap: 8px;6079  width: 100%;6080  color: var(--peach-t3);6081  font-size: 0.625rem;6082  letter-spacing: 0.08em;6083}60846085.peach-pro-key-divider::before,6086.peach-pro-key-divider::after {6087  content: "";6088  flex: 1;6089  height: 1px;6090  background: var(--peach-border);6091}60926093.peach-pro-key-link {6094  background: transparent;6095  border: 1px solid var(--peach-border);6096  border-radius: 8px;6097  color: var(--peach-t1);6098  font-size: 0.75rem;6099  cursor: pointer;6100  align-self: stretch;6101  padding: 8px 12px;6102  text-align: center;6103  transition: border-color 0.2s, color 0.2s;6104}61056106.peach-pro-key-link:hover {6107  border-color: var(--peach-accent);6108  color: var(--peach-accent);6109}61106111/* ── Pro tier — key ceremony ─────────────────────────────────── */6112.peach-pro-key-ceremony {6113  display: flex;6114  flex-direction: column;6115  align-items: center;6116  gap: 12px;6117  padding: 20px 4px 16px;6118}61196120.peach-pro-key-ceremony .peach-lock-rune-string {6121  font-size: 1rem;6122  gap: 12px;6123  flex: 0;6124  justify-content: center;6125}61266127.peach-pro-key-ceremony-label {6128  margin: 0;6129  font-size: 0.6875rem;6130  color: var(--peach-t2);6131  font-style: italic;6132  letter-spacing: 0.04em;6133}61346135.peach-pro-key-input {6136  font-family: var(--font-mono, monospace);6137  letter-spacing: 0.06em;6138  text-align: center;6139  width: 100%;6140  box-sizing: border-box;6141}61426143.peach-pro-key-error {6144  margin: 0;6145  font-size: 0.75rem;6146  text-align: center;6147  color: var(--peach-breach, #e55);6148  padding: 0;6149}61506151.peach-pro-key-activate {6152  width: 100%;6153  text-align: center;6154  box-sizing: border-box;6155  padding: 10px 20px;6156  font-size: 0.8125rem;6157}61586159.peach-pro-key-cancel {6160  background: transparent;6161  border: 0;6162  color: var(--peach-t2);6163  font-size: 0.6875rem;6164  cursor: pointer;6165  padding: 2px 8px;6166  transition: color 0.2s;6167}61686169.peach-pro-key-cancel:hover { color: var(--peach-accent); }61706171/* ── Pro tier — active state ─────────────────────────────────── */6172.peach-pro-active {6173  display: flex;6174  flex-direction: column;6175  align-items: center;6176  gap: 0;6177  padding: 8px 4px 16px;6178  min-height: 280px;6179}61806181.peach-pro-active-hero {6182  display: flex;6183  flex-direction: column;6184  align-items: center;6185  gap: 6px;6186  padding: 20px 0 22px;6187}61886189.peach-pro-active-mark-wrap {6190  display: flex;6191  align-items: center;6192  justify-content: center;6193  margin-bottom: 4px;6194}61956196.peach-pro-active-mark {6197  width: 60px;6198  height: 60px;6199  filter:6200    drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 55%, transparent))6201    drop-shadow(0 0 26px color-mix(in srgb, var(--peach-accent) 22%, transparent));6202}62036204.peach-pro-active-title {6205  font-family: var(--font-display, var(--font-ui));6206  font-size: 26px;6207  margin: 0;6208  color: var(--peach-t0);6209  letter-spacing: 0.01em;6210}62116212.peach-pro-active-since {6213  margin: 0;6214  font-size: 0.6875rem;6215  color: var(--peach-t2);6216  font-style: italic;6217}62186219.peach-pro-active-features {6220  display: flex;6221  flex-direction: column;6222  gap: 8px;6223  width: 100%;6224  padding: 14px 8px 0;6225  border-top: 1px solid var(--peach-border);6226  flex: 1;6227}62286229.peach-pro-active-feature {6230  display: flex;6231  align-items: center;6232  gap: 9px;6233}62346235.peach-pro-active-feature-mark {6236  color: var(--peach-accent);6237  font-size: 0.625rem;6238  opacity: 0.65;6239  flex-shrink: 0;6240}62416242.peach-pro-active-feature-name {6243  font-size: 0.75rem;6244  color: var(--peach-t1);6245}62466247.peach-pro-deactivate {6248  align-self: center;6249  background: transparent;6250  border: 0;6251  color: var(--peach-t3);6252  font-size: 0.625rem;6253  cursor: pointer;6254  padding: 8px 0 0;6255  margin-top: 16px;6256  letter-spacing: 0.03em;6257  transition: color 0.2s;6258}62596260.peach-pro-deactivate:hover { color: var(--peach-t2); }62616262.peach-pro-deactivate:disabled {6263  opacity: 0.5;6264  cursor: default;6265}62666267/* ── Pro advanced health remediation queue ──────────────────── */6268.peach-health-pro-queue {6269  display: flex;6270  flex-direction: column;6271  gap: 10px;6272  padding: 12px;6273  margin: 0 0 12px;6274  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6275  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6276  border-radius: 10px;6277}62786279.peach-health-pro-queue-head {6280  display: flex;6281  justify-content: space-between;6282  align-items: baseline;6283}62846285.peach-health-pro-queue-title {6286  font-size: 0.75rem;6287  font-weight: 500;6288  letter-spacing: 0.04em;6289  text-transform: uppercase;6290  color: var(--peach-accent);6291}62926293.peach-health-pro-queue-score {6294  font-size: 0.6875rem;6295  color: var(--peach-t2);6296}62976298.peach-health-pro-row {6299  display: flex;6300  gap: 10px;6301  align-items: center;6302  padding: 8px 0;6303  border-top: 1px solid var(--peach-border);6304}63056306.peach-health-pro-row-info {6307  flex: 1;6308  display: flex;6309  flex-direction: column;6310  gap: 4px;6311  min-width: 0;6312}63136314.peach-health-pro-row-name {6315  font-size: 0.8125rem;6316  color: var(--peach-t0);6317  overflow: hidden;6318  text-overflow: ellipsis;6319  white-space: nowrap;6320}63216322.peach-health-pro-row-meta {6323  font-size: 0.6875rem;6324  color: var(--peach-t2);6325}63266327.peach-health-pro-bar {6328  height: 2px;6329  background: var(--peach-border);6330  border-radius: 2px;6331  overflow: hidden;6332  margin-top: 2px;6333}63346335.peach-health-pro-bar-fill {6336  height: 100%;6337  background: var(--peach-accent);6338  transition: width 200ms ease-out;6339}63406341/* ── Pro activation celebration ── */6342@keyframes peach-pro-bloom {6343  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6344  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6345                 drop-shadow(0 0 48px var(--peach-glow)); }6346  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6347}63486349@keyframes peach-pro-wordmark-in {6350  from { opacity: 0; transform: translateY(4px); }6351  to   { opacity: 1; transform: translateY(0); }6352}63536354@keyframes peach-pro-fade-out {6355  from { opacity: 1; }6356  to   { opacity: 0; }6357}63586359.peach-pro-celebration {6360  background:6361    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6362    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6363    var(--peach-bg);6364  border: 1px solid var(--peach-t3);6365  box-shadow:6366    0 2px 8px rgba(0,0,0,0.55),6367    0 14px 48px rgba(0,0,0,0.7),6368    0 0 0 1px rgba(240,232,216,0.04);6369  overflow: hidden;6370  width: 320px;6371  height: 520px;6372  display: flex;6373  flex-direction: column;6374  align-items: center;6375  justify-content: center;6376  gap: 8px;6377  padding: 32px 24px;6378  text-align: center;6379}63806381.peach-pro-celebration.is-leaving {6382  animation: peach-pro-fade-out 400ms ease forwards;6383}63846385.peach-pro-bloom-target {6386  display: flex;6387  align-items: center;6388  justify-content: center;6389  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6390  margin-bottom: 12px;6391}63926393.peach-pro-bloom-icon {6394  width: 48px;6395  height: 48px;6396}63976398.peach-pro-wordmark {6399  font-family: var(--font-display);6400  font-size: 22px;6401  font-style: italic;6402  font-weight: 400;6403  color: var(--peach-accent);6404  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6405}64066407.peach-pro-thankyou {6408  font-size: 0.75rem;6409  font-style: italic;6410  color: var(--peach-t2);6411  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6412}641364146415/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6416.peach-pro-notice-banner {6417  display: flex;6418  align-items: center;6419  gap: 8px;6420  padding: 7px 12px;6421  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6422  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6423  font-size: 0.6875rem;6424  color: var(--peach-t2);6425  font-family: "IBM Plex Mono", monospace;6426  flex-shrink: 0;6427}64286429.peach-pro-notice-link {6430  background: none;6431  border: none;6432  padding: 0;6433  cursor: pointer;6434  font-size: 0.6875rem;6435  color: var(--peach-accent);6436  font-family: "IBM Plex Mono", monospace;6437  margin-left: auto;6438  white-space: nowrap;6439}64406441.peach-pro-notice-close {6442  background: none;6443  border: none;6444  padding: 0 0 0 4px;6445  cursor: pointer;6446  font-size: 0.625rem;6447  color: var(--peach-t3);6448  line-height: 1;6449}64506451/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6452   Renders over whatever view is showing. 60-second expiry; the popup ticks6453   the countdown each second and clears the banner when it hits zero. */6454.peach-pair-request-banner {6455  display: flex;6456  flex-direction: column;6457  gap: 8px;6458  padding: 10px 12px;6459  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6460  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6461  font-family: "IBM Plex Mono", monospace;6462  flex-shrink: 0;6463}64646465.peach-pair-toast {6466  padding: 8px 12px;6467  font-family: "IBM Plex Mono", monospace;6468  font-size: 0.75rem;6469  color: var(--peach-t1);6470  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6471  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6472  flex-shrink: 0;6473  text-align: center;6474}64756476.peach-pair-toast strong {6477  color: var(--peach-t0);6478  font-weight: 500;6479}64806481.peach-pair-request-header {6482  display: flex;6483  align-items: center;6484  gap: 8px;6485  font-size: 0.75rem;6486  color: var(--peach-t1);6487}64886489.peach-pair-request-mark {6490  font-size: 0.875rem;6491  display: inline-flex;6492  align-items: center;6493}64946495.peach-pair-request-icon {6496  width: 1em;6497  height: 1em;6498}64996500.peach-pair-request-title {6501  font-weight: 600;6502  color: var(--peach-t0);6503}65046505.peach-pair-request-countdown {6506  margin-left: auto;6507  font-variant-numeric: tabular-nums;6508  color: var(--peach-t2);6509  font-size: 0.6875rem;6510}65116512.peach-pair-request-body {6513  margin: 0;6514  font-size: 0.75rem;6515  color: var(--peach-t1);6516  line-height: 1.4;6517}65186519.peach-pair-request-body strong {6520  color: var(--peach-t0);6521  font-weight: 600;6522}65236524.peach-pair-request-actions {6525  display: flex;6526  gap: 8px;6527  justify-content: flex-end;6528}65296530/* ─── First-run onboarding ──────────────────────────────────────────────6531   Three-card welcome shown once before vault creation. The PeachScript6532   rune background drifts behind everything at very low opacity — it's6533   atmosphere, not focus. The cards themselves use the same panel6534   language as the rest of the popup so the transition into NewVault is6535   continuous, not a jarring switch of visual register. */65366537.peach-onboarding {6538  position: relative;6539  display: flex;6540  flex-direction: column;6541  width: 100%;6542  height: 100%;6543  padding: 16px 16px 18px;6544  box-sizing: border-box;6545  overflow: hidden;6546  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6547}65486549.peach-onboarding.is-completing {6550  animation: peach-onboard-exit 200ms ease-out forwards;6551}65526553.peach-rune-background {6554  position: absolute;6555  inset: 0;6556  width: 100%;6557  height: 100%;6558  pointer-events: none;6559  z-index: 0;6560  transition: opacity 500ms ease-out;6561}65626563.peach-onboarding.is-completing .peach-rune-background {6564  opacity: 0;6565}65666567.peach-onboarding-header {6568  position: relative;6569  z-index: 1;6570  display: flex;6571  align-items: center;6572  margin-bottom: 14px;6573}65746575.peach-onboarding-card {6576  position: relative;6577  z-index: 1;6578  flex: 1;6579  display: flex;6580  flex-direction: column;6581  gap: 10px;6582  padding: 22px 20px;6583  border-radius: 16px;6584  border: 1px solid var(--peach-t3);6585  background:6586    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6587  backdrop-filter: blur(3px);6588  -webkit-backdrop-filter: blur(3px);6589  box-shadow:6590    inset 0 1px 0 rgba(240, 232, 216, 0.04),6591    0 12px 28px rgba(0, 0, 0, 0.12);6592  cursor: pointer;6593  user-select: none;6594  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6595}65966597.peach-onboarding-card.is-exiting {6598  animation: peach-card-out 120ms ease-in forwards;6599  pointer-events: none;6600}66016602.peach-onboarding-card-headline {6603  margin: 0;6604  font-family: var(--font-display);6605  font-style: italic;6606  font-weight: 400;6607  font-size: 22px;6608  line-height: 1.05;6609  color: var(--peach-t0);6610  white-space: pre-line;6611}66126613.peach-onboarding-divider {6614  margin: 4px 0 6px;6615  border: 0;6616  border-top: 1px solid var(--peach-t3);6617  width: 100%;6618}66196620.peach-onboarding-body {6621  margin: 0;6622  font-size: 0.8125rem;6623  line-height: 1.6;6624  color: var(--peach-t1);6625}66266627.peach-onboarding-warning {6628  display: flex;6629  align-items: flex-start;6630  gap: 8px;6631  margin: 6px 0 0;6632  padding-top: 8px;6633  border-top: 1px dashed var(--peach-t3);6634  font-size: 0.8125rem;6635  line-height: 1.5;6636  color: var(--peach-t1);6637}66386639.peach-onboarding-warning-icon {6640  color: var(--peach-accent);6641  font-size: 0.8125rem;6642  line-height: 1.5;6643  flex: 0 0 auto;6644}66456646.peach-onboarding-nav {6647  position: relative;6648  z-index: 1;6649  display: flex;6650  align-items: center;6651  justify-content: space-between;6652  margin-top: 12px;6653  padding: 0 4px;6654}66556656.peach-onboarding-dots {6657  display: flex;6658  align-items: center;6659  gap: 6px;6660}66616662.peach-onboarding-dot {6663  width: 6px;6664  height: 6px;6665  border-radius: 50%;6666  background: var(--peach-t2);6667  transition: width 200ms ease, height 200ms ease, background 200ms ease;6668}66696670.peach-onboarding-dot.is-active {6671  width: 8px;6672  height: 8px;6673  background: var(--peach-accent);6674}66756676.peach-onboarding-next {6677  background: none;6678  border: none;6679  padding: 4px 0;6680  cursor: pointer;6681  font-family: "IBM Plex Mono", monospace;6682  font-size: 0.6875rem;6683  letter-spacing: 0.04em;6684  color: var(--peach-t1);6685  transition: color 150ms ease;6686}66876688.peach-onboarding-next:hover {6689  color: var(--peach-t0);6690}66916692.peach-onboarding-next:disabled {6693  opacity: 0.5;6694  cursor: default;6695}66966697.peach-onboarding-back {6698  background: none;6699  border: none;6700  padding: 4px 0;6701  cursor: pointer;6702  font-family: "IBM Plex Mono", monospace;6703  font-size: 0.6875rem;6704  letter-spacing: 0.04em;6705  color: var(--peach-t2);6706  transition: color 150ms ease;6707}67086709.peach-onboarding-back:hover {6710  color: var(--peach-t0);6711}67126713.peach-onboarding-back:disabled {6714  opacity: 0.5;6715  cursor: default;6716}67176718/* Reserve back-button width on the first card so the dots stay centred */6719.peach-onboarding-back-spacer {6720  width: 44px;6721}67226723.peach-onboarding-mobile-card-buttons {6724  display: flex;6725  flex-direction: column;6726  gap: 8px;6727  margin-top: 16px;6728}67296730@keyframes peach-onboard-enter {6731  from { opacity: 0; transform: translateY(20px); }6732  to   { opacity: 1; transform: translateY(0); }6733}67346735@keyframes peach-onboard-exit {6736  from { opacity: 1; }6737  to   { opacity: 0; }6738}67396740@keyframes peach-card-in {6741  from { opacity: 0; transform: translateX(12px); }6742  to   { opacity: 1; transform: translateX(0); }6743}67446745@keyframes peach-card-out {6746  from { opacity: 1; transform: translateX(0); }6747  to   { opacity: 0; transform: translateX(-12px); }6748}67496750/* ─── New vault screen — matched to onboarding card language ─────────── */67516752.peach-newvault {6753  position: relative;6754  display: flex;6755  flex-direction: column;6756  gap: 12px;6757  padding: 16px 16px 18px;6758  overflow: hidden;6759}67606761/* Suppress the warm-blob ambient art inherited from .lock-screen — the6762   new vault card now carries the visual weight. */6763.peach-newvault::before {6764  content: none;6765}67666767.peach-newvault-header {6768  position: relative;6769  z-index: 2;6770  display: flex;6771  align-items: center;6772  gap: 10px;6773  margin-bottom: 2px;6774}67756776.peach-newvault-back {6777  display: inline-flex;6778  align-items: center;6779  gap: 4px;6780  background: transparent;6781  border: none;6782  color: var(--peach-t2);6783  font-family: "IBM Plex Mono", monospace;6784  font-size: 0.625rem;6785  letter-spacing: 0.06em;6786  cursor: pointer;6787  padding: 4px 6px;6788  border-radius: 6px;6789  transition: color 120ms ease, background 120ms ease;6790}67916792.peach-newvault-back:hover {6793  color: var(--peach-t0);6794  background: rgba(240, 232, 216, 0.04);6795}67966797.peach-newvault-mark {6798  position: absolute;6799  right: -12px;6800  top: 6px;6801  width: 110px;6802  height: 110px;6803  pointer-events: none;6804  opacity: 0.10;6805  filter: saturate(0.9);6806  z-index: 0;6807}6808.peach-newvault-mark-art {6809  width: 100%;6810  height: 100%;6811}6812.peach-newvault-mark-art path:nth-child(2),6813.peach-newvault-mark-art path:nth-child(3) {6814  stroke: rgba(123, 144, 96, 0.88);6815  fill: rgba(123, 144, 96, 0.88);6816}68176818.peach-newvault-card {6819  position: relative;6820  z-index: 1;6821  display: flex;6822  flex-direction: column;6823  gap: 12px;6824  padding: 22px 20px 18px;6825  border-radius: 16px;6826  border: 1px solid var(--peach-t3);6827  background:6828    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6829  backdrop-filter: blur(3px);6830  -webkit-backdrop-filter: blur(3px);6831  box-shadow:6832    inset 0 1px 0 rgba(240, 232, 216, 0.04),6833    0 12px 28px rgba(0, 0, 0, 0.12);6834  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6835}68366837.peach-newvault-headline {6838  margin: 0;6839  font-family: var(--font-display);6840  font-style: italic;6841  font-weight: 400;6842  font-size: 24px;6843  line-height: 1.05;6844  color: var(--peach-t0);6845  white-space: pre-line;6846}68476848.peach-newvault-divider {6849  margin: 2px 0 4px;6850  border: 0;6851  border-top: 1px solid var(--peach-t3);6852  width: 100%;6853}68546855.peach-newvault-field {6856  display: flex;6857  flex-direction: column;6858  gap: 4px;6859}68606861.peach-newvault-label-row {6862  display: flex;6863  align-items: center;6864  justify-content: space-between;6865}68666867/* Monospace input scaled to the card. Replaces the 22px unlock-input6868   so the placeholder no longer overflows and the field reads as part6869   of the same surface as the body copy. */6870.peach-newvault-input {6871  font-size: 0.875rem;6872  letter-spacing: 0.18em;6873  padding: 8px 0;6874}6875.peach-newvault-input::placeholder {6876  letter-spacing: 0.18em;6877  color: var(--peach-t2);6878}68796880.peach-newvault-hint {6881  margin: 2px 0 0;6882  font-family: "IBM Plex Mono", monospace;6883  font-size: 0.625rem;6884  color: var(--peach-t2);6885  letter-spacing: 0.04em;6886}68876888.peach-newvault-submit {6889  margin-top: 4px;6890}68916892.peach-newvault-warning {6893  display: flex;6894  align-items: flex-start;6895  gap: 8px;6896  margin: 4px 0 0;6897  padding-top: 10px;6898  border-top: 1px dashed var(--peach-t3);6899  font-size: 0.75rem;6900  line-height: 1.5;6901  color: var(--peach-t1);6902}69036904.peach-newvault-warning-icon {6905  color: var(--peach-accent);6906  font-size: 0.8125rem;6907  line-height: 1.4;6908  flex: 0 0 auto;6909}69106911.peach-newvault-footer {6912  position: relative;6913  z-index: 1;6914  display: flex;6915  flex-direction: column;6916  gap: 4px;6917  padding: 4px 4px 0;6918}69196920/* Settings body — warm accent gradient gives the glass something to blur against */6921.peach-settings-body {6922  background:6923    radial-gradient(6924      ellipse at 30% 20%,6925      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6926      transparent 60%6927    );6928}69296930/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6931/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6932 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6933 * (replacing the vault from a backup file) and "hazard" for actions that6934 * are absolutely irreversible (Panic). Both use the same card scaffold so6935 * they read as a pair, but the colour family signals the severity at a6936 * glance — yellow for caution, red for don't.6937 */6938.peach-danger-card {6939  --danger-tint: 235, 158, 52; /* amber */6940  display: flex;6941  flex-direction: column;6942  gap: 8px;6943  padding: 14px;6944  margin-top: 10px;6945  border-radius: 12px;6946  border: 1px solid rgba(var(--danger-tint), 0.32);6947  background:6948    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6949    rgba(var(--danger-tint), 0.04);6950  box-shadow:6951    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6952    0 0 24px rgba(var(--danger-tint), 0.04);6953  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6954}69556956.peach-danger-card:hover {6957  border-color: rgba(var(--danger-tint), 0.55);6958  box-shadow:6959    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6960    0 0 36px rgba(var(--danger-tint), 0.10);6961}69626963.peach-danger-card--hazard {6964  --danger-tint: 220, 38, 38; /* red */6965}69666967.peach-danger-card-head {6968  display: flex;6969  align-items: center;6970  gap: 10px;6971}69726973.peach-danger-card-glyph {6974  width: 28px;6975  height: 28px;6976  flex-shrink: 0;6977  display: flex;6978  align-items: center;6979  justify-content: center;6980  border-radius: 8px;6981  background: rgba(var(--danger-tint), 0.12);6982  color: rgba(var(--danger-tint), 0.95);6983  font-size: 1rem;6984  line-height: 1;6985}69866987.peach-danger-card-title {6988  margin: 0;6989  font-size: 0.8125rem;6990  font-weight: 600;6991  color: rgba(var(--danger-tint), 0.92);6992  letter-spacing: 0.01em;6993}69946995.peach-danger-card-copy {6996  margin: 0;6997  font-size: 0.6875rem;6998  line-height: 1.5;6999  color: var(--peach-t2);7000}70017002.peach-danger-card-button {7003  width: 100%;7004  padding: 9px;7005  margin-top: 4px;7006  background: transparent;7007  border: 1px solid rgba(var(--danger-tint), 0.45);7008  border-radius: 8px;7009  color: rgba(var(--danger-tint), 0.9);7010  font-size: 0.75rem;7011  font-weight: 500;7012  letter-spacing: 0.02em;7013  cursor: pointer;7014  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7015}70167017.peach-danger-card-button:hover {7018  background: rgba(var(--danger-tint), 0.10);7019  border-color: rgba(var(--danger-tint), 0.75);7020  color: rgb(var(--danger-tint));7021}70227023/* ── Panic flow (three-step destruction) ───────────────────────────────── */7024.peach-panic {7025  display: flex;7026  flex-direction: column;7027  flex: 1;7028  min-height: 0;7029  padding: 28px 20px 20px;7030  gap: 18px;7031  overflow-y: auto;7032  scrollbar-width: none;7033  -ms-overflow-style: none;7034}70357036.peach-panic::-webkit-scrollbar { display: none; }70377038.peach-panic-step2 {7039  background: rgba(220, 38, 38, 0.04);7040}70417042.peach-panic-step3 {7043  position: relative;7044  background: #0f0505;7045  color: #ffffff;7046  overflow: hidden;7047}70487049.peach-panic-rune-bg {7050  position: absolute;7051  inset: 0;7052  opacity: 0.22;7053  pointer-events: none;7054  overflow: hidden;7055}70567057.peach-panic-rune-bg canvas {7058  width: 100% !important;7059  height: 100% !important;7060}70617062.peach-panic-icon {7063  font-size: 32px;7064  color: rgb(220, 38, 38);7065  line-height: 1;7066}70677068.peach-panic-title {7069  margin: 0;7070  font-size: 18px;7071  font-weight: 500;7072  color: var(--peach-t1);7073}70747075.peach-panic-title--severe {7076  font-size: 20px;7077  font-weight: 700;7078  color: rgb(220, 38, 38);7079}70807081.peach-panic-body {7082  margin: 0;7083  font-size: 0.8125rem;7084  line-height: 1.55;7085  color: var(--peach-t2);7086}70877088.peach-panic-body--severe {7089  color: rgba(220, 38, 38, 0.85);7090}70917092.peach-panic-body--final {7093  font-size: 1rem;7094  font-weight: 700;7095  color: rgb(255, 80, 80);7096  line-height: 1.4;7097}70987099.peach-panic-body--final-intro {7100  font-size: 1rem;7101  color: #ffffff;7102  font-weight: 400;7103}71047105.peach-panic-divider {7106  height: 1px;7107  background: rgba(255, 255, 255, 0.08);7108  margin: 4px 0;7109}71107111.peach-panic-confirm-input {7112  width: 100%;7113  padding: 10px 12px;7114  background: rgba(255, 255, 255, 0.02);7115  border: 1px solid rgba(220, 38, 38, 0.4);7116  border-radius: 8px;7117  color: var(--peach-t1);7118  font-family: "IBM Plex Mono", monospace;7119  font-size: 0.875rem;7120  letter-spacing: 0.12em;7121  text-transform: uppercase;7122}71237124.peach-panic-confirm-input:focus {7125  outline: none;7126  border-color: rgb(220, 38, 38);7127}71287129.peach-panic-confirm-input--match {7130  border-color: rgb(220, 38, 38);7131  color: rgb(220, 38, 38);7132}71337134.peach-panic-confirm-label {7135  font-size: 0.6875rem;7136  color: var(--peach-t2);7137  margin: 0 0 -8px;7138  letter-spacing: 0.06em;7139}71407141.peach-panic-actions {7142  display: flex;7143  flex-direction: column;7144  gap: 10px;7145  margin-top: auto;7146}71477148.peach-panic-button {7149  width: 100%;7150  padding: 12px;7151  border-radius: 8px;7152  font-size: 0.8125rem;7153  cursor: pointer;7154  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7155}71567157.peach-panic-button--primary {7158  background: var(--peach-accent);7159  border: 1px solid var(--peach-accent);7160  color: #ffffff;7161  font-weight: 600;7162}71637164.peach-panic-button--primary:hover {7165  background: color-mix(in srgb, var(--peach-accent) 88%, white);7166}71677168.peach-panic-button--danger {7169  background: rgb(220, 38, 38);7170  border: 1px solid rgb(220, 38, 38);7171  color: #ffffff;7172  font-weight: 600;7173}71747175.peach-panic-button--danger:disabled {7176  opacity: 0.35;7177  cursor: not-allowed;7178}71797180.peach-panic-button--ghost {7181  background: transparent;7182  border: 1px solid rgba(255, 255, 255, 0.18);7183  color: var(--peach-t2);7184}71857186.peach-panic-button--ghost:hover {7187  border-color: rgba(255, 255, 255, 0.32);7188  color: var(--peach-t1);7189}71907191.peach-panic-link {7192  background: transparent;7193  border: none;7194  padding: 4px 0;7195  color: rgba(220, 38, 38, 0.65);7196  font-size: 0.75rem;7197  cursor: pointer;7198  text-align: left;7199  text-decoration: underline;7200  text-underline-offset: 3px;7201}72027203.peach-panic-link:hover {7204  color: rgb(220, 38, 38);7205}72067207.peach-panic-bar {7208  background: rgb(220, 38, 38);7209  padding: 16px 20px;7210  margin: -28px -20px 0;7211  text-align: center;7212  font-size: 0.8125rem;7213  font-weight: 700;7214  letter-spacing: 0.12em;7215  color: #ffffff;7216}72177218.peach-panic-final-button {7219  width: 100%;7220  padding: 14px;7221  background: rgb(220, 38, 38);7222  border: none;7223  border-radius: 8px;7224  color: #ffffff;7225  font-size: 0.875rem;7226  font-weight: 700;7227  letter-spacing: 0.08em;7228  text-transform: uppercase;7229  cursor: pointer;7230  animation: peach-panic-pulse 2s ease-in-out infinite;7231}72327233.peach-settings-license {7234  margin-top: 10px;7235  padding-top: 10px;7236  border-top: 1px solid var(--peach-t3);7237}72387239.peach-settings-label {7240  font-size: 0.625rem;7241  letter-spacing: 0.08em;7242  color: var(--peach-t3);7243  display: block;7244  margin-bottom: 6px;7245}72467247.peach-settings-license-row {7248  display: flex;7249  align-items: center;7250  justify-content: space-between;7251  gap: 8px;7252}72537254.peach-settings-license-key {7255  font-family: 'IBM Plex Mono', monospace;7256  font-size: 0.75rem;7257  color: var(--peach-t0);7258  letter-spacing: 0.04em;7259  word-break: break-all;7260}72617262.peach-settings-license-copy {7263  font-size: 0.6875rem;7264  color: var(--peach-accent);7265  background: transparent;7266  border: none;7267  cursor: pointer;7268  padding: 4px 8px;7269  border-radius: 4px;7270  flex-shrink: 0;7271  transition: opacity 150ms ease;7272}72737274.peach-settings-license-copy:hover {7275  opacity: 0.75;7276}72777278@keyframes peach-panic-pulse {7279  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7280  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7281}72827283[data-motion="reduce"] .peach-panic-final-button {7284  animation: none;7285}72867287/* Vault History — Settings → Vault sub-view */72887289.peach-history-list {7290  border: 1px solid var(--peach-border);7291  border-radius: 8px;7292  overflow: hidden;7293  margin: 8px 0 4px;7294}72957296.peach-history-row {7297  display: flex;7298  align-items: center;7299  justify-content: space-between;7300  padding: 9px 12px;7301  gap: 10px;7302  border-bottom: 1px solid var(--peach-border);7303}73047305.peach-history-row:last-child {7306  border-bottom: none;7307}73087309.peach-history-meta {7310  display: flex;7311  flex-direction: column;7312  gap: 2px;7313  min-width: 0;7314  flex: 1;7315}73167317.peach-history-time {7318  font-size: 0.75rem;7319  font-family: 'IBM Plex Mono', ui-monospace, monospace;7320  color: var(--peach-t0);7321  white-space: nowrap;7322  overflow: hidden;7323  text-overflow: ellipsis;7324}73257326.peach-history-sub {7327  font-size: 0.625rem;7328  color: var(--peach-t2);7329  letter-spacing: 0.06em;7330  text-transform: uppercase;7331  white-space: nowrap;7332  overflow: hidden;7333  text-overflow: ellipsis;7334}73357336.peach-history-btn {7337  flex-shrink: 0;7338  white-space: nowrap;7339  min-width: 56px;7340  text-align: center;7341}73427343.peach-history-btn.is-busy {7344  opacity: 0.65;7345}73467347.peach-history-footer {7348  font-size: 0.625rem;7349  color: var(--peach-t3);7350  letter-spacing: 0.05em;7351  text-align: right;7352  margin: 0;7353  padding: 2px 0 0;7354}73557356/* ── Context menu + swipe-copy flash ─────────────────────── */7357.peach-context-menu-backdrop {7358  position: fixed;7359  inset: 0;7360  background: rgba(0, 0, 0, 0.45);7361  z-index: 100;7362  display: flex;7363  align-items: flex-end;7364  justify-content: center;7365  animation: peach-ctx-fade 140ms ease both;7366}7367.peach-context-menu {7368  width: min(360px, calc(100vw - 24px));7369  margin-bottom: max(env(safe-area-inset-bottom), 12px);7370  background: var(--peach-bg);7371  border: 1px solid var(--peach-t3);7372  border-radius: 14px;7373  padding: 6px;7374  display: flex;7375  flex-direction: column;7376  gap: 2px;7377  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7378  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7379}7380@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7381@keyframes peach-ctx-rise {7382  from { transform: translateY(16px); opacity: 0; }7383  to   { transform: translateY(0);    opacity: 1; }7384}7385.peach-context-menu-item {7386  background: transparent;7387  color: var(--peach-t0);7388  border: 0;7389  border-radius: 10px;7390  padding: 12px 14px;7391  text-align: left;7392  font: inherit;7393  cursor: pointer;7394}7395.peach-context-menu-item:hover,7396.peach-context-menu-item:focus-visible {7397  background: var(--peach-t3);7398}7399.peach-context-menu-item--danger {7400  color: var(--peach-health-bad, #d96868);7401}7402.peach-context-menu-item--cancel {7403  color: var(--peach-t2);7404  margin-top: 4px;7405  border-top: 1px solid var(--peach-t3);7406  border-radius: 0 0 10px 10px;7407}74087409/* Swipe-to-copy flash */7410.peach-entry-row.is-copy-flash {7411  animation: peach-copy-flash 600ms ease both;7412}7413@keyframes peach-copy-flash {7414  0%   { background: transparent; }7415  20%  { background: rgba(217, 153, 51, 0.32); }7416  100% { background: transparent; }7417}74187419html { font-size: 16px; }74207421/* ── Recovery word entry ─────────────────────────────────────────── */7422.peach-lock-recover-link {7423  display: block;7424  width: 100%;7425  margin-top: 12px;7426  background: none;7427  border: none;7428  font-family: "IBM Plex Mono", monospace;7429  font-size: 0.625rem;7430  letter-spacing: 0.06em;7431  color: var(--peach-t2);7432  cursor: pointer;7433  text-align: center;7434  padding: 4px;7435  transition: color 120ms ease;7436}7437.peach-lock-recover-link:hover {7438  color: var(--peach-t0);7439}74407441.lock-screen--recovery {7442  display: flex;7443  flex-direction: column;7444  align-items: stretch;7445  padding: 12px 20px 24px;7446  overflow: hidden;7447}74487449.peach-recovery-nav {7450  display: flex;7451  align-items: center;7452  position: relative;7453  z-index: 1;7454  margin-bottom: 4px;7455}74567457/* Mask runes to the top decorative band only — keep inputs and the7458   bottom CTA button clear. The bottom of the popup is reserved for7459   submit buttons; rendering runes there overlaps the button glyph. */7460.peach-rune-background--recovery {7461  -webkit-mask-image: linear-gradient(7462    to bottom,7463    black 0px, black 85px,7464    transparent 110px,7465    transparent 100%7466  );7467  mask-image: linear-gradient(7468    to bottom,7469    black 0px, black 85px,7470    transparent 110px,7471    transparent 100%7472  );7473}74747475.peach-recovery-header {7476  text-align: center;7477  margin-bottom: 16px;7478  margin-top: 4px;7479}7480.peach-recovery-header .peach-onboarding-headline {7481  font-size: 1.25rem;7482  font-weight: 300;7483  letter-spacing: 0.02em;7484  margin: 0 0 4px;7485}7486.peach-recovery-header .peach-hint {7487  font-family: "IBM Plex Mono", monospace;7488  font-size: 0.625rem;7489  color: var(--peach-t2);7490  letter-spacing: 0.04em;7491  margin: 0;7492}74937494/* 12-word grid: 2 columns × 6 rows */7495.peach-recovery-grid {7496  display: grid;7497  grid-template-columns: repeat(2, 1fr);7498  gap: 12px 20px;7499  width: 100%;7500  margin-bottom: 0;7501}75027503.peach-recovery-word-slot {7504  display: flex;7505  align-items: center;7506  gap: 6px;7507  min-width: 0;7508}75097510.peach-recovery-word-index {7511  font-family: "IBM Plex Mono", monospace;7512  font-size: 0.5rem;7513  color: rgba(255, 255, 255, 0.35);7514  min-width: 14px;7515  flex-shrink: 0;7516  text-align: right;7517  letter-spacing: 0.04em;7518}75197520.peach-recovery-word-input {7521  flex: 1;7522  min-width: 0;7523  background: transparent;7524  border: none;7525  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7526  color: var(--peach-t0);7527  font-family: "IBM Plex Mono", monospace;7528  font-size: 0.6875rem;7529  letter-spacing: 0.06em;7530  padding: 5px 2px 4px;7531  outline: none;7532  text-transform: lowercase;7533  transition: border-color 120ms ease;7534}7535.peach-recovery-word-input::placeholder {7536  color: rgba(255, 255, 255, 0.18);7537}7538.peach-recovery-word-input:focus {7539  border-bottom-color: var(--peach-accent);7540}75417542.peach-recovery-submit {7543  width: 100%;7544  margin-top: auto;7545}75467547.peach-recovery-new-password-form {7548  width: 100%;7549  display: flex;7550  flex-direction: column;7551  gap: 16px;7552  margin-bottom: 8px;7553}7554.peach-recovery-new-password-form .peach-newvault-field {7555  display: flex;7556  flex-direction: column;7557  gap: 4px;7558}75597560/* ── Recovery words display (post-create) ────────────────────────── */7561.lock-screen--recovery-display {7562  display: flex;7563  flex-direction: column;7564  align-items: stretch;7565  padding: 0 20px 20px;7566  min-height: 0;7567  overflow-y: auto;7568}75697570.peach-recovery-words-display {7571  width: 100%;7572  margin-bottom: 16px;7573  border: 1px solid var(--peach-t3);7574  border-radius: 8px;7575  padding: 12px 14px;7576  background: rgba(245, 240, 234, 0.04);7577}75787579.peach-recovery-words-label {7580  font-family: "IBM Plex Mono", monospace;7581  font-size: 0.5rem;7582  letter-spacing: 0.08em;7583  color: var(--peach-t2);7584  text-transform: uppercase;7585  margin-bottom: 10px;7586}75877588.peach-recovery-word-list {7589  list-style: none;7590  margin: 0;7591  padding: 0;7592  display: grid;7593  grid-template-columns: repeat(2, 1fr);7594  gap: 6px 16px;7595}75967597.peach-recovery-word-item {7598  display: flex;7599  align-items: baseline;7600  gap: 5px;7601}76027603.peach-recovery-word-num {7604  font-family: "IBM Plex Mono", monospace;7605  font-size: 0.5rem;7606  color: var(--peach-t2);7607  width: 14px;7608  flex: 0 0 14px;7609  text-align: right;7610  letter-spacing: 0.04em;7611  font-variant-numeric: tabular-nums;7612}76137614.peach-recovery-download-btn {7615  display: block;7616  margin: 10px auto 0;7617  padding: 4px 10px;7618  background: transparent;7619  border: 1px solid var(--peach-border);7620  border-radius: 6px;7621  color: var(--peach-t2);7622  font-family: "IBM Plex Mono", monospace;7623  font-size: 0.5625rem;7624  letter-spacing: 0.06em;7625  text-transform: lowercase;7626  cursor: pointer;7627  transition: border-color 0.15s, color 0.15s;7628}76297630.peach-recovery-download-btn:hover {7631  border-color: var(--peach-accent);7632  color: var(--peach-t0);7633}76347635.peach-recovery-word-text {7636  font-family: "IBM Plex Mono", monospace;7637  font-size: 0.6875rem;7638  letter-spacing: 0.06em;7639  color: var(--peach-t0);7640  text-transform: lowercase;7641}76427643.peach-hint--warning {7644  color: var(--peach-accent);7645  font-style: italic;7646}7647.peach-hint--success {7648  color: var(--peach-t2);7649  font-family: "IBM Plex Mono", monospace;7650  font-size: 0.625rem;7651  letter-spacing: 0.06em;7652}76537654/* Confirmation step */7655.peach-recovery-confirm {7656  width: 100%;7657  flex: 1;7658  display: flex;7659  flex-direction: column;7660}7661.peach-recovery-confirm-label {7662  font-family: "IBM Plex Mono", monospace;7663  font-size: 0.5625rem;7664  letter-spacing: 0.04em;7665  color: var(--peach-t2);7666  text-align: center;7667  margin: 0 0 12px;7668}7669.peach-recovery-confirm-fields {7670  display: flex;7671  flex-direction: column;7672  gap: 14px;7673  margin-bottom: 10px;7674}7675.peach-recovery-confirm-field {7676  display: flex;7677  align-items: center;7678  gap: 8px;7679}7680.peach-recovery-confirm-num {7681  font-family: "IBM Plex Mono", monospace;7682  font-size: 0.5rem;7683  color: var(--peach-t2);7684  min-width: 44px;7685  letter-spacing: 0.04em;7686}7687.peach-recovery-confirm-input {7688  flex: 1;7689  background: transparent;7690  border: none;7691  border-bottom: 1px solid var(--peach-t3);7692  color: var(--peach-t0);7693  font-family: "IBM Plex Mono", monospace;7694  font-size: 0.6875rem;7695  letter-spacing: 0.06em;7696  padding: 4px 2px 3px;7697  outline: none;7698  text-transform: lowercase;7699  transition: border-color 120ms ease;7700}7701.peach-recovery-confirm-input:focus {7702  border-bottom-color: var(--peach-accent);7703}7704.peach-recovery-confirm-input:disabled {7705  opacity: 0.4;7706  cursor: not-allowed;7707}7708.peach-recovery-confirm-btn {7709  width: 100%;7710  margin-top: auto;7711}77127713/* ============================================================7714   Sync info sheet7715   ============================================================ */77167717.peach-sync-info-backdrop {7718  position: fixed;7719  inset: 0;7720  z-index: 200;7721  background: rgba(0, 0, 0, 0.55);7722  display: flex;7723  align-items: flex-end;7724  animation: peach-fade-in 200ms ease forwards;7725}77267727@keyframes peach-fade-in {7728  from { opacity: 0; }7729  to   { opacity: 1; }7730}77317732.peach-sync-info-sheet {7733  width: 100%;7734  background: var(--peach-bg-card, var(--peach-bg));7735  border-top-left-radius: 20px;7736  border-top-right-radius: 20px;7737  padding: 12px 24px 32px;7738  display: flex;7739  flex-direction: column;7740  gap: 20px;7741  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7742}77437744@keyframes peach-sheet-up {7745  from { transform: translateY(100%); }7746  to   { transform: translateY(0); }7747}77487749.peach-sync-info-handle {7750  width: 36px;7751  height: 4px;7752  border-radius: 2px;7753  background: var(--peach-border);7754  margin: 0 auto 4px;7755  flex-shrink: 0;7756}77577758.peach-sync-info-title {7759  font-family: 'Cormorant Garamond', serif;7760  font-style: italic;7761  font-size: 26px;7762  font-weight: 600;7763  color: var(--peach-t0);7764  margin: 0;7765  line-height: 1.2;7766}77677768.peach-sync-info-body {7769  display: flex;7770  flex-direction: column;7771  gap: 14px;7772}77737774.peach-sync-info-point {7775  display: flex;7776  gap: 12px;7777  align-items: flex-start;7778  font-size: 14px;7779  color: var(--peach-t2);7780  line-height: 1.6;7781  margin: 0;7782}77837784.peach-sync-info-icon {7785  color: var(--peach-accent);7786  font-size: 16px;7787  flex-shrink: 0;7788  margin-top: 1px;7789}77907791.peach-sync-info-actions {7792  display: flex;7793  flex-direction: column;7794  gap: 12px;7795  margin-top: 4px;7796}77977798.peach-sync-info-pro-link {7799  background: none;7800  border: none;7801  font-size: 13px;7802  color: var(--peach-t3);7803  cursor: pointer;7804  padding: 0;7805  font-family: inherit;7806  text-align: center;7807  transition: color 150ms ease;7808}78097810.peach-sync-info-pro-link:hover {7811  color: var(--peach-accent);7812}78137814.peach-btn--full {7815  width: 100%;7816}78177818/* ── Sync screen ── */78197820.peach-sync-screen {7821  display: flex;7822  flex-direction: column;7823  height: 100%;7824}78257826.peach-sync-content {7827  flex: 1;7828  overflow-y: auto;7829  padding: 24px 20px 40px;7830  display: flex;7831  flex-direction: column;7832  gap: 24px;7833}78347835/* Intro (State A) */7836.peach-sync-headline {7837  font-family: 'Cormorant Garamond', serif;7838  font-style: italic;7839  font-size: 28px;7840  font-weight: 600;7841  color: var(--peach-t0);7842  margin: 0 0 10px;7843  line-height: 1.2;7844}78457846.peach-sync-intro-body {7847  font-size: 14px;7848  color: var(--peach-t1);7849  line-height: 1.6;7850  margin: 0;7851}78527853.peach-sync-pro-note {7854  display: flex;7855  flex-direction: column;7856  gap: 8px;7857  background: var(--peach-t3);7858  border-radius: 10px;7859  padding: 12px 14px;7860}78617862.peach-sync-pro-note-text {7863  font-size: 12px;7864  color: var(--peach-t2);7865  line-height: 1.5;7866  margin: 0;7867}78687869.peach-sync-pro-link {7870  background: none;7871  border: none;7872  font-size: 12px;7873  color: var(--peach-accent);7874  cursor: pointer;7875  padding: 0;7876  font-family: inherit;7877  text-align: left;7878}78797880/* Status (State C) */7881.peach-sync-status {7882  padding: 12px 0;7883  border-bottom: 1px solid var(--peach-border);7884}78857886.peach-sync-status-row {7887  display: flex;7888  align-items: center;7889  gap: 8px;7890}78917892.peach-sync-dot {7893  width: 7px;7894  height: 7px;7895  border-radius: 50%;7896  flex-shrink: 0;7897}78987899.peach-sync-dot--green { background: var(--peach-health-ok); }7900.peach-sync-dot--amber { background: var(--peach-accent); }79017902.peach-sync-status-text {7903  font-family: 'IBM Plex Mono', monospace;7904  font-size: 11px;7905  color: var(--peach-t2);7906}79077908/* Paired devices */7909.peach-sync-section {7910  display: flex;7911  flex-direction: column;7912  gap: 2px;7913}79147915.peach-sync-section-label {7916  font-family: 'IBM Plex Mono', monospace;7917  font-size: 10px;7918  letter-spacing: 0.1em;7919  color: var(--peach-t3);7920  margin: 0 0 10px;7921}79227923.peach-sync-device-row {7924  display: flex;7925  justify-content: space-between;7926  align-items: baseline;7927  padding: 10px 0;7928  border-bottom: 1px solid var(--peach-border);7929  gap: 12px;7930}79317932.peach-sync-device-name {7933  font-size: 14px;7934  color: var(--peach-t1);7935}79367937.peach-sync-device-meta {7938  font-family: 'IBM Plex Mono', monospace;7939  font-size: 11px;7940  color: var(--peach-t3);7941  white-space: nowrap;7942}79437944.peach-sync-hub-note {7945  padding: 14px 16px;7946  border: 1px solid var(--peach-border);7947  border-radius: 10px;7948  display: flex;7949  flex-direction: column;7950  gap: 6px;7951  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);7952}79537954.peach-sync-hub-note-title {7955  font-size: 13px;7956  font-weight: 600;7957  color: var(--peach-t0);7958  margin: 0;7959}79607961.peach-sync-hub-note-body {7962  font-size: 12px;7963  color: var(--peach-t2);7964  line-height: 1.6;7965  margin: 0;7966}79677968/* Action buttons */7969.peach-sync-actions {7970  display: flex;7971  gap: 10px;7972  flex-wrap: wrap;7973}79747975/* Upgrade prompt (State B) */7976.peach-sync-upgrade {7977  display: flex;7978  flex-direction: column;7979  gap: 12px;7980  padding: 16px;7981  border: 1px solid var(--peach-border);7982  border-radius: 10px;7983}79847985.peach-sync-upgrade-text {7986  font-size: 13px;7987  color: var(--peach-t2);7988  line-height: 1.6;7989  margin: 0;7990}79917992/* Network note */7993.peach-sync-network-note {7994  font-size: 12px;7995  color: var(--peach-t3);7996  line-height: 1.6;7997  margin: 0;7998}79998000/* Advanced */8001.peach-sync-advanced {8002  margin-top: auto;8003  padding-top: 16px;8004  border-top: 1px solid var(--peach-border);8005}80068007.peach-sync-advanced-toggle {8008  display: flex;8009  align-items: center;8010  gap: 8px;8011  background: none;8012  border: none;8013  font-family: 'IBM Plex Mono', monospace;8014  font-size: 11px;8015  letter-spacing: 0.08em;8016  color: var(--peach-t3);8017  cursor: pointer;8018  padding: 0;8019  text-transform: uppercase;8020}80218022.peach-sync-advanced-chevron {8023  display: inline-block;8024  transition: transform 200ms ease;8025  font-size: 10px;8026}80278028.peach-sync-advanced-chevron.is-open {8029  transform: rotate(90deg);8030}80318032.peach-sync-advanced-content {8033  margin-top: 14px;8034}80358036.peach-sync-advanced-row {8037  display: flex;8038  justify-content: space-between;8039  align-items: center;8040  gap: 16px;8041}80428043.peach-sync-advanced-title {8044  font-size: 14px;8045  color: var(--peach-t1);8046  margin: 0 0 2px;8047}80488049.peach-sync-advanced-subtitle {8050  font-size: 12px;8051  color: var(--peach-t3);8052  margin: 0;8053  line-height: 1.5;8054}80558056/* ── Add Device — Android scan tabs ─────────────────────────────────────── */80578058.peach-pairing-tabs {8059  display: flex;8060  border: 1px solid var(--peach-border);8061  border-radius: 8px;8062  overflow: hidden;8063  margin-bottom: 4px;8064}80658066.peach-pairing-tab {8067  flex: 1;8068  padding: 10px 0;8069  background: none;8070  border: none;8071  font-family: 'IBM Plex Mono', monospace;8072  font-size: 11px;8073  letter-spacing: 0.06em;8074  color: var(--peach-t2);8075  cursor: pointer;8076  transition: background 150ms, color 150ms;8077}80788079.peach-pairing-tab.is-active {8080  background: var(--peach-accent);8081  color: #fff;8082  font-weight: 600;8083}80848085.peach-pairing-tab:not(.is-active):active {8086  background: var(--peach-border);8087}80888089/* Camera view */8090.peach-pairing-camera-container {8091  position: relative;8092  width: 100%;8093  aspect-ratio: 1;8094  border-radius: 12px;8095  overflow: hidden;8096  background: #000;8097  flex-shrink: 0;8098}80998100.peach-pairing-video {8101  width: 100%;8102  height: 100%;8103  object-fit: cover;8104}81058106.peach-pairing-scan-frame {8107  position: absolute;8108  top: 50%;8109  left: 50%;8110  transform: translate(-50%, -50%);8111  width: 60%;8112  aspect-ratio: 1;8113  border: 2px solid var(--peach-accent);8114  border-radius: 8px;8115  pointer-events: none;8116}81178118/* ── Notes Mode ── */81198120/* Overlay that crossfades over the vault */8121.peach-notes-overlay {8122  position: fixed;8123  inset: 0;8124  z-index: 90;8125  opacity: 0;8126  pointer-events: none;8127  animation: peach-mode-in 220ms ease-in forwards;8128}81298130.peach-notes-overlay.is-visible {8131  opacity: 1;8132  pointer-events: auto;8133}81348135@keyframes peach-mode-in {8136  from { opacity: 0; }8137  to   { opacity: 1; }8138}81398140/* Top-level notes surface */8141.peach-notes-mode {8142  position: absolute;8143  inset: 0;8144  background: var(--peach-bg);8145  display: flex;8146  flex-direction: column;8147}81488149/* Rune canvas positioned behind content */8150.peach-note-rune-canvas {8151  position: absolute;8152  inset: 0;8153  width: 100%;8154  height: 100%;8155  pointer-events: none;8156  z-index: 0;8157}81588159/* TOC wrapper */8160.peach-notes-toc-wrapper {8161  position: absolute;8162  inset: 0;8163  transition: opacity 180ms ease-out;8164  z-index: 1;8165}81668167.peach-notes-toc-wrapper.is-visible { opacity: 1; pointer-events: auto; }8168.peach-notes-toc-wrapper.is-expanding { opacity: 0; pointer-events: none; transition: opacity 150ms ease-out; }8169.peach-notes-toc-wrapper.is-collapsing { opacity: 1; pointer-events: none; }81708171/* Editor wrapper */8172.peach-notes-editor-wrapper {8173  position: absolute;8174  inset: 0;8175  opacity: 0;8176  pointer-events: none;8177  z-index: 2;8178  transition: opacity 220ms ease-in;8179}81808181.peach-notes-editor-wrapper.is-visible {8182  opacity: 1;8183  pointer-events: auto;8184}81858186.peach-notes-editor-wrapper.is-entering {8187  animation: peach-note-editor-enter 220ms 180ms ease-in both;8188}81898190.peach-notes-editor-wrapper.is-leaving {8191  animation: peach-note-editor-leave 200ms ease-out both;8192}81938194@keyframes peach-note-editor-enter {8195  from { opacity: 0; transform: translateY(6px); }8196  to   { opacity: 1; transform: translateY(0); }8197}81988199@keyframes peach-note-editor-leave {8200  from { opacity: 1; transform: translateY(0); }8201  to   { opacity: 0; transform: translateY(6px); }8202}82038204/* TOC inner */8205.peach-notes-toc {8206  position: relative;8207  display: flex;8208  flex-direction: column;8209  height: 100%;8210  padding-top: env(safe-area-inset-top, 0px);8211  padding-bottom: env(safe-area-inset-bottom, 0px);8212}82138214/* Shared header */8215.peach-notes-header {8216  display: flex;8217  align-items: center;8218  padding: 12px 16px;8219  gap: 12px;8220  flex-shrink: 0;8221  min-height: 52px;8222  position: relative;8223  z-index: 2;8224}82258226.peach-notes-back {8227  font-size: 22px;8228  color: var(--peach-t2);8229  background: none;8230  border: none;8231  padding: 4px;8232  cursor: pointer;8233  line-height: 1;8234  flex-shrink: 0;8235  transition: color 150ms ease;8236  -webkit-tap-highlight-color: transparent;8237}82388239.peach-notes-back:active { color: var(--peach-t0); }82408241.peach-notes-header-title {8242  flex: 1;8243  font-family: 'Cormorant Garamond', serif;8244  font-style: italic;8245  font-size: 22px;8246  color: var(--peach-t0);8247  text-align: center;8248}82498250.peach-notes-header-title.is-breadcrumb {8251  font-family: 'IBM Plex Mono', monospace;8252  font-style: normal;8253  font-size: 11px;8254  color: var(--peach-t3);8255  letter-spacing: 0.08em;8256  text-transform: uppercase;8257  cursor: pointer;8258}82598260.peach-notes-header-actions {8261  display: flex;8262  gap: 8px;8263  flex-shrink: 0;8264}82658266.peach-notes-header-btn {8267  width: 36px;8268  height: 36px;8269  display: flex;8270  align-items: center;8271  justify-content: center;8272  background: none;8273  border: none;8274  color: var(--peach-t2);8275  cursor: pointer;8276  border-radius: 8px;8277  font-size: 16px;8278  transition: color 150ms ease, background 150ms ease;8279  -webkit-tap-highlight-color: transparent;8280}82818282.peach-notes-header-btn:active {8283  background: rgba(255,255,255,0.06);8284  color: var(--peach-t0);8285}82868287/* Inline search bar */8288.peach-notes-search-input {8289  flex: 1;8290  background: none;8291  border: none;8292  outline: none;8293  font-family: 'IBM Plex Mono', monospace;8294  font-size: 13px;8295  color: var(--peach-t0);8296  padding: 4px 0;8297  letter-spacing: 0.02em;8298}82998300.peach-notes-search-input::placeholder {8301  color: var(--peach-t3);8302}83038304/* TOC list */8305.peach-notes-list-container {8306  flex: 1;8307  overflow-y: auto;8308  overflow-x: hidden;8309  scrollbar-width: none;8310  -webkit-overflow-scrolling: touch;8311  overscroll-behavior: contain;8312  position: relative;8313  z-index: 1;8314}83158316.peach-notes-list-container::-webkit-scrollbar { display: none; }83178318/* Note row */8319.peach-note-row {8320  position: relative;8321  display: grid;8322  grid-template-columns: 44px 8px 1fr 8px auto;8323  align-items: center;8324  min-height: 72px;8325  padding: 16px 20px;8326  border-bottom: 0.5px solid var(--peach-border);8327  cursor: pointer;8328  overflow: hidden;8329  touch-action: pan-y;8330  user-select: none;8331  -webkit-user-select: none;8332  -webkit-tap-highlight-color: transparent;8333}83348335.peach-note-row:first-child {8336  border-top: 0.5px solid var(--peach-border);8337}83388339.peach-note-row:active {8340  background: rgba(255,255,255,0.02);8341}83428343/* Row fade animations (expansion) */8344.peach-note-row.is-expanding-away {8345  transition: opacity 150ms ease, transform 150ms ease;8346  opacity: 0;8347}83488349.peach-note-row.is-expanding-away-up { transform: translateY(-6px); }8350.peach-note-row.is-expanding-away-down { transform: translateY(6px); }83518352.peach-note-numeral {8353  font-family: 'Cormorant Garamond', serif;8354  font-style: italic;8355  font-size: 15px;8356  color: var(--peach-accent);8357  text-align: right;8358  line-height: 1;8359  flex-shrink: 0;8360}83618362.peach-note-title-gap { /* grid spacer */ }83638364.peach-note-title {8365  font-family: 'Cormorant Garamond', serif;8366  font-style: italic;8367  font-size: 18px;8368  color: var(--peach-t0);8369  white-space: nowrap;8370  overflow: hidden;8371  text-overflow: ellipsis;8372  line-height: 1.3;8373  min-width: 0;8374}83758376.peach-note-title-match {8377  color: var(--peach-accent);8378}83798380.peach-note-date {8381  font-family: 'IBM Plex Mono', monospace;8382  font-size: 11px;8383  color: var(--peach-t2);8384  white-space: nowrap;8385  text-align: right;8386  flex-shrink: 0;8387}83888389/* Swipe underlays */8390.peach-note-row-underlay {8391  position: absolute;8392  inset: 0;8393  display: flex;8394  align-items: center;8395  padding: 0 24px;8396  font-family: 'IBM Plex Mono', monospace;8397  font-size: 11px;8398  letter-spacing: 0.1em;8399  pointer-events: none;8400  z-index: 0;8401}84028403.peach-note-row-underlay--delete {8404  background: #8B2020;8405  color: rgba(255,255,255,0.9);8406  justify-content: flex-end;8407}84088409.peach-note-row-underlay--archive {8410  background: var(--peach-accent);8411  color: #0C0A06;8412  justify-content: flex-start;8413}84148415/* Delete confirm strip */8416.peach-note-delete-confirm {8417  position: absolute;8418  inset: 0;8419  background: var(--peach-bg);8420  display: flex;8421  align-items: center;8422  gap: 12px;8423  padding: 0 20px;8424  font-family: 'IBM Plex Mono', monospace;8425  font-size: 11px;8426  color: var(--peach-t1);8427  letter-spacing: 0.04em;8428  animation: peach-delete-confirm-in 150ms ease both;8429  z-index: 10;8430}84318432@keyframes peach-delete-confirm-in {8433  from { opacity: 0; }8434  to   { opacity: 1; }8435}84368437.peach-note-delete-confirm-btn {8438  background: #8B2020;8439  color: rgba(255,255,255,0.9);8440  border: none;8441  border-radius: 6px;8442  padding: 4px 10px;8443  font-family: 'IBM Plex Mono', monospace;8444  font-size: 10px;8445  cursor: pointer;8446  letter-spacing: 0.06em;8447}84488449.peach-note-delete-cancel-btn {8450  background: none;8451  border: none;8452  color: var(--peach-t3);8453  font-family: 'IBM Plex Mono', monospace;8454  font-size: 10px;8455  cursor: pointer;8456  letter-spacing: 0.06em;8457  padding: 4px 6px;8458}84598460/* + New note button */8461.peach-notes-new-btn {8462  font-family: 'IBM Plex Mono', monospace;8463  font-size: 12px;8464  color: var(--peach-t3);8465  text-align: center;8466  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8467  background: none;8468  border: none;8469  width: 100%;8470  cursor: pointer;8471  letter-spacing: 0.04em;8472  transition: color 150ms ease;8473  -webkit-tap-highlight-color: transparent;8474}84758476.peach-notes-new-btn:active { color: var(--peach-accent); }84778478/* Empty state */8479.peach-notes-empty {8480  display: flex;8481  flex-direction: column;8482  align-items: center;8483  justify-content: center;8484  flex: 1;8485  padding: 48px 32px;8486  gap: 16px;8487}84888489.peach-notes-empty-text {8490  font-family: 'Cormorant Garamond', serif;8491  font-style: italic;8492  font-size: 20px;8493  color: var(--peach-t3);8494  text-align: center;8495  margin: 0;8496  line-height: 1.4;8497  white-space: pre-line;8498}84998500/* ── Editor surface ── */85018502.peach-note-editor-surface {8503  position: absolute;8504  inset: 0;8505  background: var(--peach-bg);8506  display: flex;8507  flex-direction: column;8508  padding-top: env(safe-area-inset-top, 0px);8509}85108511.peach-note-editor-scroll {8512  flex: 1;8513  overflow-y: auto;8514  overflow-x: hidden;8515  scrollbar-width: none;8516  -webkit-overflow-scrolling: touch;8517  padding: 0 24px 120px;8518  position: relative;8519  z-index: 1;8520}85218522.peach-note-editor-scroll::-webkit-scrollbar { display: none; }85238524/* Desktop toolbar (always visible above body) */8525.peach-note-toolbar-desktop-inline {8526  display: flex;8527  align-items: center;8528  gap: 2px;8529  padding: 6px 0 12px;8530  margin-bottom: 4px;8531  border-bottom: 0.5px solid var(--peach-border);8532}85338534/* Title field */8535.peach-note-title-field {8536  font-family: 'Cormorant Garamond', serif;8537  font-style: italic;8538  font-size: 32px;8539  font-weight: 600;8540  color: var(--peach-t0);8541  line-height: 1.2;8542  padding: 8px 0 0;8543  outline: none;8544  min-height: 44px;8545  word-break: break-word;8546  position: relative;8547  z-index: 1;8548}85498550.peach-note-title-field:empty::before {8551  content: attr(data-placeholder);8552  color: var(--peach-t3);8553  pointer-events: none;8554}85558556/* Hairline separator */8557.peach-note-hairline {8558  height: 0.5px;8559  background: var(--peach-border);8560  margin: 12px 0 20px;8561  position: relative;8562  z-index: 1;8563}85648565/* Body field */8566.peach-note-body-field {8567  font-family: 'DM Sans', sans-serif;8568  font-size: 16px;8569  color: var(--peach-t0);8570  line-height: 1.85;8571  padding: 0;8572  outline: none;8573  min-height: 240px;8574  word-break: break-word;8575  position: relative;8576  z-index: 1;8577}85788579.peach-note-body-field:empty::before {8580  content: attr(data-placeholder);8581  color: var(--peach-t3);8582  font-style: italic;8583  pointer-events: none;8584}85858586.peach-note-body-field h2 {8587  font-family: 'Cormorant Garamond', serif;8588  font-style: italic;8589  font-size: 22px;8590  font-weight: 600;8591  color: var(--peach-t0);8592  margin: 20px 0 8px;8593}85948595.peach-note-body-field blockquote {8596  border-left: 2px solid var(--peach-accent);8597  margin: 12px 0;8598  padding-left: 16px;8599  color: var(--peach-t1);8600  font-style: italic;8601}86028603.peach-note-body-field ul,8604.peach-note-body-field ol {8605  padding-left: 20px;8606  margin: 8px 0;8607}86088609.peach-note-body-field li {8610  margin: 4px 0;8611}86128613.peach-note-body-field hr {8614  border: none;8615  border-top: 0.5px solid var(--peach-border);8616  margin: 16px 0;8617}86188619/* Saved indicator */8620.peach-note-saved-indicator {8621  font-family: 'IBM Plex Mono', monospace;8622  font-size: 11px;8623  color: var(--peach-t3);8624  letter-spacing: 0.04em;8625  text-align: right;8626  padding: 6px 24px;8627  flex-shrink: 0;8628  transition: opacity 300ms ease;8629  pointer-events: none;8630  position: relative;8631  z-index: 1;8632}86338634/* Mobile keyboard toolbar */8635.peach-note-toolbar-mobile {8636  display: flex;8637  align-items: center;8638  padding: 8px 16px;8639  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8640  background: var(--peach-bg);8641  border-top: 0.5px solid var(--peach-border);8642  gap: 4px;8643  flex-shrink: 0;8644  position: relative;8645  z-index: 10;8646}86478648.peach-note-toolbar-btn {8649  min-width: 36px;8650  height: 36px;8651  display: flex;8652  align-items: center;8653  justify-content: center;8654  background: none;8655  border: none;8656  border-radius: 8px;8657  cursor: pointer;8658  font-size: 14px;8659  color: var(--peach-t1);8660  font-family: 'DM Sans', sans-serif;8661  font-weight: 600;8662  transition: background 100ms ease, color 100ms ease;8663  -webkit-tap-highlight-color: transparent;8664}86658666.peach-note-toolbar-btn--italic { font-style: italic; }8667.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8668.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }86698670.peach-note-toolbar-divider {8671  width: 0.5px;8672  height: 20px;8673  background: var(--peach-border);8674  margin: 0 4px;8675  flex-shrink: 0;8676}86778678.peach-note-toolbar-spacer { flex: 1; }86798680/* Desktop: larger headline in TOC */8681@media (min-width: 400px) {8682  .peach-notes-header-title:not(.is-breadcrumb) {8683    font-size: 32px;8684  }86858686  .peach-note-row {8687    min-height: 64px;8688    padding: 14px 16px;8689  }8690}86918692/* Flying title — shared element during expansion/collapse */8693.peach-note-expanding-title {8694  position: absolute;8695  left: 20px;8696  right: 20px;8697  font-family: 'Cormorant Garamond', serif;8698  font-style: italic;8699  font-weight: 600;8700  color: var(--peach-t0);8701  line-height: 1.2;8702  white-space: nowrap;8703  overflow: hidden;8704  text-overflow: ellipsis;8705  pointer-events: none;8706  z-index: 50;8707  transition:8708    top 280ms cubic-bezier(0, 0, 0, 1),8709    font-size 280ms cubic-bezier(0, 0, 0, 1);8710  will-change: top, font-size;8711}87128713/* TOC wrapper states */8714.peach-notes-toc-wrapper.is-toc { opacity: 1; pointer-events: auto; }8715.peach-notes-toc-wrapper.is-expanding {8716  opacity: 0;8717  pointer-events: none;8718  transition: opacity 150ms ease-out;8719}8720.peach-notes-toc-wrapper.is-collapsing {8721  pointer-events: none;8722  transition: opacity 200ms 100ms ease-in;8723  opacity: 1;8724}87258726/* Expanding target row hides its title text (flying title takes over) */8727.peach-note-row.is-expanding-target .peach-note-title {8728  opacity: 0;8729}