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-pwgen-toggle-row {3213  display: flex; align-items: center; justify-content: space-between;3214  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3215}3216.peach-pwgen-toggle-row:last-child { border-bottom: none; }3217.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }32183219.peach-screen-prelock {3220  z-index: 10;3221}32223223.prelock-form {3224  display: grid;3225  gap: 12px;3226}32273228/* Peach popup should not expose native scrollbars on internal panels. */3229.peach-settings-body,3230.peach-new-body,3231.peach-pwgen-body,3232.lock-screen,3233.peach-import-preview {3234  scrollbar-width: none;3235  -ms-overflow-style: none;3236  overscroll-behavior: contain;3237}3238.peach-settings-body::-webkit-scrollbar,3239.peach-new-body::-webkit-scrollbar,3240.peach-pwgen-body::-webkit-scrollbar,3241.lock-screen::-webkit-scrollbar,3242.peach-import-preview::-webkit-scrollbar {3243  width: 0;3244  height: 0;3245  display: none;3246}32473248.lock-screen {3249  height: 100%;3250  min-height: 100%;3251  overflow-y: auto;3252  padding: 18px 18px 16px;3253  gap: 14px;3254  grid-template-rows: auto auto auto 1fr auto;3255  align-content: stretch;3256  position: relative;3257  isolation: isolate;3258}3259.peach-screen.lock-screen--vault-stage {3260  display: flex;3261  flex-direction: column;3262  justify-content: flex-start;3263  gap: 18px;3264  padding: 20px 18px 18px;3265  overflow: hidden;3266}3267.peach-screen.lock-screen--vault-stage .peach-lock-panel {3268  margin-top: 0;3269}3270.lock-screen--onboarding {3271  display: flex;3272  flex-direction: column;3273  gap: 12px;3274  justify-content: flex-start;3275}32763277.lock-screen::before {3278  content: "";3279  position: absolute;3280  inset: 12px 18px auto auto;3281  width: 160px;3282  height: 160px;3283  border-radius: 999px;3284  background:3285    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%);3286  filter: blur(6px);3287  opacity: 0.7;3288  pointer-events: none;3289  z-index: 0;3290}32913292.peach-lock-rune-string {3293  flex: 1;3294  display: flex;3295  align-items: center;3296  justify-content: center;3297  gap: 6px;3298  font-family: PeachScript, monospace;3299  font-size: 0.8125rem;3300  letter-spacing: 0.05em;3301  pointer-events: none;3302  user-select: none;3303  position: relative;3304  z-index: 1;3305}33063307.peach-lock-rune-string span {3308  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3309  text-shadow:3310    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3311    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3312  transition: color 0.9s ease, text-shadow 0.9s ease;3313}33143315.peach-lock-rune-string span.is-glowing {3316  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3317  text-shadow:3318    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3319    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3320}33213322.lock-screen-header {3323  display: flex;3324  align-items: center;3325  justify-content: space-between;3326  position: relative;3327  z-index: 1;3328}33293330.lock-password-input.shake {3331  animation: peach-shake 300ms ease-in-out;3332}33333334.peach-hint-error {3335  color: rgba(220, 80, 60, 0.92);3336}33373338.peach-onboarding-headline {3339  margin: 0;3340  font-family: var(--font-display);3341  font-size: 35px;3342  line-height: 0.88;3343  font-style: italic;3344  font-weight: 400;3345  max-width: 252px;3346}33473348.peach-lock-copy {3349  display: grid;3350  gap: 8px;3351  position: relative;3352  z-index: 1;3353}33543355.peach-lock-copy--onboarding {3356  gap: 10px;3357}33583359.peach-lock-hero {3360  position: relative;3361  z-index: 1;3362  display: grid;3363  gap: 8px;3364  min-height: 0;3365  padding: 4px 2px 0;3366  border: none;3367  border-radius: 0;3368  background: transparent;3369  box-shadow: none;3370}3371.peach-lock-hero-art {3372  position: absolute;3373  right: -8px;3374  top: -6px;3375  width: 120px;3376  height: 120px;3377  display: flex;3378  align-items: center;3379  justify-content: center;3380  pointer-events: none;3381  opacity: 0.12;3382  filter: saturate(0.9);3383}3384.peach-lock-hero-mark {3385  width: 100%;3386  height: 100%;3387}3388/* Peach body stays brand-peach across every accent — we don't want a3389   green or blue peach when sage/sky is selected. Leaf + stem keep the3390   sage tint because a real peach has a sage leaf. */3391.peach-lock-hero-mark path:nth-child(2),3392.peach-lock-hero-mark path:nth-child(3) {3393  stroke: rgba(123, 144, 96, 0.88);3394  fill: rgba(123, 144, 96, 0.88);3395}3396.peach-lock-hero > *:not(.peach-lock-hero-art) {3397  position: relative;3398  z-index: 1;3399}34003401.peach-lock-eyebrow {3402  display: inline-flex;3403  align-items: center;3404  width: fit-content;3405  padding: 4px 9px;3406  border-radius: 999px;3407  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3408  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3409  color: var(--peach-t0);3410  font-family: "IBM Plex Mono", monospace;3411  font-size: 0.5rem;3412  letter-spacing: 0.18em;3413  text-transform: uppercase;3414}34153416.peach-lock-label-row {3417  display: flex;3418  align-items: center;3419  justify-content: space-between;3420  margin-bottom: 0;3421}34223423.peach-lock-reveal-btn {3424  display: inline-flex;3425  align-items: center;3426  gap: 4px;3427  background: none;3428  border: none;3429  cursor: pointer;3430  font-family: "IBM Plex Mono", monospace;3431  font-size: 0.5625rem;3432  letter-spacing: 0.06em;3433  color: var(--peach-t2);3434  padding: 2px 0;3435  transition: color 150ms ease;3436}34373438.peach-lock-reveal-btn:hover {3439  color: var(--peach-t1);3440}34413442.peach-lock-warning {3443  color: rgba(220, 80, 60, 0.85) !important;3444  line-height: 1.5;3445}34463447.peach-onboarding-cards {3448  display: grid;3449  gap: 8px;3450  position: relative;3451  z-index: 1;3452}34533454.peach-lock-panel {3455  position: relative;3456  z-index: 1;3457  display: grid;3458  gap: 9px;3459  padding: 14px 16px 15px;3460  border-radius: 18px;3461  border: 1px solid var(--peach-t3);3462  background:3463    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3464  box-shadow:3465    inset 0 1px 0 rgba(240, 232, 216, 0.04),3466    0 12px 28px rgba(0, 0, 0, 0.12);3467}34683469/* Glass surface — lock panel and settings groups */3470.peach-glass {3471  background: rgba(26, 20, 16, 0.65);3472  border: 1px solid rgba(255, 255, 255, 0.08);3473  border-radius: 12px;3474  backdrop-filter: blur(12px) saturate(1.4);3475  -webkit-backdrop-filter: blur(12px) saturate(1.4);3476}34773478@supports not (backdrop-filter: blur(1px)) {3479  .peach-glass {3480    background: rgba(26, 20, 16, 0.92);3481    border: 1px solid rgba(255, 255, 255, 0.10);3482    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3483  }3484}34853486.light .peach-glass,3487[data-theme="light"] .peach-glass {3488  background: rgba(253, 248, 244, 0.70);3489  border: 1px solid rgba(0, 0, 0, 0.07);3490  backdrop-filter: blur(12px) saturate(1.2);3491  -webkit-backdrop-filter: blur(12px) saturate(1.2);3492}34933494@supports not (backdrop-filter: blur(1px)) {3495  .light .peach-glass,3496  [data-theme="light"] .peach-glass {3497    background: rgba(253, 248, 244, 0.95);3498    border: 1px solid rgba(0, 0, 0, 0.09);3499  }3500}35013502/* Lock panel keeps its own border-radius over the generic glass token */3503.peach-lock-panel.peach-glass {3504  border-radius: 18px;3505  background: rgba(26, 20, 16, 0.65);3506  border: 1px solid rgba(255, 255, 255, 0.08);3507  box-shadow:3508    inset 0 1px 0 rgba(255, 255, 255, 0.05),3509    0 12px 28px rgba(0, 0, 0, 0.3);3510}35113512.light .peach-lock-panel.peach-glass,3513[data-theme="light"] .peach-lock-panel.peach-glass {3514  background: rgba(238, 227, 204, 0.75);3515  border: 1px solid rgba(34, 24, 9, 0.10);3516  box-shadow:3517    inset 0 1px 0 rgba(255, 255, 255, 0.5),3518    0 8px 24px rgba(80, 56, 32, 0.15);3519}35203521@supports not (backdrop-filter: blur(1px)) {3522  .peach-lock-panel.peach-glass {3523    background: rgba(26, 20, 16, 0.92);3524    box-shadow:3525      inset 0 1px 0 rgba(255, 255, 255, 0.05),3526      0 12px 28px rgba(0, 0, 0, 0.4);3527  }3528  .light .peach-lock-panel.peach-glass,3529  [data-theme="light"] .peach-lock-panel.peach-glass {3530    background: rgba(238, 227, 204, 0.96);3531  }3532}35333534.peach-lock-panel--secondary {3535  gap: 12px;3536}35373538.peach-lock-panel-header {3539  display: flex;3540  align-items: baseline;3541  justify-content: space-between;3542  gap: 12px;3543}35443545.peach-lock-option-grid {3546  display: grid;3547  gap: 10px;3548}35493550.peach-lock-option {3551  width: 100%;3552  display: grid;3553  gap: 6px;3554  padding: 14px 15px;3555  border-radius: 16px;3556  border: 1px solid rgba(240, 232, 216, 0.08);3557  background: rgba(240, 232, 216, 0.02);3558  color: var(--peach-t0);3559  text-align: left;3560  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3561}35623563.peach-lock-option:hover {3564  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3565  background: rgba(240, 232, 216, 0.04);3566  transform: translateY(-1px);3567}35683569.peach-lock-option-title {3570  font-size: 0.75rem;3571  color: var(--peach-t0);3572}35733574.peach-lock-option-copy {3575  font-size: 0.6875rem;3576  line-height: 1.55;3577  color: var(--peach-t1);3578}35793580.peach-onboarding-stack {3581  margin-top: 2px;3582}3583.peach-lock-panel-footer {3584  display: grid;3585  gap: 6px;3586  margin-top: 2px;3587  padding-top: 10px;3588  border-top: 1px solid rgba(240, 232, 216, 0.06);3589}35903591/* ── Restore tab view ─────────────────────────────────────────────────────3592   Tab-based restore screen replacing the old three-card picker. */35933594.peach-restore-tabview {3595  overflow: hidden;3596}35973598.peach-restore-tabcard {3599  flex: 1;3600  display: flex;3601  flex-direction: column;3602  gap: 0;3603  padding: 0;3604  overflow: hidden;3605  cursor: default;3606  user-select: none;3607  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3608}36093610/* ── Tab selector ─────────────────────────────────────────────────────── */36113612.peach-restore-tabs {3613  display: flex;3614  justify-content: space-around;3615  padding: 14px 10px 10px;3616  border-bottom: 1px solid var(--peach-t3);3617  gap: 2px;3618  overflow: hidden;3619  scrollbar-width: none;3620}3621.peach-restore-tabs::-webkit-scrollbar { display: none; }36223623.peach-restore-tab {3624  background: none;3625  border: none;3626  cursor: pointer;3627  padding: 3px 2px;3628  font-family: 'Cormorant Garamond', Georgia, serif;3629  font-style: italic;3630  font-size: 11px;3631  color: var(--peach-t2);3632  transition: color 150ms ease, text-shadow 150ms ease;3633  flex: 1;3634  min-width: 0;3635  text-align: center;3636  white-space: nowrap;3637  overflow: hidden;3638  text-overflow: ellipsis;3639}3640.peach-restore-tab:hover {3641  color: var(--peach-accent);3642  text-shadow:3643    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3644    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3645}3646.peach-restore-tab.is-active {3647  color: var(--peach-accent);3648  text-shadow:3649    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3650    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3651}36523653/* ── Content area ─────────────────────────────────────────────────────── */36543655.peach-restore-content {3656  padding: 16px 16px 14px;3657  display: flex;3658  flex-direction: column;3659  gap: 8px;3660  overflow: hidden;3661  scrollbar-width: none;3662  flex: 1;3663}3664.peach-restore-content::-webkit-scrollbar { display: none; }3665.peach-restore-content > * {3666  overflow: hidden;3667  scrollbar-width: none;3668}3669.peach-restore-content > *::-webkit-scrollbar { display: none; }36703671/* ── Shared tab inner layout ──────────────────────────────────────────── */36723673.peach-rt-symbols,3674.peach-rt-csv,3675.peach-rt-phone {3676  display: flex;3677  flex-direction: column;3678  gap: 8px;3679  overflow: hidden;3680}36813682.peach-rt-submit {3683  width: 100%;3684}36853686.peach-rt-error {3687  margin: 0;3688  font-size: 0.6875rem;3689  color: var(--peach-breach);3690  line-height: 1.4;3691}36923693/* ── PeachScript tab ──────────────────────────────────────────────────── */36943695.peach-restore-symbols-textarea {3696  font-family: 'PeachScript', monospace;3697  font-size: 13px;3698  line-height: 1.9;3699  letter-spacing: 0.1em;3700  word-break: break-all;3701  resize: none;3702  width: 100%;3703  min-height: 56px;3704  max-height: 72px;3705  overflow: hidden;3706  scrollbar-width: none;3707  -ms-overflow-style: none;3708  box-sizing: border-box;3709  padding: 6px 8px;3710  border-radius: 8px;3711  border: 1px solid var(--peach-t3);3712  background: rgba(240, 232, 216, 0.03);3713  color: var(--peach-t0);3714}3715.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3716.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37173718.peach-restore-symbols-pass {3719  width: 100%;3720  box-sizing: border-box;3721  padding: 7px 10px;3722  border-radius: 8px;3723  border: 1px solid var(--peach-t3);3724  background: rgba(240, 232, 216, 0.03);3725  color: var(--peach-t0);3726  font-size: 0.8125rem;3727}3728.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3729.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37303731.peach-rt-divider {3732  text-align: center;3733  font-size: 0.6875rem;3734  color: var(--peach-t2);3735  font-style: italic;3736}37373738.peach-rt-file-label {3739  width: 100%;3740  justify-content: center;3741}37423743.peach-rt-anim-canvas {3744  width: 100%;3745  height: 180px;3746  border-radius: 10px;3747  overflow: hidden;3748  display: block;3749}37503751/* ── CSV tab ──────────────────────────────────────────────────────────── */37523753.peach-rt-csv-sources {3754  margin: 0;3755  font-size: 0.6875rem;3756  color: var(--peach-t2);3757  line-height: 1.5;3758  text-align: center;3759}37603761.peach-rt-csv-warning {3762  margin: 0;3763  font-family: "IBM Plex Mono", monospace;3764  font-size: 0.5625rem;3765  letter-spacing: 0.12em;3766  color: var(--peach-breach);3767  text-align: center;3768}37693770/* ── From Phone tab ───────────────────────────────────────────────────── */37713772.peach-rt-phone-code {3773  margin: 0;3774  text-align: center;3775  font-family: "IBM Plex Mono", monospace;3776  font-size: 22px;3777  letter-spacing: 0.18em;3778  color: var(--peach-t0);3779}37803781.peach-rt-phone-qr {3782  display: block;3783  width: 96px;3784  height: 96px;3785  margin: 0 auto;3786  border-radius: 6px;3787  image-rendering: pixelated;3788  overflow: hidden;3789}37903791.peach-rt-phone-hint {3792  margin: 0;3793  font-size: 0.6875rem;3794  color: var(--peach-t2);3795  line-height: 1.55;3796  text-align: center;3797}37983799/* ── Intro popup ──────────────────────────────────────────────────────── */38003801.peach-restore-intro-overlay {3802  position: absolute;3803  inset: 0;3804  z-index: 100;3805  display: flex;3806  align-items: center;3807  justify-content: center;3808  padding: 20px;3809  background: rgba(12, 10, 6, 0.7);3810  backdrop-filter: blur(4px);3811  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3812}38133814.peach-restore-intro-card {3815  width: 100%;3816  display: flex;3817  flex-direction: column;3818  gap: 12px;3819  padding: 22px 20px 20px;3820  border-radius: 16px;3821  border: 1px solid var(--peach-t3);3822  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3823  backdrop-filter: blur(4px);3824  -webkit-backdrop-filter: blur(4px);3825  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3826}38273828.peach-restore-intro-headline {3829  margin: 0;3830  font-family: var(--font-display);3831  font-style: italic;3832  font-size: 20px;3833  font-weight: 400;3834  color: var(--peach-t0);3835}38363837.peach-restore-intro-body {3838  display: flex;3839  flex-direction: column;3840  gap: 8px;3841}3842.peach-restore-intro-body p {3843  margin: 0;3844  font-size: 0.75rem;3845  color: var(--peach-t1);3846  line-height: 1.5;3847}38483849.peach-restore-intro-btn {3850  width: 100%;3851  margin-top: 4px;3852}38533854/* Snapshot restore panel */3855.peach-snapshot-panel {3856  gap: 10px;3857  overflow-y: auto;3858  max-height: 340px;3859}3860.peach-snapshot-list {3861  display: flex;3862  flex-direction: column;3863  gap: 4px;3864}3865.peach-snapshot-row {3866  display: flex;3867  align-items: center;3868  justify-content: space-between;3869  width: 100%;3870  padding: 8px 10px;3871  border-radius: 8px;3872  border: 1px solid rgba(240, 232, 216, 0.07);3873  background: transparent;3874  cursor: pointer;3875  transition: border-color 120ms, background 120ms;3876  text-align: left;3877  gap: 8px;3878}3879.peach-snapshot-row:hover {3880  border-color: rgba(240, 232, 216, 0.14);3881  background: rgba(240, 232, 216, 0.03);3882}3883.peach-snapshot-row.is-selected {3884  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3885  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3886}3887.peach-snapshot-time {3888  font-size: 11.5px;3889  color: var(--peach-t0);3890  flex: 1;3891}3892.peach-snapshot-count {3893  font-family: "IBM Plex Mono", monospace;3894  font-size: 0.625rem;3895  color: var(--peach-t2);3896  flex-shrink: 0;3897}3898.peach-snapshot-confirm {3899  display: flex;3900  flex-direction: column;3901  gap: 8px;3902  padding-top: 10px;3903  border-top: 1px solid rgba(240, 232, 216, 0.06);3904}3905.peach-snapshot-warning {3906  display: flex;3907  align-items: flex-start;3908  gap: 6px;3909  font-size: 10.5px;3910  color: rgba(220, 80, 60, 0.85);3911  line-height: 1.55;3912}3913.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3914.peach-snapshot-confirm-row {3915  display: flex;3916  gap: 6px;3917  align-items: center;3918}3919.peach-snapshot-restore-btn {3920  width: 100%;3921}3922.peach-lock-hero--unlock .peach-lock-hero-art {3923  width: 112px;3924  height: 112px;3925  right: 0;3926  top: 2px;3927  opacity: 0.1;3928}39293930.peach-card {3931  border: 1px solid var(--peach-t3);3932  border-radius: 18px;3933  background:3934    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3935  box-shadow:3936    inset 0 0 0 1px var(--peach-border-accent),3937    inset 0 1px 0 rgba(240, 232, 216, 0.04),3938    0 12px 32px rgba(0, 0, 0, 0.14);3939  overflow: hidden;3940}39413942.peach-card-active {3943  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3944  box-shadow:3945    inset 0 1px 0 rgba(240, 232, 216, 0.05),3946    0 16px 38px rgba(0, 0, 0, 0.18),3947    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);3948}39493950.peach-card-disabled {3951  opacity: 0.72;3952}39533954.peach-card-header {3955  width: 100%;3956  padding: 13px 16px 11px;3957  background: transparent;3958  color: var(--peach-t0);3959  display: flex;3960  justify-content: space-between;3961  align-items: center;3962  text-align: left;3963  font-size: 0.75rem;3964}39653966.peach-card-body {3967  padding: 0 16px 16px;3968  display: grid;3969  gap: 9px;3970}39713972.peach-card-tag {3973  color: var(--peach-t2);3974  font-family: "IBM Plex Mono", monospace;3975  font-size: 0.5625rem;3976  letter-spacing: 0.12em;3977  text-transform: uppercase;3978}39793980.peach-empty-copy {3981  display: grid;3982  gap: 6px;3983  color: var(--peach-t1);3984  font-size: 0.8125rem;3985}39863987.peach-lock-submit {3988  width: 100%;3989  box-shadow:3990    0 1px 0 rgba(255,255,255,0.10) inset,3991    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),3992    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),3993    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);3994}39953996.peach-lock-secondary {3997  width: 100%;3998  border-color: var(--peach-t3);3999  background: rgba(240, 232, 216, 0.02);4000}40014002.peach-lock-secondary:hover {4003  background: rgba(240, 232, 216, 0.04);4004}40054006.peach-lock-note {4007  max-width: none;4008  line-height: 1.55;4009  margin: 0;4010}40114012.peach-overlay-action {4013  font-size: 0.625rem;4014  padding: 4px 8px;4015  letter-spacing: 0.06em;4016  min-width: 44px;4017  text-align: center;4018}40194020.peach-overlay-spacer {4021  width: 32px;4022}40234024.peach-inline-action {4025  flex-shrink: 0;4026  font-size: 0.5625rem;4027  letter-spacing: 0.1em;4028  text-transform: uppercase;4029  padding: 4px 7px;4030}4031.peach-password-toggle-btn {4032  display: inline-flex;4033  align-items: center;4034  justify-content: center;4035  min-width: 30px;4036  min-height: 26px;4037  padding: 0 7px;4038  border: 1px solid var(--peach-t3);4039  border-radius: 999px;4040  background: rgba(240, 232, 216, 0.04);4041  color: var(--peach-t2);4042  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4043}4044.peach-password-toggle-btn:hover {4045  border-color: var(--peach-t2);4046  color: var(--peach-t0);4047  background: rgba(240, 232, 216, 0.06);4048}40494050.peach-new-textarea {4051  width: 100%;4052  min-height: 88px;4053  resize: vertical;4054  border: 0;4055  outline: none;4056  background: transparent;4057  color: var(--peach-t1);4058  font-family: "IBM Plex Mono", monospace;4059  font-size: 0.75rem;4060  line-height: 1.65;4061  caret-color: var(--peach-accent);4062}40634064.peach-new-textarea::placeholder {4065  color: var(--peach-t2);4066  opacity: 0.7;4067}40684069.peach-settings-actions {4070  display: grid;4071  gap: 8px;4072}40734074.peach-sync-section-label {4075  font-size: 0.6875rem;4076  color: var(--peach-t2);4077  text-transform: uppercase;4078  letter-spacing: 0.05em;4079}40804081.peach-sync-network-note {4082  margin: 0 0 6px;4083  font-size: 0.75rem;4084  color: var(--peach-t2);4085  line-height: 1.4;4086}40874088.peach-settings-row--tappable {4089  background: none;4090  border: none;4091  width: 100%;4092  text-align: left;4093  cursor: pointer;4094  color: var(--peach-t1);4095  font-size: 0.8125rem;4096}4097.peach-settings-row--tappable:hover {4098  color: var(--peach-t0);4099}41004101.peach-sync-pro-hint {4102  display: flex;4103  flex-direction: column;4104  align-items: flex-start;4105  gap: 8px;4106  padding: 12px 0 4px;4107}41084109.peach-sync-device-row {4110  display: flex;4111  justify-content: space-between;4112  align-items: center;4113  padding: 6px 0;4114  border-bottom: 1px solid var(--peach-t3);4115}41164117.peach-sync-device-info {4118  display: flex;4119  flex-direction: column;4120  gap: 2px;4121}41224123.peach-sync-device-name {4124  font-size: 0.8125rem;4125  color: var(--peach-t0);4126}41274128.peach-sync-device-meta {4129  font-size: 0.6875rem;4130  color: var(--peach-t2);4131}41324133.peach-sync-status-dot {4134  display: inline-block;4135  width: 8px;4136  height: 8px;4137  border-radius: 50%;4138  vertical-align: middle;4139}41404141.peach-sync-remove-btn {4142  color: var(--peach-breach);4143}41444145.peach-sync-advanced-row {4146  display: flex;4147  justify-content: space-between;4148  align-items: center;4149  padding: 6px 0;4150  gap: 12px;4151}41524153.peach-sync-advanced-info {4154  display: flex;4155  flex-direction: column;4156  gap: 2px;4157  flex: 1;4158}41594160.peach-sync-advanced-name {4161  font-size: 0.8125rem;4162  color: var(--peach-t0);4163}41644165.peach-sync-reset-confirm {4166  display: flex;4167  flex-direction: column;4168  gap: 8px;4169  padding: 10px;4170  border: 1px solid var(--peach-breach);4171  border-radius: 10px;4172  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4173}41744175.peach-sync-reset-confirm-headline {4176  font-size: 0.8125rem;4177  font-weight: 600;4178  color: var(--peach-t0);4179  margin: 0;4180}41814182.peach-sync-reset-confirm-body {4183  font-size: 0.75rem;4184  color: var(--peach-t1);4185  margin: 0;4186  line-height: 1.4;4187}41884189.peach-btn--danger {4190  background: var(--peach-breach);4191  color: #fff;4192  border-color: var(--peach-breach);4193}4194.peach-btn--danger:hover:not(:disabled) {4195  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4196}4197.peach-btn--danger:disabled {4198  opacity: 0.55;4199  cursor: not-allowed;4200}42014202.peach-sync-hero-icon {4203  color: var(--peach-t1);4204  opacity: 0.85;4205}42064207.peach-import-preview {4208  margin-bottom: 12px;4209  max-height: 152px;4210  overflow-y: auto;4211  border: 1px solid var(--peach-t3);4212  border-radius: 10px;4213  padding: 8px 10px;4214  display: grid;4215  gap: 8px;4216  background: rgba(240, 232, 216, 0.02);4217}42184219.peach-import-preview-row {4220  display: flex;4221  justify-content: space-between;4222  gap: 10px;4223  font-size: 0.6875rem;4224  color: var(--peach-t1);4225}42264227.peach-import-preview-title {4228  color: var(--peach-t0);4229  flex: 1;4230  min-width: 0;4231  overflow: hidden;4232  text-overflow: ellipsis;4233  white-space: nowrap;4234}42354236.peach-import-preview-meta {4237  color: var(--peach-t2);4238  flex-shrink: 0;4239  max-width: 42%;4240  overflow: hidden;4241  text-overflow: ellipsis;4242  white-space: nowrap;4243}42444245.peach-import-preview-more {4246  color: var(--peach-t2);4247  font-size: 0.625rem;4248}42494250.peach-restore-copy {4251  margin: 0;4252  color: var(--peach-t1);4253  font-size: 0.6875rem;4254  line-height: 1.6;4255}42564257.peach-restore-warning {4258  padding: 10px 12px;4259  border-radius: 12px;4260  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4261  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4262  color: var(--peach-t0);4263  font-size: 0.6875rem;4264  line-height: 1.55;4265}42664267.peach-provider-chips {4268  display: flex;4269  flex-wrap: wrap;4270  gap: 6px;4271}42724273.peach-provider-chip {4274  display: inline-flex;4275  align-items: center;4276  padding: 5px 8px;4277  border-radius: 999px;4278  border: 1px solid var(--peach-t3);4279  background: rgba(240, 232, 216, 0.02);4280  color: var(--peach-t1);4281  font-family: "IBM Plex Mono", monospace;4282  font-size: 0.5rem;4283  letter-spacing: 0.08em;4284  text-transform: uppercase;4285}42864287.peach-restore-file,4288.peach-restore-input {4289  width: 100%;4290  border-radius: 10px;4291  border: 1px solid var(--peach-t3);4292  background: var(--peach-s2);4293  color: var(--peach-t0);4294  font-size: 0.75rem;4295}42964297.peach-restore-file {4298  padding: 9px 10px;4299}43004301.peach-restore-file::file-selector-button {4302  margin-right: 10px;4303  padding: 7px 10px;4304  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4305  border-radius: 999px;4306  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4307  color: var(--peach-t0);4308  font-size: 0.625rem;4309  letter-spacing: 0.08em;4310  text-transform: uppercase;4311  cursor: pointer;4312}43134314.peach-restore-input {4315  padding: 10px 12px;4316}43174318.peach-auth-grid {4319  display: grid;4320  gap: 10px;4321}43224323.peach-import-summary {4324  color: var(--peach-t1);4325  font-size: 0.75rem;4326  line-height: 1.6;4327  margin-bottom: 12px;4328}43294330.peach-restore-error {4331  color: rgba(220, 80, 60, 0.95);4332  font-size: 0.75rem;4333  line-height: 1.55;4334}43354336.peach-passkey-card {4337  max-width: 400px;4338  margin: auto 16px;4339  align-self: center;4340  width: calc(100% - 32px);4341}43424343/* Center the approval card vertically inside the overlay-view (which sets4344 * flex-direction: column without justify-content). Without this, the card4345 * sits at the top with a tall empty band below — looks unfinished on the4346 * 320px popup. */4347.peach-overlay-view:has(.peach-passkey-card) {4348  justify-content: center;4349}43504351.peach-pro-badge {4352  padding: 2px 6px;4353  border-radius: 999px;4354  font-family: var(--font-ui);4355  font-size: 0.625rem;4356  letter-spacing: 0.08em;4357  text-transform: uppercase;4358  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4359  color: var(--peach-accent);4360}43614362/* ── Shortcuts rebind table ─────────────────────────────────── */4363.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4364.peach-shortcut-row {4365  display: flex;4366  align-items: center;4367  gap: 10px;4368  padding: 6px 0;4369}4370.peach-shortcut-row-label {4371  flex: 1;4372  font-size: 0.75rem;4373  color: var(--peach-t0);4374}4375.peach-shortcut-chip {4376  min-width: 64px;4377  padding: 4px 10px;4378  border-radius: 6px;4379  border: 1px solid var(--peach-t3);4380  background: var(--peach-input-bg, var(--surface-card));4381  color: var(--peach-t0);4382  font-family: var(--font-mono);4383  font-size: 0.6875rem;4384  letter-spacing: 0.04em;4385  cursor: pointer;4386  text-align: center;4387  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4388}4389.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4390.peach-shortcut-chip.is-custom {4391  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4392  color: var(--peach-accent);4393}4394.peach-shortcut-chip.is-capturing {4395  border-color: var(--peach-accent);4396  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4397  color: var(--peach-accent);4398  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4399}4400@keyframes peach-shortcut-capture-pulse {4401  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4402  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4403}4404.peach-shortcut-reset {4405  background: transparent;4406  border: none;4407  cursor: pointer;4408  color: var(--peach-t2);4409  padding: 4px 6px;4410  border-radius: 5px;4411  font-size: 0.875rem;4412  line-height: 1;4413  transition: color 120ms ease, background 120ms ease;4414}4415.peach-shortcut-reset:hover {4416  color: var(--peach-t0);4417  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4418}4419.peach-shortcuts-conflict {4420  margin: 4px 0 0;4421  padding: 8px 10px;4422  border-radius: 7px;4423  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4424  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4425  font-family: var(--font-mono);4426  font-size: 0.6875rem;4427  color: var(--peach-t0);4428}44294430/* ── Help dialog overlay (? to open) ────────────────────────── */4431.peach-shortcuts-help-backdrop {4432  position: fixed;4433  inset: 0;4434  background: rgba(0, 0, 0, 0.55);4435  backdrop-filter: blur(2px);4436  display: flex;4437  align-items: center;4438  justify-content: center;4439  z-index: 1000;4440  animation: peach-help-fade-in 140ms ease forwards;4441}4442@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4443.peach-shortcuts-help-card {4444  width: min(320px, 92vw);4445  max-height: 80vh;4446  overflow-y: auto;4447  border-radius: 14px;4448  border: 1px solid var(--peach-t3);4449  background: var(--peach-bg);4450  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4451  padding: 16px 18px 18px;4452  display: flex;4453  flex-direction: column;4454  gap: 12px;4455}4456.peach-shortcuts-help-head {4457  display: flex; align-items: center; justify-content: space-between;4458}4459.peach-shortcuts-help-head h3 {4460  margin: 0;4461  font-family: var(--font-display);4462  font-style: italic;4463  font-weight: 400;4464  font-size: 22px;4465  color: var(--peach-t0);4466}4467.peach-shortcuts-help-close {4468  background: transparent;4469  border: none;4470  color: var(--peach-t2);4471  cursor: pointer;4472  font-size: 0.875rem;4473  padding: 4px 8px;4474  border-radius: 5px;4475}4476.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4477.peach-shortcuts-help-body ul {4478  list-style: none; padding: 0; margin: 4px 0 12px;4479  display: grid; gap: 8px;4480}4481.peach-shortcuts-help-body li {4482  display: flex; align-items: center; justify-content: space-between; gap: 12px;4483  font-size: 0.75rem; color: var(--peach-t0);4484}4485.peach-shortcuts-help-body kbd {4486  font-family: var(--font-mono);4487  font-size: 0.6875rem;4488  padding: 3px 8px;4489  border-radius: 6px;4490  background: var(--surface-card);4491  border: 1px solid var(--peach-t3);4492  color: var(--peach-accent);4493  letter-spacing: 0.04em;4494}44954496/* ── Pro promo on Account screen ────────────────────────────── */4497.peach-pro-promo {4498  position: relative;4499  border-radius: 14px;4500  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4501  background:4502    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4503    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4504    var(--surface-card);4505  overflow: hidden;4506  margin-bottom: 14px;4507}4508.peach-pro-promo-glow {4509  position: absolute;4510  inset: -40% -20% auto auto;4511  width: 220px; height: 220px;4512  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4513  pointer-events: none;4514  filter: blur(8px);4515}4516.peach-pro-promo-inner {4517  position: relative;4518  padding: 18px 18px 16px;4519}4520.peach-pro-promo-title {4521  font-family: var(--font-display);4522  font-style: italic;4523  font-weight: 400;4524  font-size: 28px;4525  line-height: 1;4526  letter-spacing: -0.005em;4527  color: var(--peach-t0);4528  margin: 0 0 4px;4529}4530.peach-pro-promo-tagline {4531  font-family: var(--font-mono);4532  font-size: 0.625rem;4533  letter-spacing: 0.06em;4534  color: var(--peach-t2);4535  margin: 0 0 14px;4536}4537.peach-pro-promo-list {4538  list-style: none;4539  margin: 0 0 16px;4540  padding: 0;4541  display: grid;4542  gap: 9px;4543}4544.peach-pro-promo-list li {4545  display: flex;4546  align-items: flex-start;4547  gap: 9px;4548  font-size: 0.75rem;4549  color: var(--peach-t1);4550  line-height: 1.4;4551}4552.peach-pro-promo-list svg {4553  width: 14px;4554  height: 14px;4555  flex-shrink: 0;4556  color: var(--peach-accent);4557  margin-top: 2px;4558}4559.peach-pro-promo-list span {4560  color: var(--peach-t0);4561}4562.peach-pro-promo-cta {4563  width: 100%;4564  background: var(--peach-accent);4565  color: #fff;4566  border: none;4567  padding: 9px 12px;4568  border-radius: 9px;4569  font-size: 0.75rem;4570  font-weight: 500;4571  font-family: var(--font-ui);4572  letter-spacing: 0.02em;4573  text-decoration: none;4574  display: inline-flex;4575  align-items: center;4576  justify-content: center;4577  cursor: pointer;4578  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4579  box-shadow: 0 2px 16px var(--peach-glow);4580}4581.peach-pro-promo-cta:hover {4582  filter: brightness(1.07);4583  box-shadow: 0 4px 24px var(--peach-glow);4584  transform: translateY(-1px);4585}4586.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }45874588.peach-pro-or-divider {4589  display: flex;4590  align-items: center;4591  gap: 10px;4592  margin: 4px 0 12px;4593  font-family: var(--font-mono);4594  font-size: 0.625rem;4595  letter-spacing: 0.06em;4596  color: var(--peach-t2);4597  text-transform: uppercase;4598}4599.peach-pro-or-divider::before,4600.peach-pro-or-divider::after {4601  content: "";4602  flex: 1;4603  height: 1px;4604  background: var(--peach-t3);4605}46064607.peach-loading {4608  position: absolute;4609  inset: 0;4610  display: flex;4611  align-items: center;4612  justify-content: center;4613  background: var(--bg);4614  animation: peach-loading-pulse 1.2s ease-in-out infinite;4615}46164617@keyframes peach-loading-pulse {4618  0%, 100% { opacity: 0.6; }4619  50% { opacity: 1; }4620}46214622/* ── Health Dashboard ─────────────────────────────────────────────────── */4623.peach-health-body {4624  flex: 1;4625  overflow-y: auto;4626  display: flex;4627  flex-direction: column;4628  /* Hide the platform scrollbar — every other scrollable surface in the4629   * popup hides it; the Health view was the one outlier and it ruined the4630   * polish. Behavior unchanged, just no rail rendered. */4631  scrollbar-width: none;4632  -ms-overflow-style: none;4633}4634.peach-health-body::-webkit-scrollbar { display: none; }46354636/* Loading screen for the Vault Health view. The advanced report computation4637 * can run for a few seconds on a large vault — without a clear loading4638 * screen the surface looked broken (the entry view bleeds through the4639 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4640.peach-health-loading-screen {4641  flex: 1;4642  display: flex;4643  flex-direction: column;4644  align-items: center;4645  justify-content: center;4646  gap: 14px;4647  padding: 32px 28px;4648  text-align: center;4649}46504651.peach-health-loading-glyph {4652  width: 48px;4653  height: 48px;4654  display: flex;4655  align-items: center;4656  justify-content: center;4657  border-radius: 14px;4658  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4659  color: var(--peach-accent);4660}46614662.peach-health-loading-title {4663  margin: 0;4664  font-family: var(--font-display);4665  font-style: italic;4666  font-weight: 300;4667  font-size: 19px;4668  line-height: 1.2;4669  color: var(--peach-t0);4670}46714672.peach-health-loading-copy {4673  margin: 0;4674  max-width: 240px;4675  font-size: 0.75rem;4676  line-height: 1.55;4677  color: var(--peach-t2);4678}46794680.peach-health-loading-track {4681  width: 200px;4682  height: 3px;4683  margin-top: 6px;4684  border-radius: 999px;4685  background: rgba(240, 232, 216, 0.06);4686  overflow: hidden;4687}46884689.peach-health-loading-fill {4690  width: 40%;4691  height: 100%;4692  border-radius: inherit;4693  background: linear-gradient(4694    90deg,4695    transparent 0%,4696    var(--peach-accent) 50%,4697    transparent 100%4698  );4699  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4700}47014702@keyframes peach-health-loading-sweep {4703  0%   { transform: translateX(-100%); }4704  100% { transform: translateX(350%); }4705}47064707[data-motion="reduce"] .peach-health-loading-fill,4708[data-motion="reduce"] .peach-health-loading-glyph svg path {4709  animation: none;4710}47114712.peach-health-summary {4713  padding: 10px 16px 6px;4714  font-family: "IBM Plex Mono", monospace;4715  font-size: 0.6875rem;4716}4717.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4718.peach-health-summary-ok { color: var(--peach-t2); }47194720.peach-health-check-row {4721  padding: 0 16px 10px;4722}4723.peach-health-check-btn {4724  width: 100%;4725  display: flex;4726  align-items: center;4727  justify-content: center;4728}47294730.peach-health-sections {4731  flex: 1;4732  display: flex;4733  flex-direction: column;4734}47354736.peach-health-section {4737  border-bottom: 1px solid var(--peach-t3);4738}47394740.peach-health-section-header {4741  width: 100%;4742  display: flex;4743  align-items: center;4744  justify-content: space-between;4745  padding: 9px 16px;4746  background: transparent;4747  cursor: pointer;4748  color: var(--peach-t0);4749}47504751.peach-health-section-title-row {4752  display: flex;4753  align-items: center;4754  gap: 8px;4755}47564757.peach-health-count-badge {4758  display: inline-flex;4759  align-items: center;4760  justify-content: center;4761  min-width: 20px;4762  height: 18px;4763  padding: 0 5px;4764  border-radius: 999px;4765  background: rgba(220,80,60,0.15);4766  border: 1px solid rgba(220,80,60,0.25);4767  font-family: "IBM Plex Mono", monospace;4768  font-size: 0.5625rem;4769  color: rgba(220,80,60,0.9);4770}47714772.peach-health-section-title {4773  font-family: "IBM Plex Mono", monospace;4774  font-size: 0.6875rem;4775  text-transform: uppercase;4776  letter-spacing: 0.1em;4777  color: var(--peach-t1);4778}47794780.peach-health-chevron {4781  color: var(--peach-t2);4782  transition: transform 200ms ease;4783  flex-shrink: 0;4784}4785.peach-health-chevron.is-expanded {4786  transform: rotate(180deg);4787}47884789.peach-health-section-body {4790  padding: 0 16px 10px;4791  display: flex;4792  flex-direction: column;4793  gap: 4px;4794}47954796.peach-health-row {4797  display: flex;4798  align-items: flex-start;4799  justify-content: space-between;4800  gap: 8px;4801  padding: 6px 8px;4802  border-radius: 8px;4803  background: rgba(240,232,216,0.02);4804}48054806.peach-health-row-info {4807  flex: 1;4808  min-width: 0;4809  display: flex;4810  flex-direction: column;4811  gap: 2px;4812}48134814.peach-health-row-name {4815  font-family: var(--font-display);4816  font-size: 0.9375rem;4817  font-style: italic;4818  font-weight: 400;4819  color: var(--peach-t0);4820  white-space: nowrap;4821  overflow: hidden;4822  text-overflow: ellipsis;4823}48244825.peach-health-row-meta {4826  font-family: "IBM Plex Mono", monospace;4827  font-size: 0.5625rem;4828  color: var(--peach-t2);4829  letter-spacing: 0.05em;4830}48314832.peach-health-fix-btn {4833  font-size: 0.5625rem;4834  letter-spacing: 0.08em;4835  text-transform: uppercase;4836  padding: 4px 7px;4837  flex-shrink: 0;4838  display: flex;4839  align-items: center;4840}48414842.peach-health-empty {4843  font-family: "IBM Plex Mono", monospace;4844  font-size: 0.625rem;4845  color: var(--peach-t2);4846  padding: 6px 0;4847}48484849.peach-health-loading {4850  font-family: "IBM Plex Mono", monospace;4851  font-size: 0.625rem;4852  color: var(--peach-t2);4853  padding: 6px 0;4854  display: flex;4855  align-items: center;4856  gap: 6px;4857}48584859.peach-health-loading::before {4860  content: "";4861  width: 10px;4862  height: 10px;4863  border: 1.5px solid var(--peach-t3);4864  border-top-color: var(--peach-accent);4865  border-radius: 50%;4866  animation: peach-spin 600ms linear infinite;4867}48684869@keyframes peach-spin {4870  to { transform: rotate(360deg); }4871}48724873.peach-spinner {4874  width: 32px;4875  height: 32px;4876  border: 2px solid var(--peach-s2);4877  border-top-color: var(--peach-accent);4878  border-radius: 50%;4879  margin: 0 auto 16px;4880  animation: peach-spin 0.8s linear infinite;4881}48824883.peach-progress-screen {4884  text-align: center;4885  padding: 32px 16px;4886}48874888.peach-progress-screen-title {4889  font-size: 0.8125rem;4890  color: var(--peach-t0);4891  margin-bottom: 16px;4892}48934894.peach-progress-screen-stage {4895  font-size: 0.6875rem;4896  color: var(--peach-t2);4897  min-height: 14px;4898}48994900.peach-progress-screen-note {4901  font-size: 0.625rem;4902  color: var(--peach-t2);4903  margin-top: 8px;4904}49054906.peach-pairing-body {4907  flex: 1;4908  overflow-y: auto;4909  display: flex;4910  flex-direction: column;4911}49124913.peach-pairing-content {4914  flex: 1;4915  display: flex;4916  flex-direction: column;4917  align-items: center;4918  justify-content: center;4919  gap: 14px;4920  padding: 28px 20px;4921  text-align: center;4922}49234924.peach-pairing-code-screen {4925  gap: 18px;4926}49274928.peach-pairing-headline {4929  font-family: var(--font-display);4930  font-style: italic;4931  font-weight: 300;4932  font-size: 28px;4933  color: var(--peach-t0);4934  margin: 0;4935  line-height: 1;4936}49374938.peach-pairing-subline {4939  font-size: 0.75rem;4940  color: var(--peach-t2);4941  max-width: 220px;4942  line-height: 1.5;4943  margin: 0;4944}49454946.peach-pairing-subline--center {4947  text-align: center;4948}49494950/* 6-digit pairing code — both display (.peach-pairing-code) and entry4951   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking4952   so the two modes feel like the same surface. */4953.peach-pairing-code {4954  font-family: "IBM Plex Mono", monospace;4955  font-size: 36px;4956  letter-spacing: 0.25em;4957  color: var(--peach-t0);4958  text-align: center;4959  padding: 24px 0;4960  text-shadow:4961    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),4962    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);4963  background: transparent;4964  border: 0;4965  cursor: default;4966  user-select: text;4967}49684969.peach-pairing-code--loading,4970.peach-pairing-code--expired {4971  font-size: 18px;4972  letter-spacing: 0.04em;4973  color: var(--peach-t2);4974  cursor: pointer;4975  text-shadow: none;4976}49774978.peach-pairing-qr-container {4979  display: flex;4980  flex-direction: column;4981  align-items: center;4982  gap: 10px;4983}49844985.peach-pairing-qr {4986  width: 240px;4987  height: 240px;4988  display: block;4989}49904991.peach-pairing-instruction {4992  font-size: 0.75rem;4993  color: var(--peach-t2);4994  text-align: center;4995  line-height: 1.5;4996  margin: 0;4997  max-width: 220px;4998}49995000.peach-pairing-expiry {5001  font-family: "IBM Plex Mono", monospace;5002  font-size: 13px;5003  letter-spacing: 0.06em;5004  color: var(--peach-t2);5005  margin: 0;5006}50075008.peach-pairing-regen {5009  font-size: 0.75rem;5010  color: var(--peach-accent);5011  background: transparent;5012  border: 0;5013  cursor: pointer;5014  padding: 4px 0;5015  text-decoration: underline;5016  text-underline-offset: 2px;5017}50185019.peach-pairing-code-input {5020  font-family: "IBM Plex Mono", monospace;5021  font-size: 36px;5022  letter-spacing: 0.25em;5023  color: var(--peach-t0);5024  background: transparent;5025  border: 0;5026  border-bottom: 1px solid var(--peach-t3);5027  outline: none;5028  text-align: center;5029  padding: 18px 0;5030  width: 220px;5031  caret-color: var(--peach-accent);5032  transition: border-color 160ms ease;5033}50345035.peach-pairing-code-input::placeholder {5036  color: var(--peach-t3);5037}50385039.peach-pairing-code-input:focus {5040  border-bottom-color: var(--peach-accent);5041}50425043.peach-pairing-toggle {5044  background: transparent;5045  border: 0;5046  color: var(--peach-t2);5047  font-size: 0.75rem;5048  padding: 8px 4px;5049  cursor: pointer;5050  transition: color 120ms ease;5051}50525053.peach-pairing-toggle:hover:not(:disabled) {5054  color: var(--peach-t1);5055}50565057.peach-pairing-toggle:disabled {5058  opacity: 0.5;5059  cursor: default;5060}50615062.peach-pairing-hint {5063  font-size: 0.6875rem;5064  color: var(--peach-t2);5065  margin: 0;5066  text-align: center;5067}50685069.peach-pairing-status {5070  display: flex;5071  align-items: center;5072  gap: 8px;5073  margin: 0;5074  font-size: 0.75rem;5075  color: var(--peach-t1);5076}50775078.peach-pairing-error {5079  margin: 0;5080  font-size: 0.6875rem;5081  color: var(--peach-breach);5082}50835084.peach-pairing-error--muted {5085  color: var(--peach-t2);5086}50875088.peach-pairing-spinner {5089  width: 12px;5090  height: 12px;5091  border: 1.5px solid var(--peach-t3);5092  border-top-color: var(--peach-accent);5093  border-radius: 50%;5094  animation: peach-spin 0.8s linear infinite;5095}50965097.peach-pairing-success-icon,5098.peach-pairing-error-icon,5099.peach-pairing-hero {5100  display: inline-flex;5101  align-items: center;5102  justify-content: center;5103}51045105/* Tag chips */5106.peach-tag-chip {5107  display: inline-flex;5108  align-items: center;5109  gap: 4px;5110  padding: 3px 8px;5111  border-radius: 999px;5112  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5113  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5114  color: var(--peach-t0);5115  font-family: "IBM Plex Mono", monospace;5116  font-size: 0.625rem;5117  letter-spacing: 0.04em;5118}51195120.peach-tag-chip-remove {5121  background: transparent;5122  border: none;5123  color: inherit;5124  opacity: 0.6;5125  cursor: pointer;5126  padding: 0;5127  font-size: 0.75rem;5128  line-height: 1;5129}51305131.peach-tag-chip-remove:hover {5132  opacity: 1;5133}51345135/* Tag input */5136.peach-tag-input-wrap {5137  border-bottom: 1px solid var(--peach-t3);5138}51395140.peach-tag-suggestions {5141  display: flex;5142  flex-wrap: wrap;5143  gap: 4px;5144  padding: 6px 0;5145}51465147.peach-tag-suggestion {5148  padding: 2px 8px;5149  border-radius: 999px;5150  border: 1px solid var(--peach-t3);5151  background: var(--peach-s2);5152  color: var(--peach-t1);5153  font-family: "IBM Plex Mono", monospace;5154  font-size: 0.625rem;5155  cursor: pointer;5156  transition: border-color 80ms ease, background 80ms ease;5157}51585159.peach-tag-suggestion:hover {5160  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5161  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5162}51635164/* Identity suggestions — shown below username/email inputs in new-entry form */5165@keyframes peach-suggest-in {5166  from { opacity: 0; transform: translateY(-4px); }5167  to   { opacity: 1; transform: none; }5168}51695170.peach-identity-suggestions {5171  display: flex;5172  flex-direction: column;5173  gap: 1px;5174  margin-top: 4px;5175  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5176}51775178.peach-identity-filter-row {5179  display: flex;5180  align-items: center;5181  gap: 4px;5182  padding: 2px 0 5px;5183}51845185.peach-identity-collapse-btn {5186  margin-left: auto;5187  background: transparent;5188  border: none;5189  cursor: pointer;5190  color: var(--peach-t3);5191  padding: 2px 4px;5192  display: flex;5193  align-items: center;5194  line-height: 0;5195  border-radius: 3px;5196  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5197}51985199.peach-identity-collapse-btn:hover {5200  color: var(--peach-t1);5201}52025203.peach-identity-collapse-btn.is-collapsed {5204  transform: rotate(-90deg);5205}52065207.peach-identity-rows {5208  display: grid;5209  grid-template-rows: 1fr;5210  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5211}52125213.peach-identity-rows.is-collapsed {5214  grid-template-rows: 0fr;5215}52165217.peach-identity-rows-inner {5218  overflow-y: auto;5219  min-height: 0;5220  max-height: 148px;5221  scrollbar-width: thin;5222  scrollbar-color: var(--peach-t3) transparent;5223  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5224  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5225}52265227.peach-identity-rows-inner::-webkit-scrollbar {5228  width: 4px;5229}52305231.peach-identity-rows-inner::-webkit-scrollbar-track {5232  background: transparent;5233}52345235.peach-identity-rows-inner::-webkit-scrollbar-thumb {5236  background: var(--peach-t3);5237  border-radius: 2px;5238}52395240.peach-identity-filter-pill {5241  padding: 2px 7px;5242  border-radius: 999px;5243  border: 1px solid var(--peach-t3);5244  background: transparent;5245  color: var(--peach-t2);5246  font-family: "IBM Plex Mono", monospace;5247  font-size: 0.6rem;5248  cursor: pointer;5249  transition: border-color 80ms, background 80ms, color 80ms;5250}52515252.peach-identity-filter-pill.is-on {5253  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5254  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5255  color: var(--peach-accent);5256}52575258.peach-identity-suggestion {5259  display: flex;5260  align-items: center;5261  gap: 6px;5262  width: 100%;5263  padding: 4px 6px;5264  border-radius: 5px;5265  border: none;5266  background: transparent;5267  cursor: pointer;5268  text-align: left;5269  transition: background 80ms ease;5270}52715272.peach-identity-suggestion:hover,5273.peach-identity-suggestion:focus {5274  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5275  outline: none;5276}52775278.peach-identity-suggestion-value {5279  font-family: "IBM Plex Mono", monospace;5280  font-size: 0.7rem;5281  color: var(--peach-t1);5282  overflow: hidden;5283  text-overflow: ellipsis;5284  white-space: nowrap;5285  flex: 1;5286  min-width: 0;5287}52885289.peach-identity-suggestion-type {5290  font-family: "IBM Plex Mono", monospace;5291  font-size: 0.55rem;5292  font-weight: 600;5293  flex-shrink: 0;5294  padding: 1px 4px;5295  border-radius: 3px;5296}52975298.peach-identity-suggestion-type--email {5299  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5300  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5301}53025303.peach-identity-suggestion-type--username {5304  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5305  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5306}53075308.peach-identity-suggestion-meta {5309  font-family: "IBM Plex Mono", monospace;5310  font-size: 0.6rem;5311  color: var(--peach-t3);5312  flex-shrink: 0;5313}53145315/* Tag filter strip */5316.peach-tag-filter-strip {5317  border-bottom: 1px solid var(--peach-t3);5318  flex-shrink: 0;5319}53205321.peach-tag-filter-chip {5322  display: inline-flex;5323  align-items: center;5324  padding: 4px 10px;5325  border-radius: 999px;5326  border: 1px solid var(--peach-t3);5327  background: transparent;5328  color: var(--peach-t2);5329  font-family: "IBM Plex Mono", monospace;5330  font-size: 0.5625rem;5331  letter-spacing: 0.06em;5332  text-transform: uppercase;5333  cursor: pointer;5334  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5335  white-space: nowrap;5336}53375338.peach-tag-filter-chip:hover {5339  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5340  color: var(--peach-t1);5341}53425343.peach-tag-filter-chip.is-selected {5344  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5345  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5346  color: var(--peach-t0);5347}53485349/* ─────────────────────────────────────────────────────────────────────────5350   v1.4.12 additions5351   ─────────────────────────────────────────────────────────────────────── */53525353/* Sort bar */5354.peach-sort-bar {5355  display: flex;5356  align-items: center;5357  gap: 4px;5358  padding: 5px 12px;5359  border-bottom: 1px solid var(--peach-t3);5360  flex-shrink: 0;5361  overflow-x: auto;5362  scrollbar-width: none;5363}53645365.peach-sort-btn {5366  padding: 2px 9px;5367  border-radius: 999px;5368  border: 1px solid transparent;5369  background: transparent;5370  color: var(--peach-t2);5371  font-family: "IBM Plex Mono", monospace;5372  font-size: 0.5625rem;5373  letter-spacing: 0.07em;5374  text-transform: uppercase;5375  cursor: pointer;5376  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5377  white-space: nowrap;5378}53795380.peach-sort-btn:hover {5381  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5382  color: var(--peach-t1);5383}53845385.peach-sort-btn.is-active {5386  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5387  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5388  color: var(--peach-t0);5389}53905391.peach-sort-domain-hint {5392  margin-left: auto;5393  font-family: "IBM Plex Mono", monospace;5394  font-size: 0.5625rem;5395  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5396  white-space: nowrap;5397  overflow: hidden;5398  text-overflow: ellipsis;5399  max-width: 110px;5400}54015402/* Tab-match badge on entry rows */5403.peach-tab-match-badge {5404  display: inline-block;5405  width: 6px;5406  height: 6px;5407  border-radius: 50%;5408  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5409  margin-left: 5px;5410  vertical-align: middle;5411  flex-shrink: 0;5412  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5413}54145415.peach-entry-row.is-tab-match {5416  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5417  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5418}54195420.peach-entry-row.is-tab-match:hover {5421  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5422}54235424/* Entry list stagger entrance */5425@keyframes peach-entry-fadein {5426  from { opacity: 0; transform: translateY(4px); }5427  to   { opacity: 1; transform: translateY(0); }5428}54295430.peach-vault-list .peach-entry-row {5431  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5432  content-visibility: auto;5433  contain-intrinsic-size: auto 44px;5434}54355436/* Button press micro-interaction */5437.peach-btn:active {5438  transform: scale(0.95);5439  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5440}54415442.peach-sort-btn:active,5443.peach-tag-filter-chip:active {5444  transform: scale(0.93);5445  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5446}54475448/* Password strength bar (Lock view + shared) */5449.peach-password-strength {5450  display: flex;5451  align-items: center;5452  gap: 8px;5453  margin-top: 6px;5454}54555456.peach-strength-bar {5457  flex: 1;5458  height: 3px;5459  border-radius: 2px;5460  background: var(--peach-t3);5461  overflow: hidden;5462}54635464.peach-strength-fill {5465  height: 100%;5466  border-radius: 2px;5467  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5468              background 300ms ease;5469}54705471.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5472.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5473.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5474.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }54755476.peach-strength-label {5477  font-family: "IBM Plex Mono", monospace;5478  font-style: italic;5479  font-size: 0.5625rem;5480  font-weight: 300;5481  letter-spacing: 0.06em;5482  color: var(--peach-t2);5483  min-width: 36px;5484  text-align: right;5485}54865487.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5488.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5489.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5490.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }54915492/* Duress form */5493.peach-duress-status {5494  padding: 2px 8px;5495  border-radius: 999px;5496  border: 1px solid var(--peach-t3);5497  font-family: "IBM Plex Mono", monospace;5498  font-size: 0.5625rem;5499  letter-spacing: 0.07em;5500  text-transform: uppercase;5501  color: var(--peach-t2);5502  flex-shrink: 0;5503}55045505.peach-duress-status.is-active {5506  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5507  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5508  color: var(--peach-t0);5509}55105511.peach-duress-form {5512  padding: 8px 0 4px;5513  display: flex;5514  flex-direction: column;5515  gap: 6px;5516}55175518.peach-duress-form .peach-label {5519  margin-top: 4px;5520}55215522.peach-duress-actions {5523  display: flex;5524  gap: 6px;5525  align-items: center;5526  margin-top: 4px;5527}55285529.peach-duress-actions .peach-btn:first-child {5530  margin-right: auto;5531}55325533/* Improved overlay spring entrance */5534.peach-overlay-view.ov-enter-up {5535  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5536}55375538@keyframes ov-enter-up-spring {5539  from { opacity: 0; transform: translateY(16px) scale(0.98); }5540  to   { opacity: 1; transform: translateY(0) scale(1); }5541}55425543.peach-overlay-view.ov-enter-right {5544  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5545}55465547@keyframes ov-enter-right-spring {5548  from { opacity: 0; transform: translateX(18px) scale(0.98); }5549  to   { opacity: 1; transform: translateX(0) scale(1); }5550}55515552/* ── Onboarding-mode restore screens (file import) ── */5553/* Used when MainImportView renders during onboarding (no vault yet).5554   Animates like a lock-screen transition. */5555.peach-lock-view {5556  position: absolute;5557  inset: 0;5558  display: flex;5559  flex-direction: column;5560  background:5561    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5562    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5563    var(--peach-bg);5564  z-index: 2;5565  overflow: hidden;5566  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5567}55685569.peach-lock-view-header {5570  display: flex;5571  align-items: center;5572  justify-content: space-between;5573  padding: 16px 18px 12px;5574  flex-shrink: 0;5575}55765577/* ───────── Settings: auto-lock select ───────── */5578.peach-settings-select {5579  font-family: "IBM Plex Mono", monospace;5580  font-size: 0.6875rem;5581  background: transparent;5582  border: 1px solid var(--peach-t3);5583  border-radius: 4px;5584  color: var(--peach-t1);5585  padding: 3px 6px;5586  cursor: pointer;5587  outline: none;5588}5589.peach-settings-select:focus {5590  border-color: var(--peach-accent);5591}55925593/* ───────── Duress status pill (new polished) ───────── */5594.peach-duress-status-pill {5595  font-family: "IBM Plex Mono", monospace;5596  font-size: 0.5625rem;5597  text-transform: uppercase;5598  letter-spacing: 0.12em;5599  padding: 2px 8px;5600  border-radius: 12px;5601  background: var(--peach-t3);5602  color: var(--peach-t2);5603  flex-shrink: 0;5604}5605.peach-duress-status-pill.is-active {5606  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5607  color: var(--peach-accent);5608}56095610/* ───────── Entry advanced disclosure (canary) ───────── */5611.peach-entry-advanced {5612  margin-top: 12px;5613  border-top: 1px solid var(--peach-t3);5614  padding-top: 10px;5615  position: relative;5616  z-index: 1;5617}5618.peach-entry-advanced-toggle {5619  display: flex;5620  align-items: center;5621  justify-content: space-between;5622  width: 100%;5623  background: transparent;5624  border: none;5625  cursor: pointer;5626  padding: 0;5627  color: var(--peach-t2);5628}5629.peach-canary-section {5630  margin-top: 10px;5631  display: grid;5632  gap: 6px;5633}56345635/* ───────── Import: merge/replace radio choices ───────── */5636.peach-import-choice {5637  display: flex;5638  align-items: flex-start;5639  gap: 10px;5640  padding: 8px 10px;5641  border: 1px solid var(--peach-t3);5642  border-radius: 10px;5643  cursor: pointer;5644  margin-bottom: 6px;5645  transition: border-color 120ms ease, background 120ms ease;5646}5647.peach-import-choice:hover {5648  border-color: var(--peach-accent);5649}5650.peach-import-choice input[type="radio"] {5651  margin-top: 3px;5652  accent-color: var(--peach-accent);5653  flex-shrink: 0;5654}5655.peach-import-choice-main {5656  display: flex;5657  flex-direction: column;5658  gap: 2px;5659  min-width: 0;5660}5661.peach-import-choice-label {5662  font-size: 0.75rem;5663  color: var(--peach-t0);5664}5665.peach-import-choice-sub {5666  font-size: 0.6875rem;5667  color: var(--peach-t2);5668  line-height: 1.5;5669}56705671/* ───────── Export: success confirmation strip ───────── */5672.peach-export-success {5673  display: flex;5674  align-items: flex-start;5675  gap: 10px;5676  padding: 12px;5677  border-radius: 12px;5678  border: 1px solid rgba(150, 175, 110, 0.3);5679  background: rgba(150, 175, 110, 0.08);5680  color: var(--peach-t0);5681  font-size: 0.75rem;5682  line-height: 1.55;5683}5684.peach-export-success-check {5685  color: rgba(150, 175, 110, 0.9);5686  font-size: 0.875rem;5687  flex-shrink: 0;5688}56895690/* ── Trash view ──────────────────────────────────────────────────────── */5691.peach-trash-entry-row {5692  display: flex;5693  align-items: center;5694  justify-content: space-between;5695  gap: 8px;5696  padding: 8px 0;5697  border-bottom: 1px solid var(--peach-border);5698}5699.peach-trash-entry-info {5700  flex: 1;5701  min-width: 0;5702  display: flex;5703  flex-direction: column;5704  gap: 2px;5705}5706.peach-trash-entry-title {5707  font-size: 0.8125rem;5708  color: var(--peach-t0);5709  overflow: hidden;5710  text-overflow: ellipsis;5711  white-space: nowrap;5712}5713.peach-trash-entry-meta {5714  font-family: var(--font-mono);5715  font-size: 0.5625rem;5716  color: var(--peach-t2);5717  letter-spacing: 0.04em;5718}5719.peach-trash-entry-actions {5720  display: flex;5721  align-items: center;5722  gap: 4px;5723  flex-shrink: 0;5724}5725.peach-trash-delete-btn {5726  background: transparent;5727  border: 0;5728  color: var(--peach-t3);5729  font-size: 1rem;5730  line-height: 1;5731  cursor: pointer;5732  padding: 2px 5px;5733  transition: color 0.15s;5734}5735.peach-trash-delete-btn:hover { color: var(--peach-breach); }5736.peach-trash-list {5737  overflow-y: auto;5738}5739.peach-trash-footer {5740  display: flex;5741  align-items: center;5742  gap: 8px;5743  padding: 8px 0 0;5744  border-top: 1px solid var(--peach-border);5745  margin-top: 4px;5746}5747.peach-trash-purge-all {5748  background: transparent;5749  border: 0;5750  color: var(--peach-t3);5751  font-size: 0.625rem;5752  cursor: pointer;5753  padding: 4px 0;5754  letter-spacing: 0.03em;5755  transition: color 0.2s;5756}5757.peach-trash-purge-all:hover { color: var(--peach-breach); }5758.peach-trash-purge-confirm-label {5759  font-size: 0.625rem;5760  color: var(--peach-t1);5761  flex: 1;5762}57635764/* ── Settings shortcuts grid ─────────────────────────────────────────── */5765.peach-shortcuts-grid {5766  display: grid;5767  grid-template-columns: auto 1fr;5768  gap: 6px 12px;5769  align-items: center;5770  padding: 4px 0;5771}5772.peach-shortcut-key {5773  font-family: var(--font-mono);5774  font-size: 0.625rem;5775  color: var(--peach-t0);5776  background: var(--peach-t3);5777  border-radius: 4px;5778  padding: 2px 6px;5779  white-space: nowrap;5780  text-align: center;5781}5782.peach-shortcut-desc {5783  font-size: 0.6875rem;5784  color: var(--peach-t1);5785}57865787/* ── Sort bar trash button ───────────────────────────────────────────── */5788.peach-sort-trash-btn {5789  display: flex;5790  align-items: center;5791  justify-content: center;5792  padding: 3px 5px;5793  background: transparent;5794  border: none;5795  cursor: pointer;5796  color: var(--peach-t2);5797  border-radius: 4px;5798  transition: color 140ms ease, background 140ms ease;5799}5800.peach-sort-trash-btn:hover {5801  color: var(--peach-t1);5802  background: var(--peach-t3);5803}5804.peach-sort-trash-btn.is-active {5805  color: var(--peach-accent);5806}58075808/* Accent color picker */5809.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5810.peach-accent-picker {5811  display: flex;5812  flex-wrap: wrap;5813  gap: 7px;5814  padding: 2px 0;5815}5816.peach-accent-swatch {5817  width: 22px;5818  height: 22px;5819  border-radius: 50%;5820  border: 2px solid transparent;5821  cursor: pointer;5822  padding: 0;5823  transition: transform 100ms;5824  outline-offset: 2px;5825}5826.peach-accent-swatch:hover { transform: scale(1.15); }5827.peach-accent-swatch.is-active {5828  border-color: var(--peach-t0);5829  transform: scale(1.1);5830}58315832/* Display font picker — swatch shows an "Aa" preview rendered with each5833   font option so the user can see what they're picking before they pick. */5834.peach-settings-row--font { align-items: flex-start; padding-top: 10px; }5835.peach-font-picker {5836  display: flex;5837  flex-wrap: wrap;5838  gap: 6px;5839  padding: 2px 0;5840  flex: 1;5841  justify-content: flex-end;5842}5843.peach-font-swatch {5844  display: flex;5845  flex-direction: column;5846  align-items: center;5847  gap: 2px;5848  padding: 4px 8px;5849  background: transparent;5850  border: 1px solid var(--peach-t3);5851  border-radius: 6px;5852  cursor: pointer;5853  transition: border-color 100ms, background 100ms;5854  min-width: 56px;5855}5856.peach-font-swatch:hover {5857  border-color: var(--peach-accent-dim);5858  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5859}5860.peach-font-swatch.is-active {5861  border-color: var(--peach-accent);5862  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5863}5864.peach-font-swatch-glyph {5865  font-size: 18px;5866  line-height: 1;5867  color: var(--peach-t0);5868}5869.peach-font-swatch[data-font-preview="cormorant-italic"] .peach-font-swatch-glyph {5870  font-family: "Cormorant Garamond", serif;5871  font-style: italic;5872  font-weight: 400;5873}5874.peach-font-swatch[data-font-preview="cormorant"] .peach-font-swatch-glyph {5875  font-family: "Cormorant Garamond", serif;5876  font-style: normal;5877  font-weight: 400;5878}5879.peach-font-swatch[data-font-preview="inter"] .peach-font-swatch-glyph {5880  font-family: "Inter Variable", "Inter", sans-serif;5881  font-style: normal;5882  font-weight: 400;5883}5884.peach-font-swatch[data-font-preview="system"] .peach-font-swatch-glyph {5885  font-family: system-ui, -apple-system, sans-serif;5886  font-style: normal;5887  font-weight: 400;5888}5889.peach-font-swatch-name {5890  font-family: var(--font-mono);5891  font-size: 0.5rem;5892  letter-spacing: 0.06em;5893  color: var(--peach-t2);5894  text-transform: lowercase;5895}58965897.peach-pill-group {5898  display: flex;5899  gap: 6px;5900}5901.peach-pill-group .peach-btn.is-active {5902  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5903  border-color: var(--peach-accent);5904  color: var(--peach-t0);5905}59065907/* ── Card entry styles ───────────────────────────────────────── */5908.peach-card-number {5909  font-family: var(--peach-mono);5910  letter-spacing: 0.08em;5911}59125913.peach-card-network-badge {5914  font-size: 0.625rem;5915  padding: 1px 5px;5916  border-radius: 4px;5917  border: 0.5px solid var(--peach-border);5918  color: var(--peach-text-dim);5919  margin-left: 6px;5920  vertical-align: middle;5921}59225923.peach-card-expiry-row {5924  display: flex;5925  align-items: center;5926  gap: 8px;5927}59285929.peach-card-expiry-sep {5930  color: var(--peach-text-dim);5931}59325933/* ── Pro tier — upgrade screen ──────────────────────────────── */5934.peach-pro-mark {5935  font-size: 0.5625rem;5936  color: var(--peach-accent);5937  margin-left: 6px;5938  vertical-align: super;5939  opacity: 0.7;5940}59415942.peach-pro-mini-badge {5943  display: block;5944  font-size: 0.625rem;5945  font-style: italic;5946  color: var(--peach-accent);5947  letter-spacing: 0.04em;5948  margin-top: -2px;5949  padding-left: 2px;5950  opacity: 0.85;5951  text-align: center;5952}59535954.peach-wordmark-stack {5955  display: inline-flex;5956  flex-direction: column;5957  align-items: center;5958}59595960/* ── Pro tier — upgrade page ─────────────────────────────────── */5961.peach-pro-upgrade {5962  display: flex;5963  flex-direction: column;5964  align-items: stretch;5965  gap: 10px;5966  padding: 0 4px 8px;5967}59685969.peach-pro-upgrade-hero {5970  display: flex;5971  flex-direction: column;5972  align-items: center;5973  gap: 4px;5974  padding: 10px 0 6px;5975}59765977.peach-pro-upgrade-mark-wrap {5978  display: flex;5979  align-items: center;5980  justify-content: center;5981  margin-bottom: 2px;5982}59835984.peach-pro-upgrade-mark {5985  width: 38px;5986  height: 38px;5987  opacity: 0.9;5988}59895990.peach-pro-upgrade-title {5991  font-family: var(--font-display, var(--font-ui));5992  font-size: 22px;5993  margin: 0;5994  color: var(--peach-t0);5995  letter-spacing: 0.01em;5996}59975998.peach-pro-upgrade-tagline {5999  margin: 0;6000  font-style: italic;6001  color: var(--peach-t2);6002  font-size: 0.6875rem;6003}60046005.peach-pro-features {6006  display: flex;6007  flex-direction: column;6008  gap: 8px;6009  border-top: 1px solid var(--peach-border);6010  border-bottom: 1px solid var(--peach-border);6011  padding: 10px 4px;6012}60136014.peach-pro-feature {6015  display: flex;6016  gap: 9px;6017  align-items: baseline;6018}60196020.peach-pro-feature-mark {6021  color: var(--peach-accent);6022  font-size: 0.6875rem;6023  flex-shrink: 0;6024  display: inline-block;6025  transform-origin: center;6026  opacity: 0.8;6027}60286029.peach-pro-feature-text {6030  display: flex;6031  flex-direction: column;6032  gap: 1px;6033}60346035.peach-pro-feature-name {6036  font-size: 0.75rem;6037  color: var(--peach-t0);6038}60396040.peach-pro-feature-desc {6041  font-size: 0.625rem;6042  color: var(--peach-t2);6043}60446045.peach-pro-feature.is-highlighted .peach-pro-feature-mark {6046  animation: peach-pulse-accent 600ms ease-out forwards;6047}60486049@keyframes peach-pulse-accent {6050  0%   { opacity: 1; transform: scale(1.4); }6051  100% { opacity: 0.7; transform: scale(1); }6052}60536054.peach-pro-upgrade-actions {6055  display: flex;6056  flex-direction: column;6057  align-items: center;6058  gap: 8px;6059  padding-top: 2px;6060}60616062.peach-pro-pricing {6063  margin: 0;6064  text-align: center;6065  font-size: 0.6875rem;6066  color: var(--peach-t2);6067  letter-spacing: 0.04em;6068}60696070.peach-pro-upgrade-cta {6071  align-self: center;6072  text-align: center;6073  text-decoration: none;6074  display: block;6075  padding: 9px 32px;6076  font-size: 0.8125rem;6077  min-width: 180px;6078}60796080.peach-pro-key-divider {6081  display: flex;6082  align-items: center;6083  gap: 8px;6084  width: 100%;6085  color: var(--peach-t3);6086  font-size: 0.625rem;6087  letter-spacing: 0.08em;6088}60896090.peach-pro-key-divider::before,6091.peach-pro-key-divider::after {6092  content: "";6093  flex: 1;6094  height: 1px;6095  background: var(--peach-border);6096}60976098.peach-pro-key-link {6099  background: transparent;6100  border: 1px solid var(--peach-border);6101  border-radius: 8px;6102  color: var(--peach-t1);6103  font-size: 0.75rem;6104  cursor: pointer;6105  align-self: stretch;6106  padding: 8px 12px;6107  text-align: center;6108  transition: border-color 0.2s, color 0.2s;6109}61106111.peach-pro-key-link:hover {6112  border-color: var(--peach-accent);6113  color: var(--peach-accent);6114}61156116/* ── Pro tier — key ceremony ─────────────────────────────────── */6117.peach-pro-key-ceremony {6118  display: flex;6119  flex-direction: column;6120  align-items: center;6121  gap: 12px;6122  padding: 20px 4px 16px;6123}61246125.peach-pro-key-ceremony .peach-lock-rune-string {6126  font-size: 1rem;6127  gap: 12px;6128  flex: 0;6129  justify-content: center;6130}61316132.peach-pro-key-ceremony-label {6133  margin: 0;6134  font-size: 0.6875rem;6135  color: var(--peach-t2);6136  font-style: italic;6137  letter-spacing: 0.04em;6138}61396140.peach-pro-key-input {6141  font-family: var(--font-mono, monospace);6142  letter-spacing: 0.06em;6143  text-align: center;6144  width: 100%;6145  box-sizing: border-box;6146}61476148.peach-pro-key-error {6149  margin: 0;6150  font-size: 0.75rem;6151  text-align: center;6152  color: var(--peach-breach, #e55);6153  padding: 0;6154}61556156.peach-pro-key-activate {6157  width: 100%;6158  text-align: center;6159  box-sizing: border-box;6160  padding: 10px 20px;6161  font-size: 0.8125rem;6162}61636164.peach-pro-key-cancel {6165  background: transparent;6166  border: 0;6167  color: var(--peach-t2);6168  font-size: 0.6875rem;6169  cursor: pointer;6170  padding: 2px 8px;6171  transition: color 0.2s;6172}61736174.peach-pro-key-cancel:hover { color: var(--peach-accent); }61756176/* ── Pro tier — active state ─────────────────────────────────── */6177.peach-pro-active {6178  display: flex;6179  flex-direction: column;6180  align-items: center;6181  gap: 0;6182  padding: 8px 4px 16px;6183  min-height: 280px;6184}61856186.peach-pro-active-hero {6187  display: flex;6188  flex-direction: column;6189  align-items: center;6190  gap: 6px;6191  padding: 20px 0 22px;6192}61936194.peach-pro-active-mark-wrap {6195  display: flex;6196  align-items: center;6197  justify-content: center;6198  margin-bottom: 4px;6199}62006201.peach-pro-active-mark {6202  width: 60px;6203  height: 60px;6204  filter:6205    drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 55%, transparent))6206    drop-shadow(0 0 26px color-mix(in srgb, var(--peach-accent) 22%, transparent));6207}62086209.peach-pro-active-title {6210  font-family: var(--font-display, var(--font-ui));6211  font-size: 26px;6212  margin: 0;6213  color: var(--peach-t0);6214  letter-spacing: 0.01em;6215}62166217.peach-pro-active-since {6218  margin: 0;6219  font-size: 0.6875rem;6220  color: var(--peach-t2);6221  font-style: italic;6222}62236224.peach-pro-active-features {6225  display: flex;6226  flex-direction: column;6227  gap: 8px;6228  width: 100%;6229  padding: 14px 8px 0;6230  border-top: 1px solid var(--peach-border);6231  flex: 1;6232}62336234.peach-pro-active-feature {6235  display: flex;6236  align-items: center;6237  gap: 9px;6238}62396240.peach-pro-active-feature-mark {6241  color: var(--peach-accent);6242  font-size: 0.625rem;6243  opacity: 0.65;6244  flex-shrink: 0;6245}62466247.peach-pro-active-feature-name {6248  font-size: 0.75rem;6249  color: var(--peach-t1);6250}62516252.peach-pro-deactivate {6253  align-self: center;6254  background: transparent;6255  border: 0;6256  color: var(--peach-t3);6257  font-size: 0.625rem;6258  cursor: pointer;6259  padding: 8px 0 0;6260  margin-top: 16px;6261  letter-spacing: 0.03em;6262  transition: color 0.2s;6263}62646265.peach-pro-deactivate:hover { color: var(--peach-t2); }62666267.peach-pro-deactivate:disabled {6268  opacity: 0.5;6269  cursor: default;6270}62716272/* ── Pro advanced health remediation queue ──────────────────── */6273.peach-health-pro-queue {6274  display: flex;6275  flex-direction: column;6276  gap: 10px;6277  padding: 12px;6278  margin: 0 0 12px;6279  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6280  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6281  border-radius: 10px;6282}62836284.peach-health-pro-queue-head {6285  display: flex;6286  justify-content: space-between;6287  align-items: baseline;6288}62896290.peach-health-pro-queue-title {6291  font-size: 0.75rem;6292  font-weight: 500;6293  letter-spacing: 0.04em;6294  text-transform: uppercase;6295  color: var(--peach-accent);6296}62976298.peach-health-pro-queue-score {6299  font-size: 0.6875rem;6300  color: var(--peach-t2);6301}63026303.peach-health-pro-row {6304  display: flex;6305  gap: 10px;6306  align-items: center;6307  padding: 8px 0;6308  border-top: 1px solid var(--peach-border);6309}63106311.peach-health-pro-row-info {6312  flex: 1;6313  display: flex;6314  flex-direction: column;6315  gap: 4px;6316  min-width: 0;6317}63186319.peach-health-pro-row-name {6320  font-size: 0.8125rem;6321  color: var(--peach-t0);6322  overflow: hidden;6323  text-overflow: ellipsis;6324  white-space: nowrap;6325}63266327.peach-health-pro-row-meta {6328  font-size: 0.6875rem;6329  color: var(--peach-t2);6330}63316332.peach-health-pro-bar {6333  height: 2px;6334  background: var(--peach-border);6335  border-radius: 2px;6336  overflow: hidden;6337  margin-top: 2px;6338}63396340.peach-health-pro-bar-fill {6341  height: 100%;6342  background: var(--peach-accent);6343  transition: width 200ms ease-out;6344}63456346/* ── Pro activation celebration ── */6347@keyframes peach-pro-bloom {6348  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6349  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6350                 drop-shadow(0 0 48px var(--peach-glow)); }6351  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6352}63536354@keyframes peach-pro-wordmark-in {6355  from { opacity: 0; transform: translateY(4px); }6356  to   { opacity: 1; transform: translateY(0); }6357}63586359@keyframes peach-pro-fade-out {6360  from { opacity: 1; }6361  to   { opacity: 0; }6362}63636364.peach-pro-celebration {6365  background:6366    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6367    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6368    var(--peach-bg);6369  border: 1px solid var(--peach-t3);6370  box-shadow:6371    0 2px 8px rgba(0,0,0,0.55),6372    0 14px 48px rgba(0,0,0,0.7),6373    0 0 0 1px rgba(240,232,216,0.04);6374  overflow: hidden;6375  width: 320px;6376  height: 520px;6377  display: flex;6378  flex-direction: column;6379  align-items: center;6380  justify-content: center;6381  gap: 8px;6382  padding: 32px 24px;6383  text-align: center;6384}63856386.peach-pro-celebration.is-leaving {6387  animation: peach-pro-fade-out 400ms ease forwards;6388}63896390.peach-pro-bloom-target {6391  display: flex;6392  align-items: center;6393  justify-content: center;6394  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6395  margin-bottom: 12px;6396}63976398.peach-pro-bloom-icon {6399  width: 48px;6400  height: 48px;6401}64026403.peach-pro-wordmark {6404  font-family: var(--font-display);6405  font-size: 22px;6406  font-style: italic;6407  font-weight: 400;6408  color: var(--peach-accent);6409  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6410}64116412.peach-pro-thankyou {6413  font-size: 0.75rem;6414  font-style: italic;6415  color: var(--peach-t2);6416  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6417}641864196420/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6421.peach-pro-notice-banner {6422  display: flex;6423  align-items: center;6424  gap: 8px;6425  padding: 7px 12px;6426  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6427  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6428  font-size: 0.6875rem;6429  color: var(--peach-t2);6430  font-family: "IBM Plex Mono", monospace;6431  flex-shrink: 0;6432}64336434.peach-pro-notice-link {6435  background: none;6436  border: none;6437  padding: 0;6438  cursor: pointer;6439  font-size: 0.6875rem;6440  color: var(--peach-accent);6441  font-family: "IBM Plex Mono", monospace;6442  margin-left: auto;6443  white-space: nowrap;6444}64456446.peach-pro-notice-close {6447  background: none;6448  border: none;6449  padding: 0 0 0 4px;6450  cursor: pointer;6451  font-size: 0.625rem;6452  color: var(--peach-t3);6453  line-height: 1;6454}64556456/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6457   Renders over whatever view is showing. 60-second expiry; the popup ticks6458   the countdown each second and clears the banner when it hits zero. */6459.peach-pair-request-banner {6460  display: flex;6461  flex-direction: column;6462  gap: 8px;6463  padding: 10px 12px;6464  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6465  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6466  font-family: "IBM Plex Mono", monospace;6467  flex-shrink: 0;6468}64696470.peach-pair-toast {6471  padding: 8px 12px;6472  font-family: "IBM Plex Mono", monospace;6473  font-size: 0.75rem;6474  color: var(--peach-t1);6475  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6476  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6477  flex-shrink: 0;6478  text-align: center;6479}64806481.peach-pair-toast strong {6482  color: var(--peach-t0);6483  font-weight: 500;6484}64856486.peach-pair-request-header {6487  display: flex;6488  align-items: center;6489  gap: 8px;6490  font-size: 0.75rem;6491  color: var(--peach-t1);6492}64936494.peach-pair-request-mark {6495  font-size: 0.875rem;6496  display: inline-flex;6497  align-items: center;6498}64996500.peach-pair-request-icon {6501  width: 1em;6502  height: 1em;6503}65046505.peach-pair-request-title {6506  font-weight: 600;6507  color: var(--peach-t0);6508}65096510.peach-pair-request-countdown {6511  margin-left: auto;6512  font-variant-numeric: tabular-nums;6513  color: var(--peach-t2);6514  font-size: 0.6875rem;6515}65166517.peach-pair-request-body {6518  margin: 0;6519  font-size: 0.75rem;6520  color: var(--peach-t1);6521  line-height: 1.4;6522}65236524.peach-pair-request-body strong {6525  color: var(--peach-t0);6526  font-weight: 600;6527}65286529.peach-pair-request-actions {6530  display: flex;6531  gap: 8px;6532  justify-content: flex-end;6533}65346535/* ─── First-run onboarding ──────────────────────────────────────────────6536   Three-card welcome shown once before vault creation. The PeachScript6537   rune background drifts behind everything at very low opacity — it's6538   atmosphere, not focus. The cards themselves use the same panel6539   language as the rest of the popup so the transition into NewVault is6540   continuous, not a jarring switch of visual register. */65416542.peach-onboarding {6543  position: relative;6544  display: flex;6545  flex-direction: column;6546  width: 100%;6547  height: 100%;6548  padding: 16px 16px 18px;6549  box-sizing: border-box;6550  overflow: hidden;6551  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6552}65536554.peach-onboarding.is-completing {6555  animation: peach-onboard-exit 200ms ease-out forwards;6556}65576558.peach-rune-background {6559  position: absolute;6560  inset: 0;6561  width: 100%;6562  height: 100%;6563  pointer-events: none;6564  z-index: 0;6565  transition: opacity 500ms ease-out;6566}65676568.peach-onboarding.is-completing .peach-rune-background {6569  opacity: 0;6570}65716572.peach-onboarding-header {6573  position: relative;6574  z-index: 1;6575  display: flex;6576  align-items: center;6577  margin-bottom: 14px;6578}65796580.peach-onboarding-card {6581  position: relative;6582  z-index: 1;6583  flex: 1;6584  display: flex;6585  flex-direction: column;6586  gap: 10px;6587  padding: 22px 20px;6588  border-radius: 16px;6589  border: 1px solid var(--peach-t3);6590  background:6591    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6592  backdrop-filter: blur(3px);6593  -webkit-backdrop-filter: blur(3px);6594  box-shadow:6595    inset 0 1px 0 rgba(240, 232, 216, 0.04),6596    0 12px 28px rgba(0, 0, 0, 0.12);6597  cursor: pointer;6598  user-select: none;6599  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6600}66016602.peach-onboarding-card.is-exiting {6603  animation: peach-card-out 120ms ease-in forwards;6604  pointer-events: none;6605}66066607.peach-onboarding-card-headline {6608  margin: 0;6609  font-family: var(--font-display);6610  font-style: italic;6611  font-weight: 400;6612  font-size: 22px;6613  line-height: 1.05;6614  color: var(--peach-t0);6615  white-space: pre-line;6616}66176618.peach-onboarding-divider {6619  margin: 4px 0 6px;6620  border: 0;6621  border-top: 1px solid var(--peach-t3);6622  width: 100%;6623}66246625.peach-onboarding-body {6626  margin: 0;6627  font-size: 0.8125rem;6628  line-height: 1.6;6629  color: var(--peach-t1);6630}66316632.peach-onboarding-warning {6633  display: flex;6634  align-items: flex-start;6635  gap: 8px;6636  margin: 6px 0 0;6637  padding-top: 8px;6638  border-top: 1px dashed var(--peach-t3);6639  font-size: 0.8125rem;6640  line-height: 1.5;6641  color: var(--peach-t1);6642}66436644.peach-onboarding-warning-icon {6645  color: var(--peach-accent);6646  font-size: 0.8125rem;6647  line-height: 1.5;6648  flex: 0 0 auto;6649}66506651.peach-onboarding-nav {6652  position: relative;6653  z-index: 1;6654  display: flex;6655  align-items: center;6656  justify-content: space-between;6657  margin-top: 12px;6658  padding: 0 4px;6659}66606661.peach-onboarding-dots {6662  display: flex;6663  align-items: center;6664  gap: 6px;6665}66666667.peach-onboarding-dot {6668  width: 6px;6669  height: 6px;6670  border-radius: 50%;6671  background: var(--peach-t2);6672  transition: width 200ms ease, height 200ms ease, background 200ms ease;6673}66746675.peach-onboarding-dot.is-active {6676  width: 8px;6677  height: 8px;6678  background: var(--peach-accent);6679}66806681.peach-onboarding-next {6682  background: none;6683  border: none;6684  padding: 4px 0;6685  cursor: pointer;6686  font-family: "IBM Plex Mono", monospace;6687  font-size: 0.6875rem;6688  letter-spacing: 0.04em;6689  color: var(--peach-t1);6690  transition: color 150ms ease;6691}66926693.peach-onboarding-next:hover {6694  color: var(--peach-t0);6695}66966697.peach-onboarding-next:disabled {6698  opacity: 0.5;6699  cursor: default;6700}67016702.peach-onboarding-back {6703  background: none;6704  border: none;6705  padding: 4px 0;6706  cursor: pointer;6707  font-family: "IBM Plex Mono", monospace;6708  font-size: 0.6875rem;6709  letter-spacing: 0.04em;6710  color: var(--peach-t2);6711  transition: color 150ms ease;6712}67136714.peach-onboarding-back:hover {6715  color: var(--peach-t0);6716}67176718.peach-onboarding-back:disabled {6719  opacity: 0.5;6720  cursor: default;6721}67226723/* Reserve back-button width on the first card so the dots stay centred */6724.peach-onboarding-back-spacer {6725  width: 44px;6726}67276728.peach-onboarding-mobile-card-buttons {6729  display: flex;6730  flex-direction: column;6731  gap: 8px;6732  margin-top: 16px;6733}67346735@keyframes peach-onboard-enter {6736  from { opacity: 0; transform: translateY(20px); }6737  to   { opacity: 1; transform: translateY(0); }6738}67396740@keyframes peach-onboard-exit {6741  from { opacity: 1; }6742  to   { opacity: 0; }6743}67446745@keyframes peach-card-in {6746  from { opacity: 0; transform: translateX(12px); }6747  to   { opacity: 1; transform: translateX(0); }6748}67496750@keyframes peach-card-out {6751  from { opacity: 1; transform: translateX(0); }6752  to   { opacity: 0; transform: translateX(-12px); }6753}67546755/* ─── New vault screen — matched to onboarding card language ─────────── */67566757.peach-newvault {6758  position: relative;6759  display: flex;6760  flex-direction: column;6761  gap: 12px;6762  padding: 16px 16px 18px;6763  overflow: hidden;6764}67656766/* Suppress the warm-blob ambient art inherited from .lock-screen — the6767   new vault card now carries the visual weight. */6768.peach-newvault::before {6769  content: none;6770}67716772.peach-newvault-header {6773  position: relative;6774  z-index: 2;6775  display: flex;6776  align-items: center;6777  gap: 10px;6778  margin-bottom: 2px;6779}67806781.peach-newvault-back {6782  display: inline-flex;6783  align-items: center;6784  gap: 4px;6785  background: transparent;6786  border: none;6787  color: var(--peach-t2);6788  font-family: "IBM Plex Mono", monospace;6789  font-size: 0.625rem;6790  letter-spacing: 0.06em;6791  cursor: pointer;6792  padding: 4px 6px;6793  border-radius: 6px;6794  transition: color 120ms ease, background 120ms ease;6795}67966797.peach-newvault-back:hover {6798  color: var(--peach-t0);6799  background: rgba(240, 232, 216, 0.04);6800}68016802.peach-newvault-mark {6803  position: absolute;6804  right: -12px;6805  top: 6px;6806  width: 110px;6807  height: 110px;6808  pointer-events: none;6809  opacity: 0.10;6810  filter: saturate(0.9);6811  z-index: 0;6812}6813.peach-newvault-mark-art {6814  width: 100%;6815  height: 100%;6816}6817.peach-newvault-mark-art path:nth-child(2),6818.peach-newvault-mark-art path:nth-child(3) {6819  stroke: rgba(123, 144, 96, 0.88);6820  fill: rgba(123, 144, 96, 0.88);6821}68226823.peach-newvault-card {6824  position: relative;6825  z-index: 1;6826  display: flex;6827  flex-direction: column;6828  gap: 12px;6829  padding: 22px 20px 18px;6830  border-radius: 16px;6831  border: 1px solid var(--peach-t3);6832  background:6833    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6834  backdrop-filter: blur(3px);6835  -webkit-backdrop-filter: blur(3px);6836  box-shadow:6837    inset 0 1px 0 rgba(240, 232, 216, 0.04),6838    0 12px 28px rgba(0, 0, 0, 0.12);6839  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6840}68416842.peach-newvault-headline {6843  margin: 0;6844  font-family: var(--font-display);6845  font-style: italic;6846  font-weight: 400;6847  font-size: 24px;6848  line-height: 1.05;6849  color: var(--peach-t0);6850  white-space: pre-line;6851}68526853.peach-newvault-divider {6854  margin: 2px 0 4px;6855  border: 0;6856  border-top: 1px solid var(--peach-t3);6857  width: 100%;6858}68596860.peach-newvault-field {6861  display: flex;6862  flex-direction: column;6863  gap: 4px;6864}68656866.peach-newvault-label-row {6867  display: flex;6868  align-items: center;6869  justify-content: space-between;6870}68716872/* Monospace input scaled to the card. Replaces the 22px unlock-input6873   so the placeholder no longer overflows and the field reads as part6874   of the same surface as the body copy. */6875.peach-newvault-input {6876  font-size: 0.875rem;6877  letter-spacing: 0.18em;6878  padding: 8px 0;6879}6880.peach-newvault-input::placeholder {6881  letter-spacing: 0.18em;6882  color: var(--peach-t2);6883}68846885.peach-newvault-hint {6886  margin: 2px 0 0;6887  font-family: "IBM Plex Mono", monospace;6888  font-size: 0.625rem;6889  color: var(--peach-t2);6890  letter-spacing: 0.04em;6891}68926893.peach-newvault-submit {6894  margin-top: 4px;6895}68966897.peach-newvault-warning {6898  display: flex;6899  align-items: flex-start;6900  gap: 8px;6901  margin: 4px 0 0;6902  padding-top: 10px;6903  border-top: 1px dashed var(--peach-t3);6904  font-size: 0.75rem;6905  line-height: 1.5;6906  color: var(--peach-t1);6907}69086909.peach-newvault-warning-icon {6910  color: var(--peach-accent);6911  font-size: 0.8125rem;6912  line-height: 1.4;6913  flex: 0 0 auto;6914}69156916.peach-newvault-footer {6917  position: relative;6918  z-index: 1;6919  display: flex;6920  flex-direction: column;6921  gap: 4px;6922  padding: 4px 4px 0;6923}69246925/* Settings body — warm accent gradient gives the glass something to blur against */6926.peach-settings-body {6927  background:6928    radial-gradient(6929      ellipse at 30% 20%,6930      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6931      transparent 60%6932    );6933}69346935/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6936/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6937 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6938 * (replacing the vault from a backup file) and "hazard" for actions that6939 * are absolutely irreversible (Panic). Both use the same card scaffold so6940 * they read as a pair, but the colour family signals the severity at a6941 * glance — yellow for caution, red for don't.6942 */6943.peach-danger-card {6944  --danger-tint: 235, 158, 52; /* amber */6945  display: flex;6946  flex-direction: column;6947  gap: 8px;6948  padding: 14px;6949  margin-top: 10px;6950  border-radius: 12px;6951  border: 1px solid rgba(var(--danger-tint), 0.32);6952  background:6953    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6954    rgba(var(--danger-tint), 0.04);6955  box-shadow:6956    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6957    0 0 24px rgba(var(--danger-tint), 0.04);6958  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6959}69606961.peach-danger-card:hover {6962  border-color: rgba(var(--danger-tint), 0.55);6963  box-shadow:6964    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6965    0 0 36px rgba(var(--danger-tint), 0.10);6966}69676968.peach-danger-card--hazard {6969  --danger-tint: 220, 38, 38; /* red */6970}69716972.peach-danger-card-head {6973  display: flex;6974  align-items: center;6975  gap: 10px;6976}69776978.peach-danger-card-glyph {6979  width: 28px;6980  height: 28px;6981  flex-shrink: 0;6982  display: flex;6983  align-items: center;6984  justify-content: center;6985  border-radius: 8px;6986  background: rgba(var(--danger-tint), 0.12);6987  color: rgba(var(--danger-tint), 0.95);6988  font-size: 1rem;6989  line-height: 1;6990}69916992.peach-danger-card-title {6993  margin: 0;6994  font-size: 0.8125rem;6995  font-weight: 600;6996  color: rgba(var(--danger-tint), 0.92);6997  letter-spacing: 0.01em;6998}69997000.peach-danger-card-copy {7001  margin: 0;7002  font-size: 0.6875rem;7003  line-height: 1.5;7004  color: var(--peach-t2);7005}70067007.peach-danger-card-button {7008  width: 100%;7009  padding: 9px;7010  margin-top: 4px;7011  background: transparent;7012  border: 1px solid rgba(var(--danger-tint), 0.45);7013  border-radius: 8px;7014  color: rgba(var(--danger-tint), 0.9);7015  font-size: 0.75rem;7016  font-weight: 500;7017  letter-spacing: 0.02em;7018  cursor: pointer;7019  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7020}70217022.peach-danger-card-button:hover {7023  background: rgba(var(--danger-tint), 0.10);7024  border-color: rgba(var(--danger-tint), 0.75);7025  color: rgb(var(--danger-tint));7026}70277028/* ── Panic flow (three-step destruction) ───────────────────────────────── */7029.peach-panic {7030  display: flex;7031  flex-direction: column;7032  flex: 1;7033  min-height: 0;7034  padding: 28px 20px 20px;7035  gap: 18px;7036  overflow-y: auto;7037  scrollbar-width: none;7038  -ms-overflow-style: none;7039}70407041.peach-panic::-webkit-scrollbar { display: none; }70427043.peach-panic-step2 {7044  background: rgba(220, 38, 38, 0.04);7045}70467047.peach-panic-step3 {7048  position: relative;7049  background: #0f0505;7050  color: #ffffff;7051  overflow: hidden;7052}70537054.peach-panic-rune-bg {7055  position: absolute;7056  inset: 0;7057  opacity: 0.22;7058  pointer-events: none;7059  overflow: hidden;7060}70617062.peach-panic-rune-bg canvas {7063  width: 100% !important;7064  height: 100% !important;7065}70667067.peach-panic-icon {7068  font-size: 32px;7069  color: rgb(220, 38, 38);7070  line-height: 1;7071}70727073.peach-panic-title {7074  margin: 0;7075  font-size: 18px;7076  font-weight: 500;7077  color: var(--peach-t1);7078}70797080.peach-panic-title--severe {7081  font-size: 20px;7082  font-weight: 700;7083  color: rgb(220, 38, 38);7084}70857086.peach-panic-body {7087  margin: 0;7088  font-size: 0.8125rem;7089  line-height: 1.55;7090  color: var(--peach-t2);7091}70927093.peach-panic-body--severe {7094  color: rgba(220, 38, 38, 0.85);7095}70967097.peach-panic-body--final {7098  font-size: 1rem;7099  font-weight: 700;7100  color: rgb(255, 80, 80);7101  line-height: 1.4;7102}71037104.peach-panic-body--final-intro {7105  font-size: 1rem;7106  color: #ffffff;7107  font-weight: 400;7108}71097110.peach-panic-divider {7111  height: 1px;7112  background: rgba(255, 255, 255, 0.08);7113  margin: 4px 0;7114}71157116.peach-panic-confirm-input {7117  width: 100%;7118  padding: 10px 12px;7119  background: rgba(255, 255, 255, 0.02);7120  border: 1px solid rgba(220, 38, 38, 0.4);7121  border-radius: 8px;7122  color: var(--peach-t1);7123  font-family: "IBM Plex Mono", monospace;7124  font-size: 0.875rem;7125  letter-spacing: 0.12em;7126  text-transform: uppercase;7127}71287129.peach-panic-confirm-input:focus {7130  outline: none;7131  border-color: rgb(220, 38, 38);7132}71337134.peach-panic-confirm-input--match {7135  border-color: rgb(220, 38, 38);7136  color: rgb(220, 38, 38);7137}71387139.peach-panic-confirm-label {7140  font-size: 0.6875rem;7141  color: var(--peach-t2);7142  margin: 0 0 -8px;7143  letter-spacing: 0.06em;7144}71457146.peach-panic-actions {7147  display: flex;7148  flex-direction: column;7149  gap: 10px;7150  margin-top: auto;7151}71527153.peach-panic-button {7154  width: 100%;7155  padding: 12px;7156  border-radius: 8px;7157  font-size: 0.8125rem;7158  cursor: pointer;7159  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7160}71617162.peach-panic-button--primary {7163  background: var(--peach-accent);7164  border: 1px solid var(--peach-accent);7165  color: #ffffff;7166  font-weight: 600;7167}71687169.peach-panic-button--primary:hover {7170  background: color-mix(in srgb, var(--peach-accent) 88%, white);7171}71727173.peach-panic-button--danger {7174  background: rgb(220, 38, 38);7175  border: 1px solid rgb(220, 38, 38);7176  color: #ffffff;7177  font-weight: 600;7178}71797180.peach-panic-button--danger:disabled {7181  opacity: 0.35;7182  cursor: not-allowed;7183}71847185.peach-panic-button--ghost {7186  background: transparent;7187  border: 1px solid rgba(255, 255, 255, 0.18);7188  color: var(--peach-t2);7189}71907191.peach-panic-button--ghost:hover {7192  border-color: rgba(255, 255, 255, 0.32);7193  color: var(--peach-t1);7194}71957196.peach-panic-link {7197  background: transparent;7198  border: none;7199  padding: 4px 0;7200  color: rgba(220, 38, 38, 0.65);7201  font-size: 0.75rem;7202  cursor: pointer;7203  text-align: left;7204  text-decoration: underline;7205  text-underline-offset: 3px;7206}72077208.peach-panic-link:hover {7209  color: rgb(220, 38, 38);7210}72117212.peach-panic-bar {7213  background: rgb(220, 38, 38);7214  padding: 16px 20px;7215  margin: -28px -20px 0;7216  text-align: center;7217  font-size: 0.8125rem;7218  font-weight: 700;7219  letter-spacing: 0.12em;7220  color: #ffffff;7221}72227223.peach-panic-final-button {7224  width: 100%;7225  padding: 14px;7226  background: rgb(220, 38, 38);7227  border: none;7228  border-radius: 8px;7229  color: #ffffff;7230  font-size: 0.875rem;7231  font-weight: 700;7232  letter-spacing: 0.08em;7233  text-transform: uppercase;7234  cursor: pointer;7235  animation: peach-panic-pulse 2s ease-in-out infinite;7236}72377238.peach-settings-license {7239  margin-top: 10px;7240  padding-top: 10px;7241  border-top: 1px solid var(--peach-t3);7242}72437244.peach-settings-label {7245  font-size: 0.625rem;7246  letter-spacing: 0.08em;7247  color: var(--peach-t3);7248  display: block;7249  margin-bottom: 6px;7250}72517252.peach-settings-license-row {7253  display: flex;7254  align-items: center;7255  justify-content: space-between;7256  gap: 8px;7257}72587259.peach-settings-license-key {7260  font-family: 'IBM Plex Mono', monospace;7261  font-size: 0.75rem;7262  color: var(--peach-t0);7263  letter-spacing: 0.04em;7264  word-break: break-all;7265}72667267.peach-settings-license-copy {7268  font-size: 0.6875rem;7269  color: var(--peach-accent);7270  background: transparent;7271  border: none;7272  cursor: pointer;7273  padding: 4px 8px;7274  border-radius: 4px;7275  flex-shrink: 0;7276  transition: opacity 150ms ease;7277}72787279.peach-settings-license-copy:hover {7280  opacity: 0.75;7281}72827283@keyframes peach-panic-pulse {7284  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7285  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7286}72877288[data-motion="reduce"] .peach-panic-final-button {7289  animation: none;7290}72917292/* Vault History — Settings → Vault sub-view */72937294.peach-history-list {7295  border: 1px solid var(--peach-border);7296  border-radius: 8px;7297  overflow: hidden;7298  margin: 8px 0 4px;7299}73007301.peach-history-row {7302  display: flex;7303  align-items: center;7304  justify-content: space-between;7305  padding: 9px 12px;7306  gap: 10px;7307  border-bottom: 1px solid var(--peach-border);7308}73097310.peach-history-row:last-child {7311  border-bottom: none;7312}73137314.peach-history-meta {7315  display: flex;7316  flex-direction: column;7317  gap: 2px;7318  min-width: 0;7319  flex: 1;7320}73217322.peach-history-time {7323  font-size: 0.75rem;7324  font-family: 'IBM Plex Mono', ui-monospace, monospace;7325  color: var(--peach-t0);7326  white-space: nowrap;7327  overflow: hidden;7328  text-overflow: ellipsis;7329}73307331.peach-history-sub {7332  font-size: 0.625rem;7333  color: var(--peach-t2);7334  letter-spacing: 0.06em;7335  text-transform: uppercase;7336  white-space: nowrap;7337  overflow: hidden;7338  text-overflow: ellipsis;7339}73407341.peach-history-btn {7342  flex-shrink: 0;7343  white-space: nowrap;7344  min-width: 56px;7345  text-align: center;7346}73477348.peach-history-btn.is-busy {7349  opacity: 0.65;7350}73517352.peach-history-footer {7353  font-size: 0.625rem;7354  color: var(--peach-t3);7355  letter-spacing: 0.05em;7356  text-align: right;7357  margin: 0;7358  padding: 2px 0 0;7359}73607361/* ── Context menu + swipe-copy flash ─────────────────────── */7362.peach-context-menu-backdrop {7363  position: fixed;7364  inset: 0;7365  background: rgba(0, 0, 0, 0.45);7366  z-index: 100;7367  display: flex;7368  align-items: flex-end;7369  justify-content: center;7370  animation: peach-ctx-fade 140ms ease both;7371}7372.peach-context-menu {7373  width: min(360px, calc(100vw - 24px));7374  margin-bottom: max(env(safe-area-inset-bottom), 12px);7375  background: var(--peach-bg);7376  border: 1px solid var(--peach-t3);7377  border-radius: 14px;7378  padding: 6px;7379  display: flex;7380  flex-direction: column;7381  gap: 2px;7382  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7383  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7384}7385@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7386@keyframes peach-ctx-rise {7387  from { transform: translateY(16px); opacity: 0; }7388  to   { transform: translateY(0);    opacity: 1; }7389}7390.peach-context-menu-item {7391  background: transparent;7392  color: var(--peach-t0);7393  border: 0;7394  border-radius: 10px;7395  padding: 12px 14px;7396  text-align: left;7397  font: inherit;7398  cursor: pointer;7399}7400.peach-context-menu-item:hover,7401.peach-context-menu-item:focus-visible {7402  background: var(--peach-t3);7403}7404.peach-context-menu-item--danger {7405  color: var(--peach-health-bad, #d96868);7406}7407.peach-context-menu-item--cancel {7408  color: var(--peach-t2);7409  margin-top: 4px;7410  border-top: 1px solid var(--peach-t3);7411  border-radius: 0 0 10px 10px;7412}74137414/* Swipe-to-copy flash */7415.peach-entry-row.is-copy-flash {7416  animation: peach-copy-flash 600ms ease both;7417}7418@keyframes peach-copy-flash {7419  0%   { background: transparent; }7420  20%  { background: rgba(217, 153, 51, 0.32); }7421  100% { background: transparent; }7422}74237424html { font-size: 16px; }74257426/* ── Recovery word entry ─────────────────────────────────────────── */7427.peach-lock-recover-link {7428  display: block;7429  width: 100%;7430  margin-top: 12px;7431  background: none;7432  border: none;7433  font-family: "IBM Plex Mono", monospace;7434  font-size: 0.625rem;7435  letter-spacing: 0.06em;7436  color: var(--peach-t2);7437  cursor: pointer;7438  text-align: center;7439  padding: 4px;7440  transition: color 120ms ease;7441}7442.peach-lock-recover-link:hover {7443  color: var(--peach-t0);7444}74457446.lock-screen--recovery {7447  display: flex;7448  flex-direction: column;7449  align-items: stretch;7450  padding: 12px 20px 24px;7451  overflow: hidden;7452}74537454.peach-recovery-nav {7455  display: flex;7456  align-items: center;7457  position: relative;7458  z-index: 1;7459  margin-bottom: 4px;7460}74617462/* Mask runes to the top decorative band only — keep inputs and the7463   bottom CTA button clear. The bottom of the popup is reserved for7464   submit buttons; rendering runes there overlaps the button glyph. */7465.peach-rune-background--recovery {7466  -webkit-mask-image: linear-gradient(7467    to bottom,7468    black 0px, black 85px,7469    transparent 110px,7470    transparent 100%7471  );7472  mask-image: linear-gradient(7473    to bottom,7474    black 0px, black 85px,7475    transparent 110px,7476    transparent 100%7477  );7478}74797480.peach-recovery-header {7481  text-align: center;7482  margin-bottom: 16px;7483  margin-top: 4px;7484}7485.peach-recovery-header .peach-onboarding-headline {7486  font-size: 1.25rem;7487  font-weight: 300;7488  letter-spacing: 0.02em;7489  margin: 0 0 4px;7490}7491.peach-recovery-header .peach-hint {7492  font-family: "IBM Plex Mono", monospace;7493  font-size: 0.625rem;7494  color: var(--peach-t2);7495  letter-spacing: 0.04em;7496  margin: 0;7497}74987499/* 12-word grid: 2 columns × 6 rows */7500.peach-recovery-grid {7501  display: grid;7502  grid-template-columns: repeat(2, 1fr);7503  gap: 12px 20px;7504  width: 100%;7505  margin-bottom: 0;7506}75077508.peach-recovery-word-slot {7509  display: flex;7510  align-items: center;7511  gap: 6px;7512  min-width: 0;7513}75147515.peach-recovery-word-index {7516  font-family: "IBM Plex Mono", monospace;7517  font-size: 0.5rem;7518  color: rgba(255, 255, 255, 0.35);7519  min-width: 14px;7520  flex-shrink: 0;7521  text-align: right;7522  letter-spacing: 0.04em;7523}75247525.peach-recovery-word-input {7526  flex: 1;7527  min-width: 0;7528  background: transparent;7529  border: none;7530  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7531  color: var(--peach-t0);7532  font-family: "IBM Plex Mono", monospace;7533  font-size: 0.6875rem;7534  letter-spacing: 0.06em;7535  padding: 5px 2px 4px;7536  outline: none;7537  text-transform: lowercase;7538  transition: border-color 120ms ease;7539}7540.peach-recovery-word-input::placeholder {7541  color: rgba(255, 255, 255, 0.18);7542}7543.peach-recovery-word-input:focus {7544  border-bottom-color: var(--peach-accent);7545}75467547.peach-recovery-submit {7548  width: 100%;7549  margin-top: auto;7550}75517552.peach-recovery-new-password-form {7553  width: 100%;7554  display: flex;7555  flex-direction: column;7556  gap: 16px;7557  margin-bottom: 8px;7558}7559.peach-recovery-new-password-form .peach-newvault-field {7560  display: flex;7561  flex-direction: column;7562  gap: 4px;7563}75647565/* ── Recovery words display (post-create) ────────────────────────── */7566.lock-screen--recovery-display {7567  display: flex;7568  flex-direction: column;7569  align-items: stretch;7570  padding: 0 20px 20px;7571  min-height: 0;7572  overflow-y: auto;7573}75747575.peach-recovery-words-display {7576  width: 100%;7577  margin-bottom: 16px;7578  border: 1px solid var(--peach-t3);7579  border-radius: 8px;7580  padding: 12px 14px;7581  background: rgba(245, 240, 234, 0.04);7582}75837584.peach-recovery-words-label {7585  font-family: "IBM Plex Mono", monospace;7586  font-size: 0.5rem;7587  letter-spacing: 0.08em;7588  color: var(--peach-t2);7589  text-transform: uppercase;7590  margin-bottom: 10px;7591}75927593.peach-recovery-word-list {7594  list-style: none;7595  margin: 0;7596  padding: 0;7597  display: grid;7598  grid-template-columns: repeat(2, 1fr);7599  gap: 6px 16px;7600}76017602.peach-recovery-word-item {7603  display: flex;7604  align-items: baseline;7605  gap: 5px;7606}76077608.peach-recovery-word-num {7609  font-family: "IBM Plex Mono", monospace;7610  font-size: 0.5rem;7611  color: var(--peach-t2);7612  width: 14px;7613  flex: 0 0 14px;7614  text-align: right;7615  letter-spacing: 0.04em;7616  font-variant-numeric: tabular-nums;7617}76187619.peach-recovery-download-btn {7620  display: block;7621  margin: 10px auto 0;7622  padding: 4px 10px;7623  background: transparent;7624  border: 1px solid var(--peach-border);7625  border-radius: 6px;7626  color: var(--peach-t2);7627  font-family: "IBM Plex Mono", monospace;7628  font-size: 0.5625rem;7629  letter-spacing: 0.06em;7630  text-transform: lowercase;7631  cursor: pointer;7632  transition: border-color 0.15s, color 0.15s;7633}76347635.peach-recovery-download-btn:hover {7636  border-color: var(--peach-accent);7637  color: var(--peach-t0);7638}76397640.peach-recovery-word-text {7641  font-family: "IBM Plex Mono", monospace;7642  font-size: 0.6875rem;7643  letter-spacing: 0.06em;7644  color: var(--peach-t0);7645  text-transform: lowercase;7646}76477648.peach-hint--warning {7649  color: var(--peach-accent);7650  font-style: italic;7651}7652.peach-hint--success {7653  color: var(--peach-t2);7654  font-family: "IBM Plex Mono", monospace;7655  font-size: 0.625rem;7656  letter-spacing: 0.06em;7657}76587659/* Confirmation step */7660.peach-recovery-confirm {7661  width: 100%;7662  flex: 1;7663  display: flex;7664  flex-direction: column;7665}7666.peach-recovery-confirm-label {7667  font-family: "IBM Plex Mono", monospace;7668  font-size: 0.5625rem;7669  letter-spacing: 0.04em;7670  color: var(--peach-t2);7671  text-align: center;7672  margin: 0 0 12px;7673}7674.peach-recovery-confirm-fields {7675  display: flex;7676  flex-direction: column;7677  gap: 14px;7678  margin-bottom: 10px;7679}7680.peach-recovery-confirm-field {7681  display: flex;7682  align-items: center;7683  gap: 8px;7684}7685.peach-recovery-confirm-num {7686  font-family: "IBM Plex Mono", monospace;7687  font-size: 0.5rem;7688  color: var(--peach-t2);7689  min-width: 44px;7690  letter-spacing: 0.04em;7691}7692.peach-recovery-confirm-input {7693  flex: 1;7694  background: transparent;7695  border: none;7696  border-bottom: 1px solid var(--peach-t3);7697  color: var(--peach-t0);7698  font-family: "IBM Plex Mono", monospace;7699  font-size: 0.6875rem;7700  letter-spacing: 0.06em;7701  padding: 4px 2px 3px;7702  outline: none;7703  text-transform: lowercase;7704  transition: border-color 120ms ease;7705}7706.peach-recovery-confirm-input:focus {7707  border-bottom-color: var(--peach-accent);7708}7709.peach-recovery-confirm-input:disabled {7710  opacity: 0.4;7711  cursor: not-allowed;7712}7713.peach-recovery-confirm-btn {7714  width: 100%;7715  margin-top: auto;7716}77177718/* ============================================================7719   Sync info sheet7720   ============================================================ */77217722.peach-sync-info-backdrop {7723  position: fixed;7724  inset: 0;7725  z-index: 200;7726  background: rgba(0, 0, 0, 0.55);7727  display: flex;7728  align-items: flex-end;7729  animation: peach-fade-in 200ms ease forwards;7730}77317732@keyframes peach-fade-in {7733  from { opacity: 0; }7734  to   { opacity: 1; }7735}77367737.peach-sync-info-sheet {7738  width: 100%;7739  background: var(--peach-bg-card, var(--peach-bg));7740  border-top-left-radius: 20px;7741  border-top-right-radius: 20px;7742  padding: 12px 24px 32px;7743  display: flex;7744  flex-direction: column;7745  gap: 20px;7746  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7747}77487749@keyframes peach-sheet-up {7750  from { transform: translateY(100%); }7751  to   { transform: translateY(0); }7752}77537754.peach-sync-info-handle {7755  width: 36px;7756  height: 4px;7757  border-radius: 2px;7758  background: var(--peach-border);7759  margin: 0 auto 4px;7760  flex-shrink: 0;7761}77627763.peach-sync-info-title {7764  font-family: 'Cormorant Garamond', serif;7765  font-style: italic;7766  font-size: 26px;7767  font-weight: 600;7768  color: var(--peach-t0);7769  margin: 0;7770  line-height: 1.2;7771}77727773.peach-sync-info-body {7774  display: flex;7775  flex-direction: column;7776  gap: 14px;7777}77787779.peach-sync-info-point {7780  display: flex;7781  gap: 12px;7782  align-items: flex-start;7783  font-size: 14px;7784  color: var(--peach-t2);7785  line-height: 1.6;7786  margin: 0;7787}77887789.peach-sync-info-icon {7790  color: var(--peach-accent);7791  font-size: 16px;7792  flex-shrink: 0;7793  margin-top: 1px;7794}77957796.peach-sync-info-actions {7797  display: flex;7798  flex-direction: column;7799  gap: 12px;7800  margin-top: 4px;7801}78027803.peach-sync-info-pro-link {7804  background: none;7805  border: none;7806  font-size: 13px;7807  color: var(--peach-t3);7808  cursor: pointer;7809  padding: 0;7810  font-family: inherit;7811  text-align: center;7812  transition: color 150ms ease;7813}78147815.peach-sync-info-pro-link:hover {7816  color: var(--peach-accent);7817}78187819.peach-btn--full {7820  width: 100%;7821}78227823/* ── Sync screen ── */78247825.peach-sync-screen {7826  display: flex;7827  flex-direction: column;7828  height: 100%;7829}78307831.peach-sync-content {7832  flex: 1;7833  overflow-y: auto;7834  padding: 24px 20px 40px;7835  display: flex;7836  flex-direction: column;7837  gap: 24px;7838}78397840/* Intro (State A) */7841.peach-sync-headline {7842  font-family: 'Cormorant Garamond', serif;7843  font-style: italic;7844  font-size: 28px;7845  font-weight: 600;7846  color: var(--peach-t0);7847  margin: 0 0 10px;7848  line-height: 1.2;7849}78507851.peach-sync-intro-body {7852  font-size: 14px;7853  color: var(--peach-t1);7854  line-height: 1.6;7855  margin: 0;7856}78577858.peach-sync-pro-note {7859  display: flex;7860  flex-direction: column;7861  gap: 8px;7862  background: var(--peach-t3);7863  border-radius: 10px;7864  padding: 12px 14px;7865}78667867.peach-sync-pro-note-text {7868  font-size: 12px;7869  color: var(--peach-t2);7870  line-height: 1.5;7871  margin: 0;7872}78737874.peach-sync-pro-link {7875  background: none;7876  border: none;7877  font-size: 12px;7878  color: var(--peach-accent);7879  cursor: pointer;7880  padding: 0;7881  font-family: inherit;7882  text-align: left;7883}78847885/* Status (State C) */7886.peach-sync-status {7887  padding: 12px 0;7888  border-bottom: 1px solid var(--peach-border);7889}78907891.peach-sync-status-row {7892  display: flex;7893  align-items: center;7894  gap: 8px;7895}78967897.peach-sync-dot {7898  width: 7px;7899  height: 7px;7900  border-radius: 50%;7901  flex-shrink: 0;7902}79037904.peach-sync-dot--green { background: var(--peach-health-ok); }7905.peach-sync-dot--amber { background: var(--peach-accent); }79067907.peach-sync-status-text {7908  font-family: 'IBM Plex Mono', monospace;7909  font-size: 11px;7910  color: var(--peach-t2);7911}79127913/* Paired devices */7914.peach-sync-section {7915  display: flex;7916  flex-direction: column;7917  gap: 2px;7918}79197920.peach-sync-section-label {7921  font-family: 'IBM Plex Mono', monospace;7922  font-size: 10px;7923  letter-spacing: 0.1em;7924  color: var(--peach-t3);7925  margin: 0 0 10px;7926}79277928.peach-sync-device-row {7929  display: flex;7930  justify-content: space-between;7931  align-items: baseline;7932  padding: 10px 0;7933  border-bottom: 1px solid var(--peach-border);7934  gap: 12px;7935}79367937.peach-sync-device-name {7938  font-size: 14px;7939  color: var(--peach-t1);7940}79417942.peach-sync-device-meta {7943  font-family: 'IBM Plex Mono', monospace;7944  font-size: 11px;7945  color: var(--peach-t3);7946  white-space: nowrap;7947}79487949.peach-sync-hub-note {7950  padding: 14px 16px;7951  border: 1px solid var(--peach-border);7952  border-radius: 10px;7953  display: flex;7954  flex-direction: column;7955  gap: 6px;7956  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);7957}79587959.peach-sync-hub-note-title {7960  font-size: 13px;7961  font-weight: 600;7962  color: var(--peach-t0);7963  margin: 0;7964}79657966.peach-sync-hub-note-body {7967  font-size: 12px;7968  color: var(--peach-t2);7969  line-height: 1.6;7970  margin: 0;7971}79727973/* Action buttons */7974.peach-sync-actions {7975  display: flex;7976  gap: 10px;7977  flex-wrap: wrap;7978}79797980/* Upgrade prompt (State B) */7981.peach-sync-upgrade {7982  display: flex;7983  flex-direction: column;7984  gap: 12px;7985  padding: 16px;7986  border: 1px solid var(--peach-border);7987  border-radius: 10px;7988}79897990.peach-sync-upgrade-text {7991  font-size: 13px;7992  color: var(--peach-t2);7993  line-height: 1.6;7994  margin: 0;7995}79967997/* Network note */7998.peach-sync-network-note {7999  font-size: 12px;8000  color: var(--peach-t3);8001  line-height: 1.6;8002  margin: 0;8003}80048005/* Advanced */8006.peach-sync-advanced {8007  margin-top: auto;8008  padding-top: 16px;8009  border-top: 1px solid var(--peach-border);8010}80118012.peach-sync-advanced-toggle {8013  display: flex;8014  align-items: center;8015  gap: 8px;8016  background: none;8017  border: none;8018  font-family: 'IBM Plex Mono', monospace;8019  font-size: 11px;8020  letter-spacing: 0.08em;8021  color: var(--peach-t3);8022  cursor: pointer;8023  padding: 0;8024  text-transform: uppercase;8025}80268027.peach-sync-advanced-chevron {8028  display: inline-block;8029  transition: transform 200ms ease;8030  font-size: 10px;8031}80328033.peach-sync-advanced-chevron.is-open {8034  transform: rotate(90deg);8035}80368037.peach-sync-advanced-content {8038  margin-top: 14px;8039}80408041.peach-sync-advanced-row {8042  display: flex;8043  justify-content: space-between;8044  align-items: center;8045  gap: 16px;8046}80478048.peach-sync-advanced-title {8049  font-size: 14px;8050  color: var(--peach-t1);8051  margin: 0 0 2px;8052}80538054.peach-sync-advanced-subtitle {8055  font-size: 12px;8056  color: var(--peach-t3);8057  margin: 0;8058  line-height: 1.5;8059}80608061/* ── Add Device — Android scan tabs ─────────────────────────────────────── */80628063.peach-pairing-tabs {8064  display: flex;8065  border: 1px solid var(--peach-border);8066  border-radius: 8px;8067  overflow: hidden;8068  margin-bottom: 4px;8069}80708071.peach-pairing-tab {8072  flex: 1;8073  padding: 10px 0;8074  background: none;8075  border: none;8076  font-family: 'IBM Plex Mono', monospace;8077  font-size: 11px;8078  letter-spacing: 0.06em;8079  color: var(--peach-t2);8080  cursor: pointer;8081  transition: background 150ms, color 150ms;8082}80838084.peach-pairing-tab.is-active {8085  background: var(--peach-accent);8086  color: #fff;8087  font-weight: 600;8088}80898090.peach-pairing-tab:not(.is-active):active {8091  background: var(--peach-border);8092}80938094/* Camera view */8095.peach-pairing-camera-container {8096  position: relative;8097  width: 100%;8098  aspect-ratio: 1;8099  border-radius: 12px;8100  overflow: hidden;8101  background: #000;8102  flex-shrink: 0;8103}81048105.peach-pairing-video {8106  width: 100%;8107  height: 100%;8108  object-fit: cover;8109}81108111.peach-pairing-scan-frame {8112  position: absolute;8113  top: 50%;8114  left: 50%;8115  transform: translate(-50%, -50%);8116  width: 60%;8117  aspect-ratio: 1;8118  border: 2px solid var(--peach-accent);8119  border-radius: 8px;8120  pointer-events: none;8121}81228123/* ── Notes Mode ── */81248125/* Overlay that crossfades over the vault */8126.peach-notes-overlay {8127  position: fixed;8128  inset: 0;8129  z-index: 90;8130  opacity: 0;8131  pointer-events: none;8132  animation: peach-mode-in 220ms ease-in forwards;8133}81348135.peach-notes-overlay.is-visible {8136  opacity: 1;8137  pointer-events: auto;8138}81398140@keyframes peach-mode-in {8141  from { opacity: 0; }8142  to   { opacity: 1; }8143}81448145/* Top-level notes surface */8146.peach-notes-mode {8147  position: absolute;8148  inset: 0;8149  background: var(--peach-bg);8150  display: flex;8151  flex-direction: column;8152}81538154/* Rune canvas positioned behind content */8155.peach-note-rune-canvas {8156  position: absolute;8157  inset: 0;8158  width: 100%;8159  height: 100%;8160  pointer-events: none;8161  z-index: 0;8162}81638164/* TOC wrapper */8165.peach-notes-toc-wrapper {8166  position: absolute;8167  inset: 0;8168  transition: opacity 180ms ease-out;8169  z-index: 1;8170}81718172.peach-notes-toc-wrapper.is-visible { opacity: 1; pointer-events: auto; }8173.peach-notes-toc-wrapper.is-expanding { opacity: 0; pointer-events: none; transition: opacity 150ms ease-out; }8174.peach-notes-toc-wrapper.is-collapsing { opacity: 1; pointer-events: none; }81758176/* Editor wrapper */8177.peach-notes-editor-wrapper {8178  position: absolute;8179  inset: 0;8180  opacity: 0;8181  pointer-events: none;8182  z-index: 2;8183  transition: opacity 220ms ease-in;8184}81858186.peach-notes-editor-wrapper.is-visible {8187  opacity: 1;8188  pointer-events: auto;8189}81908191.peach-notes-editor-wrapper.is-entering {8192  animation: peach-note-editor-enter 220ms 180ms ease-in both;8193}81948195.peach-notes-editor-wrapper.is-leaving {8196  animation: peach-note-editor-leave 200ms ease-out both;8197}81988199@keyframes peach-note-editor-enter {8200  from { opacity: 0; transform: translateY(6px); }8201  to   { opacity: 1; transform: translateY(0); }8202}82038204@keyframes peach-note-editor-leave {8205  from { opacity: 1; transform: translateY(0); }8206  to   { opacity: 0; transform: translateY(6px); }8207}82088209/* TOC inner */8210.peach-notes-toc {8211  position: relative;8212  display: flex;8213  flex-direction: column;8214  height: 100%;8215  padding-top: env(safe-area-inset-top, 0px);8216  padding-bottom: env(safe-area-inset-bottom, 0px);8217}82188219/* Shared header */8220.peach-notes-header {8221  display: flex;8222  align-items: center;8223  padding: 12px 16px;8224  gap: 12px;8225  flex-shrink: 0;8226  min-height: 52px;8227  position: relative;8228  z-index: 2;8229}82308231.peach-notes-back {8232  font-size: 22px;8233  color: var(--peach-t2);8234  background: none;8235  border: none;8236  padding: 4px;8237  cursor: pointer;8238  line-height: 1;8239  flex-shrink: 0;8240  transition: color 150ms ease;8241  -webkit-tap-highlight-color: transparent;8242}82438244.peach-notes-back:active { color: var(--peach-t0); }82458246.peach-notes-header-title {8247  flex: 1;8248  font-family: 'Cormorant Garamond', serif;8249  font-style: italic;8250  font-size: 22px;8251  color: var(--peach-t0);8252  text-align: center;8253}82548255.peach-notes-header-title.is-breadcrumb {8256  font-family: 'IBM Plex Mono', monospace;8257  font-style: normal;8258  font-size: 11px;8259  color: var(--peach-t3);8260  letter-spacing: 0.08em;8261  text-transform: uppercase;8262  cursor: pointer;8263}82648265.peach-notes-header-actions {8266  display: flex;8267  gap: 8px;8268  flex-shrink: 0;8269}82708271.peach-notes-header-btn {8272  width: 36px;8273  height: 36px;8274  display: flex;8275  align-items: center;8276  justify-content: center;8277  background: none;8278  border: none;8279  color: var(--peach-t2);8280  cursor: pointer;8281  border-radius: 8px;8282  font-size: 16px;8283  transition: color 150ms ease, background 150ms ease;8284  -webkit-tap-highlight-color: transparent;8285}82868287.peach-notes-header-btn:active {8288  background: rgba(255,255,255,0.06);8289  color: var(--peach-t0);8290}82918292/* Inline search bar */8293.peach-notes-search-input {8294  flex: 1;8295  background: none;8296  border: none;8297  outline: none;8298  font-family: 'IBM Plex Mono', monospace;8299  font-size: 13px;8300  color: var(--peach-t0);8301  padding: 4px 0;8302  letter-spacing: 0.02em;8303}83048305.peach-notes-search-input::placeholder {8306  color: var(--peach-t3);8307}83088309/* TOC list */8310.peach-notes-list-container {8311  flex: 1;8312  overflow-y: auto;8313  overflow-x: hidden;8314  scrollbar-width: none;8315  -webkit-overflow-scrolling: touch;8316  overscroll-behavior: contain;8317  position: relative;8318  z-index: 1;8319}83208321.peach-notes-list-container::-webkit-scrollbar { display: none; }83228323/* Note row */8324.peach-note-row {8325  position: relative;8326  display: grid;8327  grid-template-columns: 44px 8px 1fr 8px auto;8328  align-items: center;8329  min-height: 72px;8330  padding: 16px 20px;8331  border-bottom: 0.5px solid var(--peach-border);8332  cursor: pointer;8333  overflow: hidden;8334  touch-action: pan-y;8335  user-select: none;8336  -webkit-user-select: none;8337  -webkit-tap-highlight-color: transparent;8338}83398340.peach-note-row:first-child {8341  border-top: 0.5px solid var(--peach-border);8342}83438344.peach-note-row:active {8345  background: rgba(255,255,255,0.02);8346}83478348/* Row fade animations (expansion) */8349.peach-note-row.is-expanding-away {8350  transition: opacity 150ms ease, transform 150ms ease;8351  opacity: 0;8352}83538354.peach-note-row.is-expanding-away-up { transform: translateY(-6px); }8355.peach-note-row.is-expanding-away-down { transform: translateY(6px); }83568357.peach-note-numeral {8358  font-family: 'Cormorant Garamond', serif;8359  font-style: italic;8360  font-size: 15px;8361  color: var(--peach-accent);8362  text-align: right;8363  line-height: 1;8364  flex-shrink: 0;8365}83668367.peach-note-title-gap { /* grid spacer */ }83688369.peach-note-title {8370  font-family: 'Cormorant Garamond', serif;8371  font-style: italic;8372  font-size: 18px;8373  color: var(--peach-t0);8374  line-height: 1.3;8375  min-width: 0;8376  overflow-wrap: break-word;8377}83788379.peach-note-title-match {8380  color: var(--peach-accent);8381}83828383.peach-note-date {8384  font-family: 'IBM Plex Mono', monospace;8385  font-size: 11px;8386  color: var(--peach-t2);8387  white-space: nowrap;8388  text-align: right;8389  flex-shrink: 0;8390  grid-column: 5;8391}83928393/* Swipe underlays */8394.peach-note-row-underlay {8395  position: absolute;8396  inset: 0;8397  display: flex;8398  align-items: center;8399  padding: 0 24px;8400  font-family: 'IBM Plex Mono', monospace;8401  font-size: 11px;8402  letter-spacing: 0.1em;8403  pointer-events: none;8404  z-index: 0;8405}84068407.peach-note-row-underlay--delete {8408  background: #8B2020;8409  color: rgba(255,255,255,0.9);8410  justify-content: flex-end;8411}84128413.peach-note-row-underlay--archive {8414  background: var(--peach-accent);8415  color: #0C0A06;8416  justify-content: flex-start;8417}84188419/* Delete confirm strip */8420.peach-note-delete-confirm {8421  position: absolute;8422  inset: 0;8423  background: var(--peach-bg);8424  display: flex;8425  align-items: center;8426  gap: 12px;8427  padding: 0 20px;8428  font-family: 'IBM Plex Mono', monospace;8429  font-size: 11px;8430  color: var(--peach-t1);8431  letter-spacing: 0.04em;8432  animation: peach-delete-confirm-in 150ms ease both;8433  z-index: 10;8434}84358436@keyframes peach-delete-confirm-in {8437  from { opacity: 0; }8438  to   { opacity: 1; }8439}84408441.peach-note-delete-confirm-btn {8442  background: #8B2020;8443  color: rgba(255,255,255,0.9);8444  border: none;8445  border-radius: 6px;8446  padding: 4px 10px;8447  font-family: 'IBM Plex Mono', monospace;8448  font-size: 10px;8449  cursor: pointer;8450  letter-spacing: 0.06em;8451}84528453.peach-note-delete-cancel-btn {8454  background: none;8455  border: none;8456  color: var(--peach-t3);8457  font-family: 'IBM Plex Mono', monospace;8458  font-size: 10px;8459  cursor: pointer;8460  letter-spacing: 0.06em;8461  padding: 4px 6px;8462}84638464/* + New note button */8465.peach-notes-new-btn {8466  font-family: 'IBM Plex Mono', monospace;8467  font-size: 12px;8468  color: var(--peach-t3);8469  text-align: center;8470  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8471  background: none;8472  border: none;8473  width: 100%;8474  cursor: pointer;8475  letter-spacing: 0.04em;8476  transition: color 150ms ease;8477  -webkit-tap-highlight-color: transparent;8478}84798480.peach-notes-new-btn:active { color: var(--peach-accent); }84818482/* Empty state */8483.peach-notes-empty {8484  display: flex;8485  flex-direction: column;8486  align-items: center;8487  justify-content: center;8488  flex: 1;8489  padding: 48px 32px;8490  gap: 16px;8491}84928493.peach-notes-empty-text {8494  font-family: 'Cormorant Garamond', serif;8495  font-style: italic;8496  font-size: 20px;8497  color: var(--peach-t3);8498  text-align: center;8499  margin: 0;8500  line-height: 1.4;8501  white-space: pre-line;8502}85038504/* ── Editor surface ── */85058506.peach-note-editor-surface {8507  position: absolute;8508  inset: 0;8509  background: var(--peach-bg);8510  display: flex;8511  flex-direction: column;8512  padding-top: env(safe-area-inset-top, 0px);8513}85148515.peach-note-editor-scroll {8516  flex: 1;8517  overflow-y: auto;8518  overflow-x: hidden;8519  scrollbar-width: none;8520  -webkit-overflow-scrolling: touch;8521  padding: 0 24px 120px;8522  position: relative;8523  z-index: 1;8524}85258526.peach-note-editor-scroll::-webkit-scrollbar { display: none; }85278528/* Desktop toolbar (always visible above body) */8529.peach-note-toolbar-desktop-inline {8530  display: flex;8531  align-items: center;8532  gap: 2px;8533  padding: 6px 0 12px;8534  margin-bottom: 4px;8535  border-bottom: 0.5px solid var(--peach-border);8536}85378538/* Title field */8539.peach-note-title-field {8540  font-family: 'Cormorant Garamond', serif;8541  font-style: italic;8542  font-size: 32px;8543  font-weight: 600;8544  color: var(--peach-t0);8545  line-height: 1.2;8546  padding: 8px 0 0;8547  outline: none;8548  min-height: 44px;8549  word-break: break-word;8550  position: relative;8551  z-index: 1;8552}85538554.peach-note-title-field:empty::before {8555  content: attr(data-placeholder);8556  color: var(--peach-t3);8557  pointer-events: none;8558}85598560/* Hairline separator */8561.peach-note-hairline {8562  height: 0.5px;8563  background: var(--peach-border);8564  margin: 12px 0 20px;8565  position: relative;8566  z-index: 1;8567}85688569/* Body field */8570.peach-note-body-field {8571  font-family: 'DM Sans', sans-serif;8572  font-size: 16px;8573  color: var(--peach-t0);8574  line-height: 1.85;8575  padding: 0;8576  outline: none;8577  min-height: 240px;8578  word-break: break-word;8579  position: relative;8580  z-index: 1;8581}85828583.peach-note-body-field:empty::before {8584  content: attr(data-placeholder);8585  color: var(--peach-t3);8586  font-style: italic;8587  pointer-events: none;8588}85898590.peach-note-body-field h2 {8591  font-family: 'Cormorant Garamond', serif;8592  font-style: italic;8593  font-size: 22px;8594  font-weight: 600;8595  color: var(--peach-t0);8596  margin: 20px 0 8px;8597}85988599.peach-note-body-field blockquote {8600  border-left: 2px solid var(--peach-accent);8601  margin: 12px 0;8602  padding-left: 16px;8603  color: var(--peach-t1);8604  font-style: italic;8605}86068607.peach-note-body-field ul,8608.peach-note-body-field ol {8609  padding-left: 20px;8610  margin: 8px 0;8611}86128613.peach-note-body-field li {8614  margin: 4px 0;8615}86168617.peach-note-body-field hr {8618  border: none;8619  border-top: 0.5px solid var(--peach-border);8620  margin: 16px 0;8621}86228623/* Saved indicator */8624.peach-note-saved-indicator {8625  font-family: 'IBM Plex Mono', monospace;8626  font-size: 11px;8627  color: var(--peach-t3);8628  letter-spacing: 0.04em;8629  text-align: right;8630  padding: 6px 24px;8631  flex-shrink: 0;8632  transition: opacity 300ms ease;8633  pointer-events: none;8634  position: relative;8635  z-index: 1;8636}86378638/* Mobile keyboard toolbar */8639.peach-note-toolbar-mobile {8640  display: flex;8641  align-items: center;8642  padding: 8px 16px;8643  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8644  background: var(--peach-bg);8645  border-top: 0.5px solid var(--peach-border);8646  gap: 4px;8647  flex-shrink: 0;8648  position: relative;8649  z-index: 10;8650}86518652.peach-note-toolbar-btn {8653  min-width: 36px;8654  height: 36px;8655  display: flex;8656  align-items: center;8657  justify-content: center;8658  background: none;8659  border: none;8660  border-radius: 8px;8661  cursor: pointer;8662  font-size: 14px;8663  color: var(--peach-t1);8664  font-family: 'DM Sans', sans-serif;8665  font-weight: 600;8666  transition: background 100ms ease, color 100ms ease;8667  -webkit-tap-highlight-color: transparent;8668}86698670.peach-note-toolbar-btn--italic { font-style: italic; }8671.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8672.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }86738674.peach-note-toolbar-divider {8675  width: 0.5px;8676  height: 20px;8677  background: var(--peach-border);8678  margin: 0 4px;8679  flex-shrink: 0;8680}86818682.peach-note-toolbar-spacer { flex: 1; }86838684/* Desktop: larger headline in TOC */8685@media (min-width: 400px) {8686  .peach-notes-header-title:not(.is-breadcrumb) {8687    font-size: 32px;8688  }86898690  .peach-note-row {8691    min-height: 64px;8692    padding: 14px 16px;8693  }8694}86958696/* Flying title — shared element during expansion/collapse */8697.peach-note-expanding-title {8698  position: absolute;8699  left: 20px;8700  right: 20px;8701  font-family: 'Cormorant Garamond', serif;8702  font-style: italic;8703  font-weight: 600;8704  font-size: 32px;8705  color: var(--peach-t0);8706  line-height: 1.2;8707  white-space: nowrap;8708  overflow: hidden;8709  text-overflow: ellipsis;8710  pointer-events: none;8711  z-index: 50;8712  transform-origin: left top;8713  transition:8714    top 280ms cubic-bezier(0, 0, 0, 1),8715    transform 280ms cubic-bezier(0, 0, 0, 1);8716  will-change: top, transform;8717}87188719/* TOC wrapper states */8720.peach-notes-toc-wrapper.is-toc { opacity: 1; pointer-events: auto; }8721.peach-notes-toc-wrapper.is-expanding {8722  opacity: 0;8723  pointer-events: none;8724  transition: opacity 150ms ease-out;8725}8726.peach-notes-toc-wrapper.is-collapsing {8727  pointer-events: none;8728  transition: opacity 200ms 100ms ease-in;8729  opacity: 1;8730}87318732/* Expanding target row hides its title text (flying title takes over) */8733.peach-note-row.is-expanding-target .peach-note-title {8734  opacity: 0;8735}