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: 16px 20px 14px;2109  gap: 8px;2110  text-align: center;2111}21122113.peach-passkey-approval-icon {2114  width: 36px;2115  height: 36px;2116  border-radius: 10px;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: 22px;2129  height: 22px;2130  border-radius: 5px;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: 18px;2145  color: var(--peach-t0);2146  line-height: 1.1;2147  margin: 1px 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  line-height: 1.5;2224  outline: none;2225  transition: border-color 120ms ease;2226}22272228.peach-pwgen-compact-output:focus {2229  border-color: var(--peach-t1);2230}2231.peach-pwgen-compact-controls {2232  display: flex;2233  align-items: center;2234  gap: 6px;2235}2236.peach-pwgen-compact-slider {2237  flex: 1;2238  min-width: 0;2239  height: 2px !important;2240}2241.peach-pwgen-compact-controls .peach-pwgen-len-num {2242  flex-shrink: 0;2243  min-width: 18px;2244  text-align: right;2245}2246.peach-pwgen-compact-pills {2247  display: flex;2248  gap: 3px;2249  flex-shrink: 0;2250}2251.peach-pwgen-compact-pills .peach-pwgen-pill {2252  padding: 2px 7px;2253  font-size: 0.5rem;2254}2255.peach-pwgen-compact-use {2256  flex-shrink: 0;2257  font-size: 0.625rem !important;2258  padding: 3px 9px !important;2259  min-height: 22px !important;2260  border-radius: 5px !important;2261}22622263/* ── Password edit row (input + eye toggle side-by-side) ── */2264.peach-password-edit-row {2265  display: flex;2266  align-items: center;2267  gap: 6px;2268}2269.peach-password-edit-row .peach-inline-input {2270  flex: 1;2271  min-width: 0;2272}22732274/* ── Generate toggle link ── */2275.peach-generate-toggle-link {2276  display: inline-flex;2277  align-items: center;2278  gap: 5px;2279  background: none;2280  border: none;2281  padding: 0;2282  cursor: pointer;2283  font-family: "IBM Plex Mono", monospace;2284  font-size: 0.625rem;2285  color: var(--peach-t2);2286  letter-spacing: 0.04em;2287  transition: color 120ms ease;2288  align-self: flex-start;2289}2290.peach-generate-toggle-link:hover {2291  color: var(--peach-accent);2292}22932294/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2295.peach-entry-body {2296  flex: 1;2297  overflow-y: auto;2298  overflow-x: hidden;2299  scrollbar-width: none;2300  -ms-overflow-style: none;2301  overscroll-behavior: contain;2302  display: grid;2303  gap: 10px;2304  align-content: start;2305  padding: 10px 20px 14px;2306  min-width: 0;2307  min-height: 0;2308}2309.peach-entry-body::-webkit-scrollbar { display: none; }23102311/* Type-toggle pills + inline note toolbar */2312.peach-new-type-row {2313  display: flex;2314  align-items: center;2315  gap: 6px;2316  margin-bottom: 2px;2317}2318.peach-new-type-btn {2319  background: transparent;2320  border: 1px solid var(--peach-t3);2321  border-radius: 12px;2322  padding: 3px 10px;2323  font-family: "IBM Plex Mono", monospace;2324  font-size: 0.5625rem;2325  letter-spacing: 0.12em;2326  text-transform: uppercase;2327  color: var(--peach-t2);2328  cursor: pointer;2329  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2330}2331.peach-new-type-btn.is-active {2332  color: var(--peach-t0);2333  border-color: var(--peach-accent);2334  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2335}2336.peach-new-type-btn:not(.is-active):hover {2337  color: var(--peach-t1);2338  border-color: var(--peach-t2);2339}23402341/* Editable title */2342.peach-new-title-wrap { margin: 0 0 2px; }2343.peach-new-title-input {2344  background: transparent;2345  border: none;2346  outline: none;2347  width: 100%;2348  color: var(--peach-t0);2349  font-family: var(--font-display);2350  font-style: italic;2351  font-weight: 400;2352  font-size: 40px;2353  line-height: 0.95;2354  caret-color: var(--peach-accent);2355}2356.peach-new-title-input::placeholder { color: var(--peach-t2); }23572358/* Editable domain field */2359.peach-domain-edit-row {2360  display: flex;2361  align-items: center;2362  gap: 6px;2363}23642365.peach-domain-edit-row .peach-domain-value--edit {2366  flex: 1;2367  width: 0;2368}23692370.peach-domain-url-btn {2371  flex-shrink: 0;2372  background: transparent;2373  border: none;2374  cursor: pointer;2375  color: var(--peach-t3);2376  padding: 2px 3px;2377  display: flex;2378  align-items: center;2379  line-height: 0;2380  border-radius: 3px;2381  transition: color 120ms ease;2382}23832384.peach-domain-url-btn:hover {2385  color: var(--peach-accent);2386}23872388.peach-domain-value--edit {2389  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2390  font-size: 0.625rem;2391  font-style: italic;2392  letter-spacing: 0.12em;2393  color: var(--peach-t1);2394  background: transparent;2395  border: none;2396  border-bottom: 1px solid var(--peach-t3);2397  outline: none;2398  width: 100%;2399  padding: 2px 0;2400  caret-color: var(--peach-accent);2401  transition: border-color 140ms ease, color 140ms ease;2402}2403.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2404.peach-domain-value--edit:focus {2405  border-bottom-color: rgba(240, 232, 216, 0.28);2406  color: var(--peach-t0);2407}24082409/* Editable field values (username, password, totp) */2410.peach-field-value--edit {2411  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2412  font-size: 0.8125rem;2413  color: var(--peach-t0);2414  background: transparent;2415  border: none;2416  border-bottom: 1px solid var(--peach-t3);2417  outline: none;2418  flex: 1;2419  min-width: 0;2420  padding: 3px 0;2421  caret-color: var(--peach-accent);2422  transition: border-color 140ms ease, color 140ms ease;2423}2424.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2425.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2426.peach-field-value--edit:focus {2427  border-bottom-color: rgba(240, 232, 216, 0.28);2428  color: var(--peach-t0);2429}24302431/* "+ add optional field" links */2432.peach-entry-add-links {2433  display: flex;2434  gap: 12px;2435  flex-wrap: wrap;2436  margin-top: -2px;2437}2438.peach-add-field-link {2439  background: transparent;2440  border: none;2441  padding: 0;2442  cursor: pointer;2443  font-family: "IBM Plex Mono", monospace;2444  font-size: 0.5625rem;2445  letter-spacing: 0.1em;2446  text-transform: uppercase;2447  color: var(--peach-t2);2448  transition: color 140ms ease;2449}2450.peach-add-field-link:hover { color: var(--peach-accent); }24512452/* ── New entry form (legacy classes) ────────────────────────────────── */2453.peach-new-body {2454  flex: 1;2455  overflow-y: auto;2456  padding: 10px 20px 14px;2457}2458.peach-new-name-input {2459  background: transparent;2460  border: none;2461  outline: none;2462  width: 100%;2463  color: var(--peach-t0);2464  font-family: var(--font-display);2465  font-style: italic;2466  font-weight: 400;2467  font-size: 40px;2468  line-height: 0.95;2469  caret-color: var(--peach-accent);2470}2471.peach-new-name-input::placeholder { color: var(--peach-t2); }2472.peach-new-field-input {2473  background: transparent;2474  border: none;2475  outline: none;2476  flex: 1;2477  min-width: 0;2478  caret-color: var(--peach-accent);2479}2480.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }24812482/* ── Canary card ── */2483.peach-canary-card {2484  border: 1px solid rgba(217, 160, 48, 0.2);2485  background: rgba(217, 160, 48, 0.03);2486  border-radius: 8px;2487  padding: 12px;2488}24892490.peach-canary-settings-header {2491  display: flex;2492  align-items: center;2493  justify-content: space-between;2494  cursor: pointer;2495  user-select: none;2496}24972498.peach-canary-card .peach-label {2499  color: rgba(217, 160, 48, 0.85);2500}25012502.peach-canary-card .peach-new-field-input {2503  border-color: rgba(217, 160, 48, 0.25);2504}25052506.peach-canary-card .peach-new-field-input:focus {2507  border-color: rgba(217, 160, 48, 0.5);2508}25092510.peach-canary-body {2511  margin-top: 12px;2512  display: flex;2513  flex-direction: column;2514  gap: 10px;2515}25162517.peach-canary-explainer {2518  display: flex;2519  gap: 10px;2520  padding: 10px 12px;2521  border-radius: 10px;2522  background: rgba(217, 160, 48, 0.06);2523  border: 1px solid rgba(217, 160, 48, 0.22);2524  margin-bottom: 4px;2525}25262527.peach-canary-explainer-icon {2528  font-size: 1rem;2529  flex-shrink: 0;2530  line-height: 1.2;2531}25322533.peach-canary-explainer-title {2534  font-family: var(--font-ui);2535  font-size: 0.6875rem;2536  font-weight: 500;2537  color: rgba(217, 160, 48, 0.9);2538  margin: 0 0 3px;2539}25402541.peach-canary-explainer-copy {2542  font-family: var(--font-ui);2543  font-size: 0.625rem;2544  color: var(--peach-t2);2545  line-height: 1.55;2546  margin: 0;2547}25482549.peach-canary-hint {2550  font-size: 0.625rem;2551  color: var(--peach-t2);2552  font-family: Inter, system-ui, sans-serif;2553  line-height: 1.5;2554  margin-top: 4px;2555}25562557.peach-canary-actions-row {2558  display: flex;2559  align-items: center;2560  gap: 8px;2561}25622563.peach-canary-test-btn {2564  border-color: rgba(217, 160, 48, 0.3);2565  color: rgba(217, 160, 48, 0.85);2566}25672568.peach-canary-test-result {2569  font-size: 0.625rem;2570  font-family: Inter, system-ui, sans-serif;2571}25722573.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2574.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }25752576.peach-canary-badge {2577  display: flex;2578  position: relative;2579  z-index: 1;2580  align-items: center;2581  gap: 5px;2582  padding: 4px 10px;2583  background: rgba(217, 160, 48, 0.12);2584  border: 1px solid rgba(217, 160, 48, 0.35);2585  border-radius: 6px;2586  margin-bottom: 6px;2587  width: fit-content;2588}25892590.peach-canary-badge-label {2591  font-size: 0.625rem;2592  letter-spacing: 0.06em;2593  color: rgba(217, 160, 48, 0.9);2594  font-family: var(--font-ui);2595  text-transform: uppercase;2596}25972598.peach-canary-badge-icon {2599  font-size: 0.6875rem;2600}26012602.peach-canary-suppress-row {2603  display: flex;2604  align-items: center;2605  gap: 8px;2606  padding: 6px 10px;2607  background: rgba(217, 160, 48, 0.08);2608  border-radius: 6px;2609  margin-bottom: 8px;2610}26112612.peach-canary-suppress-label {2613  font-size: 0.6875rem;2614  color: rgba(217, 160, 48, 0.85);2615  cursor: pointer;2616  font-family: var(--font-ui);2617  letter-spacing: 0.04em;2618}26192620.peach-regen-panel {2621  position: relative;2622  z-index: 1;2623  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2624  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2625  border-radius: 8px;2626  padding: 12px;2627  margin-bottom: 8px;2628}26292630.peach-regen-panel-header {2631  display: flex;2632  align-items: center;2633  justify-content: space-between;2634  margin-bottom: 10px;2635}26362637.peach-regen-panel-title {2638  font-size: 0.6875rem;2639  font-weight: 600;2640  letter-spacing: 0.06em;2641  text-transform: uppercase;2642  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2643}26442645.peach-regen-output {2646  background: rgba(0, 0, 0, 0.2);2647  border-radius: 6px;2648  padding: 10px;2649  margin-bottom: 10px;2650  font-family: var(--font-mono);2651  font-size: 0.8125rem;2652  word-break: break-all;2653  color: var(--peach-t1);2654}26552656.peach-regen-actions {2657  display: flex;2658  gap: 6px;2659}26602661.peach-regen-actions--spaced {2662  margin-bottom: 8px;2663}26642665.peach-regen-action-grow {2666  flex: 1;2667}26682669.peach-regen-copy-btn {2670  padding: 0 8px;2671}26722673.peach-regen-success {2674  position: relative;2675  z-index: 1;2676  background: rgba(40, 180, 80, 0.1);2677  border: 1px solid rgba(40, 180, 80, 0.3);2678  border-radius: 8px;2679  padding: 10px 12px;2680  margin-bottom: 8px;2681  display: flex;2682  align-items: center;2683  gap: 8px;2684  font-size: 0.6875rem;2685  color: rgba(40, 180, 80, 0.9);2686}26872688/* ── Note editor overlay ── */2689.peach-note-editor {2690  position: absolute;2691  inset: 0;2692  z-index: 200;2693  display: flex;2694  flex-direction: column;2695  background:2696    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2697    var(--peach-bg);2698  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2699}27002701.peach-note-editor-header {2702  display: flex;2703  align-items: center;2704  gap: 10px;2705  padding: 14px 16px 10px;2706  border-bottom: 1px solid var(--peach-t3);2707  flex-shrink: 0;2708}27092710.peach-note-editor-back {2711  background: transparent;2712  border: none;2713  cursor: pointer;2714  color: var(--peach-t2);2715  padding: 4px 6px;2716  border-radius: 6px;2717  display: flex;2718  align-items: center;2719  transition: color 120ms ease, background 120ms ease;2720  flex-shrink: 0;2721}2722.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }27232724.peach-note-editor-label {2725  flex: 1;2726  font-family: var(--font-display);2727  font-style: italic;2728  font-size: 0.9375rem;2729  color: var(--peach-t1);2730  letter-spacing: 0.02em;2731}27322733.peach-note-editor-save-btn {2734  background: transparent;2735  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2736  border-radius: 8px;2737  color: var(--peach-accent);2738  font-family: "IBM Plex Mono", monospace;2739  font-size: 0.625rem;2740  letter-spacing: 0.06em;2741  text-transform: uppercase;2742  padding: 3px 10px;2743  cursor: pointer;2744  transition: background 120ms ease, border-color 120ms ease;2745}2746.peach-note-editor-save-btn:hover:not(:disabled) {2747  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2748  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2749}2750.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }27512752.peach-note-toolbar {2753  display: flex;2754  align-items: center;2755  gap: 3px;2756  padding: 6px 14px 5px;2757  border-bottom: 1px solid var(--peach-t3);2758  flex-shrink: 0;2759}27602761.peach-note-tool-btn {2762  background: transparent;2763  border: 1px solid transparent;2764  border-radius: 5px;2765  color: var(--peach-t2);2766  font-family: "IBM Plex Mono", monospace;2767  font-size: 0.625rem;2768  letter-spacing: 0.04em;2769  padding: 2px 8px;2770  cursor: pointer;2771  line-height: 1.6;2772  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2773}2774.peach-note-tool-btn:hover {2775  background: var(--peach-t4);2776  color: var(--peach-t0);2777  border-color: var(--peach-t3);2778}27792780.peach-note-tool-icon {2781  padding: 3px 7px;2782  display: inline-flex;2783  align-items: center;2784  justify-content: center;2785}27862787.peach-note-tool-divider {2788  width: 1px;2789  height: 14px;2790  background: var(--peach-t3);2791  margin: 0 4px;2792  flex-shrink: 0;2793}27942795.peach-note-editor-body {2796  flex: 1;2797  overflow-y: auto;2798  padding: 16px 20px 20px;2799  outline: none;2800  font-family: var(--font-display);2801  font-size: 1rem;2802  line-height: 1.75;2803  color: var(--peach-t0);2804  scrollbar-width: none;2805  word-break: break-word;2806}2807.peach-note-editor-body:empty::before {2808  content: "write your note…";2809  color: var(--peach-t3);2810  font-style: italic;2811  pointer-events: none;2812}28132814/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2815.peach-note-editor-inline {2816  display: flex;2817  flex-direction: column;2818  flex: 1;2819  min-height: 0;2820}2821.peach-note-editor-body--inline {2822  flex: 1;2823  min-height: 0;2824  font-size: 0.9375rem;2825  padding: 10px 20px 14px;2826}28272828/* Full-width toolbar row inside the body (Add.tsx note type).2829   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2830.peach-note-toolbar-body {2831  display: flex;2832  align-items: center;2833  gap: 3px;2834  padding: 5px 20px 4px;2835  margin: 2px -20px 0;2836  border-bottom: 1px solid var(--peach-t3);2837  flex-shrink: 0;2838}28392840/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2841   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2842   and .peach-note-tool-divider button-level styles. */2843.peach-note-toolbar-inline {2844  display: flex;2845  align-items: center;2846  gap: 3px;2847  margin-left: auto;2848  padding-left: 10px;2849  border-left: 1px solid var(--peach-t3);2850  min-height: 22px;2851}28522853/* Entry.tsx toolbar row (no tabs, toolbar only) */2854.peach-entry-note-toolbar-row {2855  display: flex;2856  align-items: center;2857  margin: 4px 0 6px;2858  position: relative;2859  z-index: 1;2860}2861.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2862  border-left: none;2863  padding-left: 0;2864  margin-left: 0;2865}28662867/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2868.peach-note-body {2869  display: flex;2870  flex-direction: column;2871  flex: 1;2872  min-height: 0;2873  margin: 4px 0 0;2874}2875.peach-entry-body--new .peach-note-body {2876  margin: 8px -20px 0;2877}28782879/* Add.tsx body is a grid by default; swap to a flex column when a note is2880   active so the note body can stretch and pin the tags row to the bottom. */2881.peach-entry-body--new:has(.peach-note-body) {2882  display: flex;2883  flex-direction: column;2884}28852886/* Rich content element styles (editor + display) */2887.peach-note-editor-body h2,2888.peach-note-content h2 {2889  font-family: var(--font-display);2890  font-size: 20px;2891  font-weight: 600;2892  font-style: italic;2893  color: var(--peach-t0);2894  margin: 6px 0 2px;2895  line-height: 1.3;2896}2897.peach-note-editor-body ul,2898.peach-note-content ul {2899  padding-left: 18px;2900  margin: 3px 0;2901  list-style: disc;2902}2903.peach-note-editor-body ol,2904.peach-note-content ol {2905  padding-left: 18px;2906  margin: 3px 0;2907  list-style: decimal;2908}2909.peach-note-editor-body li,2910.peach-note-content li { margin: 2px 0; }2911.peach-note-editor-body hr,2912.peach-note-content hr {2913  border: none;2914  border-top: 1px solid var(--peach-t3);2915  margin: 10px 0;2916}29172918/* font size elements from execCommand */2919.peach-note-editor-body font[size="1"],2920.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }2921.peach-note-editor-body font[size="2"],2922.peach-note-content font[size="2"] { font-size: 0.8125rem; }2923.peach-note-editor-body font[size="3"],2924.peach-note-content font[size="3"] { font-size: 1rem; }2925.peach-note-editor-body font[size="4"],2926.peach-note-content font[size="4"] { font-size: 20px; }2927.peach-note-editor-body font[size="5"],2928.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }29292930/* bold / italic inside the editor and note display */2931.peach-note-editor-body b, .peach-note-editor-body strong,2932.peach-note-content b, .peach-note-content strong { font-weight: 700; }2933.peach-note-editor-body em, .peach-note-editor-body i,2934.peach-note-content em, .peach-note-content i { font-style: italic; }29352936/* note display — rendered HTML, no pre-wrap */2937.peach-note-content {2938  overflow: auto;2939  max-height: 340px;2940  word-break: break-word;2941}29422943/* ── Note textarea ── */2944.peach-note-textarea {2945  width: 100%;2946  min-height: 180px;2947  max-height: 280px;2948  resize: vertical;2949  background: var(--peach-t4);2950  border: 1px solid var(--peach-t3);2951  border-radius: 8px;2952  padding: 10px 12px;2953  font-family: "IBM Plex Mono", monospace;2954  font-size: 0.75rem;2955  line-height: 1.7;2956  color: var(--peach-t1);2957  outline: none;2958  transition: border-color 150ms ease;2959}29602961.peach-note-textarea:focus {2962  border-color: var(--peach-t2);2963}29642965.peach-note-char-count {2966  font-family: "IBM Plex Mono", monospace;2967  font-size: 0.5625rem;2968  color: var(--peach-t3);2969  text-align: right;2970  margin-top: 4px;2971  letter-spacing: 0.1em;2972}29732974/* ── Field input baseline ── */2975.peach-new-field-input {2976  width: 100%;2977  background: transparent;2978  border: none;2979  border-bottom: 1px solid var(--peach-t3);2980  padding: 4px 0;2981  color: var(--peach-t1);2982  font-family: "IBM Plex Mono", monospace;2983  font-size: 0.8125rem;2984  outline: none;2985  transition: border-color 150ms ease;2986}29872988.peach-new-field-input:focus {2989  border-bottom-color: var(--peach-t0);2990  color: var(--peach-t0);2991}29922993.peach-new-name-input {2994  width: 100%;2995  background: transparent;2996  border: none;2997  border-bottom: 1px solid var(--peach-t3);2998  padding: 6px 0;2999  font-family: var(--font-display);3000  font-style: italic;3001  font-size: 28px;3002  color: var(--peach-t0);3003  outline: none;3004  transition: border-color 150ms ease;3005}30063007.peach-new-name-input:focus {3008  border-bottom-color: var(--peach-t1);3009}30103011.peach-new-name-input::placeholder {3012  color: var(--peach-t2);3013  font-style: italic;3014}30153016.peach-new-field-input::placeholder {3017  color: var(--peach-t3);3018}30193020/* ── Demo entrance animation ── */3021#hd-shell {3022  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3023}3024@keyframes hd-shell-enter {3025  from { opacity: 0; transform: scale(0.96) translateY(16px); }3026  to   { opacity: 1; transform: scale(1) translateY(0); }3027}30283029/* ── Keyframes ── */3030@keyframes peach-char-enter {3031  from { opacity: 0; transform: translateY(0.22em); }3032  to   { opacity: 1; transform: translateY(0); }3033}3034@keyframes peach-content-enter {3035  from { opacity: 0.96; transform: translateY(4px); }3036  to   { opacity: 1; transform: translateY(0); }3037}3038@keyframes peach-content-exit {3039  from { opacity: 1; transform: translateY(0); }3040  to   { opacity: 0.92; transform: translateY(-3px); }3041}3042@keyframes peach-screen-enter {3043  from { opacity: 0; transform: translateY(14px); }3044  to   { opacity: 1; transform: translateY(0); }3045}3046@keyframes peach-shell-fade-in {3047  from { opacity: 0; }3048  to   { opacity: 1; }3049}3050@keyframes peach-veil-in {3051  from { opacity: 0; }3052  to   { opacity: 1; }3053}3054@keyframes peach-lock-settle {3055  0%   { transform: scale(0.9); }3056  65%  { transform: scale(1.08); }3057  100% { transform: scale(1); }3058}3059@keyframes peach-copy-confirm {3060  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3061  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); }3062}3063@keyframes peach-copy-retreat {3064  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); }3065  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3066}3067@keyframes peach-copy-flood {3068  from { opacity: 0; transform: scaleX(0.15); }3069  to   { opacity: 1; transform: scaleX(1); }3070}3071@keyframes peach-copy-icon-settle {3072  from  { transform: scale(0.84); }3073  70%   { transform: scale(1.08); }3074  to    { transform: scale(1); }3075}3076@keyframes peach-copy-sheen-retreat {3077  from { opacity: 1; transform: scaleX(1); }3078  to   { opacity: 0; transform: scaleX(0.15); }3079}3080@keyframes peach-copy-drain {3081  from { width: 100%; }3082  to   { width: 0; }3083}3084@keyframes peach-shake {3085  0%, 100% { transform: translateX(0); }3086  20%      { transform: translateX(-6px); }3087  40%      { transform: translateX(6px); }3088  60%      { transform: translateX(-4px); }3089  80%      { transform: translateX(4px); }3090}30913092@keyframes pip-pulse {3093  0% { transform: scale(1); }3094  40% { transform: scale(2.2); }3095  100% { transform: scale(1); }3096}309730983099/* ── Password generator ── */3100.peach-pwgen-body {3101  flex: 1; overflow-y: auto;3102  display: flex; flex-direction: column;3103}3104.peach-policy-badge {3105  display: flex; align-items: center;3106  padding: 6px 20px 0;3107  font-size: 0.625rem; font-family: Inter, sans-serif;3108  color: var(--peach-t2); letter-spacing: 0.04em;3109}3110.peach-pwgen-display {3111  padding: 14px 20px 12px;3112  border-bottom: 1px solid var(--peach-t3);3113  display: flex; align-items: flex-start; gap: 10px;3114}3115.peach-pwgen-display-row {3116  display: flex;3117  align-items: flex-start;3118  gap: 8px;3119  padding-bottom: 8px;3120  border-bottom: 1px solid var(--peach-t3);3121}3122.peach-pwgen-output {3123  flex: 1; min-width: 0; margin: 0;3124  font-family: "IBM Plex Mono", monospace;3125  font-size: 0.8125rem; color: var(--peach-t0);3126  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3127  white-space: normal;3128  padding: 10px 12px;3129  background: var(--peach-t4);3130  border-radius: 6px;3131  min-height: 36px;3132}3133.peach-pwgen-output-display {3134  flex: 1;3135  min-width: 0;3136  margin: 0;3137  font-family: var(--font-display);3138  font-style: italic;3139  font-weight: 300;3140  font-size: 32px;3141  line-height: 1.05;3142  color: var(--peach-t0);3143  word-break: break-all;3144  overflow-wrap: break-word;3145  white-space: normal;3146  letter-spacing: 0.02em;3147}3148.peach-pwgen-display-actions {3149  display: flex;3150  flex-direction: column;3151  gap: 4px;3152  flex-shrink: 0;3153  margin-top: 2px;3154}3155.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3156.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3157.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3158.peach-pwgen-len-num {3159  font-family: "IBM Plex Mono", monospace;3160  font-size: 0.75rem; color: var(--peach-accent);3161}3162.peach-pwgen-len-num--edit {3163  cursor: text;3164  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3165}3166.peach-pwgen-len-input {3167  font-family: "IBM Plex Mono", monospace;3168  font-size: 0.75rem;3169  color: var(--peach-accent);3170  background: transparent;3171  border: none;3172  border-bottom: 1px solid var(--peach-accent);3173  outline: none;3174  width: 32px;3175  text-align: right;3176  padding: 0;3177}3178.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3179.peach-pwgen-toggles { display: flex; flex-direction: column; }3180.peach-pwgen-charset-pills {3181  display: flex;3182  gap: 6px;3183  flex-wrap: wrap;3184}3185.peach-pwgen-pill {3186  padding: 4px 11px;3187  border-radius: 999px;3188  border: 1px solid var(--peach-t3);3189  background: transparent;3190  color: var(--peach-t2);3191  font-family: "IBM Plex Mono", monospace;3192  font-size: 0.5625rem;3193  letter-spacing: 0.08em;3194  cursor: pointer;3195  transition: all 150ms ease;3196}3197.peach-pwgen-pill.is-on {3198  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3199  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3200  color: var(--peach-accent);3201}3202.peach-pwgen-pill:not(.is-on):hover {3203  color: var(--peach-t1);3204  border-color: var(--peach-t2);3205}3206.peach-pwgen-use-btn {3207  width: 100%;3208  min-height: 34px;3209  border-radius: 8px;3210  margin-top: 2px;3211}3212.peach-generator-constraint-note {3213  font-family: 'IBM Plex Mono', monospace;3214  font-size: 10px;3215  color: var(--peach-t3);3216  letter-spacing: 0.04em;3217  margin: 0;3218  transition: opacity 200ms ease;3219}3220.peach-pwgen-toggle-row {3221  display: flex; align-items: center; justify-content: space-between;3222  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3223}3224.peach-pwgen-toggle-row:last-child { border-bottom: none; }3225.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }32263227.peach-screen-prelock {3228  z-index: 10;3229}32303231.prelock-form {3232  display: grid;3233  gap: 12px;3234}32353236/* Peach popup should not expose native scrollbars on internal panels. */3237.peach-settings-body,3238.peach-new-body,3239.peach-pwgen-body,3240.lock-screen,3241.peach-import-preview {3242  scrollbar-width: none;3243  -ms-overflow-style: none;3244  overscroll-behavior: contain;3245}3246.peach-settings-body::-webkit-scrollbar,3247.peach-new-body::-webkit-scrollbar,3248.peach-pwgen-body::-webkit-scrollbar,3249.lock-screen::-webkit-scrollbar,3250.peach-import-preview::-webkit-scrollbar {3251  width: 0;3252  height: 0;3253  display: none;3254}32553256.lock-screen {3257  height: 100%;3258  min-height: 100%;3259  overflow-y: auto;3260  padding: 18px 18px 16px;3261  gap: 14px;3262  grid-template-rows: auto auto auto 1fr auto;3263  align-content: stretch;3264  position: relative;3265  isolation: isolate;3266}3267.peach-screen.lock-screen--vault-stage {3268  display: flex;3269  flex-direction: column;3270  justify-content: flex-start;3271  gap: 18px;3272  padding: 20px 18px 18px;3273  overflow: hidden;3274}3275.peach-screen.lock-screen--vault-stage .peach-lock-panel {3276  margin-top: 0;3277}3278.lock-screen--onboarding {3279  display: flex;3280  flex-direction: column;3281  gap: 12px;3282  justify-content: flex-start;3283}32843285.lock-screen::before {3286  content: "";3287  position: absolute;3288  inset: 12px 18px auto auto;3289  width: 160px;3290  height: 160px;3291  border-radius: 999px;3292  background:3293    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%);3294  filter: blur(6px);3295  opacity: 0.7;3296  pointer-events: none;3297  z-index: 0;3298}32993300.peach-lock-rune-string {3301  flex: 1;3302  display: flex;3303  align-items: center;3304  justify-content: center;3305  gap: 6px;3306  font-family: PeachScript, monospace;3307  font-size: 0.8125rem;3308  letter-spacing: 0.05em;3309  pointer-events: none;3310  user-select: none;3311  position: relative;3312  z-index: 1;3313}33143315.peach-lock-rune-string span {3316  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3317  text-shadow:3318    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3319    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3320  transition: color 0.9s ease, text-shadow 0.9s ease;3321}33223323.peach-lock-rune-string span.is-glowing {3324  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3325  text-shadow:3326    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3327    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3328}33293330.lock-screen-header {3331  display: flex;3332  align-items: center;3333  justify-content: space-between;3334  position: relative;3335  z-index: 1;3336}33373338.lock-password-input.shake {3339  animation: peach-shake 300ms ease-in-out;3340}33413342.peach-hint-error {3343  color: rgba(220, 80, 60, 0.92);3344}33453346.peach-onboarding-headline {3347  margin: 0;3348  font-family: var(--font-display);3349  font-size: 35px;3350  line-height: 0.88;3351  font-style: italic;3352  font-weight: 400;3353  max-width: 252px;3354}33553356.peach-lock-copy {3357  display: grid;3358  gap: 8px;3359  position: relative;3360  z-index: 1;3361}33623363.peach-lock-copy--onboarding {3364  gap: 10px;3365}33663367.peach-lock-hero {3368  position: relative;3369  z-index: 1;3370  display: grid;3371  gap: 8px;3372  min-height: 0;3373  padding: 4px 2px 0;3374  border: none;3375  border-radius: 0;3376  background: transparent;3377  box-shadow: none;3378}3379.peach-lock-hero-art {3380  position: absolute;3381  right: -8px;3382  top: -6px;3383  width: 120px;3384  height: 120px;3385  display: flex;3386  align-items: center;3387  justify-content: center;3388  pointer-events: none;3389  opacity: 0.12;3390  filter: saturate(0.9);3391}3392.peach-lock-hero-mark {3393  width: 100%;3394  height: 100%;3395}3396/* Peach body stays brand-peach across every accent — we don't want a3397   green or blue peach when sage/sky is selected. Leaf + stem keep the3398   sage tint because a real peach has a sage leaf. */3399.peach-lock-hero-mark path:nth-child(2),3400.peach-lock-hero-mark path:nth-child(3) {3401  stroke: rgba(123, 144, 96, 0.88);3402  fill: rgba(123, 144, 96, 0.88);3403}3404.peach-lock-hero > *:not(.peach-lock-hero-art) {3405  position: relative;3406  z-index: 1;3407}34083409.peach-lock-eyebrow {3410  display: inline-flex;3411  align-items: center;3412  width: fit-content;3413  padding: 4px 9px;3414  border-radius: 999px;3415  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3416  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3417  color: var(--peach-t0);3418  font-family: "IBM Plex Mono", monospace;3419  font-size: 0.5rem;3420  letter-spacing: 0.18em;3421  text-transform: uppercase;3422}34233424.peach-lock-label-row {3425  display: flex;3426  align-items: center;3427  justify-content: space-between;3428  margin-bottom: 0;3429}34303431.peach-lock-reveal-btn {3432  display: inline-flex;3433  align-items: center;3434  gap: 4px;3435  background: none;3436  border: none;3437  cursor: pointer;3438  font-family: "IBM Plex Mono", monospace;3439  font-size: 0.5625rem;3440  letter-spacing: 0.06em;3441  color: var(--peach-t2);3442  padding: 2px 0;3443  transition: color 150ms ease;3444}34453446.peach-lock-reveal-btn:hover {3447  color: var(--peach-t1);3448}34493450.peach-lock-warning {3451  color: rgba(220, 80, 60, 0.85) !important;3452  line-height: 1.5;3453}34543455.peach-onboarding-cards {3456  display: grid;3457  gap: 8px;3458  position: relative;3459  z-index: 1;3460}34613462.peach-lock-panel {3463  position: relative;3464  z-index: 1;3465  display: grid;3466  gap: 9px;3467  padding: 14px 16px 15px;3468  border-radius: 18px;3469  border: 1px solid var(--peach-t3);3470  background:3471    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3472  box-shadow:3473    inset 0 1px 0 rgba(240, 232, 216, 0.04),3474    0 12px 28px rgba(0, 0, 0, 0.12);3475}34763477/* Glass surface — lock panel and settings groups */3478.peach-glass {3479  background: rgba(26, 20, 16, 0.65);3480  border: 1px solid rgba(255, 255, 255, 0.08);3481  border-radius: 12px;3482  backdrop-filter: blur(12px) saturate(1.4);3483  -webkit-backdrop-filter: blur(12px) saturate(1.4);3484}34853486@supports not (backdrop-filter: blur(1px)) {3487  .peach-glass {3488    background: rgba(26, 20, 16, 0.92);3489    border: 1px solid rgba(255, 255, 255, 0.10);3490    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3491  }3492}34933494.light .peach-glass,3495[data-theme="light"] .peach-glass {3496  background: rgba(253, 248, 244, 0.70);3497  border: 1px solid rgba(0, 0, 0, 0.07);3498  backdrop-filter: blur(12px) saturate(1.2);3499  -webkit-backdrop-filter: blur(12px) saturate(1.2);3500}35013502@supports not (backdrop-filter: blur(1px)) {3503  .light .peach-glass,3504  [data-theme="light"] .peach-glass {3505    background: rgba(253, 248, 244, 0.95);3506    border: 1px solid rgba(0, 0, 0, 0.09);3507  }3508}35093510/* Lock panel keeps its own border-radius over the generic glass token */3511.peach-lock-panel.peach-glass {3512  border-radius: 18px;3513  background: rgba(26, 20, 16, 0.65);3514  border: 1px solid rgba(255, 255, 255, 0.08);3515  box-shadow:3516    inset 0 1px 0 rgba(255, 255, 255, 0.05),3517    0 12px 28px rgba(0, 0, 0, 0.3);3518}35193520.light .peach-lock-panel.peach-glass,3521[data-theme="light"] .peach-lock-panel.peach-glass {3522  background: rgba(238, 227, 204, 0.75);3523  border: 1px solid rgba(34, 24, 9, 0.10);3524  box-shadow:3525    inset 0 1px 0 rgba(255, 255, 255, 0.5),3526    0 8px 24px rgba(80, 56, 32, 0.15);3527}35283529@supports not (backdrop-filter: blur(1px)) {3530  .peach-lock-panel.peach-glass {3531    background: rgba(26, 20, 16, 0.92);3532    box-shadow:3533      inset 0 1px 0 rgba(255, 255, 255, 0.05),3534      0 12px 28px rgba(0, 0, 0, 0.4);3535  }3536  .light .peach-lock-panel.peach-glass,3537  [data-theme="light"] .peach-lock-panel.peach-glass {3538    background: rgba(238, 227, 204, 0.96);3539  }3540}35413542.peach-lock-panel--secondary {3543  gap: 12px;3544}35453546.peach-lock-panel-header {3547  display: flex;3548  align-items: baseline;3549  justify-content: space-between;3550  gap: 12px;3551}35523553.peach-lock-option-grid {3554  display: grid;3555  gap: 10px;3556}35573558.peach-lock-option {3559  width: 100%;3560  display: grid;3561  gap: 6px;3562  padding: 14px 15px;3563  border-radius: 16px;3564  border: 1px solid rgba(240, 232, 216, 0.08);3565  background: rgba(240, 232, 216, 0.02);3566  color: var(--peach-t0);3567  text-align: left;3568  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3569}35703571.peach-lock-option:hover {3572  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3573  background: rgba(240, 232, 216, 0.04);3574  transform: translateY(-1px);3575}35763577.peach-lock-option-title {3578  font-size: 0.75rem;3579  color: var(--peach-t0);3580}35813582.peach-lock-option-copy {3583  font-size: 0.6875rem;3584  line-height: 1.55;3585  color: var(--peach-t1);3586}35873588.peach-onboarding-stack {3589  margin-top: 2px;3590}3591.peach-lock-panel-footer {3592  display: grid;3593  gap: 6px;3594  margin-top: 2px;3595  padding-top: 10px;3596  border-top: 1px solid rgba(240, 232, 216, 0.06);3597}35983599/* ── Restore tab view ─────────────────────────────────────────────────────3600   Tab-based restore screen replacing the old three-card picker. */36013602.peach-restore-tabview {3603  overflow: hidden;3604}36053606.peach-restore-tabcard {3607  flex: 1;3608  display: flex;3609  flex-direction: column;3610  gap: 0;3611  padding: 0;3612  overflow: hidden;3613  cursor: default;3614  user-select: none;3615  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3616}36173618/* ── Tab selector ─────────────────────────────────────────────────────── */36193620.peach-restore-tabs {3621  display: flex;3622  justify-content: space-around;3623  padding: 14px 10px 10px;3624  border-bottom: 1px solid var(--peach-t3);3625  gap: 2px;3626  overflow: hidden;3627  scrollbar-width: none;3628}3629.peach-restore-tabs::-webkit-scrollbar { display: none; }36303631.peach-restore-tab {3632  background: none;3633  border: none;3634  cursor: pointer;3635  padding: 3px 2px;3636  font-family: 'Cormorant Garamond', Georgia, serif;3637  font-style: italic;3638  font-size: 11px;3639  color: var(--peach-t2);3640  transition: color 150ms ease, text-shadow 150ms ease;3641  flex: 1;3642  min-width: 0;3643  text-align: center;3644  white-space: nowrap;3645  overflow: hidden;3646  text-overflow: ellipsis;3647}3648.peach-restore-tab:hover {3649  color: var(--peach-accent);3650  text-shadow:3651    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3652    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3653}3654.peach-restore-tab.is-active {3655  color: var(--peach-accent);3656  text-shadow:3657    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3658    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3659}36603661/* ── Content area ─────────────────────────────────────────────────────── */36623663.peach-restore-content {3664  padding: 16px 16px 14px;3665  display: flex;3666  flex-direction: column;3667  gap: 8px;3668  overflow: hidden;3669  scrollbar-width: none;3670  flex: 1;3671}3672.peach-restore-content::-webkit-scrollbar { display: none; }3673.peach-restore-content > * {3674  overflow: hidden;3675  scrollbar-width: none;3676}3677.peach-restore-content > *::-webkit-scrollbar { display: none; }36783679/* ── Shared tab inner layout ──────────────────────────────────────────── */36803681.peach-rt-symbols,3682.peach-rt-csv,3683.peach-rt-phone {3684  display: flex;3685  flex-direction: column;3686  gap: 8px;3687  overflow: hidden;3688}36893690.peach-rt-submit {3691  width: 100%;3692}36933694.peach-rt-error {3695  margin: 0;3696  font-size: 0.6875rem;3697  color: var(--peach-breach);3698  line-height: 1.4;3699}37003701/* ── PeachScript tab ──────────────────────────────────────────────────── */37023703.peach-restore-symbols-textarea {3704  font-family: 'PeachScript', monospace;3705  font-size: 13px;3706  line-height: 1.9;3707  letter-spacing: 0.1em;3708  word-break: break-all;3709  resize: none;3710  width: 100%;3711  min-height: 56px;3712  max-height: 72px;3713  overflow: hidden;3714  scrollbar-width: none;3715  -ms-overflow-style: none;3716  box-sizing: border-box;3717  padding: 6px 8px;3718  border-radius: 8px;3719  border: 1px solid var(--peach-t3);3720  background: rgba(240, 232, 216, 0.03);3721  color: var(--peach-t0);3722}3723.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3724.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37253726.peach-restore-symbols-pass {3727  width: 100%;3728  box-sizing: border-box;3729  padding: 7px 10px;3730  border-radius: 8px;3731  border: 1px solid var(--peach-t3);3732  background: rgba(240, 232, 216, 0.03);3733  color: var(--peach-t0);3734  font-size: 0.8125rem;3735}3736.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3737.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37383739.peach-rt-divider {3740  text-align: center;3741  font-size: 0.6875rem;3742  color: var(--peach-t2);3743  font-style: italic;3744}37453746.peach-rt-file-label {3747  width: 100%;3748  justify-content: center;3749}37503751.peach-rt-anim-canvas {3752  width: 100%;3753  height: 180px;3754  border-radius: 10px;3755  overflow: hidden;3756  display: block;3757}37583759/* ── CSV tab ──────────────────────────────────────────────────────────── */37603761.peach-rt-csv-sources {3762  margin: 0;3763  font-size: 0.6875rem;3764  color: var(--peach-t2);3765  line-height: 1.5;3766  text-align: center;3767}37683769.peach-rt-csv-warning {3770  margin: 0;3771  font-family: "IBM Plex Mono", monospace;3772  font-size: 0.5625rem;3773  letter-spacing: 0.12em;3774  color: var(--peach-breach);3775  text-align: center;3776}37773778/* ── From Phone tab ───────────────────────────────────────────────────── */37793780.peach-rt-phone-code {3781  margin: 0;3782  text-align: center;3783  font-family: "IBM Plex Mono", monospace;3784  font-size: 22px;3785  letter-spacing: 0.18em;3786  color: var(--peach-t0);3787}37883789.peach-rt-phone-qr {3790  display: block;3791  width: 96px;3792  height: 96px;3793  margin: 0 auto;3794  border-radius: 6px;3795  image-rendering: pixelated;3796  overflow: hidden;3797}37983799.peach-rt-phone-hint {3800  margin: 0;3801  font-size: 0.6875rem;3802  color: var(--peach-t2);3803  line-height: 1.55;3804  text-align: center;3805}38063807/* ── Intro popup ──────────────────────────────────────────────────────── */38083809.peach-restore-intro-overlay {3810  position: absolute;3811  inset: 0;3812  z-index: 100;3813  display: flex;3814  align-items: center;3815  justify-content: center;3816  padding: 20px;3817  background: rgba(12, 10, 6, 0.7);3818  backdrop-filter: blur(4px);3819  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3820}38213822.peach-restore-intro-card {3823  width: 100%;3824  display: flex;3825  flex-direction: column;3826  gap: 12px;3827  padding: 22px 20px 20px;3828  border-radius: 16px;3829  border: 1px solid var(--peach-t3);3830  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3831  backdrop-filter: blur(4px);3832  -webkit-backdrop-filter: blur(4px);3833  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3834}38353836.peach-restore-intro-headline {3837  margin: 0;3838  font-family: var(--font-display);3839  font-style: italic;3840  font-size: 20px;3841  font-weight: 400;3842  color: var(--peach-t0);3843}38443845.peach-restore-intro-body {3846  display: flex;3847  flex-direction: column;3848  gap: 8px;3849}3850.peach-restore-intro-body p {3851  margin: 0;3852  font-size: 0.75rem;3853  color: var(--peach-t1);3854  line-height: 1.5;3855}38563857.peach-restore-intro-btn {3858  width: 100%;3859  margin-top: 4px;3860}38613862/* Snapshot restore panel */3863.peach-snapshot-panel {3864  gap: 10px;3865  overflow-y: auto;3866  max-height: 340px;3867}3868.peach-snapshot-list {3869  display: flex;3870  flex-direction: column;3871  gap: 4px;3872}3873.peach-snapshot-row {3874  display: flex;3875  align-items: center;3876  justify-content: space-between;3877  width: 100%;3878  padding: 8px 10px;3879  border-radius: 8px;3880  border: 1px solid rgba(240, 232, 216, 0.07);3881  background: transparent;3882  cursor: pointer;3883  transition: border-color 120ms, background 120ms;3884  text-align: left;3885  gap: 8px;3886}3887.peach-snapshot-row:hover {3888  border-color: rgba(240, 232, 216, 0.14);3889  background: rgba(240, 232, 216, 0.03);3890}3891.peach-snapshot-row.is-selected {3892  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3893  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3894}3895.peach-snapshot-time {3896  font-size: 11.5px;3897  color: var(--peach-t0);3898  flex: 1;3899}3900.peach-snapshot-count {3901  font-family: "IBM Plex Mono", monospace;3902  font-size: 0.625rem;3903  color: var(--peach-t2);3904  flex-shrink: 0;3905}3906.peach-snapshot-confirm {3907  display: flex;3908  flex-direction: column;3909  gap: 8px;3910  padding-top: 10px;3911  border-top: 1px solid rgba(240, 232, 216, 0.06);3912}3913.peach-snapshot-warning {3914  display: flex;3915  align-items: flex-start;3916  gap: 6px;3917  font-size: 10.5px;3918  color: rgba(220, 80, 60, 0.85);3919  line-height: 1.55;3920}3921.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3922.peach-snapshot-confirm-row {3923  display: flex;3924  gap: 6px;3925  align-items: center;3926}3927.peach-snapshot-restore-btn {3928  width: 100%;3929}3930.peach-lock-hero--unlock .peach-lock-hero-art {3931  width: 112px;3932  height: 112px;3933  right: 0;3934  top: 2px;3935  opacity: 0.1;3936}39373938.peach-card {3939  border: 1px solid var(--peach-t3);3940  border-radius: 18px;3941  background:3942    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3943  box-shadow:3944    inset 0 0 0 1px var(--peach-border-accent),3945    inset 0 1px 0 rgba(240, 232, 216, 0.04),3946    0 12px 32px rgba(0, 0, 0, 0.14);3947  overflow: hidden;3948}39493950.peach-card-active {3951  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3952  box-shadow:3953    inset 0 1px 0 rgba(240, 232, 216, 0.05),3954    0 16px 38px rgba(0, 0, 0, 0.18),3955    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);3956}39573958.peach-card-disabled {3959  opacity: 0.72;3960}39613962.peach-card-header {3963  width: 100%;3964  padding: 13px 16px 11px;3965  background: transparent;3966  color: var(--peach-t0);3967  display: flex;3968  justify-content: space-between;3969  align-items: center;3970  text-align: left;3971  font-size: 0.75rem;3972}39733974.peach-card-body {3975  padding: 0 16px 16px;3976  display: grid;3977  gap: 9px;3978}39793980.peach-card-tag {3981  color: var(--peach-t2);3982  font-family: "IBM Plex Mono", monospace;3983  font-size: 0.5625rem;3984  letter-spacing: 0.12em;3985  text-transform: uppercase;3986}39873988.peach-empty-copy {3989  display: grid;3990  gap: 6px;3991  color: var(--peach-t1);3992  font-size: 0.8125rem;3993}39943995.peach-lock-submit {3996  width: 100%;3997  box-shadow:3998    0 1px 0 rgba(255,255,255,0.10) inset,3999    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4000    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4001    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4002}40034004.peach-lock-secondary {4005  width: 100%;4006  border-color: var(--peach-t3);4007  background: rgba(240, 232, 216, 0.02);4008}40094010.peach-lock-secondary:hover {4011  background: rgba(240, 232, 216, 0.04);4012}40134014.peach-lock-note {4015  max-width: none;4016  line-height: 1.55;4017  margin: 0;4018}40194020.peach-overlay-action {4021  font-size: 0.625rem;4022  padding: 4px 8px;4023  letter-spacing: 0.06em;4024  min-width: 44px;4025  text-align: center;4026}40274028.peach-overlay-spacer {4029  width: 32px;4030}40314032.peach-inline-action {4033  flex-shrink: 0;4034  font-size: 0.5625rem;4035  letter-spacing: 0.1em;4036  text-transform: uppercase;4037  padding: 4px 7px;4038}4039.peach-password-toggle-btn {4040  display: inline-flex;4041  align-items: center;4042  justify-content: center;4043  min-width: 30px;4044  min-height: 26px;4045  padding: 0 7px;4046  border: 1px solid var(--peach-t3);4047  border-radius: 999px;4048  background: rgba(240, 232, 216, 0.04);4049  color: var(--peach-t2);4050  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4051}4052.peach-password-toggle-btn:hover {4053  border-color: var(--peach-t2);4054  color: var(--peach-t0);4055  background: rgba(240, 232, 216, 0.06);4056}40574058.peach-new-textarea {4059  width: 100%;4060  min-height: 88px;4061  resize: vertical;4062  border: 0;4063  outline: none;4064  background: transparent;4065  color: var(--peach-t1);4066  font-family: "IBM Plex Mono", monospace;4067  font-size: 0.75rem;4068  line-height: 1.65;4069  caret-color: var(--peach-accent);4070}40714072.peach-new-textarea::placeholder {4073  color: var(--peach-t2);4074  opacity: 0.7;4075}40764077.peach-settings-actions {4078  display: grid;4079  gap: 8px;4080}40814082.peach-sync-section-label {4083  font-size: 0.6875rem;4084  color: var(--peach-t2);4085  text-transform: uppercase;4086  letter-spacing: 0.05em;4087}40884089.peach-sync-network-note {4090  margin: 0 0 6px;4091  font-size: 0.75rem;4092  color: var(--peach-t2);4093  line-height: 1.4;4094}40954096.peach-settings-row--tappable {4097  background: none;4098  border: none;4099  width: 100%;4100  text-align: left;4101  cursor: pointer;4102  color: var(--peach-t1);4103  font-size: 0.8125rem;4104}4105.peach-settings-row--tappable:hover {4106  color: var(--peach-t0);4107}41084109.peach-sync-pro-hint {4110  display: flex;4111  flex-direction: column;4112  align-items: flex-start;4113  gap: 8px;4114  padding: 12px 0 4px;4115}41164117.peach-sync-device-row {4118  display: flex;4119  justify-content: space-between;4120  align-items: center;4121  padding: 6px 0;4122  border-bottom: 1px solid var(--peach-t3);4123}41244125.peach-sync-device-info {4126  display: flex;4127  flex-direction: column;4128  gap: 2px;4129}41304131.peach-sync-device-name {4132  font-size: 0.8125rem;4133  color: var(--peach-t0);4134}41354136.peach-sync-device-meta {4137  font-size: 0.6875rem;4138  color: var(--peach-t2);4139}41404141.peach-sync-status-dot {4142  display: inline-block;4143  width: 8px;4144  height: 8px;4145  border-radius: 50%;4146  vertical-align: middle;4147}41484149.peach-sync-remove-btn {4150  color: var(--peach-breach);4151}41524153.peach-sync-advanced-row {4154  display: flex;4155  justify-content: space-between;4156  align-items: center;4157  padding: 6px 0;4158  gap: 12px;4159}41604161.peach-sync-advanced-info {4162  display: flex;4163  flex-direction: column;4164  gap: 2px;4165  flex: 1;4166}41674168.peach-sync-advanced-name {4169  font-size: 0.8125rem;4170  color: var(--peach-t0);4171}41724173.peach-sync-reset-confirm {4174  display: flex;4175  flex-direction: column;4176  gap: 8px;4177  padding: 10px;4178  border: 1px solid var(--peach-breach);4179  border-radius: 10px;4180  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4181}41824183.peach-sync-reset-confirm-headline {4184  font-size: 0.8125rem;4185  font-weight: 600;4186  color: var(--peach-t0);4187  margin: 0;4188}41894190.peach-sync-reset-confirm-body {4191  font-size: 0.75rem;4192  color: var(--peach-t1);4193  margin: 0;4194  line-height: 1.4;4195}41964197.peach-btn--danger {4198  background: var(--peach-breach);4199  color: #fff;4200  border-color: var(--peach-breach);4201}4202.peach-btn--danger:hover:not(:disabled) {4203  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4204}4205.peach-btn--danger:disabled {4206  opacity: 0.55;4207  cursor: not-allowed;4208}42094210.peach-sync-hero-icon {4211  color: var(--peach-t1);4212  opacity: 0.85;4213}42144215.peach-import-preview {4216  margin-bottom: 12px;4217  max-height: 152px;4218  overflow-y: auto;4219  border: 1px solid var(--peach-t3);4220  border-radius: 10px;4221  padding: 8px 10px;4222  display: grid;4223  gap: 8px;4224  background: rgba(240, 232, 216, 0.02);4225}42264227.peach-import-preview-row {4228  display: flex;4229  justify-content: space-between;4230  gap: 10px;4231  font-size: 0.6875rem;4232  color: var(--peach-t1);4233}42344235.peach-import-preview-title {4236  color: var(--peach-t0);4237  flex: 1;4238  min-width: 0;4239  overflow: hidden;4240  text-overflow: ellipsis;4241  white-space: nowrap;4242}42434244.peach-import-preview-meta {4245  color: var(--peach-t2);4246  flex-shrink: 0;4247  max-width: 42%;4248  overflow: hidden;4249  text-overflow: ellipsis;4250  white-space: nowrap;4251}42524253.peach-import-preview-more {4254  color: var(--peach-t2);4255  font-size: 0.625rem;4256}42574258.peach-restore-copy {4259  margin: 0;4260  color: var(--peach-t1);4261  font-size: 0.6875rem;4262  line-height: 1.6;4263}42644265.peach-restore-warning {4266  padding: 10px 12px;4267  border-radius: 12px;4268  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4269  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4270  color: var(--peach-t0);4271  font-size: 0.6875rem;4272  line-height: 1.55;4273}42744275.peach-provider-chips {4276  display: flex;4277  flex-wrap: wrap;4278  gap: 6px;4279}42804281.peach-provider-chip {4282  display: inline-flex;4283  align-items: center;4284  padding: 5px 8px;4285  border-radius: 999px;4286  border: 1px solid var(--peach-t3);4287  background: rgba(240, 232, 216, 0.02);4288  color: var(--peach-t1);4289  font-family: "IBM Plex Mono", monospace;4290  font-size: 0.5rem;4291  letter-spacing: 0.08em;4292  text-transform: uppercase;4293}42944295.peach-restore-file,4296.peach-restore-input {4297  width: 100%;4298  border-radius: 10px;4299  border: 1px solid var(--peach-t3);4300  background: var(--peach-s2);4301  color: var(--peach-t0);4302  font-size: 0.75rem;4303}43044305.peach-restore-file {4306  padding: 9px 10px;4307}43084309.peach-restore-file::file-selector-button {4310  margin-right: 10px;4311  padding: 7px 10px;4312  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4313  border-radius: 999px;4314  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4315  color: var(--peach-t0);4316  font-size: 0.625rem;4317  letter-spacing: 0.08em;4318  text-transform: uppercase;4319  cursor: pointer;4320}43214322.peach-restore-input {4323  padding: 10px 12px;4324}43254326.peach-auth-grid {4327  display: grid;4328  gap: 10px;4329}43304331.peach-import-summary {4332  color: var(--peach-t1);4333  font-size: 0.75rem;4334  line-height: 1.6;4335  margin-bottom: 12px;4336}43374338.peach-restore-error {4339  color: rgba(220, 80, 60, 0.95);4340  font-size: 0.75rem;4341  line-height: 1.55;4342}43434344.peach-passkey-card {4345  max-width: 400px;4346  margin: auto 16px;4347  align-self: center;4348  width: calc(100% - 32px);4349}43504351/* Center the approval card vertically inside the overlay-view (which sets4352 * flex-direction: column without justify-content). Without this, the card4353 * sits at the top with a tall empty band below — looks unfinished on the4354 * 320px popup. */4355.peach-overlay-view:has(.peach-passkey-card) {4356  justify-content: center;4357}43584359.peach-pro-badge {4360  padding: 2px 6px;4361  border-radius: 999px;4362  font-family: var(--font-ui);4363  font-size: 0.625rem;4364  letter-spacing: 0.08em;4365  text-transform: uppercase;4366  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4367  color: var(--peach-accent);4368}43694370/* ── Shortcuts rebind table ─────────────────────────────────── */4371.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4372.peach-shortcut-row {4373  display: flex;4374  align-items: center;4375  gap: 10px;4376  padding: 6px 0;4377}4378.peach-shortcut-row-label {4379  flex: 1;4380  font-size: 0.75rem;4381  color: var(--peach-t0);4382}4383.peach-shortcut-chip {4384  min-width: 64px;4385  padding: 4px 10px;4386  border-radius: 6px;4387  border: 1px solid var(--peach-t3);4388  background: var(--peach-input-bg, var(--surface-card));4389  color: var(--peach-t0);4390  font-family: var(--font-mono);4391  font-size: 0.6875rem;4392  letter-spacing: 0.04em;4393  cursor: pointer;4394  text-align: center;4395  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4396}4397.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4398.peach-shortcut-chip.is-custom {4399  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4400  color: var(--peach-accent);4401}4402.peach-shortcut-chip.is-capturing {4403  border-color: var(--peach-accent);4404  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4405  color: var(--peach-accent);4406  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4407}4408@keyframes peach-shortcut-capture-pulse {4409  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4410  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4411}4412.peach-shortcut-reset {4413  background: transparent;4414  border: none;4415  cursor: pointer;4416  color: var(--peach-t2);4417  padding: 4px 6px;4418  border-radius: 5px;4419  font-size: 0.875rem;4420  line-height: 1;4421  transition: color 120ms ease, background 120ms ease;4422}4423.peach-shortcut-reset:hover {4424  color: var(--peach-t0);4425  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4426}4427.peach-shortcuts-conflict {4428  margin: 4px 0 0;4429  padding: 8px 10px;4430  border-radius: 7px;4431  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4432  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4433  font-family: var(--font-mono);4434  font-size: 0.6875rem;4435  color: var(--peach-t0);4436}44374438/* ── Help dialog overlay (? to open) ────────────────────────── */4439.peach-shortcuts-help-backdrop {4440  position: fixed;4441  inset: 0;4442  background: rgba(0, 0, 0, 0.55);4443  backdrop-filter: blur(2px);4444  display: flex;4445  align-items: center;4446  justify-content: center;4447  z-index: 1000;4448  animation: peach-help-fade-in 140ms ease forwards;4449}4450@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4451.peach-shortcuts-help-card {4452  width: min(320px, 92vw);4453  max-height: 80vh;4454  overflow-y: auto;4455  border-radius: 14px;4456  border: 1px solid var(--peach-t3);4457  background: var(--peach-bg);4458  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4459  padding: 16px 18px 18px;4460  display: flex;4461  flex-direction: column;4462  gap: 12px;4463}4464.peach-shortcuts-help-head {4465  display: flex; align-items: center; justify-content: space-between;4466}4467.peach-shortcuts-help-head h3 {4468  margin: 0;4469  font-family: var(--font-display);4470  font-style: italic;4471  font-weight: 400;4472  font-size: 22px;4473  color: var(--peach-t0);4474}4475.peach-shortcuts-help-close {4476  background: transparent;4477  border: none;4478  color: var(--peach-t2);4479  cursor: pointer;4480  font-size: 0.875rem;4481  padding: 4px 8px;4482  border-radius: 5px;4483}4484.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4485.peach-shortcuts-help-body ul {4486  list-style: none; padding: 0; margin: 4px 0 12px;4487  display: grid; gap: 8px;4488}4489.peach-shortcuts-help-body li {4490  display: flex; align-items: center; justify-content: space-between; gap: 12px;4491  font-size: 0.75rem; color: var(--peach-t0);4492}4493.peach-shortcuts-help-body kbd {4494  font-family: var(--font-mono);4495  font-size: 0.6875rem;4496  padding: 3px 8px;4497  border-radius: 6px;4498  background: var(--surface-card);4499  border: 1px solid var(--peach-t3);4500  color: var(--peach-accent);4501  letter-spacing: 0.04em;4502}45034504/* ── Pro promo on Account screen ────────────────────────────── */4505.peach-pro-promo {4506  position: relative;4507  border-radius: 14px;4508  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4509  background:4510    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4511    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4512    var(--surface-card);4513  overflow: hidden;4514  margin-bottom: 14px;4515}4516.peach-pro-promo-glow {4517  position: absolute;4518  inset: -40% -20% auto auto;4519  width: 220px; height: 220px;4520  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4521  pointer-events: none;4522  filter: blur(8px);4523}4524.peach-pro-promo-inner {4525  position: relative;4526  padding: 18px 18px 16px;4527}4528.peach-pro-promo-title {4529  font-family: var(--font-display);4530  font-style: italic;4531  font-weight: 400;4532  font-size: 28px;4533  line-height: 1;4534  letter-spacing: -0.005em;4535  color: var(--peach-t0);4536  margin: 0 0 4px;4537}4538.peach-pro-promo-tagline {4539  font-family: var(--font-mono);4540  font-size: 0.625rem;4541  letter-spacing: 0.06em;4542  color: var(--peach-t2);4543  margin: 0 0 14px;4544}4545.peach-pro-promo-list {4546  list-style: none;4547  margin: 0 0 16px;4548  padding: 0;4549  display: grid;4550  gap: 9px;4551}4552.peach-pro-promo-list li {4553  display: flex;4554  align-items: flex-start;4555  gap: 9px;4556  font-size: 0.75rem;4557  color: var(--peach-t1);4558  line-height: 1.4;4559}4560.peach-pro-promo-list svg {4561  width: 14px;4562  height: 14px;4563  flex-shrink: 0;4564  color: var(--peach-accent);4565  margin-top: 2px;4566}4567.peach-pro-promo-list span {4568  color: var(--peach-t0);4569}4570.peach-pro-promo-cta {4571  width: 100%;4572  background: var(--peach-accent);4573  color: #fff;4574  border: none;4575  padding: 9px 12px;4576  border-radius: 9px;4577  font-size: 0.75rem;4578  font-weight: 500;4579  font-family: var(--font-ui);4580  letter-spacing: 0.02em;4581  text-decoration: none;4582  display: inline-flex;4583  align-items: center;4584  justify-content: center;4585  cursor: pointer;4586  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4587  box-shadow: 0 2px 16px var(--peach-glow);4588}4589.peach-pro-promo-cta:hover {4590  filter: brightness(1.07);4591  box-shadow: 0 4px 24px var(--peach-glow);4592  transform: translateY(-1px);4593}4594.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }45954596.peach-pro-or-divider {4597  display: flex;4598  align-items: center;4599  gap: 10px;4600  margin: 4px 0 12px;4601  font-family: var(--font-mono);4602  font-size: 0.625rem;4603  letter-spacing: 0.06em;4604  color: var(--peach-t2);4605  text-transform: uppercase;4606}4607.peach-pro-or-divider::before,4608.peach-pro-or-divider::after {4609  content: "";4610  flex: 1;4611  height: 1px;4612  background: var(--peach-t3);4613}46144615.peach-loading {4616  position: absolute;4617  inset: 0;4618  display: flex;4619  align-items: center;4620  justify-content: center;4621  background: var(--bg);4622  animation: peach-loading-pulse 1.2s ease-in-out infinite;4623}46244625@keyframes peach-loading-pulse {4626  0%, 100% { opacity: 0.6; }4627  50% { opacity: 1; }4628}46294630/* ── Health Dashboard ─────────────────────────────────────────────────── */4631.peach-health-body {4632  flex: 1;4633  overflow-y: auto;4634  display: flex;4635  flex-direction: column;4636  /* Hide the platform scrollbar — every other scrollable surface in the4637   * popup hides it; the Health view was the one outlier and it ruined the4638   * polish. Behavior unchanged, just no rail rendered. */4639  scrollbar-width: none;4640  -ms-overflow-style: none;4641}4642.peach-health-body::-webkit-scrollbar { display: none; }46434644/* Loading screen for the Vault Health view. The advanced report computation4645 * can run for a few seconds on a large vault — without a clear loading4646 * screen the surface looked broken (the entry view bleeds through the4647 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4648.peach-health-loading-screen {4649  flex: 1;4650  display: flex;4651  flex-direction: column;4652  align-items: center;4653  justify-content: center;4654  gap: 14px;4655  padding: 32px 28px;4656  text-align: center;4657}46584659.peach-health-loading-glyph {4660  width: 48px;4661  height: 48px;4662  display: flex;4663  align-items: center;4664  justify-content: center;4665  border-radius: 14px;4666  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4667  color: var(--peach-accent);4668}46694670.peach-health-loading-title {4671  margin: 0;4672  font-family: var(--font-display);4673  font-style: italic;4674  font-weight: 300;4675  font-size: 19px;4676  line-height: 1.2;4677  color: var(--peach-t0);4678}46794680.peach-health-loading-copy {4681  margin: 0;4682  max-width: 240px;4683  font-size: 0.75rem;4684  line-height: 1.55;4685  color: var(--peach-t2);4686}46874688.peach-health-loading-track {4689  width: 200px;4690  height: 3px;4691  margin-top: 6px;4692  border-radius: 999px;4693  background: rgba(240, 232, 216, 0.06);4694  overflow: hidden;4695}46964697.peach-health-loading-fill {4698  width: 40%;4699  height: 100%;4700  border-radius: inherit;4701  background: linear-gradient(4702    90deg,4703    transparent 0%,4704    var(--peach-accent) 50%,4705    transparent 100%4706  );4707  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4708}47094710@keyframes peach-health-loading-sweep {4711  0%   { transform: translateX(-100%); }4712  100% { transform: translateX(350%); }4713}47144715[data-motion="reduce"] .peach-health-loading-fill,4716[data-motion="reduce"] .peach-health-loading-glyph svg path {4717  animation: none;4718}47194720.peach-health-summary {4721  padding: 10px 16px 6px;4722  font-family: "IBM Plex Mono", monospace;4723  font-size: 0.6875rem;4724}4725.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4726.peach-health-summary-ok { color: var(--peach-t2); }47274728.peach-health-check-row {4729  padding: 0 16px 10px;4730}4731.peach-health-check-btn {4732  width: 100%;4733  display: flex;4734  align-items: center;4735  justify-content: center;4736}47374738.peach-health-sections {4739  flex: 1;4740  display: flex;4741  flex-direction: column;4742}47434744.peach-health-section {4745  border-bottom: 1px solid var(--peach-t3);4746}47474748.peach-health-section-header {4749  width: 100%;4750  display: flex;4751  align-items: center;4752  justify-content: space-between;4753  padding: 9px 16px;4754  background: transparent;4755  cursor: pointer;4756  color: var(--peach-t0);4757}47584759.peach-health-section-title-row {4760  display: flex;4761  align-items: center;4762  gap: 8px;4763}47644765.peach-health-count-badge {4766  display: inline-flex;4767  align-items: center;4768  justify-content: center;4769  min-width: 20px;4770  height: 18px;4771  padding: 0 5px;4772  border-radius: 999px;4773  background: rgba(220,80,60,0.15);4774  border: 1px solid rgba(220,80,60,0.25);4775  font-family: "IBM Plex Mono", monospace;4776  font-size: 0.5625rem;4777  color: rgba(220,80,60,0.9);4778}47794780.peach-health-section-title {4781  font-family: "IBM Plex Mono", monospace;4782  font-size: 0.6875rem;4783  text-transform: uppercase;4784  letter-spacing: 0.1em;4785  color: var(--peach-t1);4786}47874788.peach-health-chevron {4789  color: var(--peach-t2);4790  transition: transform 200ms ease;4791  flex-shrink: 0;4792}4793.peach-health-chevron.is-expanded {4794  transform: rotate(180deg);4795}47964797.peach-health-section-body {4798  padding: 0 16px 10px;4799  display: flex;4800  flex-direction: column;4801  gap: 4px;4802}48034804.peach-health-row {4805  display: flex;4806  align-items: flex-start;4807  justify-content: space-between;4808  gap: 8px;4809  padding: 6px 8px;4810  border-radius: 8px;4811  background: rgba(240,232,216,0.02);4812}48134814.peach-health-row-info {4815  flex: 1;4816  min-width: 0;4817  display: flex;4818  flex-direction: column;4819  gap: 2px;4820}48214822.peach-health-row-name {4823  font-family: var(--font-display);4824  font-size: 0.9375rem;4825  font-style: italic;4826  font-weight: 400;4827  color: var(--peach-t0);4828  white-space: nowrap;4829  overflow: hidden;4830  text-overflow: ellipsis;4831}48324833.peach-health-row-meta {4834  font-family: "IBM Plex Mono", monospace;4835  font-size: 0.5625rem;4836  color: var(--peach-t2);4837  letter-spacing: 0.05em;4838}48394840.peach-health-fix-btn {4841  font-size: 0.5625rem;4842  letter-spacing: 0.08em;4843  text-transform: uppercase;4844  padding: 4px 7px;4845  flex-shrink: 0;4846  display: flex;4847  align-items: center;4848}48494850.peach-health-empty {4851  font-family: "IBM Plex Mono", monospace;4852  font-size: 0.625rem;4853  color: var(--peach-t2);4854  padding: 6px 0;4855}48564857.peach-health-loading {4858  font-family: "IBM Plex Mono", monospace;4859  font-size: 0.625rem;4860  color: var(--peach-t2);4861  padding: 6px 0;4862  display: flex;4863  align-items: center;4864  gap: 6px;4865}48664867.peach-health-loading::before {4868  content: "";4869  width: 10px;4870  height: 10px;4871  border: 1.5px solid var(--peach-t3);4872  border-top-color: var(--peach-accent);4873  border-radius: 50%;4874  animation: peach-spin 600ms linear infinite;4875}48764877@keyframes peach-spin {4878  to { transform: rotate(360deg); }4879}48804881.peach-spinner {4882  width: 32px;4883  height: 32px;4884  border: 2px solid var(--peach-s2);4885  border-top-color: var(--peach-accent);4886  border-radius: 50%;4887  margin: 0 auto 16px;4888  animation: peach-spin 0.8s linear infinite;4889}48904891.peach-progress-screen {4892  text-align: center;4893  padding: 32px 16px;4894}48954896.peach-progress-screen-title {4897  font-size: 0.8125rem;4898  color: var(--peach-t0);4899  margin-bottom: 16px;4900}49014902.peach-progress-screen-stage {4903  font-size: 0.6875rem;4904  color: var(--peach-t2);4905  min-height: 14px;4906}49074908.peach-progress-screen-note {4909  font-size: 0.625rem;4910  color: var(--peach-t2);4911  margin-top: 8px;4912}49134914.peach-pairing-body {4915  flex: 1;4916  overflow-y: auto;4917  display: flex;4918  flex-direction: column;4919}49204921.peach-pairing-content {4922  flex: 1;4923  display: flex;4924  flex-direction: column;4925  align-items: center;4926  justify-content: center;4927  gap: 14px;4928  padding: 28px 20px;4929  text-align: center;4930}49314932.peach-pairing-code-screen {4933  gap: 18px;4934}49354936.peach-pairing-headline {4937  font-family: var(--font-display);4938  font-style: italic;4939  font-weight: 300;4940  font-size: 28px;4941  color: var(--peach-t0);4942  margin: 0;4943  line-height: 1;4944}49454946.peach-pairing-subline {4947  font-size: 0.75rem;4948  color: var(--peach-t2);4949  max-width: 220px;4950  line-height: 1.5;4951  margin: 0;4952}49534954.peach-pairing-subline--center {4955  text-align: center;4956}49574958/* 6-digit pairing code — both display (.peach-pairing-code) and entry4959   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking4960   so the two modes feel like the same surface. */4961.peach-pairing-code {4962  font-family: "IBM Plex Mono", monospace;4963  font-size: 36px;4964  letter-spacing: 0.25em;4965  color: var(--peach-t0);4966  text-align: center;4967  padding: 24px 0;4968  text-shadow:4969    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),4970    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);4971  background: transparent;4972  border: 0;4973  cursor: default;4974  user-select: text;4975}49764977.peach-pairing-code--loading,4978.peach-pairing-code--expired {4979  font-size: 18px;4980  letter-spacing: 0.04em;4981  color: var(--peach-t2);4982  cursor: pointer;4983  text-shadow: none;4984}49854986.peach-pairing-qr-container {4987  display: flex;4988  flex-direction: column;4989  align-items: center;4990  gap: 10px;4991}49924993.peach-pairing-qr {4994  width: 240px;4995  height: 240px;4996  display: block;4997}49984999.peach-pairing-instruction {5000  font-size: 0.75rem;5001  color: var(--peach-t2);5002  text-align: center;5003  line-height: 1.5;5004  margin: 0;5005  max-width: 220px;5006}50075008.peach-pairing-expiry {5009  font-family: "IBM Plex Mono", monospace;5010  font-size: 13px;5011  letter-spacing: 0.06em;5012  color: var(--peach-t2);5013  margin: 0;5014}50155016.peach-pairing-regen {5017  font-size: 0.75rem;5018  color: var(--peach-accent);5019  background: transparent;5020  border: 0;5021  cursor: pointer;5022  padding: 4px 0;5023  text-decoration: underline;5024  text-underline-offset: 2px;5025}50265027.peach-pairing-code-input {5028  font-family: "IBM Plex Mono", monospace;5029  font-size: 36px;5030  letter-spacing: 0.25em;5031  color: var(--peach-t0);5032  background: transparent;5033  border: 0;5034  border-bottom: 1px solid var(--peach-t3);5035  outline: none;5036  text-align: center;5037  padding: 18px 0;5038  width: 220px;5039  caret-color: var(--peach-accent);5040  transition: border-color 160ms ease;5041}50425043.peach-pairing-code-input::placeholder {5044  color: var(--peach-t3);5045}50465047.peach-pairing-code-input:focus {5048  border-bottom-color: var(--peach-accent);5049}50505051.peach-pairing-toggle {5052  background: transparent;5053  border: 0;5054  color: var(--peach-t2);5055  font-size: 0.75rem;5056  padding: 8px 4px;5057  cursor: pointer;5058  transition: color 120ms ease;5059}50605061.peach-pairing-toggle:hover:not(:disabled) {5062  color: var(--peach-t1);5063}50645065.peach-pairing-toggle:disabled {5066  opacity: 0.5;5067  cursor: default;5068}50695070.peach-pairing-hint {5071  font-size: 0.6875rem;5072  color: var(--peach-t2);5073  margin: 0;5074  text-align: center;5075}50765077.peach-pairing-status {5078  display: flex;5079  align-items: center;5080  gap: 8px;5081  margin: 0;5082  font-size: 0.75rem;5083  color: var(--peach-t1);5084}50855086.peach-pairing-error {5087  margin: 0;5088  font-size: 0.6875rem;5089  color: var(--peach-breach);5090}50915092.peach-pairing-error--muted {5093  color: var(--peach-t2);5094}50955096.peach-pairing-spinner {5097  width: 12px;5098  height: 12px;5099  border: 1.5px solid var(--peach-t3);5100  border-top-color: var(--peach-accent);5101  border-radius: 50%;5102  animation: peach-spin 0.8s linear infinite;5103}51045105.peach-pairing-success-icon,5106.peach-pairing-error-icon,5107.peach-pairing-hero {5108  display: inline-flex;5109  align-items: center;5110  justify-content: center;5111}51125113/* Tag chips */5114.peach-tag-chip {5115  display: inline-flex;5116  align-items: center;5117  gap: 4px;5118  padding: 3px 8px;5119  border-radius: 999px;5120  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5121  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5122  color: var(--peach-t0);5123  font-family: "IBM Plex Mono", monospace;5124  font-size: 0.625rem;5125  letter-spacing: 0.04em;5126}51275128.peach-tag-chip-remove {5129  background: transparent;5130  border: none;5131  color: inherit;5132  opacity: 0.6;5133  cursor: pointer;5134  padding: 0;5135  font-size: 0.75rem;5136  line-height: 1;5137}51385139.peach-tag-chip-remove:hover {5140  opacity: 1;5141}51425143/* Tag input */5144.peach-tag-input-wrap {5145  border-bottom: 1px solid var(--peach-t3);5146}51475148.peach-tag-suggestions {5149  display: flex;5150  flex-wrap: wrap;5151  gap: 4px;5152  padding: 6px 0;5153}51545155.peach-tag-suggestion {5156  padding: 2px 8px;5157  border-radius: 999px;5158  border: 1px solid var(--peach-t3);5159  background: var(--peach-s2);5160  color: var(--peach-t1);5161  font-family: "IBM Plex Mono", monospace;5162  font-size: 0.625rem;5163  cursor: pointer;5164  transition: border-color 80ms ease, background 80ms ease;5165}51665167.peach-tag-suggestion:hover {5168  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5169  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5170}51715172/* Identity suggestions — shown below username/email inputs in new-entry form */5173@keyframes peach-suggest-in {5174  from { opacity: 0; transform: translateY(-4px); }5175  to   { opacity: 1; transform: none; }5176}51775178.peach-identity-suggestions {5179  display: flex;5180  flex-direction: column;5181  gap: 1px;5182  margin-top: 4px;5183  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5184}51855186.peach-identity-filter-row {5187  display: flex;5188  align-items: center;5189  gap: 4px;5190  padding: 2px 0 5px;5191}51925193.peach-identity-collapse-btn {5194  margin-left: auto;5195  background: transparent;5196  border: none;5197  cursor: pointer;5198  color: var(--peach-t3);5199  padding: 2px 4px;5200  display: flex;5201  align-items: center;5202  line-height: 0;5203  border-radius: 3px;5204  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5205}52065207.peach-identity-collapse-btn:hover {5208  color: var(--peach-t1);5209}52105211.peach-identity-collapse-btn.is-collapsed {5212  transform: rotate(-90deg);5213}52145215.peach-identity-rows {5216  display: grid;5217  grid-template-rows: 1fr;5218  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5219}52205221.peach-identity-rows.is-collapsed {5222  grid-template-rows: 0fr;5223}52245225.peach-identity-rows-inner {5226  overflow-y: auto;5227  min-height: 0;5228  max-height: 148px;5229  scrollbar-width: thin;5230  scrollbar-color: var(--peach-t3) transparent;5231  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5232  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5233}52345235.peach-identity-rows-inner::-webkit-scrollbar {5236  width: 4px;5237}52385239.peach-identity-rows-inner::-webkit-scrollbar-track {5240  background: transparent;5241}52425243.peach-identity-rows-inner::-webkit-scrollbar-thumb {5244  background: var(--peach-t3);5245  border-radius: 2px;5246}52475248.peach-identity-filter-pill {5249  padding: 2px 7px;5250  border-radius: 999px;5251  border: 1px solid var(--peach-t3);5252  background: transparent;5253  color: var(--peach-t2);5254  font-family: "IBM Plex Mono", monospace;5255  font-size: 0.6rem;5256  cursor: pointer;5257  transition: border-color 80ms, background 80ms, color 80ms;5258}52595260.peach-identity-filter-pill.is-on {5261  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5262  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5263  color: var(--peach-accent);5264}52655266.peach-identity-suggestion {5267  display: flex;5268  align-items: center;5269  gap: 6px;5270  width: 100%;5271  padding: 4px 6px;5272  border-radius: 5px;5273  border: none;5274  background: transparent;5275  cursor: pointer;5276  text-align: left;5277  transition: background 80ms ease;5278}52795280.peach-identity-suggestion:hover,5281.peach-identity-suggestion:focus {5282  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5283  outline: none;5284}52855286.peach-identity-suggestion-value {5287  font-family: "IBM Plex Mono", monospace;5288  font-size: 0.7rem;5289  color: var(--peach-t1);5290  overflow: hidden;5291  text-overflow: ellipsis;5292  white-space: nowrap;5293  flex: 1;5294  min-width: 0;5295}52965297.peach-identity-suggestion-type {5298  font-family: "IBM Plex Mono", monospace;5299  font-size: 0.55rem;5300  font-weight: 600;5301  flex-shrink: 0;5302  padding: 1px 4px;5303  border-radius: 3px;5304}53055306.peach-identity-suggestion-type--email {5307  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5308  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5309}53105311.peach-identity-suggestion-type--username {5312  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5313  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5314}53155316.peach-identity-suggestion-meta {5317  font-family: "IBM Plex Mono", monospace;5318  font-size: 0.6rem;5319  color: var(--peach-t3);5320  flex-shrink: 0;5321}53225323/* Tag filter strip */5324.peach-tag-filter-strip {5325  border-bottom: 1px solid var(--peach-t3);5326  flex-shrink: 0;5327}53285329.peach-tag-filter-chip {5330  display: inline-flex;5331  align-items: center;5332  padding: 4px 10px;5333  border-radius: 999px;5334  border: 1px solid var(--peach-t3);5335  background: transparent;5336  color: var(--peach-t2);5337  font-family: "IBM Plex Mono", monospace;5338  font-size: 0.5625rem;5339  letter-spacing: 0.06em;5340  text-transform: uppercase;5341  cursor: pointer;5342  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5343  white-space: nowrap;5344}53455346.peach-tag-filter-chip:hover {5347  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5348  color: var(--peach-t1);5349}53505351.peach-tag-filter-chip.is-selected {5352  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5353  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5354  color: var(--peach-t0);5355}53565357/* ─────────────────────────────────────────────────────────────────────────5358   v1.4.12 additions5359   ─────────────────────────────────────────────────────────────────────── */53605361/* Sort bar */5362.peach-sort-bar {5363  display: flex;5364  align-items: center;5365  gap: 4px;5366  padding: 5px 12px;5367  border-bottom: 1px solid var(--peach-t3);5368  flex-shrink: 0;5369  overflow-x: auto;5370  scrollbar-width: none;5371}53725373.peach-sort-btn {5374  padding: 2px 9px;5375  border-radius: 999px;5376  border: 1px solid transparent;5377  background: transparent;5378  color: var(--peach-t2);5379  font-family: "IBM Plex Mono", monospace;5380  font-size: 0.5625rem;5381  letter-spacing: 0.07em;5382  text-transform: uppercase;5383  cursor: pointer;5384  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5385  white-space: nowrap;5386}53875388.peach-sort-btn:hover {5389  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5390  color: var(--peach-t1);5391}53925393.peach-sort-btn.is-active {5394  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5395  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5396  color: var(--peach-t0);5397}53985399.peach-sort-domain-hint {5400  margin-left: auto;5401  font-family: "IBM Plex Mono", monospace;5402  font-size: 0.5625rem;5403  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5404  white-space: nowrap;5405  overflow: hidden;5406  text-overflow: ellipsis;5407  max-width: 110px;5408}54095410/* Tab-match badge on entry rows */5411.peach-tab-match-badge {5412  display: inline-block;5413  width: 6px;5414  height: 6px;5415  border-radius: 50%;5416  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5417  margin-left: 5px;5418  vertical-align: middle;5419  flex-shrink: 0;5420  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5421}54225423.peach-entry-row.is-tab-match {5424  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5425  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5426}54275428.peach-entry-row.is-tab-match:hover {5429  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5430}54315432/* Entry list stagger entrance */5433@keyframes peach-entry-fadein {5434  from { opacity: 0; transform: translateY(4px); }5435  to   { opacity: 1; transform: translateY(0); }5436}54375438.peach-vault-list .peach-entry-row {5439  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5440}54415442/* Button press micro-interaction */5443.peach-btn:active {5444  transform: scale(0.95);5445  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5446}54475448.peach-sort-btn:active,5449.peach-tag-filter-chip:active {5450  transform: scale(0.93);5451  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5452}54535454/* Password strength bar (Lock view + shared) */5455.peach-password-strength {5456  display: flex;5457  align-items: center;5458  gap: 8px;5459  margin-top: 6px;5460}54615462.peach-strength-bar {5463  flex: 1;5464  height: 3px;5465  border-radius: 2px;5466  background: var(--peach-t3);5467  overflow: hidden;5468}54695470.peach-strength-fill {5471  height: 100%;5472  border-radius: 2px;5473  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5474              background 300ms ease;5475}54765477.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5478.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5479.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5480.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }54815482.peach-strength-label {5483  font-family: "IBM Plex Mono", monospace;5484  font-style: italic;5485  font-size: 0.5625rem;5486  font-weight: 300;5487  letter-spacing: 0.06em;5488  color: var(--peach-t2);5489  min-width: 36px;5490  text-align: right;5491}54925493.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5494.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5495.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5496.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }54975498/* Duress form */5499.peach-duress-status {5500  padding: 2px 8px;5501  border-radius: 999px;5502  border: 1px solid var(--peach-t3);5503  font-family: "IBM Plex Mono", monospace;5504  font-size: 0.5625rem;5505  letter-spacing: 0.07em;5506  text-transform: uppercase;5507  color: var(--peach-t2);5508  flex-shrink: 0;5509}55105511.peach-duress-status.is-active {5512  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5513  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5514  color: var(--peach-t0);5515}55165517.peach-duress-form {5518  padding: 8px 0 4px;5519  display: flex;5520  flex-direction: column;5521  gap: 6px;5522}55235524.peach-duress-form .peach-label {5525  margin-top: 4px;5526}55275528.peach-duress-actions {5529  display: flex;5530  gap: 6px;5531  align-items: center;5532  margin-top: 4px;5533}55345535.peach-duress-actions .peach-btn:first-child {5536  margin-right: auto;5537}55385539/* Improved overlay spring entrance */5540.peach-overlay-view.ov-enter-up {5541  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5542}55435544@keyframes ov-enter-up-spring {5545  from { opacity: 0; transform: translateY(16px) scale(0.98); }5546  to   { opacity: 1; transform: translateY(0) scale(1); }5547}55485549.peach-overlay-view.ov-enter-right {5550  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5551}55525553@keyframes ov-enter-right-spring {5554  from { opacity: 0; transform: translateX(18px) scale(0.98); }5555  to   { opacity: 1; transform: translateX(0) scale(1); }5556}55575558/* ── Onboarding-mode restore screens (file import) ── */5559/* Used when MainImportView renders during onboarding (no vault yet).5560   Animates like a lock-screen transition. */5561.peach-lock-view {5562  position: absolute;5563  inset: 0;5564  display: flex;5565  flex-direction: column;5566  background:5567    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5568    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5569    var(--peach-bg);5570  z-index: 2;5571  overflow: hidden;5572  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5573}55745575.peach-lock-view-header {5576  display: flex;5577  align-items: center;5578  justify-content: space-between;5579  padding: 16px 18px 12px;5580  flex-shrink: 0;5581}55825583/* ───────── Settings: auto-lock select ───────── */5584.peach-settings-select {5585  font-family: "IBM Plex Mono", monospace;5586  font-size: 0.6875rem;5587  background: transparent;5588  border: 1px solid var(--peach-t3);5589  border-radius: 4px;5590  color: var(--peach-t1);5591  padding: 3px 6px;5592  cursor: pointer;5593  outline: none;5594}5595.peach-settings-select:focus {5596  border-color: var(--peach-accent);5597}55985599/* ───────── Duress status pill (new polished) ───────── */5600.peach-duress-status-pill {5601  font-family: "IBM Plex Mono", monospace;5602  font-size: 0.5625rem;5603  text-transform: uppercase;5604  letter-spacing: 0.12em;5605  padding: 2px 8px;5606  border-radius: 12px;5607  background: var(--peach-t3);5608  color: var(--peach-t2);5609  flex-shrink: 0;5610}5611.peach-duress-status-pill.is-active {5612  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5613  color: var(--peach-accent);5614}56155616/* ───────── Entry advanced disclosure (canary) ───────── */5617.peach-entry-advanced {5618  margin-top: 12px;5619  border-top: 1px solid var(--peach-t3);5620  padding-top: 10px;5621  position: relative;5622  z-index: 1;5623}5624.peach-entry-advanced-toggle {5625  display: flex;5626  align-items: center;5627  justify-content: space-between;5628  width: 100%;5629  background: transparent;5630  border: none;5631  cursor: pointer;5632  padding: 0;5633  color: var(--peach-t2);5634}5635.peach-canary-section {5636  margin-top: 10px;5637  display: grid;5638  gap: 6px;5639}56405641/* ───────── Import: merge/replace radio choices ───────── */5642.peach-import-choice {5643  display: flex;5644  align-items: flex-start;5645  gap: 10px;5646  padding: 8px 10px;5647  border: 1px solid var(--peach-t3);5648  border-radius: 10px;5649  cursor: pointer;5650  margin-bottom: 6px;5651  transition: border-color 120ms ease, background 120ms ease;5652}5653.peach-import-choice:hover {5654  border-color: var(--peach-accent);5655}5656.peach-import-choice input[type="radio"] {5657  margin-top: 3px;5658  accent-color: var(--peach-accent);5659  flex-shrink: 0;5660}5661.peach-import-choice-main {5662  display: flex;5663  flex-direction: column;5664  gap: 2px;5665  min-width: 0;5666}5667.peach-import-choice-label {5668  font-size: 0.75rem;5669  color: var(--peach-t0);5670}5671.peach-import-choice-sub {5672  font-size: 0.6875rem;5673  color: var(--peach-t2);5674  line-height: 1.5;5675}56765677/* ───────── Export: success confirmation strip ───────── */5678.peach-export-success {5679  display: flex;5680  align-items: flex-start;5681  gap: 10px;5682  padding: 12px;5683  border-radius: 12px;5684  border: 1px solid rgba(150, 175, 110, 0.3);5685  background: rgba(150, 175, 110, 0.08);5686  color: var(--peach-t0);5687  font-size: 0.75rem;5688  line-height: 1.55;5689}5690.peach-export-success-check {5691  color: rgba(150, 175, 110, 0.9);5692  font-size: 0.875rem;5693  flex-shrink: 0;5694}56955696/* ── Trash view ──────────────────────────────────────────────────────── */5697.peach-trash-entry-row {5698  display: flex;5699  align-items: center;5700  justify-content: space-between;5701  gap: 8px;5702  padding: 8px 0;5703  border-bottom: 1px solid var(--peach-border);5704}5705.peach-trash-entry-info {5706  flex: 1;5707  min-width: 0;5708  display: flex;5709  flex-direction: column;5710  gap: 2px;5711}5712.peach-trash-entry-title {5713  font-size: 0.8125rem;5714  color: var(--peach-t0);5715  overflow: hidden;5716  text-overflow: ellipsis;5717  white-space: nowrap;5718}5719.peach-trash-entry-meta {5720  font-family: var(--font-mono);5721  font-size: 0.5625rem;5722  color: var(--peach-t2);5723  letter-spacing: 0.04em;5724}5725.peach-trash-entry-actions {5726  display: flex;5727  align-items: center;5728  gap: 4px;5729  flex-shrink: 0;5730}5731.peach-trash-delete-btn {5732  background: transparent;5733  border: 0;5734  color: var(--peach-t3);5735  font-size: 1rem;5736  line-height: 1;5737  cursor: pointer;5738  padding: 2px 5px;5739  transition: color 0.15s;5740}5741.peach-trash-delete-btn:hover { color: var(--peach-breach); }5742.peach-trash-list {5743  overflow-y: auto;5744}5745.peach-trash-footer {5746  display: flex;5747  align-items: center;5748  gap: 8px;5749  padding: 8px 0 0;5750  border-top: 1px solid var(--peach-border);5751  margin-top: 4px;5752}5753.peach-trash-purge-all {5754  background: transparent;5755  border: 0;5756  color: var(--peach-t3);5757  font-size: 0.625rem;5758  cursor: pointer;5759  padding: 4px 0;5760  letter-spacing: 0.03em;5761  transition: color 0.2s;5762}5763.peach-trash-purge-all:hover { color: var(--peach-breach); }5764.peach-trash-purge-confirm-label {5765  font-size: 0.625rem;5766  color: var(--peach-t1);5767  flex: 1;5768}57695770/* ── Settings shortcuts grid ─────────────────────────────────────────── */5771.peach-shortcuts-grid {5772  display: grid;5773  grid-template-columns: auto 1fr;5774  gap: 6px 12px;5775  align-items: center;5776  padding: 4px 0;5777}5778.peach-shortcut-key {5779  font-family: var(--font-mono);5780  font-size: 0.625rem;5781  color: var(--peach-t0);5782  background: var(--peach-t3);5783  border-radius: 4px;5784  padding: 2px 6px;5785  white-space: nowrap;5786  text-align: center;5787}5788.peach-shortcut-desc {5789  font-size: 0.6875rem;5790  color: var(--peach-t1);5791}57925793/* ── Sort bar trash button ───────────────────────────────────────────── */5794.peach-sort-trash-btn {5795  display: flex;5796  align-items: center;5797  justify-content: center;5798  padding: 3px 5px;5799  background: transparent;5800  border: none;5801  cursor: pointer;5802  color: var(--peach-t2);5803  border-radius: 4px;5804  transition: color 140ms ease, background 140ms ease;5805}5806.peach-sort-trash-btn:hover {5807  color: var(--peach-t1);5808  background: var(--peach-t3);5809}5810.peach-sort-trash-btn.is-active {5811  color: var(--peach-accent);5812}58135814/* Accent color picker */5815.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5816.peach-accent-picker {5817  display: flex;5818  flex-wrap: wrap;5819  gap: 7px;5820  padding: 2px 0;5821}5822.peach-accent-swatch {5823  width: 22px;5824  height: 22px;5825  border-radius: 50%;5826  border: 2px solid transparent;5827  cursor: pointer;5828  padding: 0;5829  transition: transform 100ms;5830  outline-offset: 2px;5831}5832.peach-accent-swatch:hover { transform: scale(1.15); }5833.peach-accent-swatch.is-active {5834  border-color: var(--peach-t0);5835  transform: scale(1.1);5836}58375838/* Display font picker — swatch shows an "Aa" preview rendered with each5839   font option so the user can see what they're picking before they pick. */5840.peach-settings-row--font { align-items: flex-start; padding-top: 10px; }5841.peach-font-picker {5842  display: flex;5843  flex-wrap: wrap;5844  gap: 6px;5845  padding: 2px 0;5846  flex: 1;5847  justify-content: flex-end;5848}5849.peach-font-swatch {5850  display: flex;5851  flex-direction: column;5852  align-items: center;5853  gap: 2px;5854  padding: 4px 8px;5855  background: transparent;5856  border: 1px solid var(--peach-t3);5857  border-radius: 6px;5858  cursor: pointer;5859  transition: border-color 100ms, background 100ms;5860  min-width: 56px;5861}5862.peach-font-swatch:hover {5863  border-color: var(--peach-accent-dim);5864  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5865}5866.peach-font-swatch.is-active {5867  border-color: var(--peach-accent);5868  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5869}5870.peach-font-swatch-glyph {5871  font-size: 18px;5872  line-height: 1;5873  color: var(--peach-t0);5874}5875.peach-font-swatch[data-font-preview="cormorant-italic"] .peach-font-swatch-glyph {5876  font-family: "Cormorant Garamond", serif;5877  font-style: italic;5878  font-weight: 400;5879}5880.peach-font-swatch[data-font-preview="cormorant"] .peach-font-swatch-glyph {5881  font-family: "Cormorant Garamond", serif;5882  font-style: normal;5883  font-weight: 400;5884}5885.peach-font-swatch[data-font-preview="inter"] .peach-font-swatch-glyph {5886  font-family: "Inter Variable", "Inter", sans-serif;5887  font-style: normal;5888  font-weight: 400;5889}5890.peach-font-swatch[data-font-preview="system"] .peach-font-swatch-glyph {5891  font-family: system-ui, -apple-system, sans-serif;5892  font-style: normal;5893  font-weight: 400;5894}5895.peach-font-swatch-name {5896  font-family: var(--font-mono);5897  font-size: 0.5rem;5898  letter-spacing: 0.06em;5899  color: var(--peach-t2);5900  text-transform: lowercase;5901}59025903.peach-pill-group {5904  display: flex;5905  gap: 6px;5906}5907.peach-pill-group .peach-btn.is-active {5908  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5909  border-color: var(--peach-accent);5910  color: var(--peach-t0);5911}59125913/* ── Card entry styles ───────────────────────────────────────── */5914.peach-card-number {5915  font-family: var(--peach-mono);5916  letter-spacing: 0.08em;5917}59185919.peach-card-network-badge {5920  font-size: 0.625rem;5921  padding: 1px 5px;5922  border-radius: 4px;5923  border: 0.5px solid var(--peach-border);5924  color: var(--peach-text-dim);5925  margin-left: 6px;5926  vertical-align: middle;5927}59285929.peach-card-expiry-row {5930  display: flex;5931  align-items: center;5932  gap: 8px;5933}59345935.peach-card-expiry-sep {5936  color: var(--peach-text-dim);5937}59385939/* ── Pro tier — upgrade screen ──────────────────────────────── */5940.peach-pro-mark {5941  font-size: 0.5625rem;5942  color: var(--peach-accent);5943  margin-left: 6px;5944  vertical-align: super;5945  opacity: 0.7;5946}59475948.peach-pro-mini-badge {5949  display: block;5950  font-size: 0.625rem;5951  font-style: italic;5952  color: var(--peach-accent);5953  letter-spacing: 0.04em;5954  margin-top: -2px;5955  padding-left: 2px;5956  opacity: 0.85;5957  text-align: center;5958}59595960.peach-wordmark-stack {5961  display: inline-flex;5962  flex-direction: column;5963  align-items: center;5964}59655966/* ── Pro tier — upgrade page ─────────────────────────────────── */5967.peach-pro-upgrade {5968  display: flex;5969  flex-direction: column;5970  align-items: stretch;5971  gap: 10px;5972  padding: 0 4px 8px;5973}59745975.peach-pro-upgrade-hero {5976  display: flex;5977  flex-direction: column;5978  align-items: center;5979  gap: 4px;5980  padding: 10px 0 6px;5981}59825983.peach-pro-upgrade-mark-wrap {5984  display: flex;5985  align-items: center;5986  justify-content: center;5987  margin-bottom: 2px;5988}59895990.peach-pro-upgrade-mark {5991  width: 38px;5992  height: 38px;5993  opacity: 0.9;5994}59955996.peach-pro-upgrade-title {5997  font-family: var(--font-display, var(--font-ui));5998  font-size: 22px;5999  margin: 0;6000  color: var(--peach-t0);6001  letter-spacing: 0.01em;6002}60036004.peach-pro-upgrade-tagline {6005  margin: 0;6006  font-style: italic;6007  color: var(--peach-t2);6008  font-size: 0.6875rem;6009}60106011.peach-pro-features {6012  display: flex;6013  flex-direction: column;6014  gap: 8px;6015  border-top: 1px solid var(--peach-border);6016  border-bottom: 1px solid var(--peach-border);6017  padding: 10px 4px;6018}60196020.peach-pro-feature {6021  display: flex;6022  gap: 9px;6023  align-items: baseline;6024}60256026.peach-pro-feature-mark {6027  color: var(--peach-accent);6028  font-size: 0.6875rem;6029  flex-shrink: 0;6030  display: inline-block;6031  transform-origin: center;6032  opacity: 0.8;6033}60346035.peach-pro-feature-text {6036  display: flex;6037  flex-direction: column;6038  gap: 1px;6039}60406041.peach-pro-feature-name {6042  font-size: 0.75rem;6043  color: var(--peach-t0);6044}60456046.peach-pro-feature-desc {6047  font-size: 0.625rem;6048  color: var(--peach-t2);6049}60506051.peach-pro-feature.is-highlighted .peach-pro-feature-mark {6052  animation: peach-pulse-accent 600ms ease-out forwards;6053}60546055@keyframes peach-pulse-accent {6056  0%   { opacity: 1; transform: scale(1.4); }6057  100% { opacity: 0.7; transform: scale(1); }6058}60596060.peach-pro-upgrade-actions {6061  display: flex;6062  flex-direction: column;6063  align-items: center;6064  gap: 8px;6065  padding-top: 2px;6066}60676068.peach-pro-pricing {6069  margin: 0;6070  text-align: center;6071  font-size: 0.6875rem;6072  color: var(--peach-t2);6073  letter-spacing: 0.04em;6074}60756076.peach-pro-upgrade-cta {6077  align-self: center;6078  text-align: center;6079  text-decoration: none;6080  display: block;6081  padding: 9px 32px;6082  font-size: 0.8125rem;6083  min-width: 180px;6084}60856086.peach-pro-key-divider {6087  display: flex;6088  align-items: center;6089  gap: 8px;6090  width: 100%;6091  color: var(--peach-t3);6092  font-size: 0.625rem;6093  letter-spacing: 0.08em;6094}60956096.peach-pro-key-divider::before,6097.peach-pro-key-divider::after {6098  content: "";6099  flex: 1;6100  height: 1px;6101  background: var(--peach-border);6102}61036104.peach-pro-key-link {6105  background: transparent;6106  border: 1px solid var(--peach-border);6107  border-radius: 8px;6108  color: var(--peach-t1);6109  font-size: 0.75rem;6110  cursor: pointer;6111  align-self: stretch;6112  padding: 8px 12px;6113  text-align: center;6114  transition: border-color 0.2s, color 0.2s;6115}61166117.peach-pro-key-link:hover {6118  border-color: var(--peach-accent);6119  color: var(--peach-accent);6120}61216122/* ── Pro tier — key ceremony ─────────────────────────────────── */6123.peach-pro-key-ceremony {6124  display: flex;6125  flex-direction: column;6126  align-items: center;6127  gap: 12px;6128  padding: 20px 4px 16px;6129}61306131.peach-pro-key-ceremony .peach-lock-rune-string {6132  font-size: 1rem;6133  gap: 12px;6134  flex: 0;6135  justify-content: center;6136}61376138.peach-pro-key-ceremony-label {6139  margin: 0;6140  font-size: 0.6875rem;6141  color: var(--peach-t2);6142  font-style: italic;6143  letter-spacing: 0.04em;6144}61456146.peach-pro-key-input {6147  font-family: var(--font-mono, monospace);6148  letter-spacing: 0.06em;6149  text-align: center;6150  width: 100%;6151  box-sizing: border-box;6152}61536154.peach-pro-key-error {6155  margin: 0;6156  font-size: 0.75rem;6157  text-align: center;6158  color: var(--peach-breach, #e55);6159  padding: 0;6160}61616162.peach-pro-key-activate {6163  width: 100%;6164  text-align: center;6165  box-sizing: border-box;6166  padding: 10px 20px;6167  font-size: 0.8125rem;6168}61696170.peach-pro-key-cancel {6171  background: transparent;6172  border: 0;6173  color: var(--peach-t2);6174  font-size: 0.6875rem;6175  cursor: pointer;6176  padding: 2px 8px;6177  transition: color 0.2s;6178}61796180.peach-pro-key-cancel:hover { color: var(--peach-accent); }61816182/* ── Pro tier — active state ─────────────────────────────────── */6183.peach-pro-active {6184  display: flex;6185  flex-direction: column;6186  align-items: center;6187  gap: 0;6188  padding: 8px 4px 16px;6189  min-height: 280px;6190}61916192.peach-pro-active-hero {6193  display: flex;6194  flex-direction: column;6195  align-items: center;6196  gap: 6px;6197  padding: 20px 0 22px;6198}61996200.peach-pro-active-mark-wrap {6201  display: flex;6202  align-items: center;6203  justify-content: center;6204  margin-bottom: 4px;6205}62066207.peach-pro-active-mark {6208  width: 60px;6209  height: 60px;6210  filter:6211    drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 55%, transparent))6212    drop-shadow(0 0 26px color-mix(in srgb, var(--peach-accent) 22%, transparent));6213}62146215.peach-pro-active-title {6216  font-family: var(--font-display, var(--font-ui));6217  font-size: 26px;6218  margin: 0;6219  color: var(--peach-t0);6220  letter-spacing: 0.01em;6221}62226223.peach-pro-active-since {6224  margin: 0;6225  font-size: 0.6875rem;6226  color: var(--peach-t2);6227  font-style: italic;6228}62296230.peach-pro-active-features {6231  display: flex;6232  flex-direction: column;6233  gap: 8px;6234  width: 100%;6235  padding: 14px 8px 0;6236  border-top: 1px solid var(--peach-border);6237  flex: 1;6238}62396240.peach-pro-active-feature {6241  display: flex;6242  align-items: center;6243  gap: 9px;6244}62456246.peach-pro-active-feature-mark {6247  color: var(--peach-accent);6248  font-size: 0.625rem;6249  opacity: 0.65;6250  flex-shrink: 0;6251}62526253.peach-pro-active-feature-name {6254  font-size: 0.75rem;6255  color: var(--peach-t1);6256}62576258.peach-pro-deactivate {6259  align-self: center;6260  background: transparent;6261  border: 0;6262  color: var(--peach-t3);6263  font-size: 0.625rem;6264  cursor: pointer;6265  padding: 8px 0 0;6266  margin-top: 16px;6267  letter-spacing: 0.03em;6268  transition: color 0.2s;6269}62706271.peach-pro-deactivate:hover { color: var(--peach-t2); }62726273.peach-pro-deactivate:disabled {6274  opacity: 0.5;6275  cursor: default;6276}62776278/* ── Pro advanced health remediation queue ──────────────────── */6279.peach-health-pro-queue {6280  display: flex;6281  flex-direction: column;6282  gap: 10px;6283  padding: 12px;6284  margin: 0 0 12px;6285  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6286  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6287  border-radius: 10px;6288}62896290.peach-health-pro-queue-head {6291  display: flex;6292  justify-content: space-between;6293  align-items: baseline;6294}62956296.peach-health-pro-queue-title {6297  font-size: 0.75rem;6298  font-weight: 500;6299  letter-spacing: 0.04em;6300  text-transform: uppercase;6301  color: var(--peach-accent);6302}63036304.peach-health-pro-queue-score {6305  font-size: 0.6875rem;6306  color: var(--peach-t2);6307}63086309.peach-health-pro-row {6310  display: flex;6311  gap: 10px;6312  align-items: center;6313  padding: 8px 0;6314  border-top: 1px solid var(--peach-border);6315}63166317.peach-health-pro-row-info {6318  flex: 1;6319  display: flex;6320  flex-direction: column;6321  gap: 4px;6322  min-width: 0;6323}63246325.peach-health-pro-row-name {6326  font-size: 0.8125rem;6327  color: var(--peach-t0);6328  overflow: hidden;6329  text-overflow: ellipsis;6330  white-space: nowrap;6331}63326333.peach-health-pro-row-meta {6334  font-size: 0.6875rem;6335  color: var(--peach-t2);6336}63376338.peach-health-pro-bar {6339  height: 2px;6340  background: var(--peach-border);6341  border-radius: 2px;6342  overflow: hidden;6343  margin-top: 2px;6344}63456346.peach-health-pro-bar-fill {6347  height: 100%;6348  background: var(--peach-accent);6349  transition: width 200ms ease-out;6350}63516352/* ── Pro activation celebration ── */6353@keyframes peach-pro-bloom {6354  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6355  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6356                 drop-shadow(0 0 48px var(--peach-glow)); }6357  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6358}63596360@keyframes peach-pro-wordmark-in {6361  from { opacity: 0; transform: translateY(4px); }6362  to   { opacity: 1; transform: translateY(0); }6363}63646365@keyframes peach-pro-fade-out {6366  from { opacity: 1; }6367  to   { opacity: 0; }6368}63696370.peach-pro-celebration {6371  background:6372    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6373    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6374    var(--peach-bg);6375  border: 1px solid var(--peach-t3);6376  box-shadow:6377    0 2px 8px rgba(0,0,0,0.55),6378    0 14px 48px rgba(0,0,0,0.7),6379    0 0 0 1px rgba(240,232,216,0.04);6380  overflow: hidden;6381  width: 320px;6382  height: 520px;6383  display: flex;6384  flex-direction: column;6385  align-items: center;6386  justify-content: center;6387  gap: 8px;6388  padding: 32px 24px;6389  text-align: center;6390}63916392.peach-pro-celebration.is-leaving {6393  animation: peach-pro-fade-out 400ms ease forwards;6394}63956396.peach-pro-bloom-target {6397  display: flex;6398  align-items: center;6399  justify-content: center;6400  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6401  margin-bottom: 12px;6402}64036404.peach-pro-bloom-icon {6405  width: 48px;6406  height: 48px;6407}64086409.peach-pro-wordmark {6410  font-family: var(--font-display);6411  font-size: 22px;6412  font-style: italic;6413  font-weight: 400;6414  color: var(--peach-accent);6415  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6416}64176418.peach-pro-thankyou {6419  font-size: 0.75rem;6420  font-style: italic;6421  color: var(--peach-t2);6422  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6423}642464256426/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6427.peach-pro-notice-banner {6428  display: flex;6429  align-items: center;6430  gap: 8px;6431  padding: 7px 12px;6432  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6433  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6434  font-size: 0.6875rem;6435  color: var(--peach-t2);6436  font-family: "IBM Plex Mono", monospace;6437  flex-shrink: 0;6438}64396440.peach-pro-notice-link {6441  background: none;6442  border: none;6443  padding: 0;6444  cursor: pointer;6445  font-size: 0.6875rem;6446  color: var(--peach-accent);6447  font-family: "IBM Plex Mono", monospace;6448  margin-left: auto;6449  white-space: nowrap;6450}64516452.peach-pro-notice-close {6453  background: none;6454  border: none;6455  padding: 0 0 0 4px;6456  cursor: pointer;6457  font-size: 0.625rem;6458  color: var(--peach-t3);6459  line-height: 1;6460}64616462/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6463   Renders over whatever view is showing. 60-second expiry; the popup ticks6464   the countdown each second and clears the banner when it hits zero. */6465.peach-pair-request-banner {6466  display: flex;6467  flex-direction: column;6468  gap: 8px;6469  padding: 10px 12px;6470  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6471  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6472  font-family: "IBM Plex Mono", monospace;6473  flex-shrink: 0;6474}64756476.peach-pair-toast {6477  padding: 8px 12px;6478  font-family: "IBM Plex Mono", monospace;6479  font-size: 0.75rem;6480  color: var(--peach-t1);6481  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6482  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6483  flex-shrink: 0;6484  text-align: center;6485}64866487.peach-pair-toast strong {6488  color: var(--peach-t0);6489  font-weight: 500;6490}64916492.peach-pair-request-header {6493  display: flex;6494  align-items: center;6495  gap: 8px;6496  font-size: 0.75rem;6497  color: var(--peach-t1);6498}64996500.peach-pair-request-mark {6501  font-size: 0.875rem;6502  display: inline-flex;6503  align-items: center;6504}65056506.peach-pair-request-icon {6507  width: 1em;6508  height: 1em;6509}65106511.peach-pair-request-title {6512  font-weight: 600;6513  color: var(--peach-t0);6514}65156516.peach-pair-request-countdown {6517  margin-left: auto;6518  font-variant-numeric: tabular-nums;6519  color: var(--peach-t2);6520  font-size: 0.6875rem;6521}65226523.peach-pair-request-body {6524  margin: 0;6525  font-size: 0.75rem;6526  color: var(--peach-t1);6527  line-height: 1.4;6528}65296530.peach-pair-request-body strong {6531  color: var(--peach-t0);6532  font-weight: 600;6533}65346535.peach-pair-request-actions {6536  display: flex;6537  gap: 8px;6538  justify-content: flex-end;6539}65406541/* ─── First-run onboarding ──────────────────────────────────────────────6542   Three-card welcome shown once before vault creation. The PeachScript6543   rune background drifts behind everything at very low opacity — it's6544   atmosphere, not focus. The cards themselves use the same panel6545   language as the rest of the popup so the transition into NewVault is6546   continuous, not a jarring switch of visual register. */65476548.peach-onboarding {6549  position: relative;6550  display: flex;6551  flex-direction: column;6552  width: 100%;6553  height: 100%;6554  padding: 16px 16px 18px;6555  box-sizing: border-box;6556  overflow: hidden;6557  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6558}65596560.peach-onboarding.is-completing {6561  animation: peach-onboard-exit 200ms ease-out forwards;6562}65636564.peach-rune-background {6565  position: absolute;6566  inset: 0;6567  width: 100%;6568  height: 100%;6569  pointer-events: none;6570  z-index: 0;6571  transition: opacity 500ms ease-out;6572}65736574.peach-onboarding.is-completing .peach-rune-background {6575  opacity: 0;6576}65776578.peach-onboarding-header {6579  position: relative;6580  z-index: 1;6581  display: flex;6582  align-items: center;6583  margin-bottom: 14px;6584}65856586.peach-onboarding-card {6587  position: relative;6588  z-index: 1;6589  flex: 1;6590  display: flex;6591  flex-direction: column;6592  gap: 10px;6593  padding: 22px 20px;6594  border-radius: 16px;6595  border: 1px solid var(--peach-t3);6596  background:6597    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6598  backdrop-filter: blur(3px);6599  -webkit-backdrop-filter: blur(3px);6600  box-shadow:6601    inset 0 1px 0 rgba(240, 232, 216, 0.04),6602    0 12px 28px rgba(0, 0, 0, 0.12);6603  cursor: pointer;6604  user-select: none;6605  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6606}66076608.peach-onboarding-card.is-exiting {6609  animation: peach-card-out 120ms ease-in forwards;6610  pointer-events: none;6611}66126613.peach-onboarding-card-headline {6614  margin: 0;6615  font-family: var(--font-display);6616  font-style: italic;6617  font-weight: 400;6618  font-size: 22px;6619  line-height: 1.05;6620  color: var(--peach-t0);6621  white-space: pre-line;6622}66236624.peach-onboarding-divider {6625  margin: 4px 0 6px;6626  border: 0;6627  border-top: 1px solid var(--peach-t3);6628  width: 100%;6629}66306631.peach-onboarding-body {6632  margin: 0;6633  font-size: 0.8125rem;6634  line-height: 1.6;6635  color: var(--peach-t1);6636}66376638.peach-onboarding-warning {6639  display: flex;6640  align-items: flex-start;6641  gap: 8px;6642  margin: 6px 0 0;6643  padding-top: 8px;6644  border-top: 1px dashed var(--peach-t3);6645  font-size: 0.8125rem;6646  line-height: 1.5;6647  color: var(--peach-t1);6648}66496650.peach-onboarding-warning-icon {6651  color: var(--peach-accent);6652  font-size: 0.8125rem;6653  line-height: 1.5;6654  flex: 0 0 auto;6655}66566657.peach-onboarding-nav {6658  position: relative;6659  z-index: 1;6660  display: flex;6661  align-items: center;6662  justify-content: space-between;6663  margin-top: 12px;6664  padding: 0 4px;6665}66666667.peach-onboarding-dots {6668  display: flex;6669  align-items: center;6670  gap: 6px;6671}66726673.peach-onboarding-dot {6674  width: 6px;6675  height: 6px;6676  border-radius: 50%;6677  background: var(--peach-t2);6678  transition: width 200ms ease, height 200ms ease, background 200ms ease;6679}66806681.peach-onboarding-dot.is-active {6682  width: 8px;6683  height: 8px;6684  background: var(--peach-accent);6685}66866687.peach-onboarding-next {6688  background: none;6689  border: none;6690  padding: 4px 0;6691  cursor: pointer;6692  font-family: "IBM Plex Mono", monospace;6693  font-size: 0.6875rem;6694  letter-spacing: 0.04em;6695  color: var(--peach-t1);6696  transition: color 150ms ease;6697}66986699.peach-onboarding-next:hover {6700  color: var(--peach-t0);6701}67026703.peach-onboarding-next:disabled {6704  opacity: 0.5;6705  cursor: default;6706}67076708.peach-onboarding-back {6709  background: none;6710  border: none;6711  padding: 4px 0;6712  cursor: pointer;6713  font-family: "IBM Plex Mono", monospace;6714  font-size: 0.6875rem;6715  letter-spacing: 0.04em;6716  color: var(--peach-t2);6717  transition: color 150ms ease;6718}67196720.peach-onboarding-back:hover {6721  color: var(--peach-t0);6722}67236724.peach-onboarding-back:disabled {6725  opacity: 0.5;6726  cursor: default;6727}67286729/* Reserve back-button width on the first card so the dots stay centred */6730.peach-onboarding-back-spacer {6731  width: 44px;6732}67336734.peach-onboarding-mobile-card-buttons {6735  display: flex;6736  flex-direction: column;6737  gap: 8px;6738  margin-top: 16px;6739}67406741@keyframes peach-onboard-enter {6742  from { opacity: 0; transform: translateY(20px); }6743  to   { opacity: 1; transform: translateY(0); }6744}67456746@keyframes peach-onboard-exit {6747  from { opacity: 1; }6748  to   { opacity: 0; }6749}67506751@keyframes peach-card-in {6752  from { opacity: 0; transform: translateX(12px); }6753  to   { opacity: 1; transform: translateX(0); }6754}67556756@keyframes peach-card-out {6757  from { opacity: 1; transform: translateX(0); }6758  to   { opacity: 0; transform: translateX(-12px); }6759}67606761/* ─── New vault screen — matched to onboarding card language ─────────── */67626763.peach-newvault {6764  position: relative;6765  display: flex;6766  flex-direction: column;6767  gap: 12px;6768  padding: 16px 16px 18px;6769  overflow: hidden;6770}67716772/* Suppress the warm-blob ambient art inherited from .lock-screen — the6773   new vault card now carries the visual weight. */6774.peach-newvault::before {6775  content: none;6776}67776778.peach-newvault-header {6779  position: relative;6780  z-index: 2;6781  display: flex;6782  align-items: center;6783  gap: 10px;6784  margin-bottom: 2px;6785}67866787.peach-newvault-back {6788  display: inline-flex;6789  align-items: center;6790  gap: 4px;6791  background: transparent;6792  border: none;6793  color: var(--peach-t2);6794  font-family: "IBM Plex Mono", monospace;6795  font-size: 0.625rem;6796  letter-spacing: 0.06em;6797  cursor: pointer;6798  padding: 4px 6px;6799  border-radius: 6px;6800  transition: color 120ms ease, background 120ms ease;6801}68026803.peach-newvault-back:hover {6804  color: var(--peach-t0);6805  background: rgba(240, 232, 216, 0.04);6806}68076808.peach-newvault-mark {6809  position: absolute;6810  right: -12px;6811  top: 6px;6812  width: 110px;6813  height: 110px;6814  pointer-events: none;6815  opacity: 0.10;6816  filter: saturate(0.9);6817  z-index: 0;6818}6819.peach-newvault-mark-art {6820  width: 100%;6821  height: 100%;6822}6823.peach-newvault-mark-art path:nth-child(2),6824.peach-newvault-mark-art path:nth-child(3) {6825  stroke: rgba(123, 144, 96, 0.88);6826  fill: rgba(123, 144, 96, 0.88);6827}68286829.peach-newvault-card {6830  position: relative;6831  z-index: 1;6832  display: flex;6833  flex-direction: column;6834  gap: 12px;6835  padding: 22px 20px 18px;6836  border-radius: 16px;6837  border: 1px solid var(--peach-t3);6838  background:6839    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6840  backdrop-filter: blur(3px);6841  -webkit-backdrop-filter: blur(3px);6842  box-shadow:6843    inset 0 1px 0 rgba(240, 232, 216, 0.04),6844    0 12px 28px rgba(0, 0, 0, 0.12);6845  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6846}68476848.peach-newvault-headline {6849  margin: 0;6850  font-family: var(--font-display);6851  font-style: italic;6852  font-weight: 400;6853  font-size: 24px;6854  line-height: 1.05;6855  color: var(--peach-t0);6856  white-space: pre-line;6857}68586859.peach-newvault-divider {6860  margin: 2px 0 4px;6861  border: 0;6862  border-top: 1px solid var(--peach-t3);6863  width: 100%;6864}68656866.peach-newvault-field {6867  display: flex;6868  flex-direction: column;6869  gap: 4px;6870}68716872.peach-newvault-label-row {6873  display: flex;6874  align-items: center;6875  justify-content: space-between;6876}68776878/* Monospace input scaled to the card. Replaces the 22px unlock-input6879   so the placeholder no longer overflows and the field reads as part6880   of the same surface as the body copy. */6881.peach-newvault-input {6882  font-size: 0.875rem;6883  letter-spacing: 0.18em;6884  padding: 8px 0;6885}6886.peach-newvault-input::placeholder {6887  letter-spacing: 0.18em;6888  color: var(--peach-t2);6889}68906891.peach-newvault-hint {6892  margin: 2px 0 0;6893  font-family: "IBM Plex Mono", monospace;6894  font-size: 0.625rem;6895  color: var(--peach-t2);6896  letter-spacing: 0.04em;6897}68986899.peach-newvault-submit {6900  margin-top: 4px;6901}69026903.peach-newvault-warning {6904  display: flex;6905  align-items: flex-start;6906  gap: 8px;6907  margin: 4px 0 0;6908  padding-top: 10px;6909  border-top: 1px dashed var(--peach-t3);6910  font-size: 0.75rem;6911  line-height: 1.5;6912  color: var(--peach-t1);6913}69146915.peach-newvault-warning-icon {6916  color: var(--peach-accent);6917  font-size: 0.8125rem;6918  line-height: 1.4;6919  flex: 0 0 auto;6920}69216922.peach-newvault-footer {6923  position: relative;6924  z-index: 1;6925  display: flex;6926  flex-direction: column;6927  gap: 4px;6928  padding: 4px 4px 0;6929}69306931/* Settings body — warm accent gradient gives the glass something to blur against */6932.peach-settings-body {6933  background:6934    radial-gradient(6935      ellipse at 30% 20%,6936      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6937      transparent 60%6938    );6939}69406941/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6942/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6943 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6944 * (replacing the vault from a backup file) and "hazard" for actions that6945 * are absolutely irreversible (Panic). Both use the same card scaffold so6946 * they read as a pair, but the colour family signals the severity at a6947 * glance — yellow for caution, red for don't.6948 */6949.peach-danger-card {6950  --danger-tint: 235, 158, 52; /* amber */6951  display: flex;6952  flex-direction: column;6953  gap: 8px;6954  padding: 14px;6955  margin-top: 10px;6956  border-radius: 12px;6957  border: 1px solid rgba(var(--danger-tint), 0.32);6958  background:6959    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6960    rgba(var(--danger-tint), 0.04);6961  box-shadow:6962    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6963    0 0 24px rgba(var(--danger-tint), 0.04);6964  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6965}69666967.peach-danger-card:hover {6968  border-color: rgba(var(--danger-tint), 0.55);6969  box-shadow:6970    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6971    0 0 36px rgba(var(--danger-tint), 0.10);6972}69736974.peach-danger-card--hazard {6975  --danger-tint: 220, 38, 38; /* red */6976}69776978.peach-danger-card-head {6979  display: flex;6980  align-items: center;6981  gap: 10px;6982}69836984.peach-danger-card-glyph {6985  width: 28px;6986  height: 28px;6987  flex-shrink: 0;6988  display: flex;6989  align-items: center;6990  justify-content: center;6991  border-radius: 8px;6992  background: rgba(var(--danger-tint), 0.12);6993  color: rgba(var(--danger-tint), 0.95);6994  font-size: 1rem;6995  line-height: 1;6996}69976998.peach-danger-card-title {6999  margin: 0;7000  font-size: 0.8125rem;7001  font-weight: 600;7002  color: rgba(var(--danger-tint), 0.92);7003  letter-spacing: 0.01em;7004}70057006.peach-danger-card-copy {7007  margin: 0;7008  font-size: 0.6875rem;7009  line-height: 1.5;7010  color: var(--peach-t2);7011}70127013.peach-danger-card-button {7014  width: 100%;7015  padding: 9px;7016  margin-top: 4px;7017  background: transparent;7018  border: 1px solid rgba(var(--danger-tint), 0.45);7019  border-radius: 8px;7020  color: rgba(var(--danger-tint), 0.9);7021  font-size: 0.75rem;7022  font-weight: 500;7023  letter-spacing: 0.02em;7024  cursor: pointer;7025  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7026}70277028.peach-danger-card-button:hover {7029  background: rgba(var(--danger-tint), 0.10);7030  border-color: rgba(var(--danger-tint), 0.75);7031  color: rgb(var(--danger-tint));7032}70337034/* ── Panic flow (three-step destruction) ───────────────────────────────── */7035.peach-panic {7036  display: flex;7037  flex-direction: column;7038  flex: 1;7039  min-height: 0;7040  padding: 28px 20px 20px;7041  gap: 18px;7042  overflow-y: auto;7043  scrollbar-width: none;7044  -ms-overflow-style: none;7045}70467047.peach-panic::-webkit-scrollbar { display: none; }70487049.peach-panic-step2 {7050  background: rgba(220, 38, 38, 0.04);7051}70527053.peach-panic-step3 {7054  position: relative;7055  background: #0f0505;7056  color: #ffffff;7057  overflow: hidden;7058}70597060.peach-panic-rune-bg {7061  position: absolute;7062  inset: 0;7063  opacity: 0.22;7064  pointer-events: none;7065  overflow: hidden;7066}70677068.peach-panic-rune-bg canvas {7069  width: 100% !important;7070  height: 100% !important;7071}70727073.peach-panic-icon {7074  font-size: 32px;7075  color: rgb(220, 38, 38);7076  line-height: 1;7077}70787079.peach-panic-title {7080  margin: 0;7081  font-size: 18px;7082  font-weight: 500;7083  color: var(--peach-t1);7084}70857086.peach-panic-title--severe {7087  font-size: 20px;7088  font-weight: 700;7089  color: rgb(220, 38, 38);7090}70917092.peach-panic-body {7093  margin: 0;7094  font-size: 0.8125rem;7095  line-height: 1.55;7096  color: var(--peach-t2);7097}70987099.peach-panic-body--severe {7100  color: rgba(220, 38, 38, 0.85);7101}71027103.peach-panic-body--final {7104  font-size: 1rem;7105  font-weight: 700;7106  color: rgb(255, 80, 80);7107  line-height: 1.4;7108}71097110.peach-panic-body--final-intro {7111  font-size: 1rem;7112  color: #ffffff;7113  font-weight: 400;7114}71157116.peach-panic-divider {7117  height: 1px;7118  background: rgba(255, 255, 255, 0.08);7119  margin: 4px 0;7120}71217122.peach-panic-confirm-input {7123  width: 100%;7124  padding: 10px 12px;7125  background: rgba(255, 255, 255, 0.02);7126  border: 1px solid rgba(220, 38, 38, 0.4);7127  border-radius: 8px;7128  color: var(--peach-t1);7129  font-family: "IBM Plex Mono", monospace;7130  font-size: 0.875rem;7131  letter-spacing: 0.12em;7132  text-transform: uppercase;7133}71347135.peach-panic-confirm-input:focus {7136  outline: none;7137  border-color: rgb(220, 38, 38);7138}71397140.peach-panic-confirm-input--match {7141  border-color: rgb(220, 38, 38);7142  color: rgb(220, 38, 38);7143}71447145.peach-panic-confirm-label {7146  font-size: 0.6875rem;7147  color: var(--peach-t2);7148  margin: 0 0 -8px;7149  letter-spacing: 0.06em;7150}71517152.peach-panic-actions {7153  display: flex;7154  flex-direction: column;7155  gap: 10px;7156  margin-top: auto;7157}71587159.peach-panic-button {7160  width: 100%;7161  padding: 12px;7162  border-radius: 8px;7163  font-size: 0.8125rem;7164  cursor: pointer;7165  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7166}71677168.peach-panic-button--primary {7169  background: var(--peach-accent);7170  border: 1px solid var(--peach-accent);7171  color: #ffffff;7172  font-weight: 600;7173}71747175.peach-panic-button--primary:hover {7176  background: color-mix(in srgb, var(--peach-accent) 88%, white);7177}71787179.peach-panic-button--danger {7180  background: rgb(220, 38, 38);7181  border: 1px solid rgb(220, 38, 38);7182  color: #ffffff;7183  font-weight: 600;7184}71857186.peach-panic-button--danger:disabled {7187  opacity: 0.35;7188  cursor: not-allowed;7189}71907191.peach-panic-button--ghost {7192  background: transparent;7193  border: 1px solid rgba(255, 255, 255, 0.18);7194  color: var(--peach-t2);7195}71967197.peach-panic-button--ghost:hover {7198  border-color: rgba(255, 255, 255, 0.32);7199  color: var(--peach-t1);7200}72017202.peach-panic-link {7203  background: transparent;7204  border: none;7205  padding: 4px 0;7206  color: rgba(220, 38, 38, 0.65);7207  font-size: 0.75rem;7208  cursor: pointer;7209  text-align: left;7210  text-decoration: underline;7211  text-underline-offset: 3px;7212}72137214.peach-panic-link:hover {7215  color: rgb(220, 38, 38);7216}72177218.peach-panic-bar {7219  background: rgb(220, 38, 38);7220  padding: 16px 20px;7221  margin: -28px -20px 0;7222  text-align: center;7223  font-size: 0.8125rem;7224  font-weight: 700;7225  letter-spacing: 0.12em;7226  color: #ffffff;7227}72287229.peach-panic-final-button {7230  width: 100%;7231  padding: 14px;7232  background: rgb(220, 38, 38);7233  border: none;7234  border-radius: 8px;7235  color: #ffffff;7236  font-size: 0.875rem;7237  font-weight: 700;7238  letter-spacing: 0.08em;7239  text-transform: uppercase;7240  cursor: pointer;7241  animation: peach-panic-pulse 2s ease-in-out infinite;7242}72437244.peach-settings-license {7245  margin-top: 10px;7246  padding-top: 10px;7247  border-top: 1px solid var(--peach-t3);7248}72497250.peach-settings-label {7251  font-size: 0.625rem;7252  letter-spacing: 0.08em;7253  color: var(--peach-t3);7254  display: block;7255  margin-bottom: 6px;7256}72577258.peach-settings-license-row {7259  display: flex;7260  align-items: center;7261  justify-content: space-between;7262  gap: 8px;7263}72647265.peach-settings-license-key {7266  font-family: 'IBM Plex Mono', monospace;7267  font-size: 0.75rem;7268  color: var(--peach-t0);7269  letter-spacing: 0.04em;7270  word-break: break-all;7271}72727273.peach-settings-license-copy {7274  font-size: 0.6875rem;7275  color: var(--peach-accent);7276  background: transparent;7277  border: none;7278  cursor: pointer;7279  padding: 4px 8px;7280  border-radius: 4px;7281  flex-shrink: 0;7282  transition: opacity 150ms ease;7283}72847285.peach-settings-license-copy:hover {7286  opacity: 0.75;7287}72887289@keyframes peach-panic-pulse {7290  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7291  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7292}72937294[data-motion="reduce"] .peach-panic-final-button {7295  animation: none;7296}72977298/* Vault History — Settings → Vault sub-view */72997300.peach-history-list {7301  border: 1px solid var(--peach-border);7302  border-radius: 8px;7303  overflow: hidden;7304  margin: 8px 0 4px;7305}73067307.peach-history-row {7308  display: flex;7309  align-items: center;7310  justify-content: space-between;7311  padding: 9px 12px;7312  gap: 10px;7313  border-bottom: 1px solid var(--peach-border);7314}73157316.peach-history-row:last-child {7317  border-bottom: none;7318}73197320.peach-history-meta {7321  display: flex;7322  flex-direction: column;7323  gap: 2px;7324  min-width: 0;7325  flex: 1;7326}73277328.peach-history-time {7329  font-size: 0.75rem;7330  font-family: 'IBM Plex Mono', ui-monospace, monospace;7331  color: var(--peach-t0);7332  white-space: nowrap;7333  overflow: hidden;7334  text-overflow: ellipsis;7335}73367337.peach-history-sub {7338  font-size: 0.625rem;7339  color: var(--peach-t2);7340  letter-spacing: 0.06em;7341  text-transform: uppercase;7342  white-space: nowrap;7343  overflow: hidden;7344  text-overflow: ellipsis;7345}73467347.peach-history-btn {7348  flex-shrink: 0;7349  white-space: nowrap;7350  min-width: 56px;7351  text-align: center;7352}73537354.peach-history-btn.is-busy {7355  opacity: 0.65;7356}73577358.peach-history-footer {7359  font-size: 0.625rem;7360  color: var(--peach-t3);7361  letter-spacing: 0.05em;7362  text-align: right;7363  margin: 0;7364  padding: 2px 0 0;7365}73667367/* ── Context menu + swipe-copy flash ─────────────────────── */7368.peach-context-menu-backdrop {7369  position: fixed;7370  inset: 0;7371  background: rgba(0, 0, 0, 0.45);7372  z-index: 100;7373  display: flex;7374  align-items: flex-end;7375  justify-content: center;7376  animation: peach-ctx-fade 140ms ease both;7377}7378.peach-context-menu {7379  width: min(360px, calc(100vw - 24px));7380  margin-bottom: max(env(safe-area-inset-bottom), 12px);7381  background: var(--peach-bg);7382  border: 1px solid var(--peach-t3);7383  border-radius: 14px;7384  padding: 6px;7385  display: flex;7386  flex-direction: column;7387  gap: 2px;7388  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7389  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7390}7391@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7392@keyframes peach-ctx-rise {7393  from { transform: translateY(16px); opacity: 0; }7394  to   { transform: translateY(0);    opacity: 1; }7395}7396.peach-context-menu-item {7397  background: transparent;7398  color: var(--peach-t0);7399  border: 0;7400  border-radius: 10px;7401  padding: 12px 14px;7402  text-align: left;7403  font: inherit;7404  cursor: pointer;7405}7406.peach-context-menu-item:hover,7407.peach-context-menu-item:focus-visible {7408  background: var(--peach-t3);7409}7410.peach-context-menu-item--danger {7411  color: var(--peach-health-bad, #d96868);7412}7413.peach-context-menu-item--cancel {7414  color: var(--peach-t2);7415  margin-top: 4px;7416  border-top: 1px solid var(--peach-t3);7417  border-radius: 0 0 10px 10px;7418}74197420/* Swipe-to-copy flash */7421.peach-entry-row.is-copy-flash {7422  animation: peach-copy-flash 600ms ease both;7423}7424@keyframes peach-copy-flash {7425  0%   { background: transparent; }7426  20%  { background: rgba(217, 153, 51, 0.32); }7427  100% { background: transparent; }7428}74297430html { font-size: 16px; }74317432/* ── Recovery word entry ─────────────────────────────────────────── */7433.peach-lock-recover-link {7434  display: block;7435  width: 100%;7436  margin-top: 12px;7437  background: none;7438  border: none;7439  font-family: "IBM Plex Mono", monospace;7440  font-size: 0.625rem;7441  letter-spacing: 0.06em;7442  color: var(--peach-t2);7443  cursor: pointer;7444  text-align: center;7445  padding: 4px;7446  transition: color 120ms ease;7447}7448.peach-lock-recover-link:hover {7449  color: var(--peach-t0);7450}74517452.lock-screen--recovery {7453  display: flex;7454  flex-direction: column;7455  align-items: stretch;7456  padding: 12px 20px 24px;7457  overflow: hidden;7458}74597460.peach-recovery-nav {7461  display: flex;7462  align-items: center;7463  position: relative;7464  z-index: 1;7465  margin-bottom: 4px;7466}74677468/* Mask runes to the top decorative band only — keep inputs and the7469   bottom CTA button clear. The bottom of the popup is reserved for7470   submit buttons; rendering runes there overlaps the button glyph. */7471.peach-rune-background--recovery {7472  -webkit-mask-image: linear-gradient(7473    to bottom,7474    black 0px, black 85px,7475    transparent 110px,7476    transparent 100%7477  );7478  mask-image: linear-gradient(7479    to bottom,7480    black 0px, black 85px,7481    transparent 110px,7482    transparent 100%7483  );7484}74857486.peach-recovery-header {7487  text-align: center;7488  margin-bottom: 16px;7489  margin-top: 4px;7490}7491.peach-recovery-header .peach-onboarding-headline {7492  font-size: 1.25rem;7493  font-weight: 300;7494  letter-spacing: 0.02em;7495  margin: 0 0 4px;7496}7497.peach-recovery-header .peach-hint {7498  font-family: "IBM Plex Mono", monospace;7499  font-size: 0.625rem;7500  color: var(--peach-t2);7501  letter-spacing: 0.04em;7502  margin: 0;7503}75047505/* 12-word grid: 2 columns × 6 rows */7506.peach-recovery-grid {7507  display: grid;7508  grid-template-columns: repeat(2, 1fr);7509  gap: 12px 20px;7510  width: 100%;7511  margin-bottom: 0;7512}75137514.peach-recovery-word-slot {7515  display: flex;7516  align-items: center;7517  gap: 6px;7518  min-width: 0;7519}75207521.peach-recovery-word-index {7522  font-family: "IBM Plex Mono", monospace;7523  font-size: 0.5rem;7524  color: rgba(255, 255, 255, 0.35);7525  min-width: 14px;7526  flex-shrink: 0;7527  text-align: right;7528  letter-spacing: 0.04em;7529}75307531.peach-recovery-word-input {7532  flex: 1;7533  min-width: 0;7534  background: transparent;7535  border: none;7536  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7537  color: var(--peach-t0);7538  font-family: "IBM Plex Mono", monospace;7539  font-size: 0.6875rem;7540  letter-spacing: 0.06em;7541  padding: 5px 2px 4px;7542  outline: none;7543  text-transform: lowercase;7544  transition: border-color 120ms ease;7545}7546.peach-recovery-word-input::placeholder {7547  color: rgba(255, 255, 255, 0.18);7548}7549.peach-recovery-word-input:focus {7550  border-bottom-color: var(--peach-accent);7551}75527553.peach-recovery-submit {7554  width: 100%;7555  margin-top: auto;7556}75577558.peach-recovery-new-password-form {7559  width: 100%;7560  display: flex;7561  flex-direction: column;7562  gap: 16px;7563  margin-bottom: 8px;7564}7565.peach-recovery-new-password-form .peach-newvault-field {7566  display: flex;7567  flex-direction: column;7568  gap: 4px;7569}75707571/* ── Recovery words display (post-create) ────────────────────────── */7572.lock-screen--recovery-display {7573  display: flex;7574  flex-direction: column;7575  align-items: stretch;7576  padding: 0 20px 20px;7577  min-height: 0;7578  overflow-y: auto;7579}75807581.peach-recovery-words-display {7582  width: 100%;7583  margin-bottom: 16px;7584  border: 1px solid var(--peach-t3);7585  border-radius: 8px;7586  padding: 12px 14px;7587  background: rgba(245, 240, 234, 0.04);7588}75897590.peach-recovery-words-label {7591  font-family: "IBM Plex Mono", monospace;7592  font-size: 0.5rem;7593  letter-spacing: 0.08em;7594  color: var(--peach-t2);7595  text-transform: uppercase;7596  margin-bottom: 10px;7597}75987599.peach-recovery-word-list {7600  list-style: none;7601  margin: 0;7602  padding: 0;7603  display: grid;7604  grid-template-columns: repeat(2, 1fr);7605  gap: 6px 16px;7606}76077608.peach-recovery-word-item {7609  display: flex;7610  align-items: baseline;7611  gap: 5px;7612}76137614.peach-recovery-word-num {7615  font-family: "IBM Plex Mono", monospace;7616  font-size: 0.5rem;7617  color: var(--peach-t2);7618  width: 14px;7619  flex: 0 0 14px;7620  text-align: right;7621  letter-spacing: 0.04em;7622  font-variant-numeric: tabular-nums;7623}76247625.peach-recovery-download-btn {7626  display: block;7627  margin: 10px auto 0;7628  padding: 4px 10px;7629  background: transparent;7630  border: 1px solid var(--peach-border);7631  border-radius: 6px;7632  color: var(--peach-t2);7633  font-family: "IBM Plex Mono", monospace;7634  font-size: 0.5625rem;7635  letter-spacing: 0.06em;7636  text-transform: lowercase;7637  cursor: pointer;7638  transition: border-color 0.15s, color 0.15s;7639}76407641.peach-recovery-download-btn:hover {7642  border-color: var(--peach-accent);7643  color: var(--peach-t0);7644}76457646.peach-recovery-word-text {7647  font-family: "IBM Plex Mono", monospace;7648  font-size: 0.6875rem;7649  letter-spacing: 0.06em;7650  color: var(--peach-t0);7651  text-transform: lowercase;7652}76537654.peach-hint--warning {7655  color: var(--peach-accent);7656  font-style: italic;7657}7658.peach-hint--success {7659  color: var(--peach-t2);7660  font-family: "IBM Plex Mono", monospace;7661  font-size: 0.625rem;7662  letter-spacing: 0.06em;7663}76647665/* Confirmation step */7666.peach-recovery-confirm {7667  width: 100%;7668  flex: 1;7669  display: flex;7670  flex-direction: column;7671}7672.peach-recovery-confirm-label {7673  font-family: "IBM Plex Mono", monospace;7674  font-size: 0.5625rem;7675  letter-spacing: 0.04em;7676  color: var(--peach-t2);7677  text-align: center;7678  margin: 0 0 12px;7679}7680.peach-recovery-confirm-fields {7681  display: flex;7682  flex-direction: column;7683  gap: 14px;7684  margin-bottom: 10px;7685}7686.peach-recovery-confirm-field {7687  display: flex;7688  align-items: center;7689  gap: 8px;7690}7691.peach-recovery-confirm-num {7692  font-family: "IBM Plex Mono", monospace;7693  font-size: 0.5rem;7694  color: var(--peach-t2);7695  min-width: 44px;7696  letter-spacing: 0.04em;7697}7698.peach-recovery-confirm-input {7699  flex: 1;7700  background: transparent;7701  border: none;7702  border-bottom: 1px solid var(--peach-t3);7703  color: var(--peach-t0);7704  font-family: "IBM Plex Mono", monospace;7705  font-size: 0.6875rem;7706  letter-spacing: 0.06em;7707  padding: 4px 2px 3px;7708  outline: none;7709  text-transform: lowercase;7710  transition: border-color 120ms ease;7711}7712.peach-recovery-confirm-input:focus {7713  border-bottom-color: var(--peach-accent);7714}7715.peach-recovery-confirm-input:disabled {7716  opacity: 0.4;7717  cursor: not-allowed;7718}7719.peach-recovery-confirm-btn {7720  width: 100%;7721  margin-top: auto;7722}77237724/* ============================================================7725   Sync info sheet7726   ============================================================ */77277728.peach-sync-info-backdrop {7729  position: fixed;7730  inset: 0;7731  z-index: 200;7732  background: rgba(0, 0, 0, 0.55);7733  display: flex;7734  align-items: flex-end;7735  animation: peach-fade-in 200ms ease forwards;7736}77377738@keyframes peach-fade-in {7739  from { opacity: 0; }7740  to   { opacity: 1; }7741}77427743.peach-sync-info-sheet {7744  width: 100%;7745  background: var(--peach-bg-card, var(--peach-bg));7746  border-top-left-radius: 20px;7747  border-top-right-radius: 20px;7748  padding: 12px 24px 32px;7749  display: flex;7750  flex-direction: column;7751  gap: 20px;7752  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7753}77547755@keyframes peach-sheet-up {7756  from { transform: translateY(100%); }7757  to   { transform: translateY(0); }7758}77597760.peach-sync-info-handle {7761  width: 36px;7762  height: 4px;7763  border-radius: 2px;7764  background: var(--peach-border);7765  margin: 0 auto 4px;7766  flex-shrink: 0;7767}77687769.peach-sync-info-title {7770  font-family: 'Cormorant Garamond', serif;7771  font-style: italic;7772  font-size: 26px;7773  font-weight: 600;7774  color: var(--peach-t0);7775  margin: 0;7776  line-height: 1.2;7777}77787779.peach-sync-info-body {7780  display: flex;7781  flex-direction: column;7782  gap: 14px;7783}77847785.peach-sync-info-point {7786  display: flex;7787  gap: 12px;7788  align-items: flex-start;7789  font-size: 14px;7790  color: var(--peach-t2);7791  line-height: 1.6;7792  margin: 0;7793}77947795.peach-sync-info-icon {7796  color: var(--peach-accent);7797  font-size: 16px;7798  flex-shrink: 0;7799  margin-top: 1px;7800}78017802.peach-sync-info-actions {7803  display: flex;7804  flex-direction: column;7805  gap: 12px;7806  margin-top: 4px;7807}78087809.peach-sync-info-pro-link {7810  background: none;7811  border: none;7812  font-size: 13px;7813  color: var(--peach-t3);7814  cursor: pointer;7815  padding: 0;7816  font-family: inherit;7817  text-align: center;7818  transition: color 150ms ease;7819}78207821.peach-sync-info-pro-link:hover {7822  color: var(--peach-accent);7823}78247825.peach-btn--full {7826  width: 100%;7827}78287829/* ── Sync screen ── */78307831.peach-sync-screen {7832  display: flex;7833  flex-direction: column;7834  height: 100%;7835}78367837.peach-sync-content {7838  flex: 1;7839  overflow-y: auto;7840  padding: 24px 20px 40px;7841  display: flex;7842  flex-direction: column;7843  gap: 24px;7844}78457846/* Intro (State A) */7847.peach-sync-headline {7848  font-family: 'Cormorant Garamond', serif;7849  font-style: italic;7850  font-size: 28px;7851  font-weight: 600;7852  color: var(--peach-t0);7853  margin: 0 0 10px;7854  line-height: 1.2;7855}78567857.peach-sync-intro-body {7858  font-size: 14px;7859  color: var(--peach-t1);7860  line-height: 1.6;7861  margin: 0;7862}78637864.peach-sync-pro-note {7865  display: flex;7866  flex-direction: column;7867  gap: 8px;7868  background: var(--peach-t3);7869  border-radius: 10px;7870  padding: 12px 14px;7871}78727873.peach-sync-pro-note-text {7874  font-size: 12px;7875  color: var(--peach-t2);7876  line-height: 1.5;7877  margin: 0;7878}78797880.peach-sync-pro-link {7881  background: none;7882  border: none;7883  font-size: 12px;7884  color: var(--peach-accent);7885  cursor: pointer;7886  padding: 0;7887  font-family: inherit;7888  text-align: left;7889}78907891/* Status (State C) */7892.peach-sync-status {7893  padding: 12px 0;7894  border-bottom: 1px solid var(--peach-border);7895}78967897.peach-sync-status-row {7898  display: flex;7899  align-items: center;7900  gap: 8px;7901}79027903.peach-sync-dot {7904  width: 7px;7905  height: 7px;7906  border-radius: 50%;7907  flex-shrink: 0;7908}79097910.peach-sync-dot--green { background: var(--peach-health-ok); }7911.peach-sync-dot--amber { background: var(--peach-accent); }79127913.peach-sync-status-text {7914  font-family: 'IBM Plex Mono', monospace;7915  font-size: 11px;7916  color: var(--peach-t2);7917}79187919/* Paired devices */7920.peach-sync-section {7921  display: flex;7922  flex-direction: column;7923  gap: 2px;7924}79257926.peach-sync-section-label {7927  font-family: 'IBM Plex Mono', monospace;7928  font-size: 10px;7929  letter-spacing: 0.1em;7930  color: var(--peach-t3);7931  margin: 0 0 10px;7932}79337934.peach-sync-device-row {7935  display: flex;7936  justify-content: space-between;7937  align-items: baseline;7938  padding: 10px 0;7939  border-bottom: 1px solid var(--peach-border);7940  gap: 12px;7941}79427943.peach-sync-device-name {7944  font-size: 14px;7945  color: var(--peach-t1);7946}79477948.peach-sync-device-meta {7949  font-family: 'IBM Plex Mono', monospace;7950  font-size: 11px;7951  color: var(--peach-t3);7952  white-space: nowrap;7953}79547955.peach-sync-hub-note {7956  padding: 14px 16px;7957  border: 1px solid var(--peach-border);7958  border-radius: 10px;7959  display: flex;7960  flex-direction: column;7961  gap: 6px;7962  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);7963}79647965.peach-sync-hub-note-title {7966  font-size: 13px;7967  font-weight: 600;7968  color: var(--peach-t0);7969  margin: 0;7970}79717972.peach-sync-hub-note-body {7973  font-size: 12px;7974  color: var(--peach-t2);7975  line-height: 1.6;7976  margin: 0;7977}79787979/* Action buttons */7980.peach-sync-actions {7981  display: flex;7982  gap: 10px;7983  flex-wrap: wrap;7984}79857986/* Upgrade prompt (State B) */7987.peach-sync-upgrade {7988  display: flex;7989  flex-direction: column;7990  gap: 12px;7991  padding: 16px;7992  border: 1px solid var(--peach-border);7993  border-radius: 10px;7994}79957996.peach-sync-upgrade-text {7997  font-size: 13px;7998  color: var(--peach-t2);7999  line-height: 1.6;8000  margin: 0;8001}80028003/* Network note */8004.peach-sync-network-note {8005  font-size: 12px;8006  color: var(--peach-t3);8007  line-height: 1.6;8008  margin: 0;8009}80108011/* Advanced */8012.peach-sync-advanced {8013  margin-top: auto;8014  padding-top: 16px;8015  border-top: 1px solid var(--peach-border);8016}80178018.peach-sync-advanced-toggle {8019  display: flex;8020  align-items: center;8021  gap: 8px;8022  background: none;8023  border: none;8024  font-family: 'IBM Plex Mono', monospace;8025  font-size: 11px;8026  letter-spacing: 0.08em;8027  color: var(--peach-t3);8028  cursor: pointer;8029  padding: 0;8030  text-transform: uppercase;8031}80328033.peach-sync-advanced-chevron {8034  display: inline-block;8035  transition: transform 200ms ease;8036  font-size: 10px;8037}80388039.peach-sync-advanced-chevron.is-open {8040  transform: rotate(90deg);8041}80428043.peach-sync-advanced-content {8044  margin-top: 14px;8045}80468047.peach-sync-advanced-row {8048  display: flex;8049  justify-content: space-between;8050  align-items: center;8051  gap: 16px;8052}80538054.peach-sync-advanced-title {8055  font-size: 14px;8056  color: var(--peach-t1);8057  margin: 0 0 2px;8058}80598060.peach-sync-advanced-subtitle {8061  font-size: 12px;8062  color: var(--peach-t3);8063  margin: 0;8064  line-height: 1.5;8065}80668067/* ── Add Device — Android scan tabs ─────────────────────────────────────── */80688069.peach-pairing-tabs {8070  display: flex;8071  border: 1px solid var(--peach-border);8072  border-radius: 8px;8073  overflow: hidden;8074  margin-bottom: 4px;8075}80768077.peach-pairing-tab {8078  flex: 1;8079  padding: 10px 0;8080  background: none;8081  border: none;8082  font-family: 'IBM Plex Mono', monospace;8083  font-size: 11px;8084  letter-spacing: 0.06em;8085  color: var(--peach-t2);8086  cursor: pointer;8087  transition: background 150ms, color 150ms;8088}80898090.peach-pairing-tab.is-active {8091  background: var(--peach-accent);8092  color: #fff;8093  font-weight: 600;8094}80958096.peach-pairing-tab:not(.is-active):active {8097  background: var(--peach-border);8098}80998100/* Camera view */8101.peach-pairing-camera-container {8102  position: relative;8103  width: 100%;8104  aspect-ratio: 1;8105  border-radius: 12px;8106  overflow: hidden;8107  background: #000;8108  flex-shrink: 0;8109}81108111.peach-pairing-video {8112  width: 100%;8113  height: 100%;8114  object-fit: cover;8115}81168117.peach-pairing-scan-frame {8118  position: absolute;8119  top: 50%;8120  left: 50%;8121  transform: translate(-50%, -50%);8122  width: 60%;8123  aspect-ratio: 1;8124  border: 2px solid var(--peach-accent);8125  border-radius: 8px;8126  pointer-events: none;8127}81288129/* ── Notes Mode ── */81308131/* Overlay that crossfades over the vault */8132.peach-notes-overlay {8133  position: fixed;8134  inset: 0;8135  z-index: 90;8136  opacity: 0;8137  pointer-events: none;8138  animation: peach-mode-in 220ms ease-in forwards;8139}81408141.peach-notes-overlay.is-visible {8142  opacity: 1;8143  pointer-events: auto;8144}81458146@keyframes peach-mode-in {8147  from { opacity: 0; }8148  to   { opacity: 1; }8149}81508151/* Top-level notes surface */8152.peach-notes-mode {8153  position: absolute;8154  inset: 0;8155  background: var(--peach-bg);8156  display: flex;8157  flex-direction: column;8158}81598160/* Rune canvas positioned behind content */8161.peach-note-rune-canvas {8162  position: absolute;8163  inset: 0;8164  width: 100%;8165  height: 100%;8166  pointer-events: none;8167  z-index: 0;8168}81698170/* TOC wrapper */8171.peach-notes-toc-wrapper {8172  position: absolute;8173  inset: 0;8174  z-index: 1;8175  opacity: 1;8176  pointer-events: auto;8177  transition: opacity 200ms ease;8178}81798180.peach-notes-toc-wrapper.is-hidden {8181  opacity: 0;8182  pointer-events: none;8183}81848185/* Editor wrapper */8186.peach-notes-editor-wrapper {8187  position: absolute;8188  inset: 0;8189  z-index: 2;8190  opacity: 0;8191  pointer-events: none;8192  transition: opacity 200ms ease;8193}81948195.peach-notes-editor-wrapper.is-visible {8196  opacity: 1;8197  pointer-events: auto;8198}81998200/* TOC inner */8201.peach-notes-toc {8202  position: relative;8203  display: flex;8204  flex-direction: column;8205  height: 100%;8206  padding-top: env(safe-area-inset-top, 0px);8207  padding-bottom: env(safe-area-inset-bottom, 0px);8208}82098210/* Shared header */8211.peach-notes-header {8212  display: flex;8213  align-items: center;8214  padding: 12px 16px;8215  gap: 12px;8216  flex-shrink: 0;8217  min-height: 52px;8218  position: relative;8219  z-index: 2;8220}82218222.peach-notes-back {8223  font-size: 22px;8224  color: var(--peach-t2);8225  background: none;8226  border: none;8227  padding: 4px;8228  cursor: pointer;8229  line-height: 1;8230  flex-shrink: 0;8231  transition: color 150ms ease;8232  -webkit-tap-highlight-color: transparent;8233}82348235.peach-notes-back:active { color: var(--peach-t0); }82368237.peach-notes-header-title {8238  flex: 1;8239  font-family: 'Cormorant Garamond', serif;8240  font-style: italic;8241  font-size: 22px;8242  color: var(--peach-t0);8243  text-align: center;8244}82458246.peach-notes-header-title.is-breadcrumb {8247  font-family: 'IBM Plex Mono', monospace;8248  font-style: normal;8249  font-size: 11px;8250  color: var(--peach-t3);8251  letter-spacing: 0.08em;8252  text-transform: uppercase;8253  cursor: pointer;8254}82558256.peach-notes-header-actions {8257  display: flex;8258  gap: 8px;8259  flex-shrink: 0;8260}82618262.peach-notes-header-btn {8263  width: 36px;8264  height: 36px;8265  display: flex;8266  align-items: center;8267  justify-content: center;8268  background: none;8269  border: none;8270  color: var(--peach-t2);8271  cursor: pointer;8272  border-radius: 8px;8273  font-size: 16px;8274  transition: color 150ms ease, background 150ms ease;8275  -webkit-tap-highlight-color: transparent;8276}82778278.peach-notes-header-btn:active {8279  background: rgba(255,255,255,0.06);8280  color: var(--peach-t0);8281}82828283/* Inline search bar */8284.peach-notes-search-input {8285  flex: 1;8286  background: none;8287  border: none;8288  outline: none;8289  font-family: 'IBM Plex Mono', monospace;8290  font-size: 13px;8291  color: var(--peach-t0);8292  padding: 4px 0;8293  letter-spacing: 0.02em;8294}82958296.peach-notes-search-input::placeholder {8297  color: var(--peach-t3);8298}82998300/* TOC list */8301.peach-notes-list-container {8302  flex: 1;8303  overflow-y: auto;8304  overflow-x: hidden;8305  scrollbar-width: none;8306  -webkit-overflow-scrolling: touch;8307  overscroll-behavior: contain;8308  position: relative;8309  z-index: 1;8310}83118312.peach-notes-list-container::-webkit-scrollbar { display: none; }83138314/* Note row */8315.peach-note-row {8316  position: relative;8317  display: grid;8318  grid-template-columns: 44px 8px 1fr 8px auto;8319  align-items: center;8320  min-height: 72px;8321  padding: 16px 20px;8322  border-bottom: 0.5px solid var(--peach-border);8323  cursor: pointer;8324  overflow: hidden;8325  touch-action: pan-y;8326  user-select: none;8327  -webkit-user-select: none;8328  -webkit-tap-highlight-color: transparent;8329}83308331.peach-note-row:first-child {8332  border-top: 0.5px solid var(--peach-border);8333}83348335.peach-note-row:active {8336  background: rgba(255,255,255,0.02);8337}83388339.peach-note-numeral {8340  font-family: 'Cormorant Garamond', serif;8341  font-style: italic;8342  font-size: 15px;8343  color: var(--peach-accent);8344  text-align: right;8345  line-height: 1;8346  flex-shrink: 0;8347}83488349.peach-note-title-gap { /* grid spacer */ }83508351.peach-note-title {8352  font-family: 'Cormorant Garamond', serif;8353  font-style: italic;8354  font-size: 18px;8355  color: var(--peach-t0);8356  line-height: 1.3;8357  min-width: 0;8358  overflow-wrap: break-word;8359}83608361.peach-note-title-match {8362  color: var(--peach-accent);8363}83648365.peach-note-date {8366  font-family: 'IBM Plex Mono', monospace;8367  font-size: 11px;8368  color: var(--peach-t2);8369  white-space: nowrap;8370  text-align: right;8371  flex-shrink: 0;8372  grid-column: 5;8373}83748375/* Swipe underlays */8376.peach-note-row-underlay {8377  position: absolute;8378  inset: 0;8379  display: flex;8380  align-items: center;8381  padding: 0 24px;8382  font-family: 'IBM Plex Mono', monospace;8383  font-size: 11px;8384  letter-spacing: 0.1em;8385  pointer-events: none;8386  z-index: 0;8387}83888389.peach-note-row-underlay--delete {8390  background: #8B2020;8391  color: rgba(255,255,255,0.9);8392  justify-content: flex-end;8393}83948395.peach-note-row-underlay--archive {8396  background: var(--peach-accent);8397  color: #0C0A06;8398  justify-content: flex-start;8399}84008401/* Delete confirm strip */8402.peach-note-delete-confirm {8403  position: absolute;8404  inset: 0;8405  background: var(--peach-bg);8406  display: flex;8407  align-items: center;8408  gap: 12px;8409  padding: 0 20px;8410  font-family: 'IBM Plex Mono', monospace;8411  font-size: 11px;8412  color: var(--peach-t1);8413  letter-spacing: 0.04em;8414  animation: peach-delete-confirm-in 150ms ease both;8415  z-index: 10;8416}84178418@keyframes peach-delete-confirm-in {8419  from { opacity: 0; }8420  to   { opacity: 1; }8421}84228423.peach-note-delete-confirm-btn {8424  background: #8B2020;8425  color: rgba(255,255,255,0.9);8426  border: none;8427  border-radius: 6px;8428  padding: 4px 10px;8429  font-family: 'IBM Plex Mono', monospace;8430  font-size: 10px;8431  cursor: pointer;8432  letter-spacing: 0.06em;8433}84348435.peach-note-delete-cancel-btn {8436  background: none;8437  border: none;8438  color: var(--peach-t3);8439  font-family: 'IBM Plex Mono', monospace;8440  font-size: 10px;8441  cursor: pointer;8442  letter-spacing: 0.06em;8443  padding: 4px 6px;8444}84458446/* + New note button */8447.peach-notes-new-btn {8448  font-family: 'IBM Plex Mono', monospace;8449  font-size: 12px;8450  color: var(--peach-t3);8451  text-align: center;8452  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8453  background: none;8454  border: none;8455  width: 100%;8456  cursor: pointer;8457  letter-spacing: 0.04em;8458  transition: color 150ms ease;8459  -webkit-tap-highlight-color: transparent;8460}84618462.peach-notes-new-btn:active { color: var(--peach-accent); }84638464/* Empty state */8465.peach-notes-empty {8466  display: flex;8467  flex-direction: column;8468  align-items: center;8469  justify-content: center;8470  flex: 1;8471  padding: 48px 32px;8472  gap: 16px;8473}84748475.peach-notes-empty-text {8476  font-family: 'Cormorant Garamond', serif;8477  font-style: italic;8478  font-size: 20px;8479  color: var(--peach-t3);8480  text-align: center;8481  margin: 0;8482  line-height: 1.4;8483  white-space: pre-line;8484}84858486/* ── Editor surface ── */84878488.peach-note-editor-surface {8489  position: absolute;8490  inset: 0;8491  background: var(--peach-bg);8492  display: flex;8493  flex-direction: column;8494  padding-top: env(safe-area-inset-top, 0px);8495}84968497.peach-note-editor-scroll {8498  flex: 1;8499  overflow-y: auto;8500  overflow-x: hidden;8501  scrollbar-width: none;8502  -webkit-overflow-scrolling: touch;8503  padding: 0 24px 120px;8504  position: relative;8505  z-index: 1;8506}85078508.peach-note-editor-scroll::-webkit-scrollbar { display: none; }85098510/* Desktop toolbar (always visible above body) */8511.peach-note-toolbar-desktop-inline {8512  display: flex;8513  align-items: center;8514  gap: 2px;8515  padding: 6px 0 12px;8516  margin-bottom: 4px;8517  border-bottom: 0.5px solid var(--peach-border);8518}85198520/* Title field */8521.peach-note-title-field {8522  font-family: 'Cormorant Garamond', serif;8523  font-style: italic;8524  font-size: 32px;8525  font-weight: 600;8526  color: var(--peach-t0);8527  line-height: 1.2;8528  padding: 8px 0 0;8529  outline: none;8530  min-height: 44px;8531  word-break: break-word;8532  position: relative;8533  z-index: 1;8534}85358536.peach-note-title-field:empty::before {8537  content: attr(data-placeholder);8538  color: var(--peach-t3);8539  pointer-events: none;8540}85418542/* Hairline separator */8543.peach-note-hairline {8544  height: 0.5px;8545  background: var(--peach-border);8546  margin: 12px 0 20px;8547  position: relative;8548  z-index: 1;8549}85508551/* Body field */8552.peach-note-body-field {8553  font-family: 'DM Sans', sans-serif;8554  font-size: 16px;8555  color: var(--peach-t0);8556  line-height: 1.85;8557  padding: 0;8558  outline: none;8559  min-height: 240px;8560  word-break: break-word;8561  position: relative;8562  z-index: 1;8563}85648565.peach-note-body-field:empty::before {8566  content: attr(data-placeholder);8567  color: var(--peach-t3);8568  font-style: italic;8569  pointer-events: none;8570}85718572.peach-note-body-field h2 {8573  font-family: 'Cormorant Garamond', serif;8574  font-style: italic;8575  font-size: 22px;8576  font-weight: 600;8577  color: var(--peach-t0);8578  margin: 20px 0 8px;8579}85808581.peach-note-body-field blockquote {8582  border-left: 2px solid var(--peach-accent);8583  margin: 12px 0;8584  padding-left: 16px;8585  color: var(--peach-t1);8586  font-style: italic;8587}85888589.peach-note-body-field ul,8590.peach-note-body-field ol {8591  padding-left: 20px;8592  margin: 8px 0;8593}85948595.peach-note-body-field li {8596  margin: 4px 0;8597}85988599.peach-note-body-field hr {8600  border: none;8601  border-top: 0.5px solid var(--peach-border);8602  margin: 16px 0;8603}86048605/* Saved indicator */8606.peach-note-saved-indicator {8607  font-family: 'IBM Plex Mono', monospace;8608  font-size: 11px;8609  color: var(--peach-t3);8610  letter-spacing: 0.04em;8611  text-align: right;8612  padding: 6px 24px;8613  flex-shrink: 0;8614  transition: opacity 300ms ease;8615  pointer-events: none;8616  position: relative;8617  z-index: 1;8618}86198620/* Mobile keyboard toolbar */8621.peach-note-toolbar-mobile {8622  display: flex;8623  align-items: center;8624  padding: 8px 16px;8625  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8626  background: var(--peach-bg);8627  border-top: 0.5px solid var(--peach-border);8628  gap: 4px;8629  flex-shrink: 0;8630  position: relative;8631  z-index: 10;8632}86338634.peach-note-toolbar-btn {8635  min-width: 36px;8636  height: 36px;8637  display: flex;8638  align-items: center;8639  justify-content: center;8640  background: none;8641  border: none;8642  border-radius: 8px;8643  cursor: pointer;8644  font-size: 14px;8645  color: var(--peach-t1);8646  font-family: 'DM Sans', sans-serif;8647  font-weight: 600;8648  transition: background 100ms ease, color 100ms ease;8649  -webkit-tap-highlight-color: transparent;8650}86518652.peach-note-toolbar-btn--italic { font-style: italic; }8653.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8654.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }86558656.peach-note-toolbar-divider {8657  width: 0.5px;8658  height: 20px;8659  background: var(--peach-border);8660  margin: 0 4px;8661  flex-shrink: 0;8662}86638664.peach-note-toolbar-spacer { flex: 1; }86658666/* Desktop: larger headline in TOC */8667@media (min-width: 400px) {8668  .peach-notes-header-title:not(.is-breadcrumb) {8669    font-size: 32px;8670  }86718672  .peach-note-row {8673    min-height: 64px;8674    padding: 14px 16px;8675  }8676}86778678/* Flying title — shared element during expansion/collapse */