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-strength-track {1718  height: 3px;1719  background: var(--peach-border);1720  border-radius: 2px;1721  margin: 4px 0 2px;1722  overflow: hidden;1723}1724.peach-export-strength-fill {1725  height: 100%;1726  border-radius: 2px;1727  transition: width 250ms ease, background 250ms ease;1728}1729.peach-export-strength-warn {1730  margin: 0;1731  font-size: 0.625rem;1732  line-height: 1.5;1733  color: #e84040;1734  font-family: "IBM Plex Mono", monospace;1735}1736.peach-export-strength-hint {1737  margin: 0;1738  font-size: 0.625rem;1739  line-height: 1.5;1740  color: var(--peach-t2);1741  font-family: "IBM Plex Mono", monospace;1742}1743.peach-export-pill {1744  display: inline-flex;1745  align-items: center;1746  padding: 4px 8px;1747  border-radius: 999px;1748  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1749  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1750  color: var(--peach-accent);1751  font-family: "IBM Plex Mono", monospace;1752  font-size: 0.5rem;1753  letter-spacing: 0.12em;1754  text-transform: uppercase;1755  white-space: nowrap;1756}1757.peach-export-pill--danger {1758  border-color: rgba(220,80,60,0.22);1759  background: rgba(220,80,60,0.08);1760  color: var(--peach-breach);1761}1762.peach-settings-label {1763  margin: 0 0 6px;1764  font-family: "IBM Plex Mono", monospace;1765  font-size: 0.5rem;1766  text-transform: uppercase;1767  letter-spacing: 0.18em;1768  color: var(--peach-t2);1769}1770.peach-settings-row {1771  display: flex;1772  align-items: center;1773  justify-content: space-between;1774  gap: 12px;1775  min-height: 34px;1776  padding: 6px 0;1777  font-size: 0.8125rem;1778  color: var(--peach-t1);1779}1780.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1781.peach-settings-value {1782  font-family: "IBM Plex Mono", monospace;1783  font-size: 0.625rem;1784  color: var(--peach-t2);1785}17861787.peach-settings-value--status {1788  display: flex;1789  align-items: center;1790  gap: 6px;1791}17921793.peach-settings-link {1794  font-family: "IBM Plex Mono", monospace;1795  font-size: 0.625rem;1796  color: var(--peach-accent);1797  text-decoration: none;1798  cursor: pointer;1799}1800.peach-settings-link:hover {1801  text-decoration: underline;1802}18031804.peach-settings-row--stack {1805  flex-direction: column;1806  align-items: stretch;1807  gap: 6px;1808}18091810.peach-settings-row--top {1811  align-items: flex-start;1812}18131814.peach-settings-row-main {1815  display: flex;1816  flex-direction: column;1817  gap: 4px;1818  flex: 1;1819}1820.peach-toggle {1821  width: 28px; height: 16px;1822  border-radius: 999px;1823  background: var(--peach-t3);1824  border: 1px solid var(--peach-t3);1825  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1826  flex-shrink: 0;1827  transition: background 200ms ease, border-color 200ms ease;1828  cursor: pointer;1829}1830.peach-toggle.is-on {1831  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1832  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1833}1834.peach-toggle-knob {1835  width: 10px; height: 10px;1836  border-radius: 50%;1837  background: var(--peach-t2);1838  flex-shrink: 0;1839  transform: translateX(0px);1840  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1841}1842.peach-toggle.is-on .peach-toggle-knob {1843  background: var(--peach-accent);1844  transform: translateX(12px);1845}1846.peach-settings-footer {1847  display: flex;1848  align-items: center;1849  gap: 8px;1850  margin-top: auto;1851  padding: 14px 16px 8px;1852  font-family: "IBM Plex Mono", monospace;1853  font-size: 0.5625rem;1854  color: var(--peach-t2);1855}18561857/* ── Settings home navigation ──────────────────────────────────────────── */1858.peach-settings-nav-label {1859  margin: 0 0 2px;1860  padding: 12px 16px 4px;1861  font-family: "IBM Plex Mono", monospace;1862  font-size: 0.5rem;1863  text-transform: uppercase;1864  letter-spacing: 0.18em;1865  color: var(--peach-t2);1866}18671868.peach-settings-cat-row {1869  display: flex;1870  align-items: center;1871  gap: 10px;1872  width: 100%;1873  padding: 9px 16px;1874  background: none;1875  border: none;1876  border-bottom: 1px solid var(--peach-t3);1877  cursor: pointer;1878  text-align: left;1879  color: inherit;1880  transition: background var(--peach-dur-80) ease;1881}1882.peach-settings-cat-row:hover {1883  background: var(--peach-t3);1884}1885.peach-settings-cat-row:last-child {1886  border-bottom: none;1887}18881889.peach-settings-cat-icon {1890  width: 28px;1891  height: 28px;1892  border-radius: 7px;1893  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1894  color: var(--peach-accent);1895  display: flex;1896  align-items: center;1897  justify-content: center;1898  flex-shrink: 0;1899}1900/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1901   Darken the icon stroke to ink and bump the bg tint so the icon reads1902   sharply while the cell still feels accent-tinted. */1903.light .peach-settings-cat-icon {1904  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1905  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1906}19071908.peach-settings-cat-content {1909  flex: 1;1910  display: flex;1911  flex-direction: column;1912  gap: 2px;1913  min-width: 0;1914}19151916.peach-settings-cat-name {1917  font-size: 0.8125rem;1918  font-weight: 450;1919  color: var(--peach-t0);1920  line-height: 1.2;1921}19221923.peach-settings-cat-desc {1924  font-size: 0.625rem;1925  color: var(--peach-t2);1926  line-height: 1.3;1927  white-space: nowrap;1928  overflow: hidden;1929  text-overflow: ellipsis;1930}19311932.peach-settings-cat-chevron {1933  color: var(--peach-t2);1934  flex-shrink: 0;1935  opacity: 0.5;1936}19371938/* ── Settings sub-view section labels ──────────────────────────────────── */1939.peach-settings-sub-label {1940  margin: 12px 0 4px;1941  font-family: "IBM Plex Mono", monospace;1942  font-size: 0.5rem;1943  text-transform: uppercase;1944  letter-spacing: 0.18em;1945  color: var(--peach-t2);1946}1947.peach-settings-sub-label:first-child {1948  margin-top: 4px;1949}19501951/* ── Settings: collapsible Advanced section ─────────────────────────────── */1952.peach-settings-advanced-toggle {1953  display: flex;1954  align-items: center;1955  justify-content: space-between;1956  width: 100%;1957  background: none;1958  border: none;1959  cursor: pointer;1960  padding: 12px 0 4px;1961  margin: 0;1962  color: inherit;1963}1964.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {1965  color: var(--peach-t1);1966}1967.peach-settings-advanced-chevron {1968  font-size: 0.5625rem;1969  color: var(--peach-t3);1970  letter-spacing: 0;1971  transition: color 120ms ease;1972}19731974/* ── Feedback form ──────────────────────────────────────────────────────── */1975.peach-feedback-group {1976  flex: 1;1977  display: flex;1978  flex-direction: column;1979  border-bottom: none;1980}19811982.peach-feedback-intro {1983  margin: 4px 0 14px;1984  font-size: 0.75rem;1985  line-height: 1.55;1986  color: var(--peach-t1);1987}19881989.peach-feedback-chips {1990  display: flex;1991  flex-wrap: wrap;1992  gap: 6px;1993  margin-bottom: 14px;1994}19951996.peach-feedback-chip {1997  padding: 4px 10px;1998  border-radius: 999px;1999  border: 1px solid var(--peach-t3);2000  background: none;2001  color: var(--peach-t2);2002  font-size: 0.6875rem;2003  font-family: var(--font-ui);2004  cursor: pointer;2005  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2006    background var(--peach-dur-80) ease;2007}2008.peach-feedback-chip:hover {2009  border-color: var(--peach-t2);2010  color: var(--peach-t1);2011}2012.peach-feedback-chip.is-active {2013  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);2014  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2015  color: var(--peach-accent);2016}20172018.peach-feedback-textarea {2019  flex: 1;2020  width: 100%;2021  min-height: 120px;2022  box-sizing: border-box;2023  background: rgba(0, 0, 0, 0.22);2024  border: 1px solid transparent;2025  border-radius: 6px;2026  color: var(--peach-t0);2027  font-size: 0.75rem;2028  font-family: var(--font-ui);2029  line-height: 1.5;2030  padding: 8px 10px;2031  resize: none;2032  outline: none;2033  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2034}2035.peach-feedback-textarea:focus {2036  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2037  background: rgba(0, 0, 0, 0.28);2038}2039.peach-feedback-textarea:focus {2040  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2041}2042.peach-feedback-textarea::placeholder {2043  color: var(--peach-t2);2044}20452046.peach-feedback-meta {2047  margin: 6px 0 0;2048  font-size: 0.625rem;2049  color: var(--peach-t2);2050  font-family: "IBM Plex Mono", monospace;2051}20522053.peach-feedback-result {2054  margin: 8px 0 0;2055  font-size: 0.6875rem;2056  font-family: "IBM Plex Mono", monospace;2057}2058.peach-feedback-result--ok { color: var(--peach-sync-ok); }2059.peach-feedback-result--err { color: var(--peach-breach); }20602061.peach-feedback-submit {2062  width: 100%;2063  margin-top: 12px;2064  justify-content: center;2065}20662067.peach-feedback-anon {2068  margin: 8px 0 0;2069  font-size: 0.625rem;2070  color: var(--peach-t2);2071  text-align: center;2072}20732074.peach-passkey-badge {2075  margin-left: 8px;2076  font-size: 0.625rem;2077  letter-spacing: 0.06em;2078  text-transform: uppercase;2079  color: var(--peach-t2);2080  font-family: var(--font-ui);2081  vertical-align: middle;2082}20832084.peach-passkey-delete-btn {2085  color: var(--peach-breach);2086  border-color: rgba(229, 85, 85, 0.25);2087}20882089.peach-passkey-delete-confirm {2090  display: flex;2091  align-items: center;2092  gap: 8px;2093  padding: 8px 10px;2094  background: rgba(229, 85, 85, 0.06);2095  border: 1px solid rgba(229, 85, 85, 0.2);2096  border-radius: 6px;2097}20982099.peach-passkey-delete-confirm-copy {2100  flex: 1;2101  font-size: 0.6875rem;2102  color: var(--peach-t1);2103}21042105.peach-passkey-delete-btn--confirm {2106  color: var(--peach-breach);2107  border-color: rgba(229, 85, 85, 0.4);2108}21092110.peach-passkey-activity {2111  flex-direction: column;2112  align-items: flex-start;2113  gap: 4px;2114}21152116.peach-passkey-meta {2117  font-size: 0.6875rem;2118  color: var(--peach-t2);2119}21202121.peach-passkey-actions {2122  position: relative;2123  z-index: 1;2124  margin-top: 14px;2125  display: flex;2126  flex-direction: column;2127  gap: 8px;2128}21292130.peach-passkey-approval {2131  display: flex;2132  flex-direction: column;2133  align-items: center;2134  padding: 16px 20px 14px;2135  gap: 8px;2136  text-align: center;2137}21382139.peach-passkey-approval-icon {2140  width: 36px;2141  height: 36px;2142  border-radius: 10px;2143  background: var(--peach-s2);2144  border: 1px solid var(--peach-t3);2145  display: flex;2146  align-items: center;2147  justify-content: center;2148  flex-shrink: 0;2149  color: var(--peach-accent);2150}21512152.peach-passkey-approval-icon img,2153.peach-passkey-approval-icon svg {2154  width: 22px;2155  height: 22px;2156  border-radius: 5px;2157}21582159.peach-passkey-approval-rp {2160  font-family: var(--font-ui);2161  font-size: 0.75rem;2162  color: var(--peach-t2);2163  letter-spacing: 0.03em;2164}21652166.peach-passkey-approval-action {2167  font-family: var(--font-display);2168  font-style: italic;2169  font-weight: 300;2170  font-size: 18px;2171  color: var(--peach-t0);2172  line-height: 1.1;2173  margin: 1px 0;2174}21752176.peach-passkey-approval-user {2177  font-family: var(--font-mono);2178  font-size: 0.6875rem;2179  color: var(--peach-t1);2180  background: var(--peach-s2);2181  border: 1px solid var(--peach-t3);2182  border-radius: 4px;2183  padding: 3px 8px;2184}21852186.peach-passkey-approval-notice {2187  font-size: 0.625rem;2188  color: var(--peach-t2);2189  line-height: 1.5;2190  max-width: 220px;2191}21922193.peach-passkey-approval-actions {2194  display: flex;2195  gap: 8px;2196  width: 100%;2197  margin-top: 6px;2198}21992200.peach-passkey-approval-actions .peach-btn {2201  flex: 1;2202}22032204/* ── Inline generator drawer ── */2205.peach-generator-drawer {2206  display: grid;2207  grid-template-rows: 0fr;2208  transition: grid-template-rows 320ms var(--peach-curve-arrival);2209  overflow: hidden;2210}2211.peach-generator-drawer.is-open {2212  grid-template-rows: 1fr;2213}2214.peach-generator-drawer-inner {2215  min-height: 0;2216  overflow: hidden;2217}2218.peach-generator-drawer-content {2219  border-top: 1px solid var(--peach-t3);2220  padding: 8px 0 4px;2221  display: flex;2222  flex-direction: column;2223  gap: 8px;2224}22252226/* ── Compact generator (inside entry edit) ── */2227.peach-generator-drawer-content--compact {2228  border-top: 1px solid var(--peach-t3);2229  padding: 8px 0 2px;2230  gap: 7px;2231}2232.peach-pwgen-compact-display-row {2233  display: flex;2234  align-items: center;2235  gap: 6px;2236}2237.peach-pwgen-compact-output {2238  flex: 1;2239  min-width: 0;2240  font-family: "IBM Plex Mono", monospace;2241  font-size: 0.6875rem;2242  font-weight: 400;2243  letter-spacing: 0.04em;2244  color: var(--peach-t0);2245  background: rgba(240, 232, 216, 0.04);2246  border: 1px solid var(--peach-t3);2247  border-radius: 5px;2248  padding: 5px 8px;2249  line-height: 1.5;2250  outline: none;2251  transition: border-color 120ms ease;2252}22532254.peach-pwgen-compact-output:focus {2255  border-color: var(--peach-t1);2256}2257.peach-pwgen-compact-controls {2258  display: flex;2259  align-items: center;2260  gap: 6px;2261}2262.peach-pwgen-compact-slider {2263  flex: 1;2264  min-width: 0;2265  height: 2px !important;2266}2267.peach-pwgen-compact-controls .peach-pwgen-len-num {2268  flex-shrink: 0;2269  min-width: 18px;2270  text-align: right;2271}2272.peach-pwgen-compact-pills {2273  display: flex;2274  gap: 3px;2275  flex-shrink: 0;2276}2277.peach-pwgen-compact-pills .peach-pwgen-pill {2278  padding: 2px 7px;2279  font-size: 0.5rem;2280}2281.peach-pwgen-compact-use {2282  flex-shrink: 0;2283  font-size: 0.625rem !important;2284  padding: 3px 9px !important;2285  min-height: 22px !important;2286  border-radius: 5px !important;2287}22882289/* ── Password edit row (input + eye toggle side-by-side) ── */2290.peach-password-edit-row {2291  display: flex;2292  align-items: center;2293  gap: 6px;2294}2295.peach-password-edit-row .peach-inline-input {2296  flex: 1;2297  min-width: 0;2298}22992300/* ── Generate toggle link ── */2301.peach-generate-toggle-link {2302  display: inline-flex;2303  align-items: center;2304  gap: 5px;2305  background: none;2306  border: none;2307  padding: 0;2308  cursor: pointer;2309  font-family: "IBM Plex Mono", monospace;2310  font-size: 0.625rem;2311  color: var(--peach-t2);2312  letter-spacing: 0.04em;2313  transition: color 120ms ease;2314  align-self: flex-start;2315}2316.peach-generate-toggle-link:hover {2317  color: var(--peach-accent);2318}23192320/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2321.peach-entry-body {2322  flex: 1;2323  overflow-y: auto;2324  overflow-x: hidden;2325  scrollbar-width: none;2326  -ms-overflow-style: none;2327  overscroll-behavior: contain;2328  display: grid;2329  gap: 10px;2330  align-content: start;2331  padding: 10px 20px 14px;2332  min-width: 0;2333  min-height: 0;2334}2335.peach-entry-body::-webkit-scrollbar { display: none; }23362337/* Type-toggle pills + inline note toolbar */2338.peach-new-type-row {2339  display: flex;2340  align-items: center;2341  gap: 6px;2342  margin-bottom: 2px;2343}2344.peach-new-type-btn {2345  background: transparent;2346  border: 1px solid var(--peach-t3);2347  border-radius: 12px;2348  padding: 3px 10px;2349  font-family: "IBM Plex Mono", monospace;2350  font-size: 0.5625rem;2351  letter-spacing: 0.12em;2352  text-transform: uppercase;2353  color: var(--peach-t2);2354  cursor: pointer;2355  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2356}2357.peach-new-type-btn.is-active {2358  color: var(--peach-t0);2359  border-color: var(--peach-accent);2360  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2361}2362.peach-new-type-btn:not(.is-active):hover {2363  color: var(--peach-t1);2364  border-color: var(--peach-t2);2365}23662367/* Editable title */2368.peach-new-title-wrap { margin: 0 0 2px; }2369.peach-new-title-input {2370  background: transparent;2371  border: none;2372  outline: none;2373  width: 100%;2374  color: var(--peach-t0);2375  font-family: var(--font-display);2376  font-style: italic;2377  font-weight: 400;2378  font-size: 40px;2379  line-height: 0.95;2380  caret-color: var(--peach-accent);2381}2382.peach-new-title-input::placeholder { color: var(--peach-t2); }23832384/* Editable domain field */2385.peach-domain-edit-row {2386  display: flex;2387  align-items: center;2388  gap: 6px;2389}23902391.peach-domain-edit-row .peach-domain-value--edit {2392  flex: 1;2393  width: 0;2394}23952396.peach-domain-url-btn {2397  flex-shrink: 0;2398  background: transparent;2399  border: none;2400  cursor: pointer;2401  color: var(--peach-t3);2402  padding: 2px 3px;2403  display: flex;2404  align-items: center;2405  line-height: 0;2406  border-radius: 3px;2407  transition: color 120ms ease;2408}24092410.peach-domain-url-btn:hover {2411  color: var(--peach-accent);2412}24132414.peach-domain-value--edit {2415  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2416  font-size: 0.625rem;2417  font-style: italic;2418  letter-spacing: 0.12em;2419  color: var(--peach-t1);2420  background: transparent;2421  border: none;2422  border-bottom: 1px solid var(--peach-t3);2423  outline: none;2424  width: 100%;2425  padding: 2px 0;2426  caret-color: var(--peach-accent);2427  transition: border-color 140ms ease, color 140ms ease;2428}2429.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2430.peach-domain-value--edit:focus {2431  border-bottom-color: rgba(240, 232, 216, 0.28);2432  color: var(--peach-t0);2433}24342435/* Editable field values (username, password, totp) */2436.peach-field-value--edit {2437  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2438  font-size: 0.8125rem;2439  color: var(--peach-t0);2440  background: transparent;2441  border: none;2442  border-bottom: 1px solid var(--peach-t3);2443  outline: none;2444  flex: 1;2445  min-width: 0;2446  padding: 3px 0;2447  caret-color: var(--peach-accent);2448  transition: border-color 140ms ease, color 140ms ease;2449}2450.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2451.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2452.peach-field-value--edit:focus {2453  border-bottom-color: rgba(240, 232, 216, 0.28);2454  color: var(--peach-t0);2455}24562457/* "+ add optional field" links */2458.peach-entry-add-links {2459  display: flex;2460  gap: 12px;2461  flex-wrap: wrap;2462  margin-top: -2px;2463}2464.peach-add-field-link {2465  background: transparent;2466  border: none;2467  padding: 0;2468  cursor: pointer;2469  font-family: "IBM Plex Mono", monospace;2470  font-size: 0.5625rem;2471  letter-spacing: 0.1em;2472  text-transform: uppercase;2473  color: var(--peach-t2);2474  transition: color 140ms ease;2475}2476.peach-add-field-link:hover { color: var(--peach-accent); }24772478/* ── New entry form (legacy classes) ────────────────────────────────── */2479.peach-new-body {2480  flex: 1;2481  overflow-y: auto;2482  padding: 10px 20px 14px;2483}2484.peach-new-name-input {2485  background: transparent;2486  border: none;2487  outline: none;2488  width: 100%;2489  color: var(--peach-t0);2490  font-family: var(--font-display);2491  font-style: italic;2492  font-weight: 400;2493  font-size: 40px;2494  line-height: 0.95;2495  caret-color: var(--peach-accent);2496}2497.peach-new-name-input::placeholder { color: var(--peach-t2); }2498.peach-new-field-input {2499  background: transparent;2500  border: none;2501  outline: none;2502  flex: 1;2503  min-width: 0;2504  caret-color: var(--peach-accent);2505}2506.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }25072508/* ── Canary card ── */2509.peach-canary-card {2510  border: 1px solid rgba(217, 160, 48, 0.2);2511  background: rgba(217, 160, 48, 0.03);2512  border-radius: 8px;2513  padding: 12px;2514}25152516.peach-canary-settings-header {2517  display: flex;2518  align-items: center;2519  justify-content: space-between;2520  cursor: pointer;2521  user-select: none;2522}25232524.peach-canary-card .peach-label {2525  color: rgba(217, 160, 48, 0.85);2526}25272528.peach-canary-card .peach-new-field-input {2529  border-color: rgba(217, 160, 48, 0.25);2530}25312532.peach-canary-card .peach-new-field-input:focus {2533  border-color: rgba(217, 160, 48, 0.5);2534}25352536.peach-canary-body {2537  margin-top: 12px;2538  display: flex;2539  flex-direction: column;2540  gap: 10px;2541}25422543.peach-canary-explainer {2544  display: flex;2545  gap: 10px;2546  padding: 10px 12px;2547  border-radius: 10px;2548  background: rgba(217, 160, 48, 0.06);2549  border: 1px solid rgba(217, 160, 48, 0.22);2550  margin-bottom: 4px;2551}25522553.peach-canary-explainer-icon {2554  font-size: 1rem;2555  flex-shrink: 0;2556  line-height: 1.2;2557}25582559.peach-canary-explainer-title {2560  font-family: var(--font-ui);2561  font-size: 0.6875rem;2562  font-weight: 500;2563  color: rgba(217, 160, 48, 0.9);2564  margin: 0 0 3px;2565}25662567.peach-canary-explainer-copy {2568  font-family: var(--font-ui);2569  font-size: 0.625rem;2570  color: var(--peach-t2);2571  line-height: 1.55;2572  margin: 0;2573}25742575.peach-canary-hint {2576  font-size: 0.625rem;2577  color: var(--peach-t2);2578  font-family: Inter, system-ui, sans-serif;2579  line-height: 1.5;2580  margin-top: 4px;2581}25822583.peach-canary-actions-row {2584  display: flex;2585  align-items: center;2586  gap: 8px;2587}25882589.peach-canary-test-btn {2590  border-color: rgba(217, 160, 48, 0.3);2591  color: rgba(217, 160, 48, 0.85);2592}25932594.peach-canary-test-result {2595  font-size: 0.625rem;2596  font-family: Inter, system-ui, sans-serif;2597}25982599.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2600.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }26012602.peach-canary-badge {2603  display: flex;2604  position: relative;2605  z-index: 1;2606  align-items: center;2607  gap: 5px;2608  padding: 4px 10px;2609  background: rgba(217, 160, 48, 0.12);2610  border: 1px solid rgba(217, 160, 48, 0.35);2611  border-radius: 6px;2612  margin-bottom: 6px;2613  width: fit-content;2614}26152616.peach-canary-badge-label {2617  font-size: 0.625rem;2618  letter-spacing: 0.06em;2619  color: rgba(217, 160, 48, 0.9);2620  font-family: var(--font-ui);2621  text-transform: uppercase;2622}26232624.peach-canary-badge-icon {2625  font-size: 0.6875rem;2626}26272628.peach-canary-suppress-row {2629  display: flex;2630  align-items: center;2631  gap: 8px;2632  padding: 6px 10px;2633  background: rgba(217, 160, 48, 0.08);2634  border-radius: 6px;2635  margin-bottom: 8px;2636}26372638.peach-canary-suppress-label {2639  font-size: 0.6875rem;2640  color: rgba(217, 160, 48, 0.85);2641  cursor: pointer;2642  font-family: var(--font-ui);2643  letter-spacing: 0.04em;2644}26452646.peach-regen-panel {2647  position: relative;2648  z-index: 1;2649  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2650  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2651  border-radius: 8px;2652  padding: 12px;2653  margin-bottom: 8px;2654}26552656.peach-regen-panel-header {2657  display: flex;2658  align-items: center;2659  justify-content: space-between;2660  margin-bottom: 10px;2661}26622663.peach-regen-panel-title {2664  font-size: 0.6875rem;2665  font-weight: 600;2666  letter-spacing: 0.06em;2667  text-transform: uppercase;2668  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2669}26702671.peach-regen-output {2672  background: rgba(0, 0, 0, 0.2);2673  border-radius: 6px;2674  padding: 10px;2675  margin-bottom: 10px;2676  font-family: var(--font-mono);2677  font-size: 0.8125rem;2678  word-break: break-all;2679  color: var(--peach-t1);2680}26812682.peach-regen-actions {2683  display: flex;2684  gap: 6px;2685}26862687.peach-regen-actions--spaced {2688  margin-bottom: 8px;2689}26902691.peach-regen-action-grow {2692  flex: 1;2693}26942695.peach-regen-copy-btn {2696  padding: 0 8px;2697}26982699.peach-regen-success {2700  position: relative;2701  z-index: 1;2702  background: rgba(40, 180, 80, 0.1);2703  border: 1px solid rgba(40, 180, 80, 0.3);2704  border-radius: 8px;2705  padding: 10px 12px;2706  margin-bottom: 8px;2707  display: flex;2708  align-items: center;2709  gap: 8px;2710  font-size: 0.6875rem;2711  color: rgba(40, 180, 80, 0.9);2712}27132714/* ── Note editor overlay ── */2715.peach-note-editor {2716  position: absolute;2717  inset: 0;2718  z-index: 200;2719  display: flex;2720  flex-direction: column;2721  background:2722    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2723    var(--peach-bg);2724  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2725}27262727.peach-note-editor-header {2728  display: flex;2729  align-items: center;2730  gap: 10px;2731  padding: 14px 16px 10px;2732  border-bottom: 1px solid var(--peach-t3);2733  flex-shrink: 0;2734}27352736.peach-note-editor-back {2737  background: transparent;2738  border: none;2739  cursor: pointer;2740  color: var(--peach-t2);2741  padding: 4px 6px;2742  border-radius: 6px;2743  display: flex;2744  align-items: center;2745  transition: color 120ms ease, background 120ms ease;2746  flex-shrink: 0;2747}2748.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }27492750.peach-note-editor-label {2751  flex: 1;2752  font-family: var(--font-display);2753  font-style: italic;2754  font-size: 0.9375rem;2755  color: var(--peach-t1);2756  letter-spacing: 0.02em;2757}27582759.peach-note-editor-save-btn {2760  background: transparent;2761  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2762  border-radius: 8px;2763  color: var(--peach-accent);2764  font-family: "IBM Plex Mono", monospace;2765  font-size: 0.625rem;2766  letter-spacing: 0.06em;2767  text-transform: uppercase;2768  padding: 3px 10px;2769  cursor: pointer;2770  transition: background 120ms ease, border-color 120ms ease;2771}2772.peach-note-editor-save-btn:hover:not(:disabled) {2773  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2774  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2775}2776.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }27772778.peach-note-toolbar {2779  display: flex;2780  align-items: center;2781  gap: 3px;2782  padding: 6px 14px 5px;2783  border-bottom: 1px solid var(--peach-t3);2784  flex-shrink: 0;2785}27862787.peach-note-tool-btn {2788  background: transparent;2789  border: 1px solid transparent;2790  border-radius: 5px;2791  color: var(--peach-t2);2792  font-family: "IBM Plex Mono", monospace;2793  font-size: 0.625rem;2794  letter-spacing: 0.04em;2795  padding: 2px 8px;2796  cursor: pointer;2797  line-height: 1.6;2798  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2799}2800.peach-note-tool-btn:hover {2801  background: var(--peach-t4);2802  color: var(--peach-t0);2803  border-color: var(--peach-t3);2804}28052806.peach-note-tool-icon {2807  padding: 3px 7px;2808  display: inline-flex;2809  align-items: center;2810  justify-content: center;2811}28122813.peach-note-tool-divider {2814  width: 1px;2815  height: 14px;2816  background: var(--peach-t3);2817  margin: 0 4px;2818  flex-shrink: 0;2819}28202821.peach-note-editor-body {2822  flex: 1;2823  overflow-y: auto;2824  padding: 16px 20px 20px;2825  outline: none;2826  font-family: var(--font-display);2827  font-size: 1rem;2828  line-height: 1.75;2829  color: var(--peach-t0);2830  scrollbar-width: none;2831  word-break: break-word;2832}2833.peach-note-editor-body:empty::before {2834  content: "write your note…";2835  color: var(--peach-t3);2836  font-style: italic;2837  pointer-events: none;2838}28392840/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2841.peach-note-editor-inline {2842  display: flex;2843  flex-direction: column;2844  flex: 1;2845  min-height: 0;2846}2847.peach-note-editor-body--inline {2848  flex: 1;2849  min-height: 0;2850  font-size: 0.9375rem;2851  padding: 10px 20px 14px;2852}28532854/* Full-width toolbar row inside the body (Add.tsx note type).2855   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2856.peach-note-toolbar-body {2857  display: flex;2858  align-items: center;2859  gap: 3px;2860  padding: 5px 20px 4px;2861  margin: 2px -20px 0;2862  border-bottom: 1px solid var(--peach-t3);2863  flex-shrink: 0;2864}28652866/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2867   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2868   and .peach-note-tool-divider button-level styles. */2869.peach-note-toolbar-inline {2870  display: flex;2871  align-items: center;2872  gap: 3px;2873  margin-left: auto;2874  padding-left: 10px;2875  border-left: 1px solid var(--peach-t3);2876  min-height: 22px;2877}28782879/* Entry.tsx toolbar row (no tabs, toolbar only) */2880.peach-entry-note-toolbar-row {2881  display: flex;2882  align-items: center;2883  margin: 4px 0 6px;2884  position: relative;2885  z-index: 1;2886}2887.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2888  border-left: none;2889  padding-left: 0;2890  margin-left: 0;2891}28922893/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2894.peach-note-body {2895  display: flex;2896  flex-direction: column;2897  flex: 1;2898  min-height: 0;2899  margin: 4px 0 0;2900}2901.peach-entry-body--new .peach-note-body {2902  margin: 8px -20px 0;2903}29042905/* Add.tsx body is a grid by default; swap to a flex column when a note is2906   active so the note body can stretch and pin the tags row to the bottom. */2907.peach-entry-body--new:has(.peach-note-body) {2908  display: flex;2909  flex-direction: column;2910}29112912/* Rich content element styles (editor + display) */2913.peach-note-editor-body h2,2914.peach-note-content h2 {2915  font-family: var(--font-display);2916  font-size: 20px;2917  font-weight: 600;2918  font-style: italic;2919  color: var(--peach-t0);2920  margin: 6px 0 2px;2921  line-height: 1.3;2922}2923.peach-note-editor-body ul,2924.peach-note-content ul {2925  padding-left: 18px;2926  margin: 3px 0;2927  list-style: disc;2928}2929.peach-note-editor-body ol,2930.peach-note-content ol {2931  padding-left: 18px;2932  margin: 3px 0;2933  list-style: decimal;2934}2935.peach-note-editor-body li,2936.peach-note-content li { margin: 2px 0; }2937.peach-note-editor-body hr,2938.peach-note-content hr {2939  border: none;2940  border-top: 1px solid var(--peach-t3);2941  margin: 10px 0;2942}29432944/* font size elements from execCommand */2945.peach-note-editor-body font[size="1"],2946.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }2947.peach-note-editor-body font[size="2"],2948.peach-note-content font[size="2"] { font-size: 0.8125rem; }2949.peach-note-editor-body font[size="3"],2950.peach-note-content font[size="3"] { font-size: 1rem; }2951.peach-note-editor-body font[size="4"],2952.peach-note-content font[size="4"] { font-size: 20px; }2953.peach-note-editor-body font[size="5"],2954.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }29552956/* bold / italic inside the editor and note display */2957.peach-note-editor-body b, .peach-note-editor-body strong,2958.peach-note-content b, .peach-note-content strong { font-weight: 700; }2959.peach-note-editor-body em, .peach-note-editor-body i,2960.peach-note-content em, .peach-note-content i { font-style: italic; }29612962/* note display — rendered HTML, no pre-wrap */2963.peach-note-content {2964  overflow: auto;2965  max-height: 340px;2966  word-break: break-word;2967}29682969/* ── Note textarea ── */2970.peach-note-textarea {2971  width: 100%;2972  min-height: 180px;2973  max-height: 280px;2974  resize: vertical;2975  background: var(--peach-t4);2976  border: 1px solid var(--peach-t3);2977  border-radius: 8px;2978  padding: 10px 12px;2979  font-family: "IBM Plex Mono", monospace;2980  font-size: 0.75rem;2981  line-height: 1.7;2982  color: var(--peach-t1);2983  outline: none;2984  transition: border-color 150ms ease;2985}29862987.peach-note-textarea:focus {2988  border-color: var(--peach-t2);2989}29902991.peach-note-char-count {2992  font-family: "IBM Plex Mono", monospace;2993  font-size: 0.5625rem;2994  color: var(--peach-t3);2995  text-align: right;2996  margin-top: 4px;2997  letter-spacing: 0.1em;2998}29993000/* ── Field input baseline ── */3001.peach-new-field-input {3002  width: 100%;3003  background: transparent;3004  border: none;3005  border-bottom: 1px solid var(--peach-t3);3006  padding: 4px 0;3007  color: var(--peach-t1);3008  font-family: "IBM Plex Mono", monospace;3009  font-size: 0.8125rem;3010  outline: none;3011  transition: border-color 150ms ease;3012}30133014.peach-new-field-input:focus {3015  border-bottom-color: var(--peach-t0);3016  color: var(--peach-t0);3017}30183019.peach-new-name-input {3020  width: 100%;3021  background: transparent;3022  border: none;3023  border-bottom: 1px solid var(--peach-t3);3024  padding: 6px 0;3025  font-family: var(--font-display);3026  font-style: italic;3027  font-size: 28px;3028  color: var(--peach-t0);3029  outline: none;3030  transition: border-color 150ms ease;3031}30323033.peach-new-name-input:focus {3034  border-bottom-color: var(--peach-t1);3035}30363037.peach-new-name-input::placeholder {3038  color: var(--peach-t2);3039  font-style: italic;3040}30413042.peach-new-field-input::placeholder {3043  color: var(--peach-t3);3044}30453046/* ── Demo entrance animation ── */3047#hd-shell {3048  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3049}3050@keyframes hd-shell-enter {3051  from { opacity: 0; transform: scale(0.96) translateY(16px); }3052  to   { opacity: 1; transform: scale(1) translateY(0); }3053}30543055/* ── Keyframes ── */3056@keyframes peach-char-enter {3057  from { opacity: 0; transform: translateY(0.22em); }3058  to   { opacity: 1; transform: translateY(0); }3059}3060@keyframes peach-content-enter {3061  from { opacity: 0.96; transform: translateY(4px); }3062  to   { opacity: 1; transform: translateY(0); }3063}3064@keyframes peach-content-exit {3065  from { opacity: 1; transform: translateY(0); }3066  to   { opacity: 0.92; transform: translateY(-3px); }3067}3068@keyframes peach-screen-enter {3069  from { opacity: 0; transform: translateY(14px); }3070  to   { opacity: 1; transform: translateY(0); }3071}3072@keyframes peach-shell-fade-in {3073  from { opacity: 0; }3074  to   { opacity: 1; }3075}3076@keyframes peach-veil-in {3077  from { opacity: 0; }3078  to   { opacity: 1; }3079}3080@keyframes peach-lock-settle {3081  0%   { transform: scale(0.9); }3082  65%  { transform: scale(1.08); }3083  100% { transform: scale(1); }3084}3085@keyframes peach-copy-confirm {3086  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3087  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); }3088}3089@keyframes peach-copy-retreat {3090  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); }3091  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3092}3093@keyframes peach-copy-flood {3094  from { opacity: 0; transform: scaleX(0.15); }3095  to   { opacity: 1; transform: scaleX(1); }3096}3097@keyframes peach-copy-icon-settle {3098  from  { transform: scale(0.84); }3099  70%   { transform: scale(1.08); }3100  to    { transform: scale(1); }3101}3102@keyframes peach-copy-sheen-retreat {3103  from { opacity: 1; transform: scaleX(1); }3104  to   { opacity: 0; transform: scaleX(0.15); }3105}3106@keyframes peach-copy-drain {3107  from { width: 100%; }3108  to   { width: 0; }3109}3110@keyframes peach-shake {3111  0%, 100% { transform: translateX(0); }3112  20%      { transform: translateX(-6px); }3113  40%      { transform: translateX(6px); }3114  60%      { transform: translateX(-4px); }3115  80%      { transform: translateX(4px); }3116}31173118@keyframes pip-pulse {3119  0% { transform: scale(1); }3120  40% { transform: scale(2.2); }3121  100% { transform: scale(1); }3122}312331243125/* ── Password generator ── */3126.peach-pwgen-body {3127  flex: 1; overflow-y: auto;3128  display: flex; flex-direction: column;3129}3130.peach-policy-badge {3131  display: flex; align-items: center;3132  padding: 6px 20px 0;3133  font-size: 0.625rem; font-family: Inter, sans-serif;3134  color: var(--peach-t2); letter-spacing: 0.04em;3135}3136.peach-pwgen-display {3137  padding: 14px 20px 12px;3138  border-bottom: 1px solid var(--peach-t3);3139  display: flex; align-items: flex-start; gap: 10px;3140}3141.peach-pwgen-display-row {3142  display: flex;3143  align-items: flex-start;3144  gap: 8px;3145  padding-bottom: 8px;3146  border-bottom: 1px solid var(--peach-t3);3147}3148.peach-pwgen-output {3149  flex: 1; min-width: 0; margin: 0;3150  font-family: "IBM Plex Mono", monospace;3151  font-size: 0.8125rem; color: var(--peach-t0);3152  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3153  white-space: normal;3154  padding: 10px 12px;3155  background: var(--peach-t4);3156  border-radius: 6px;3157  min-height: 36px;3158}3159.peach-pwgen-output-display {3160  flex: 1;3161  min-width: 0;3162  margin: 0;3163  font-family: var(--font-display);3164  font-style: italic;3165  font-weight: 300;3166  font-size: 32px;3167  line-height: 1.05;3168  color: var(--peach-t0);3169  word-break: break-all;3170  overflow-wrap: break-word;3171  white-space: normal;3172  letter-spacing: 0.02em;3173}3174.peach-pwgen-display-actions {3175  display: flex;3176  flex-direction: column;3177  gap: 4px;3178  flex-shrink: 0;3179  margin-top: 2px;3180}3181.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3182.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3183.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3184.peach-pwgen-len-num {3185  font-family: "IBM Plex Mono", monospace;3186  font-size: 0.75rem; color: var(--peach-accent);3187}3188.peach-pwgen-len-num--edit {3189  cursor: text;3190  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3191}3192.peach-pwgen-len-input {3193  font-family: "IBM Plex Mono", monospace;3194  font-size: 0.75rem;3195  color: var(--peach-accent);3196  background: transparent;3197  border: none;3198  border-bottom: 1px solid var(--peach-accent);3199  outline: none;3200  width: 32px;3201  text-align: right;3202  padding: 0;3203}3204.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3205.peach-pwgen-toggles { display: flex; flex-direction: column; }3206.peach-pwgen-charset-pills {3207  display: flex;3208  gap: 6px;3209  flex-wrap: wrap;3210}3211.peach-pwgen-pill {3212  padding: 4px 11px;3213  border-radius: 999px;3214  border: 1px solid var(--peach-t3);3215  background: transparent;3216  color: var(--peach-t2);3217  font-family: "IBM Plex Mono", monospace;3218  font-size: 0.5625rem;3219  letter-spacing: 0.08em;3220  cursor: pointer;3221  transition: all 150ms ease;3222}3223.peach-pwgen-pill.is-on {3224  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3225  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3226  color: var(--peach-accent);3227}3228.peach-pwgen-pill:not(.is-on):hover {3229  color: var(--peach-t1);3230  border-color: var(--peach-t2);3231}3232.peach-pwgen-use-btn {3233  width: 100%;3234  min-height: 34px;3235  border-radius: 8px;3236  margin-top: 2px;3237}3238.peach-generator-constraint-note {3239  font-family: 'IBM Plex Mono', monospace;3240  font-size: 10px;3241  color: var(--peach-t3);3242  letter-spacing: 0.04em;3243  margin: 0;3244  transition: opacity 200ms ease;3245}3246.peach-pwgen-toggle-row {3247  display: flex; align-items: center; justify-content: space-between;3248  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3249}3250.peach-pwgen-toggle-row:last-child { border-bottom: none; }3251.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }32523253.peach-screen-prelock {3254  z-index: 10;3255}32563257.prelock-form {3258  display: grid;3259  gap: 12px;3260}32613262/* Peach popup should not expose native scrollbars on internal panels. */3263.peach-settings-body,3264.peach-new-body,3265.peach-pwgen-body,3266.lock-screen,3267.peach-import-preview {3268  scrollbar-width: none;3269  -ms-overflow-style: none;3270  overscroll-behavior: contain;3271}3272.peach-settings-body::-webkit-scrollbar,3273.peach-new-body::-webkit-scrollbar,3274.peach-pwgen-body::-webkit-scrollbar,3275.lock-screen::-webkit-scrollbar,3276.peach-import-preview::-webkit-scrollbar {3277  width: 0;3278  height: 0;3279  display: none;3280}32813282.lock-screen {3283  height: 100%;3284  min-height: 100%;3285  overflow-y: auto;3286  padding: 18px 18px 16px;3287  gap: 14px;3288  grid-template-rows: auto auto auto 1fr auto;3289  align-content: stretch;3290  position: relative;3291  isolation: isolate;3292}3293.peach-screen.lock-screen--vault-stage {3294  display: flex;3295  flex-direction: column;3296  justify-content: flex-start;3297  gap: 18px;3298  padding: 20px 18px 18px;3299  overflow: hidden;3300}3301.peach-screen.lock-screen--vault-stage .peach-lock-panel {3302  margin-top: 0;3303}3304.lock-screen--onboarding {3305  display: flex;3306  flex-direction: column;3307  gap: 12px;3308  justify-content: flex-start;3309}33103311.lock-screen::before {3312  content: "";3313  position: absolute;3314  inset: 12px 18px auto auto;3315  width: 160px;3316  height: 160px;3317  border-radius: 999px;3318  background:3319    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%);3320  filter: blur(6px);3321  opacity: 0.7;3322  pointer-events: none;3323  z-index: 0;3324}33253326.peach-lock-rune-string {3327  flex: 1;3328  display: flex;3329  align-items: center;3330  justify-content: center;3331  gap: 6px;3332  font-family: PeachScript, monospace;3333  font-size: 0.8125rem;3334  letter-spacing: 0.05em;3335  pointer-events: none;3336  user-select: none;3337  position: relative;3338  z-index: 1;3339}33403341.peach-lock-rune-string span {3342  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3343  text-shadow:3344    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3345    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3346  transition: color 0.9s ease, text-shadow 0.9s ease;3347}33483349.peach-lock-rune-string span.is-glowing {3350  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3351  text-shadow:3352    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3353    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3354}33553356.lock-screen-header {3357  display: flex;3358  align-items: center;3359  justify-content: space-between;3360  position: relative;3361  z-index: 1;3362}33633364.lock-password-input.shake {3365  animation: peach-shake 300ms ease-in-out;3366}33673368.peach-hint-error {3369  color: rgba(220, 80, 60, 0.92);3370}33713372.peach-onboarding-headline {3373  margin: 0;3374  font-family: var(--font-display);3375  font-size: 35px;3376  line-height: 0.88;3377  font-style: italic;3378  font-weight: 400;3379  max-width: 252px;3380}33813382.peach-lock-copy {3383  display: grid;3384  gap: 8px;3385  position: relative;3386  z-index: 1;3387}33883389.peach-lock-copy--onboarding {3390  gap: 10px;3391}33923393.peach-lock-hero {3394  position: relative;3395  z-index: 1;3396  display: grid;3397  gap: 8px;3398  min-height: 0;3399  padding: 4px 2px 0;3400  border: none;3401  border-radius: 0;3402  background: transparent;3403  box-shadow: none;3404}3405.peach-lock-hero-art {3406  position: absolute;3407  right: -8px;3408  top: -6px;3409  width: 120px;3410  height: 120px;3411  display: flex;3412  align-items: center;3413  justify-content: center;3414  pointer-events: none;3415  opacity: 0.12;3416  filter: saturate(0.9);3417}3418.peach-lock-hero-mark {3419  width: 100%;3420  height: 100%;3421}3422/* Peach body stays brand-peach across every accent — we don't want a3423   green or blue peach when sage/sky is selected. Leaf + stem keep the3424   sage tint because a real peach has a sage leaf. */3425.peach-lock-hero-mark path:nth-child(2),3426.peach-lock-hero-mark path:nth-child(3) {3427  stroke: rgba(123, 144, 96, 0.88);3428  fill: rgba(123, 144, 96, 0.88);3429}3430.peach-lock-hero > *:not(.peach-lock-hero-art) {3431  position: relative;3432  z-index: 1;3433}34343435.peach-lock-eyebrow {3436  display: inline-flex;3437  align-items: center;3438  width: fit-content;3439  padding: 4px 9px;3440  border-radius: 999px;3441  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3442  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3443  color: var(--peach-t0);3444  font-family: "IBM Plex Mono", monospace;3445  font-size: 0.5rem;3446  letter-spacing: 0.18em;3447  text-transform: uppercase;3448}34493450.peach-lock-label-row {3451  display: flex;3452  align-items: center;3453  justify-content: space-between;3454  margin-bottom: 0;3455}34563457.peach-lock-reveal-btn {3458  display: inline-flex;3459  align-items: center;3460  gap: 4px;3461  background: none;3462  border: none;3463  cursor: pointer;3464  font-family: "IBM Plex Mono", monospace;3465  font-size: 0.5625rem;3466  letter-spacing: 0.06em;3467  color: var(--peach-t2);3468  padding: 2px 0;3469  transition: color 150ms ease;3470}34713472.peach-lock-reveal-btn:hover {3473  color: var(--peach-t1);3474}34753476.peach-lock-warning {3477  color: rgba(220, 80, 60, 0.85) !important;3478  line-height: 1.5;3479}34803481.peach-onboarding-cards {3482  display: grid;3483  gap: 8px;3484  position: relative;3485  z-index: 1;3486}34873488.peach-lock-panel {3489  position: relative;3490  z-index: 1;3491  display: grid;3492  gap: 9px;3493  padding: 14px 16px 15px;3494  border-radius: 18px;3495  border: 1px solid var(--peach-t3);3496  background:3497    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3498  box-shadow:3499    inset 0 1px 0 rgba(240, 232, 216, 0.04),3500    0 12px 28px rgba(0, 0, 0, 0.12);3501}35023503/* Glass surface — lock panel and settings groups */3504.peach-glass {3505  background: rgba(26, 20, 16, 0.65);3506  border: 1px solid rgba(255, 255, 255, 0.08);3507  border-radius: 12px;3508  backdrop-filter: blur(12px) saturate(1.4);3509  -webkit-backdrop-filter: blur(12px) saturate(1.4);3510}35113512@supports not (backdrop-filter: blur(1px)) {3513  .peach-glass {3514    background: rgba(26, 20, 16, 0.92);3515    border: 1px solid rgba(255, 255, 255, 0.10);3516    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3517  }3518}35193520.light .peach-glass,3521[data-theme="light"] .peach-glass {3522  background: rgba(253, 248, 244, 0.70);3523  border: 1px solid rgba(0, 0, 0, 0.07);3524  backdrop-filter: blur(12px) saturate(1.2);3525  -webkit-backdrop-filter: blur(12px) saturate(1.2);3526}35273528@supports not (backdrop-filter: blur(1px)) {3529  .light .peach-glass,3530  [data-theme="light"] .peach-glass {3531    background: rgba(253, 248, 244, 0.95);3532    border: 1px solid rgba(0, 0, 0, 0.09);3533  }3534}35353536/* Lock panel keeps its own border-radius over the generic glass token */3537.peach-lock-panel.peach-glass {3538  border-radius: 18px;3539  background: rgba(26, 20, 16, 0.65);3540  border: 1px solid rgba(255, 255, 255, 0.08);3541  box-shadow:3542    inset 0 1px 0 rgba(255, 255, 255, 0.05),3543    0 12px 28px rgba(0, 0, 0, 0.3);3544}35453546.light .peach-lock-panel.peach-glass,3547[data-theme="light"] .peach-lock-panel.peach-glass {3548  background: rgba(238, 227, 204, 0.75);3549  border: 1px solid rgba(34, 24, 9, 0.10);3550  box-shadow:3551    inset 0 1px 0 rgba(255, 255, 255, 0.5),3552    0 8px 24px rgba(80, 56, 32, 0.15);3553}35543555@supports not (backdrop-filter: blur(1px)) {3556  .peach-lock-panel.peach-glass {3557    background: rgba(26, 20, 16, 0.92);3558    box-shadow:3559      inset 0 1px 0 rgba(255, 255, 255, 0.05),3560      0 12px 28px rgba(0, 0, 0, 0.4);3561  }3562  .light .peach-lock-panel.peach-glass,3563  [data-theme="light"] .peach-lock-panel.peach-glass {3564    background: rgba(238, 227, 204, 0.96);3565  }3566}35673568.peach-lock-panel--secondary {3569  gap: 12px;3570}35713572.peach-lock-panel-header {3573  display: flex;3574  align-items: baseline;3575  justify-content: space-between;3576  gap: 12px;3577}35783579.peach-lock-option-grid {3580  display: grid;3581  gap: 10px;3582}35833584.peach-lock-option {3585  width: 100%;3586  display: grid;3587  gap: 6px;3588  padding: 14px 15px;3589  border-radius: 16px;3590  border: 1px solid rgba(240, 232, 216, 0.08);3591  background: rgba(240, 232, 216, 0.02);3592  color: var(--peach-t0);3593  text-align: left;3594  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3595}35963597.peach-lock-option:hover {3598  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3599  background: rgba(240, 232, 216, 0.04);3600  transform: translateY(-1px);3601}36023603.peach-lock-option-title {3604  font-size: 0.75rem;3605  color: var(--peach-t0);3606}36073608.peach-lock-option-copy {3609  font-size: 0.6875rem;3610  line-height: 1.55;3611  color: var(--peach-t1);3612}36133614.peach-onboarding-stack {3615  margin-top: 2px;3616}3617.peach-lock-panel-footer {3618  display: grid;3619  gap: 6px;3620  margin-top: 2px;3621  padding-top: 10px;3622  border-top: 1px solid rgba(240, 232, 216, 0.06);3623}36243625/* ── Restore tab view ─────────────────────────────────────────────────────3626   Tab-based restore screen replacing the old three-card picker. */36273628.peach-restore-tabview {3629  overflow: hidden;3630}36313632.peach-restore-tabcard {3633  flex: 1;3634  display: flex;3635  flex-direction: column;3636  gap: 0;3637  padding: 0;3638  overflow: hidden;3639  cursor: default;3640  user-select: none;3641  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3642}36433644/* ── Tab selector ─────────────────────────────────────────────────────── */36453646.peach-restore-tabs {3647  display: flex;3648  justify-content: space-around;3649  padding: 14px 10px 10px;3650  border-bottom: 1px solid var(--peach-t3);3651  gap: 2px;3652  overflow: hidden;3653  scrollbar-width: none;3654}3655.peach-restore-tabs::-webkit-scrollbar { display: none; }36563657.peach-restore-tab {3658  background: none;3659  border: none;3660  cursor: pointer;3661  padding: 3px 2px;3662  font-family: 'Cormorant Garamond', Georgia, serif;3663  font-style: italic;3664  font-size: 11px;3665  color: var(--peach-t2);3666  transition: color 150ms ease, text-shadow 150ms ease;3667  flex: 1;3668  min-width: 0;3669  text-align: center;3670  white-space: nowrap;3671  overflow: hidden;3672  text-overflow: ellipsis;3673}3674.peach-restore-tab:hover {3675  color: var(--peach-accent);3676  text-shadow:3677    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3678    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3679}3680.peach-restore-tab.is-active {3681  color: var(--peach-accent);3682  text-shadow:3683    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3684    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3685}36863687/* ── Content area ─────────────────────────────────────────────────────── */36883689.peach-restore-content {3690  padding: 16px 16px 14px;3691  display: flex;3692  flex-direction: column;3693  gap: 8px;3694  overflow: hidden;3695  scrollbar-width: none;3696  flex: 1;3697}3698.peach-restore-content::-webkit-scrollbar { display: none; }3699.peach-restore-content > * {3700  overflow: hidden;3701  scrollbar-width: none;3702}3703.peach-restore-content > *::-webkit-scrollbar { display: none; }37043705/* ── Shared tab inner layout ──────────────────────────────────────────── */37063707.peach-rt-symbols,3708.peach-rt-csv,3709.peach-rt-phone {3710  display: flex;3711  flex-direction: column;3712  gap: 8px;3713  overflow: hidden;3714}37153716.peach-rt-submit {3717  width: 100%;3718}37193720.peach-rt-error {3721  margin: 0;3722  font-size: 0.6875rem;3723  color: var(--peach-breach);3724  line-height: 1.4;3725}37263727/* ── PeachScript tab ──────────────────────────────────────────────────── */37283729.peach-restore-symbols-textarea {3730  font-family: 'PeachScript', monospace;3731  font-size: 13px;3732  line-height: 1.9;3733  letter-spacing: 0.1em;3734  word-break: break-all;3735  resize: none;3736  width: 100%;3737  min-height: 56px;3738  max-height: 72px;3739  overflow: hidden;3740  scrollbar-width: none;3741  -ms-overflow-style: none;3742  box-sizing: border-box;3743  padding: 6px 8px;3744  border-radius: 8px;3745  border: 1px solid var(--peach-t3);3746  background: rgba(240, 232, 216, 0.03);3747  color: var(--peach-t0);3748}3749.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3750.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37513752.peach-restore-symbols-pass {3753  width: 100%;3754  box-sizing: border-box;3755  padding: 7px 10px;3756  border-radius: 8px;3757  border: 1px solid var(--peach-t3);3758  background: rgba(240, 232, 216, 0.03);3759  color: var(--peach-t0);3760  font-size: 0.8125rem;3761}3762.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3763.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }37643765.peach-rt-divider {3766  text-align: center;3767  font-size: 0.6875rem;3768  color: var(--peach-t2);3769  font-style: italic;3770}37713772.peach-rt-file-label {3773  width: 100%;3774  justify-content: center;3775}37763777.peach-rt-anim-canvas {3778  width: 100%;3779  height: 180px;3780  border-radius: 10px;3781  overflow: hidden;3782  display: block;3783}37843785/* ── CSV tab ──────────────────────────────────────────────────────────── */37863787.peach-rt-csv-sources {3788  margin: 0;3789  font-size: 0.6875rem;3790  color: var(--peach-t2);3791  line-height: 1.5;3792  text-align: center;3793}37943795.peach-rt-csv-warning {3796  margin: 0;3797  font-family: "IBM Plex Mono", monospace;3798  font-size: 0.5625rem;3799  letter-spacing: 0.12em;3800  color: var(--peach-breach);3801  text-align: center;3802}38033804/* ── From Phone tab ───────────────────────────────────────────────────── */38053806.peach-rt-phone-code {3807  margin: 0;3808  text-align: center;3809  font-family: "IBM Plex Mono", monospace;3810  font-size: 22px;3811  letter-spacing: 0.18em;3812  color: var(--peach-t0);3813}38143815.peach-rt-phone-qr {3816  display: block;3817  width: 96px;3818  height: 96px;3819  margin: 0 auto;3820  border-radius: 6px;3821  image-rendering: pixelated;3822  overflow: hidden;3823}38243825.peach-rt-phone-hint {3826  margin: 0;3827  font-size: 0.6875rem;3828  color: var(--peach-t2);3829  line-height: 1.55;3830  text-align: center;3831}38323833/* ── Intro popup ──────────────────────────────────────────────────────── */38343835.peach-restore-intro-overlay {3836  position: absolute;3837  inset: 0;3838  z-index: 100;3839  display: flex;3840  align-items: center;3841  justify-content: center;3842  padding: 20px;3843  background: rgba(12, 10, 6, 0.7);3844  backdrop-filter: blur(4px);3845  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3846}38473848.peach-restore-intro-card {3849  width: 100%;3850  display: flex;3851  flex-direction: column;3852  gap: 12px;3853  padding: 22px 20px 20px;3854  border-radius: 16px;3855  border: 1px solid var(--peach-t3);3856  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3857  backdrop-filter: blur(4px);3858  -webkit-backdrop-filter: blur(4px);3859  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3860}38613862.peach-restore-intro-headline {3863  margin: 0;3864  font-family: var(--font-display);3865  font-style: italic;3866  font-size: 20px;3867  font-weight: 400;3868  color: var(--peach-t0);3869}38703871.peach-restore-intro-body {3872  display: flex;3873  flex-direction: column;3874  gap: 8px;3875}3876.peach-restore-intro-body p {3877  margin: 0;3878  font-size: 0.75rem;3879  color: var(--peach-t1);3880  line-height: 1.5;3881}38823883.peach-restore-intro-btn {3884  width: 100%;3885  margin-top: 4px;3886}38873888/* Snapshot restore panel */3889.peach-snapshot-panel {3890  gap: 10px;3891  overflow-y: auto;3892  max-height: 340px;3893}3894.peach-snapshot-list {3895  display: flex;3896  flex-direction: column;3897  gap: 4px;3898}3899.peach-snapshot-row {3900  display: flex;3901  align-items: center;3902  justify-content: space-between;3903  width: 100%;3904  padding: 8px 10px;3905  border-radius: 8px;3906  border: 1px solid rgba(240, 232, 216, 0.07);3907  background: transparent;3908  cursor: pointer;3909  transition: border-color 120ms, background 120ms;3910  text-align: left;3911  gap: 8px;3912}3913.peach-snapshot-row:hover {3914  border-color: rgba(240, 232, 216, 0.14);3915  background: rgba(240, 232, 216, 0.03);3916}3917.peach-snapshot-row.is-selected {3918  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3919  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3920}3921.peach-snapshot-time {3922  font-size: 11.5px;3923  color: var(--peach-t0);3924  flex: 1;3925}3926.peach-snapshot-count {3927  font-family: "IBM Plex Mono", monospace;3928  font-size: 0.625rem;3929  color: var(--peach-t2);3930  flex-shrink: 0;3931}3932.peach-snapshot-confirm {3933  display: flex;3934  flex-direction: column;3935  gap: 8px;3936  padding-top: 10px;3937  border-top: 1px solid rgba(240, 232, 216, 0.06);3938}3939.peach-snapshot-warning {3940  display: flex;3941  align-items: flex-start;3942  gap: 6px;3943  font-size: 10.5px;3944  color: rgba(220, 80, 60, 0.85);3945  line-height: 1.55;3946}3947.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3948.peach-snapshot-confirm-row {3949  display: flex;3950  gap: 6px;3951  align-items: center;3952}3953.peach-snapshot-restore-btn {3954  width: 100%;3955}3956.peach-lock-hero--unlock .peach-lock-hero-art {3957  width: 112px;3958  height: 112px;3959  right: 0;3960  top: 2px;3961  opacity: 0.1;3962}39633964.peach-card {3965  border: 1px solid var(--peach-t3);3966  border-radius: 18px;3967  background:3968    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3969  box-shadow:3970    inset 0 0 0 1px var(--peach-border-accent),3971    inset 0 1px 0 rgba(240, 232, 216, 0.04),3972    0 12px 32px rgba(0, 0, 0, 0.14);3973  overflow: hidden;3974}39753976.peach-card-active {3977  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3978  box-shadow:3979    inset 0 1px 0 rgba(240, 232, 216, 0.05),3980    0 16px 38px rgba(0, 0, 0, 0.18),3981    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);3982}39833984.peach-card-disabled {3985  opacity: 0.72;3986}39873988.peach-card-header {3989  width: 100%;3990  padding: 13px 16px 11px;3991  background: transparent;3992  color: var(--peach-t0);3993  display: flex;3994  justify-content: space-between;3995  align-items: center;3996  text-align: left;3997  font-size: 0.75rem;3998}39994000.peach-card-body {4001  padding: 0 16px 16px;4002  display: grid;4003  gap: 9px;4004}40054006.peach-card-tag {4007  color: var(--peach-t2);4008  font-family: "IBM Plex Mono", monospace;4009  font-size: 0.5625rem;4010  letter-spacing: 0.12em;4011  text-transform: uppercase;4012}40134014.peach-empty-copy {4015  display: grid;4016  gap: 6px;4017  color: var(--peach-t1);4018  font-size: 0.8125rem;4019}40204021.peach-lock-submit {4022  width: 100%;4023  box-shadow:4024    0 1px 0 rgba(255,255,255,0.10) inset,4025    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4026    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4027    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4028}40294030.peach-lock-secondary {4031  width: 100%;4032  border-color: var(--peach-t3);4033  background: rgba(240, 232, 216, 0.02);4034}40354036.peach-lock-secondary:hover {4037  background: rgba(240, 232, 216, 0.04);4038}40394040.peach-lock-note {4041  max-width: none;4042  line-height: 1.55;4043  margin: 0;4044}40454046.peach-overlay-action {4047  font-size: 0.625rem;4048  padding: 4px 8px;4049  letter-spacing: 0.06em;4050  min-width: 44px;4051  text-align: center;4052}40534054.peach-overlay-spacer {4055  width: 32px;4056}40574058.peach-inline-action {4059  flex-shrink: 0;4060  font-size: 0.5625rem;4061  letter-spacing: 0.1em;4062  text-transform: uppercase;4063  padding: 4px 7px;4064}4065.peach-password-toggle-btn {4066  display: inline-flex;4067  align-items: center;4068  justify-content: center;4069  min-width: 30px;4070  min-height: 26px;4071  padding: 0 7px;4072  border: 1px solid var(--peach-t3);4073  border-radius: 999px;4074  background: rgba(240, 232, 216, 0.04);4075  color: var(--peach-t2);4076  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4077}4078.peach-password-toggle-btn:hover {4079  border-color: var(--peach-t2);4080  color: var(--peach-t0);4081  background: rgba(240, 232, 216, 0.06);4082}40834084.peach-new-textarea {4085  width: 100%;4086  min-height: 88px;4087  resize: vertical;4088  border: 0;4089  outline: none;4090  background: transparent;4091  color: var(--peach-t1);4092  font-family: "IBM Plex Mono", monospace;4093  font-size: 0.75rem;4094  line-height: 1.65;4095  caret-color: var(--peach-accent);4096}40974098.peach-new-textarea::placeholder {4099  color: var(--peach-t2);4100  opacity: 0.7;4101}41024103.peach-settings-actions {4104  display: grid;4105  gap: 8px;4106}41074108.peach-sync-section-label {4109  font-size: 0.6875rem;4110  color: var(--peach-t2);4111  text-transform: uppercase;4112  letter-spacing: 0.05em;4113}41144115.peach-sync-network-note {4116  margin: 0 0 6px;4117  font-size: 0.75rem;4118  color: var(--peach-t2);4119  line-height: 1.4;4120}41214122.peach-settings-row--tappable {4123  background: none;4124  border: none;4125  width: 100%;4126  text-align: left;4127  cursor: pointer;4128  color: var(--peach-t1);4129  font-size: 0.8125rem;4130}4131.peach-settings-row--tappable:hover {4132  color: var(--peach-t0);4133}41344135.peach-sync-pro-hint {4136  display: flex;4137  flex-direction: column;4138  align-items: flex-start;4139  gap: 8px;4140  padding: 12px 0 4px;4141}41424143.peach-sync-device-row {4144  display: flex;4145  justify-content: space-between;4146  align-items: center;4147  padding: 6px 0;4148  border-bottom: 1px solid var(--peach-t3);4149}41504151.peach-sync-device-info {4152  display: flex;4153  flex-direction: column;4154  gap: 2px;4155}41564157.peach-sync-device-name {4158  font-size: 0.8125rem;4159  color: var(--peach-t0);4160}41614162.peach-sync-device-meta {4163  font-size: 0.6875rem;4164  color: var(--peach-t2);4165}41664167.peach-sync-status-dot {4168  display: inline-block;4169  width: 8px;4170  height: 8px;4171  border-radius: 50%;4172  vertical-align: middle;4173}41744175.peach-sync-remove-btn {4176  color: var(--peach-breach);4177}41784179.peach-sync-advanced-row {4180  display: flex;4181  justify-content: space-between;4182  align-items: center;4183  padding: 6px 0;4184  gap: 12px;4185}41864187.peach-sync-advanced-info {4188  display: flex;4189  flex-direction: column;4190  gap: 2px;4191  flex: 1;4192}41934194.peach-sync-advanced-name {4195  font-size: 0.8125rem;4196  color: var(--peach-t0);4197}41984199.peach-sync-reset-confirm {4200  display: flex;4201  flex-direction: column;4202  gap: 8px;4203  padding: 10px;4204  border: 1px solid var(--peach-breach);4205  border-radius: 10px;4206  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4207}42084209.peach-sync-reset-confirm-headline {4210  font-size: 0.8125rem;4211  font-weight: 600;4212  color: var(--peach-t0);4213  margin: 0;4214}42154216.peach-sync-reset-confirm-body {4217  font-size: 0.75rem;4218  color: var(--peach-t1);4219  margin: 0;4220  line-height: 1.4;4221}42224223.peach-btn--danger {4224  background: var(--peach-breach);4225  color: #fff;4226  border-color: var(--peach-breach);4227}4228.peach-btn--danger:hover:not(:disabled) {4229  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4230}4231.peach-btn--danger:disabled {4232  opacity: 0.55;4233  cursor: not-allowed;4234}42354236.peach-sync-hero-icon {4237  color: var(--peach-t1);4238  opacity: 0.85;4239}42404241.peach-import-preview {4242  margin-bottom: 12px;4243  max-height: 152px;4244  overflow-y: auto;4245  border: 1px solid var(--peach-t3);4246  border-radius: 10px;4247  padding: 8px 10px;4248  display: grid;4249  gap: 8px;4250  background: rgba(240, 232, 216, 0.02);4251}42524253.peach-import-preview-row {4254  display: flex;4255  justify-content: space-between;4256  gap: 10px;4257  font-size: 0.6875rem;4258  color: var(--peach-t1);4259}42604261.peach-import-preview-title {4262  color: var(--peach-t0);4263  flex: 1;4264  min-width: 0;4265  overflow: hidden;4266  text-overflow: ellipsis;4267  white-space: nowrap;4268}42694270.peach-import-preview-meta {4271  color: var(--peach-t2);4272  flex-shrink: 0;4273  max-width: 42%;4274  overflow: hidden;4275  text-overflow: ellipsis;4276  white-space: nowrap;4277}42784279.peach-import-preview-more {4280  color: var(--peach-t2);4281  font-size: 0.625rem;4282}42834284.peach-restore-copy {4285  margin: 0;4286  color: var(--peach-t1);4287  font-size: 0.6875rem;4288  line-height: 1.6;4289}42904291.peach-restore-warning {4292  padding: 10px 12px;4293  border-radius: 12px;4294  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4295  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4296  color: var(--peach-t0);4297  font-size: 0.6875rem;4298  line-height: 1.55;4299}43004301.peach-provider-chips {4302  display: flex;4303  flex-wrap: wrap;4304  gap: 6px;4305}43064307.peach-provider-chip {4308  display: inline-flex;4309  align-items: center;4310  padding: 5px 8px;4311  border-radius: 999px;4312  border: 1px solid var(--peach-t3);4313  background: rgba(240, 232, 216, 0.02);4314  color: var(--peach-t1);4315  font-family: "IBM Plex Mono", monospace;4316  font-size: 0.5rem;4317  letter-spacing: 0.08em;4318  text-transform: uppercase;4319}43204321.peach-restore-file,4322.peach-restore-input {4323  width: 100%;4324  border-radius: 10px;4325  border: 1px solid var(--peach-t3);4326  background: var(--peach-s2);4327  color: var(--peach-t0);4328  font-size: 0.75rem;4329}43304331.peach-restore-file {4332  padding: 9px 10px;4333}43344335.peach-restore-file::file-selector-button {4336  margin-right: 10px;4337  padding: 7px 10px;4338  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4339  border-radius: 999px;4340  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4341  color: var(--peach-t0);4342  font-size: 0.625rem;4343  letter-spacing: 0.08em;4344  text-transform: uppercase;4345  cursor: pointer;4346}43474348.peach-restore-input {4349  padding: 10px 12px;4350}43514352.peach-auth-grid {4353  display: grid;4354  gap: 10px;4355}43564357.peach-import-summary {4358  color: var(--peach-t1);4359  font-size: 0.75rem;4360  line-height: 1.6;4361  margin-bottom: 12px;4362}43634364.peach-restore-error {4365  color: rgba(220, 80, 60, 0.95);4366  font-size: 0.75rem;4367  line-height: 1.55;4368}43694370.peach-passkey-card {4371  max-width: 400px;4372  margin: auto 16px;4373  align-self: center;4374  width: calc(100% - 32px);4375}43764377/* Center the approval card vertically inside the overlay-view (which sets4378 * flex-direction: column without justify-content). Without this, the card4379 * sits at the top with a tall empty band below — looks unfinished on the4380 * 320px popup. */4381.peach-overlay-view:has(.peach-passkey-card) {4382  justify-content: center;4383}43844385.peach-pro-badge {4386  padding: 2px 6px;4387  border-radius: 999px;4388  font-family: var(--font-ui);4389  font-size: 0.625rem;4390  letter-spacing: 0.08em;4391  text-transform: uppercase;4392  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4393  color: var(--peach-accent);4394}43954396/* ── Shortcuts rebind table ─────────────────────────────────── */4397.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4398.peach-shortcut-row {4399  display: flex;4400  align-items: center;4401  gap: 10px;4402  padding: 6px 0;4403}4404.peach-shortcut-row-label {4405  flex: 1;4406  font-size: 0.75rem;4407  color: var(--peach-t0);4408}4409.peach-shortcut-chip {4410  min-width: 64px;4411  padding: 4px 10px;4412  border-radius: 6px;4413  border: 1px solid var(--peach-t3);4414  background: var(--peach-input-bg, var(--surface-card));4415  color: var(--peach-t0);4416  font-family: var(--font-mono);4417  font-size: 0.6875rem;4418  letter-spacing: 0.04em;4419  cursor: pointer;4420  text-align: center;4421  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4422}4423.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4424.peach-shortcut-chip.is-custom {4425  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4426  color: var(--peach-accent);4427}4428.peach-shortcut-chip.is-capturing {4429  border-color: var(--peach-accent);4430  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4431  color: var(--peach-accent);4432  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4433}4434@keyframes peach-shortcut-capture-pulse {4435  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4436  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4437}4438.peach-shortcut-reset {4439  background: transparent;4440  border: none;4441  cursor: pointer;4442  color: var(--peach-t2);4443  padding: 4px 6px;4444  border-radius: 5px;4445  font-size: 0.875rem;4446  line-height: 1;4447  transition: color 120ms ease, background 120ms ease;4448}4449.peach-shortcut-reset:hover {4450  color: var(--peach-t0);4451  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4452}4453.peach-shortcuts-conflict {4454  margin: 4px 0 0;4455  padding: 8px 10px;4456  border-radius: 7px;4457  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4458  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4459  font-family: var(--font-mono);4460  font-size: 0.6875rem;4461  color: var(--peach-t0);4462}44634464/* ── Help dialog overlay (? to open) ────────────────────────── */4465.peach-shortcuts-help-backdrop {4466  position: fixed;4467  inset: 0;4468  background: rgba(0, 0, 0, 0.55);4469  backdrop-filter: blur(2px);4470  display: flex;4471  align-items: center;4472  justify-content: center;4473  z-index: 1000;4474  animation: peach-help-fade-in 140ms ease forwards;4475}4476@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4477.peach-shortcuts-help-card {4478  width: min(320px, 92vw);4479  max-height: 80vh;4480  overflow-y: auto;4481  border-radius: 14px;4482  border: 1px solid var(--peach-t3);4483  background: var(--peach-bg);4484  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4485  padding: 16px 18px 18px;4486  display: flex;4487  flex-direction: column;4488  gap: 12px;4489}4490.peach-shortcuts-help-head {4491  display: flex; align-items: center; justify-content: space-between;4492}4493.peach-shortcuts-help-head h3 {4494  margin: 0;4495  font-family: var(--font-display);4496  font-style: italic;4497  font-weight: 400;4498  font-size: 22px;4499  color: var(--peach-t0);4500}4501.peach-shortcuts-help-close {4502  background: transparent;4503  border: none;4504  color: var(--peach-t2);4505  cursor: pointer;4506  font-size: 0.875rem;4507  padding: 4px 8px;4508  border-radius: 5px;4509}4510.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4511.peach-shortcuts-help-body ul {4512  list-style: none; padding: 0; margin: 4px 0 12px;4513  display: grid; gap: 8px;4514}4515.peach-shortcuts-help-body li {4516  display: flex; align-items: center; justify-content: space-between; gap: 12px;4517  font-size: 0.75rem; color: var(--peach-t0);4518}4519.peach-shortcuts-help-body kbd {4520  font-family: var(--font-mono);4521  font-size: 0.6875rem;4522  padding: 3px 8px;4523  border-radius: 6px;4524  background: var(--surface-card);4525  border: 1px solid var(--peach-t3);4526  color: var(--peach-accent);4527  letter-spacing: 0.04em;4528}45294530/* ── Pro promo on Account screen ────────────────────────────── */4531.peach-pro-promo {4532  position: relative;4533  border-radius: 14px;4534  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4535  background:4536    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4537    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4538    var(--surface-card);4539  overflow: hidden;4540  margin-bottom: 14px;4541}4542.peach-pro-promo-glow {4543  position: absolute;4544  inset: -40% -20% auto auto;4545  width: 220px; height: 220px;4546  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4547  pointer-events: none;4548  filter: blur(8px);4549}4550.peach-pro-promo-inner {4551  position: relative;4552  padding: 18px 18px 16px;4553}4554.peach-pro-promo-title {4555  font-family: var(--font-display);4556  font-style: italic;4557  font-weight: 400;4558  font-size: 28px;4559  line-height: 1;4560  letter-spacing: -0.005em;4561  color: var(--peach-t0);4562  margin: 0 0 4px;4563}4564.peach-pro-promo-tagline {4565  font-family: var(--font-mono);4566  font-size: 0.625rem;4567  letter-spacing: 0.06em;4568  color: var(--peach-t2);4569  margin: 0 0 14px;4570}4571.peach-pro-promo-list {4572  list-style: none;4573  margin: 0 0 16px;4574  padding: 0;4575  display: grid;4576  gap: 9px;4577}4578.peach-pro-promo-list li {4579  display: flex;4580  align-items: flex-start;4581  gap: 9px;4582  font-size: 0.75rem;4583  color: var(--peach-t1);4584  line-height: 1.4;4585}4586.peach-pro-promo-list svg {4587  width: 14px;4588  height: 14px;4589  flex-shrink: 0;4590  color: var(--peach-accent);4591  margin-top: 2px;4592}4593.peach-pro-promo-list span {4594  color: var(--peach-t0);4595}4596.peach-pro-promo-cta {4597  width: 100%;4598  background: var(--peach-accent);4599  color: #fff;4600  border: none;4601  padding: 9px 12px;4602  border-radius: 9px;4603  font-size: 0.75rem;4604  font-weight: 500;4605  font-family: var(--font-ui);4606  letter-spacing: 0.02em;4607  text-decoration: none;4608  display: inline-flex;4609  align-items: center;4610  justify-content: center;4611  cursor: pointer;4612  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4613  box-shadow: 0 2px 16px var(--peach-glow);4614}4615.peach-pro-promo-cta:hover {4616  filter: brightness(1.07);4617  box-shadow: 0 4px 24px var(--peach-glow);4618  transform: translateY(-1px);4619}4620.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }46214622.peach-pro-or-divider {4623  display: flex;4624  align-items: center;4625  gap: 10px;4626  margin: 4px 0 12px;4627  font-family: var(--font-mono);4628  font-size: 0.625rem;4629  letter-spacing: 0.06em;4630  color: var(--peach-t2);4631  text-transform: uppercase;4632}4633.peach-pro-or-divider::before,4634.peach-pro-or-divider::after {4635  content: "";4636  flex: 1;4637  height: 1px;4638  background: var(--peach-t3);4639}46404641.peach-loading {4642  position: absolute;4643  inset: 0;4644  display: flex;4645  align-items: center;4646  justify-content: center;4647  background: var(--bg);4648  animation: peach-loading-pulse 1.2s ease-in-out infinite;4649}46504651@keyframes peach-loading-pulse {4652  0%, 100% { opacity: 0.6; }4653  50% { opacity: 1; }4654}46554656/* ── Health Dashboard ─────────────────────────────────────────────────── */4657.peach-health-body {4658  flex: 1;4659  overflow-y: auto;4660  display: flex;4661  flex-direction: column;4662  /* Hide the platform scrollbar — every other scrollable surface in the4663   * popup hides it; the Health view was the one outlier and it ruined the4664   * polish. Behavior unchanged, just no rail rendered. */4665  scrollbar-width: none;4666  -ms-overflow-style: none;4667}4668.peach-health-body::-webkit-scrollbar { display: none; }46694670/* Loading screen for the Vault Health view. The advanced report computation4671 * can run for a few seconds on a large vault — without a clear loading4672 * screen the surface looked broken (the entry view bleeds through the4673 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4674.peach-health-loading-screen {4675  flex: 1;4676  display: flex;4677  flex-direction: column;4678  align-items: center;4679  justify-content: center;4680  gap: 14px;4681  padding: 32px 28px;4682  text-align: center;4683}46844685.peach-health-loading-glyph {4686  width: 48px;4687  height: 48px;4688  display: flex;4689  align-items: center;4690  justify-content: center;4691  border-radius: 14px;4692  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4693  color: var(--peach-accent);4694}46954696.peach-health-loading-title {4697  margin: 0;4698  font-family: var(--font-display);4699  font-style: italic;4700  font-weight: 300;4701  font-size: 19px;4702  line-height: 1.2;4703  color: var(--peach-t0);4704}47054706.peach-health-loading-copy {4707  margin: 0;4708  max-width: 240px;4709  font-size: 0.75rem;4710  line-height: 1.55;4711  color: var(--peach-t2);4712}47134714.peach-health-loading-track {4715  width: 200px;4716  height: 3px;4717  margin-top: 6px;4718  border-radius: 999px;4719  background: rgba(240, 232, 216, 0.06);4720  overflow: hidden;4721}47224723.peach-health-loading-fill {4724  width: 40%;4725  height: 100%;4726  border-radius: inherit;4727  background: linear-gradient(4728    90deg,4729    transparent 0%,4730    var(--peach-accent) 50%,4731    transparent 100%4732  );4733  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4734}47354736@keyframes peach-health-loading-sweep {4737  0%   { transform: translateX(-100%); }4738  100% { transform: translateX(350%); }4739}47404741[data-motion="reduce"] .peach-health-loading-fill,4742[data-motion="reduce"] .peach-health-loading-glyph svg path {4743  animation: none;4744}47454746.peach-health-summary {4747  padding: 10px 16px 6px;4748  font-family: "IBM Plex Mono", monospace;4749  font-size: 0.6875rem;4750}4751.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4752.peach-health-summary-ok { color: var(--peach-t2); }47534754.peach-health-check-row {4755  padding: 0 16px 10px;4756}4757.peach-health-check-btn {4758  width: 100%;4759  display: flex;4760  align-items: center;4761  justify-content: center;4762}47634764.peach-health-sections {4765  flex: 1;4766  display: flex;4767  flex-direction: column;4768}47694770.peach-health-section {4771  border-bottom: 1px solid var(--peach-t3);4772}47734774.peach-health-section-header {4775  width: 100%;4776  display: flex;4777  align-items: center;4778  justify-content: space-between;4779  padding: 9px 16px;4780  background: transparent;4781  cursor: pointer;4782  color: var(--peach-t0);4783}47844785.peach-health-section-title-row {4786  display: flex;4787  align-items: center;4788  gap: 8px;4789}47904791.peach-health-count-badge {4792  display: inline-flex;4793  align-items: center;4794  justify-content: center;4795  min-width: 20px;4796  height: 18px;4797  padding: 0 5px;4798  border-radius: 999px;4799  background: rgba(220,80,60,0.15);4800  border: 1px solid rgba(220,80,60,0.25);4801  font-family: "IBM Plex Mono", monospace;4802  font-size: 0.5625rem;4803  color: rgba(220,80,60,0.9);4804}48054806.peach-health-section-title {4807  font-family: "IBM Plex Mono", monospace;4808  font-size: 0.6875rem;4809  text-transform: uppercase;4810  letter-spacing: 0.1em;4811  color: var(--peach-t1);4812}48134814.peach-health-chevron {4815  color: var(--peach-t2);4816  transition: transform 200ms ease;4817  flex-shrink: 0;4818}4819.peach-health-chevron.is-expanded {4820  transform: rotate(180deg);4821}48224823.peach-health-section-body {4824  padding: 0 16px 10px;4825  display: flex;4826  flex-direction: column;4827  gap: 4px;4828}48294830.peach-health-row {4831  display: flex;4832  align-items: flex-start;4833  justify-content: space-between;4834  gap: 8px;4835  padding: 6px 8px;4836  border-radius: 8px;4837  background: rgba(240,232,216,0.02);4838}48394840.peach-health-row-info {4841  flex: 1;4842  min-width: 0;4843  display: flex;4844  flex-direction: column;4845  gap: 2px;4846}48474848.peach-health-row-name {4849  font-family: var(--font-display);4850  font-size: 0.9375rem;4851  font-style: italic;4852  font-weight: 400;4853  color: var(--peach-t0);4854  white-space: nowrap;4855  overflow: hidden;4856  text-overflow: ellipsis;4857}48584859.peach-health-row-meta {4860  font-family: "IBM Plex Mono", monospace;4861  font-size: 0.5625rem;4862  color: var(--peach-t2);4863  letter-spacing: 0.05em;4864}48654866.peach-health-fix-btn {4867  font-size: 0.5625rem;4868  letter-spacing: 0.08em;4869  text-transform: uppercase;4870  padding: 4px 7px;4871  flex-shrink: 0;4872  display: flex;4873  align-items: center;4874}48754876.peach-health-empty {4877  font-family: "IBM Plex Mono", monospace;4878  font-size: 0.625rem;4879  color: var(--peach-t2);4880  padding: 6px 0;4881}48824883.peach-health-loading {4884  font-family: "IBM Plex Mono", monospace;4885  font-size: 0.625rem;4886  color: var(--peach-t2);4887  padding: 6px 0;4888  display: flex;4889  align-items: center;4890  gap: 6px;4891}48924893.peach-health-loading::before {4894  content: "";4895  width: 10px;4896  height: 10px;4897  border: 1.5px solid var(--peach-t3);4898  border-top-color: var(--peach-accent);4899  border-radius: 50%;4900  animation: peach-spin 600ms linear infinite;4901}49024903@keyframes peach-spin {4904  to { transform: rotate(360deg); }4905}49064907.peach-spinner {4908  width: 32px;4909  height: 32px;4910  border: 2px solid var(--peach-s2);4911  border-top-color: var(--peach-accent);4912  border-radius: 50%;4913  margin: 0 auto 16px;4914  animation: peach-spin 0.8s linear infinite;4915}49164917.peach-progress-screen {4918  text-align: center;4919  padding: 32px 16px;4920}49214922.peach-progress-screen-title {4923  font-size: 0.8125rem;4924  color: var(--peach-t0);4925  margin-bottom: 16px;4926}49274928.peach-progress-screen-stage {4929  font-size: 0.6875rem;4930  color: var(--peach-t2);4931  min-height: 14px;4932}49334934.peach-progress-screen-note {4935  font-size: 0.625rem;4936  color: var(--peach-t2);4937  margin-top: 8px;4938}49394940.peach-pairing-body {4941  flex: 1;4942  overflow-y: auto;4943  display: flex;4944  flex-direction: column;4945}49464947.peach-pairing-content {4948  flex: 1;4949  display: flex;4950  flex-direction: column;4951  align-items: center;4952  justify-content: center;4953  gap: 14px;4954  padding: 28px 20px;4955  text-align: center;4956}49574958.peach-pairing-code-screen {4959  gap: 18px;4960}49614962.peach-pairing-headline {4963  font-family: var(--font-display);4964  font-style: italic;4965  font-weight: 300;4966  font-size: 28px;4967  color: var(--peach-t0);4968  margin: 0;4969  line-height: 1;4970}49714972.peach-pairing-subline {4973  font-size: 0.75rem;4974  color: var(--peach-t2);4975  max-width: 220px;4976  line-height: 1.5;4977  margin: 0;4978}49794980.peach-pairing-subline--center {4981  text-align: center;4982}49834984/* 6-digit pairing code — both display (.peach-pairing-code) and entry4985   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking4986   so the two modes feel like the same surface. */4987.peach-pairing-code {4988  font-family: "IBM Plex Mono", monospace;4989  font-size: 36px;4990  letter-spacing: 0.25em;4991  color: var(--peach-t0);4992  text-align: center;4993  padding: 24px 0;4994  text-shadow:4995    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),4996    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);4997  background: transparent;4998  border: 0;4999  cursor: default;5000  user-select: text;5001}50025003.peach-pairing-code--loading,5004.peach-pairing-code--expired {5005  font-size: 18px;5006  letter-spacing: 0.04em;5007  color: var(--peach-t2);5008  cursor: pointer;5009  text-shadow: none;5010}50115012.peach-pairing-qr-container {5013  display: flex;5014  flex-direction: column;5015  align-items: center;5016  gap: 10px;5017}50185019.peach-pairing-qr {5020  width: 240px;5021  height: 240px;5022  display: block;5023}50245025.peach-pairing-instruction {5026  font-size: 0.75rem;5027  color: var(--peach-t2);5028  text-align: center;5029  line-height: 1.5;5030  margin: 0;5031  max-width: 220px;5032}50335034.peach-pairing-expiry {5035  font-family: "IBM Plex Mono", monospace;5036  font-size: 13px;5037  letter-spacing: 0.06em;5038  color: var(--peach-t2);5039  margin: 0;5040}50415042.peach-pairing-regen {5043  font-size: 0.75rem;5044  color: var(--peach-accent);5045  background: transparent;5046  border: 0;5047  cursor: pointer;5048  padding: 4px 0;5049  text-decoration: underline;5050  text-underline-offset: 2px;5051}50525053.peach-pairing-code-input {5054  font-family: "IBM Plex Mono", monospace;5055  font-size: 36px;5056  letter-spacing: 0.25em;5057  color: var(--peach-t0);5058  background: transparent;5059  border: 0;5060  border-bottom: 1px solid var(--peach-t3);5061  outline: none;5062  text-align: center;5063  padding: 18px 0;5064  width: 220px;5065  caret-color: var(--peach-accent);5066  transition: border-color 160ms ease;5067}50685069.peach-pairing-code-input::placeholder {5070  color: var(--peach-t3);5071}50725073.peach-pairing-code-input:focus {5074  border-bottom-color: var(--peach-accent);5075}50765077.peach-pairing-toggle {5078  background: transparent;5079  border: 0;5080  color: var(--peach-t2);5081  font-size: 0.75rem;5082  padding: 8px 4px;5083  cursor: pointer;5084  transition: color 120ms ease;5085}50865087.peach-pairing-toggle:hover:not(:disabled) {5088  color: var(--peach-t1);5089}50905091.peach-pairing-toggle:disabled {5092  opacity: 0.5;5093  cursor: default;5094}50955096.peach-pairing-hint {5097  font-size: 0.6875rem;5098  color: var(--peach-t2);5099  margin: 0;5100  text-align: center;5101}51025103.peach-pairing-status {5104  display: flex;5105  align-items: center;5106  gap: 8px;5107  margin: 0;5108  font-size: 0.75rem;5109  color: var(--peach-t1);5110}51115112.peach-pairing-error {5113  margin: 0;5114  font-size: 0.6875rem;5115  color: var(--peach-breach);5116}51175118.peach-pairing-error--muted {5119  color: var(--peach-t2);5120}51215122.peach-pairing-spinner {5123  width: 12px;5124  height: 12px;5125  border: 1.5px solid var(--peach-t3);5126  border-top-color: var(--peach-accent);5127  border-radius: 50%;5128  animation: peach-spin 0.8s linear infinite;5129}51305131.peach-pairing-success-icon,5132.peach-pairing-error-icon,5133.peach-pairing-hero {5134  display: inline-flex;5135  align-items: center;5136  justify-content: center;5137}51385139/* Tag chips */5140.peach-tag-chip {5141  display: inline-flex;5142  align-items: center;5143  gap: 4px;5144  padding: 3px 8px;5145  border-radius: 999px;5146  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5147  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5148  color: var(--peach-t0);5149  font-family: "IBM Plex Mono", monospace;5150  font-size: 0.625rem;5151  letter-spacing: 0.04em;5152}51535154.peach-tag-chip-remove {5155  background: transparent;5156  border: none;5157  color: inherit;5158  opacity: 0.6;5159  cursor: pointer;5160  padding: 0;5161  font-size: 0.75rem;5162  line-height: 1;5163}51645165.peach-tag-chip-remove:hover {5166  opacity: 1;5167}51685169/* Tag input */5170.peach-tag-input-wrap {5171  border-bottom: 1px solid var(--peach-t3);5172}51735174.peach-tag-suggestions {5175  display: flex;5176  flex-wrap: wrap;5177  gap: 4px;5178  padding: 6px 0;5179}51805181.peach-tag-suggestion {5182  padding: 2px 8px;5183  border-radius: 999px;5184  border: 1px solid var(--peach-t3);5185  background: var(--peach-s2);5186  color: var(--peach-t1);5187  font-family: "IBM Plex Mono", monospace;5188  font-size: 0.625rem;5189  cursor: pointer;5190  transition: border-color 80ms ease, background 80ms ease;5191}51925193.peach-tag-suggestion:hover {5194  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5195  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5196}51975198/* Identity suggestions — shown below username/email inputs in new-entry form */5199@keyframes peach-suggest-in {5200  from { opacity: 0; transform: translateY(-4px); }5201  to   { opacity: 1; transform: none; }5202}52035204.peach-identity-suggestions {5205  display: flex;5206  flex-direction: column;5207  gap: 1px;5208  margin-top: 4px;5209  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5210}52115212.peach-identity-filter-row {5213  display: flex;5214  align-items: center;5215  gap: 4px;5216  padding: 2px 0 5px;5217}52185219.peach-identity-collapse-btn {5220  margin-left: auto;5221  background: transparent;5222  border: none;5223  cursor: pointer;5224  color: var(--peach-t3);5225  padding: 2px 4px;5226  display: flex;5227  align-items: center;5228  line-height: 0;5229  border-radius: 3px;5230  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5231}52325233.peach-identity-collapse-btn:hover {5234  color: var(--peach-t1);5235}52365237.peach-identity-collapse-btn.is-collapsed {5238  transform: rotate(-90deg);5239}52405241.peach-identity-rows {5242  display: grid;5243  grid-template-rows: 1fr;5244  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5245}52465247.peach-identity-rows.is-collapsed {5248  grid-template-rows: 0fr;5249}52505251.peach-identity-rows-inner {5252  overflow-y: auto;5253  min-height: 0;5254  max-height: 148px;5255  scrollbar-width: thin;5256  scrollbar-color: var(--peach-t3) transparent;5257  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5258  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5259}52605261.peach-identity-rows-inner::-webkit-scrollbar {5262  width: 4px;5263}52645265.peach-identity-rows-inner::-webkit-scrollbar-track {5266  background: transparent;5267}52685269.peach-identity-rows-inner::-webkit-scrollbar-thumb {5270  background: var(--peach-t3);5271  border-radius: 2px;5272}52735274.peach-identity-filter-pill {5275  padding: 2px 7px;5276  border-radius: 999px;5277  border: 1px solid var(--peach-t3);5278  background: transparent;5279  color: var(--peach-t2);5280  font-family: "IBM Plex Mono", monospace;5281  font-size: 0.6rem;5282  cursor: pointer;5283  transition: border-color 80ms, background 80ms, color 80ms;5284}52855286.peach-identity-filter-pill.is-on {5287  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5288  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5289  color: var(--peach-accent);5290}52915292.peach-identity-suggestion {5293  display: flex;5294  align-items: center;5295  gap: 6px;5296  width: 100%;5297  padding: 4px 6px;5298  border-radius: 5px;5299  border: none;5300  background: transparent;5301  cursor: pointer;5302  text-align: left;5303  transition: background 80ms ease;5304}53055306.peach-identity-suggestion:hover,5307.peach-identity-suggestion:focus {5308  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5309  outline: none;5310}53115312.peach-identity-suggestion-value {5313  font-family: "IBM Plex Mono", monospace;5314  font-size: 0.7rem;5315  color: var(--peach-t1);5316  overflow: hidden;5317  text-overflow: ellipsis;5318  white-space: nowrap;5319  flex: 1;5320  min-width: 0;5321}53225323.peach-identity-suggestion-type {5324  font-family: "IBM Plex Mono", monospace;5325  font-size: 0.55rem;5326  font-weight: 600;5327  flex-shrink: 0;5328  padding: 1px 4px;5329  border-radius: 3px;5330}53315332.peach-identity-suggestion-type--email {5333  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5334  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5335}53365337.peach-identity-suggestion-type--username {5338  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5339  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5340}53415342.peach-identity-suggestion-meta {5343  font-family: "IBM Plex Mono", monospace;5344  font-size: 0.6rem;5345  color: var(--peach-t3);5346  flex-shrink: 0;5347}53485349/* Tag filter strip */5350.peach-tag-filter-strip {5351  border-bottom: 1px solid var(--peach-t3);5352  flex-shrink: 0;5353}53545355.peach-tag-filter-chip {5356  display: inline-flex;5357  align-items: center;5358  padding: 4px 10px;5359  border-radius: 999px;5360  border: 1px solid var(--peach-t3);5361  background: transparent;5362  color: var(--peach-t2);5363  font-family: "IBM Plex Mono", monospace;5364  font-size: 0.5625rem;5365  letter-spacing: 0.06em;5366  text-transform: uppercase;5367  cursor: pointer;5368  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5369  white-space: nowrap;5370}53715372.peach-tag-filter-chip:hover {5373  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5374  color: var(--peach-t1);5375}53765377.peach-tag-filter-chip.is-selected {5378  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5379  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5380  color: var(--peach-t0);5381}53825383/* ─────────────────────────────────────────────────────────────────────────5384   v1.4.12 additions5385   ─────────────────────────────────────────────────────────────────────── */53865387/* Sort bar */5388.peach-sort-bar {5389  display: flex;5390  align-items: center;5391  gap: 4px;5392  padding: 5px 12px;5393  border-bottom: 1px solid var(--peach-t3);5394  flex-shrink: 0;5395  overflow-x: auto;5396  scrollbar-width: none;5397}53985399.peach-sort-btn {5400  padding: 2px 9px;5401  border-radius: 999px;5402  border: 1px solid transparent;5403  background: transparent;5404  color: var(--peach-t2);5405  font-family: "IBM Plex Mono", monospace;5406  font-size: 0.5625rem;5407  letter-spacing: 0.07em;5408  text-transform: uppercase;5409  cursor: pointer;5410  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5411  white-space: nowrap;5412}54135414.peach-sort-btn:hover {5415  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5416  color: var(--peach-t1);5417}54185419.peach-sort-btn.is-active {5420  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5421  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5422  color: var(--peach-t0);5423}54245425.peach-sort-domain-hint {5426  margin-left: auto;5427  font-family: "IBM Plex Mono", monospace;5428  font-size: 0.5625rem;5429  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5430  white-space: nowrap;5431  overflow: hidden;5432  text-overflow: ellipsis;5433  max-width: 110px;5434}54355436/* Tab-match badge on entry rows */5437.peach-tab-match-badge {5438  display: inline-block;5439  width: 6px;5440  height: 6px;5441  border-radius: 50%;5442  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5443  margin-left: 5px;5444  vertical-align: middle;5445  flex-shrink: 0;5446  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5447}54485449.peach-entry-row.is-tab-match {5450  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5451  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5452}54535454.peach-entry-row.is-tab-match:hover {5455  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5456}54575458/* Entry list stagger entrance */5459@keyframes peach-entry-fadein {5460  from { opacity: 0; transform: translateY(4px); }5461  to   { opacity: 1; transform: translateY(0); }5462}54635464.peach-vault-list .peach-entry-row {5465  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5466}54675468/* Button press micro-interaction */5469.peach-btn:active {5470  transform: scale(0.95);5471  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5472}54735474.peach-sort-btn:active,5475.peach-tag-filter-chip:active {5476  transform: scale(0.93);5477  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5478}54795480/* Password strength bar (Lock view + shared) */5481.peach-password-strength {5482  display: flex;5483  align-items: center;5484  gap: 8px;5485  margin-top: 6px;5486}54875488.peach-strength-bar {5489  flex: 1;5490  height: 3px;5491  border-radius: 2px;5492  background: var(--peach-t3);5493  overflow: hidden;5494}54955496.peach-strength-fill {5497  height: 100%;5498  border-radius: 2px;5499  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5500              background 300ms ease;5501}55025503.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5504.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5505.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5506.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }55075508.peach-strength-label {5509  font-family: "IBM Plex Mono", monospace;5510  font-style: italic;5511  font-size: 0.5625rem;5512  font-weight: 300;5513  letter-spacing: 0.06em;5514  color: var(--peach-t2);5515  min-width: 36px;5516  text-align: right;5517}55185519.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5520.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5521.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5522.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }55235524/* Duress form */5525.peach-duress-status {5526  padding: 2px 8px;5527  border-radius: 999px;5528  border: 1px solid var(--peach-t3);5529  font-family: "IBM Plex Mono", monospace;5530  font-size: 0.5625rem;5531  letter-spacing: 0.07em;5532  text-transform: uppercase;5533  color: var(--peach-t2);5534  flex-shrink: 0;5535}55365537.peach-duress-status.is-active {5538  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5539  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5540  color: var(--peach-t0);5541}55425543.peach-duress-form {5544  padding: 8px 0 4px;5545  display: flex;5546  flex-direction: column;5547  gap: 6px;5548}55495550.peach-duress-form .peach-label {5551  margin-top: 4px;5552}55535554.peach-duress-actions {5555  display: flex;5556  gap: 6px;5557  align-items: center;5558  margin-top: 4px;5559}55605561.peach-duress-actions .peach-btn:first-child {5562  margin-right: auto;5563}55645565/* Improved overlay spring entrance */5566.peach-overlay-view.ov-enter-up {5567  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5568}55695570@keyframes ov-enter-up-spring {5571  from { opacity: 0; transform: translateY(16px) scale(0.98); }5572  to   { opacity: 1; transform: translateY(0) scale(1); }5573}55745575.peach-overlay-view.ov-enter-right {5576  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5577}55785579@keyframes ov-enter-right-spring {5580  from { opacity: 0; transform: translateX(18px) scale(0.98); }5581  to   { opacity: 1; transform: translateX(0) scale(1); }5582}55835584/* ── Onboarding-mode restore screens (file import) ── */5585/* Used when MainImportView renders during onboarding (no vault yet).5586   Animates like a lock-screen transition. */5587.peach-lock-view {5588  position: absolute;5589  inset: 0;5590  display: flex;5591  flex-direction: column;5592  background:5593    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5594    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5595    var(--peach-bg);5596  z-index: 2;5597  overflow: hidden;5598  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5599}56005601.peach-lock-view-header {5602  display: flex;5603  align-items: center;5604  justify-content: space-between;5605  padding: 16px 18px 12px;5606  flex-shrink: 0;5607}56085609/* ───────── Settings: auto-lock select ───────── */5610.peach-settings-select {5611  font-family: "IBM Plex Mono", monospace;5612  font-size: 0.6875rem;5613  background: transparent;5614  border: 1px solid var(--peach-t3);5615  border-radius: 4px;5616  color: var(--peach-t1);5617  padding: 3px 6px;5618  cursor: pointer;5619  outline: none;5620}5621.peach-settings-select:focus {5622  border-color: var(--peach-accent);5623}56245625/* ───────── Duress status pill (new polished) ───────── */5626.peach-duress-status-pill {5627  font-family: "IBM Plex Mono", monospace;5628  font-size: 0.5625rem;5629  text-transform: uppercase;5630  letter-spacing: 0.12em;5631  padding: 2px 8px;5632  border-radius: 12px;5633  background: var(--peach-t3);5634  color: var(--peach-t2);5635  flex-shrink: 0;5636}5637.peach-duress-status-pill.is-active {5638  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5639  color: var(--peach-accent);5640}56415642/* ───────── Entry advanced disclosure (canary) ───────── */5643.peach-entry-advanced {5644  margin-top: 12px;5645  border-top: 1px solid var(--peach-t3);5646  padding-top: 10px;5647  position: relative;5648  z-index: 1;5649}5650.peach-entry-advanced-toggle {5651  display: flex;5652  align-items: center;5653  justify-content: space-between;5654  width: 100%;5655  background: transparent;5656  border: none;5657  cursor: pointer;5658  padding: 0;5659  color: var(--peach-t2);5660}5661.peach-canary-section {5662  margin-top: 10px;5663  display: grid;5664  gap: 6px;5665}56665667/* ───────── Import: merge/replace radio choices ───────── */5668.peach-import-choice {5669  display: flex;5670  align-items: flex-start;5671  gap: 10px;5672  padding: 8px 10px;5673  border: 1px solid var(--peach-t3);5674  border-radius: 10px;5675  cursor: pointer;5676  margin-bottom: 6px;5677  transition: border-color 120ms ease, background 120ms ease;5678}5679.peach-import-choice:hover {5680  border-color: var(--peach-accent);5681}5682.peach-import-choice input[type="radio"] {5683  margin-top: 3px;5684  accent-color: var(--peach-accent);5685  flex-shrink: 0;5686}5687.peach-import-choice-main {5688  display: flex;5689  flex-direction: column;5690  gap: 2px;5691  min-width: 0;5692}5693.peach-import-choice-label {5694  font-size: 0.75rem;5695  color: var(--peach-t0);5696}5697.peach-import-choice-sub {5698  font-size: 0.6875rem;5699  color: var(--peach-t2);5700  line-height: 1.5;5701}57025703/* ───────── Export: success confirmation strip ───────── */5704.peach-export-success {5705  display: flex;5706  align-items: flex-start;5707  gap: 10px;5708  padding: 12px;5709  border-radius: 12px;5710  border: 1px solid rgba(150, 175, 110, 0.3);5711  background: rgba(150, 175, 110, 0.08);5712  color: var(--peach-t0);5713  font-size: 0.75rem;5714  line-height: 1.55;5715}5716.peach-export-success-check {5717  color: rgba(150, 175, 110, 0.9);5718  font-size: 0.875rem;5719  flex-shrink: 0;5720}57215722/* ── Trash view ──────────────────────────────────────────────────────── */5723.peach-trash-entry-row {5724  display: flex;5725  align-items: center;5726  justify-content: space-between;5727  gap: 8px;5728  padding: 8px 0;5729  border-bottom: 1px solid var(--peach-border);5730}5731.peach-trash-entry-info {5732  flex: 1;5733  min-width: 0;5734  display: flex;5735  flex-direction: column;5736  gap: 2px;5737}5738.peach-trash-entry-title {5739  font-size: 0.8125rem;5740  color: var(--peach-t0);5741  overflow: hidden;5742  text-overflow: ellipsis;5743  white-space: nowrap;5744}5745.peach-trash-entry-meta {5746  font-family: var(--font-mono);5747  font-size: 0.5625rem;5748  color: var(--peach-t2);5749  letter-spacing: 0.04em;5750}5751.peach-trash-entry-actions {5752  display: flex;5753  align-items: center;5754  gap: 4px;5755  flex-shrink: 0;5756}5757.peach-trash-delete-btn {5758  background: transparent;5759  border: 0;5760  color: var(--peach-t3);5761  font-size: 1rem;5762  line-height: 1;5763  cursor: pointer;5764  padding: 2px 5px;5765  transition: color 0.15s;5766}5767.peach-trash-delete-btn:hover { color: var(--peach-breach); }5768.peach-trash-list {5769  overflow-y: auto;5770}5771.peach-trash-footer {5772  display: flex;5773  align-items: center;5774  gap: 8px;5775  padding: 8px 0 0;5776  border-top: 1px solid var(--peach-border);5777  margin-top: 4px;5778}5779.peach-trash-purge-all {5780  background: transparent;5781  border: 0;5782  color: var(--peach-t3);5783  font-size: 0.625rem;5784  cursor: pointer;5785  padding: 4px 0;5786  letter-spacing: 0.03em;5787  transition: color 0.2s;5788}5789.peach-trash-purge-all:hover { color: var(--peach-breach); }5790.peach-trash-purge-confirm-label {5791  font-size: 0.625rem;5792  color: var(--peach-t1);5793  flex: 1;5794}57955796/* ── Settings shortcuts grid ─────────────────────────────────────────── */5797.peach-shortcuts-grid {5798  display: grid;5799  grid-template-columns: auto 1fr;5800  gap: 6px 12px;5801  align-items: center;5802  padding: 4px 0;5803}5804.peach-shortcut-key {5805  font-family: var(--font-mono);5806  font-size: 0.625rem;5807  color: var(--peach-t0);5808  background: var(--peach-t3);5809  border-radius: 4px;5810  padding: 2px 6px;5811  white-space: nowrap;5812  text-align: center;5813}5814.peach-shortcut-desc {5815  font-size: 0.6875rem;5816  color: var(--peach-t1);5817}58185819/* ── Sort bar trash button ───────────────────────────────────────────── */5820.peach-sort-trash-btn {5821  display: flex;5822  align-items: center;5823  justify-content: center;5824  padding: 3px 5px;5825  background: transparent;5826  border: none;5827  cursor: pointer;5828  color: var(--peach-t2);5829  border-radius: 4px;5830  transition: color 140ms ease, background 140ms ease;5831}5832.peach-sort-trash-btn:hover {5833  color: var(--peach-t1);5834  background: var(--peach-t3);5835}5836.peach-sort-trash-btn.is-active {5837  color: var(--peach-accent);5838}58395840/* Accent color picker */5841.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5842.peach-accent-picker {5843  display: flex;5844  flex-wrap: wrap;5845  gap: 7px;5846  padding: 2px 0;5847}5848.peach-accent-swatch {5849  width: 22px;5850  height: 22px;5851  border-radius: 50%;5852  border: 2px solid transparent;5853  cursor: pointer;5854  padding: 0;5855  transition: transform 100ms;5856  outline-offset: 2px;5857}5858.peach-accent-swatch:hover { transform: scale(1.15); }5859.peach-accent-swatch.is-active {5860  border-color: var(--peach-t0);5861  transform: scale(1.1);5862}58635864/* Display font picker — swatch shows an "Aa" preview rendered with each5865   font option so the user can see what they're picking before they pick. */5866.peach-settings-row--font { align-items: flex-start; padding-top: 10px; }5867.peach-font-picker {5868  display: flex;5869  flex-wrap: wrap;5870  gap: 6px;5871  padding: 2px 0;5872  flex: 1;5873  justify-content: flex-end;5874}5875.peach-font-swatch {5876  display: flex;5877  flex-direction: column;5878  align-items: center;5879  gap: 2px;5880  padding: 4px 8px;5881  background: transparent;5882  border: 1px solid var(--peach-t3);5883  border-radius: 6px;5884  cursor: pointer;5885  transition: border-color 100ms, background 100ms;5886  min-width: 56px;5887}5888.peach-font-swatch:hover {5889  border-color: var(--peach-accent-dim);5890  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5891}5892.peach-font-swatch.is-active {5893  border-color: var(--peach-accent);5894  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5895}5896.peach-font-swatch-glyph {5897  font-size: 18px;5898  line-height: 1;5899  color: var(--peach-t0);5900}5901.peach-font-swatch[data-font-preview="cormorant-italic"] .peach-font-swatch-glyph {5902  font-family: "Cormorant Garamond", serif;5903  font-style: italic;5904  font-weight: 400;5905}5906.peach-font-swatch[data-font-preview="cormorant"] .peach-font-swatch-glyph {5907  font-family: "Cormorant Garamond", serif;5908  font-style: normal;5909  font-weight: 400;5910}5911.peach-font-swatch[data-font-preview="inter"] .peach-font-swatch-glyph {5912  font-family: "Inter Variable", "Inter", sans-serif;5913  font-style: normal;5914  font-weight: 400;5915}5916.peach-font-swatch[data-font-preview="system"] .peach-font-swatch-glyph {5917  font-family: system-ui, -apple-system, sans-serif;5918  font-style: normal;5919  font-weight: 400;5920}5921.peach-font-swatch-name {5922  font-family: var(--font-mono);5923  font-size: 0.5rem;5924  letter-spacing: 0.06em;5925  color: var(--peach-t2);5926  text-transform: lowercase;5927}59285929.peach-pill-group {5930  display: flex;5931  gap: 6px;5932}5933.peach-pill-group .peach-btn.is-active {5934  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5935  border-color: var(--peach-accent);5936  color: var(--peach-t0);5937}59385939/* ── Card entry styles ───────────────────────────────────────── */5940.peach-card-number {5941  font-family: var(--peach-mono);5942  letter-spacing: 0.08em;5943}59445945.peach-card-network-badge {5946  font-size: 0.625rem;5947  padding: 1px 5px;5948  border-radius: 4px;5949  border: 0.5px solid var(--peach-border);5950  color: var(--peach-text-dim);5951  margin-left: 6px;5952  vertical-align: middle;5953}59545955.peach-card-expiry-row {5956  display: flex;5957  align-items: center;5958  gap: 8px;5959}59605961.peach-card-expiry-sep {5962  color: var(--peach-text-dim);5963}59645965/* ── Pro tier — upgrade screen ──────────────────────────────── */5966.peach-pro-mark {5967  font-size: 0.5625rem;5968  color: var(--peach-accent);5969  margin-left: 6px;5970  vertical-align: super;5971  opacity: 0.7;5972}59735974.peach-pro-mini-badge {5975  display: block;5976  font-size: 0.625rem;5977  font-style: italic;5978  color: var(--peach-accent);5979  letter-spacing: 0.04em;5980  margin-top: -2px;5981  padding-left: 2px;5982  opacity: 0.85;5983  text-align: center;5984}59855986.peach-wordmark-stack {5987  display: inline-flex;5988  flex-direction: column;5989  align-items: center;5990}59915992/* ── Pro tier — upgrade page ─────────────────────────────────── */5993.peach-pro-upgrade {5994  display: flex;5995  flex-direction: column;5996  align-items: stretch;5997  gap: 10px;5998  padding: 0 4px 8px;5999}60006001.peach-pro-upgrade-hero {6002  display: flex;6003  flex-direction: column;6004  align-items: center;6005  gap: 4px;6006  padding: 10px 0 6px;6007}60086009.peach-pro-upgrade-mark-wrap {6010  display: flex;6011  align-items: center;6012  justify-content: center;6013  margin-bottom: 2px;6014}60156016.peach-pro-upgrade-mark {6017  width: 38px;6018  height: 38px;6019  opacity: 0.9;6020}60216022.peach-pro-upgrade-title {6023  font-family: var(--font-display, var(--font-ui));6024  font-size: 22px;6025  margin: 0;6026  color: var(--peach-t0);6027  letter-spacing: 0.01em;6028}60296030.peach-pro-upgrade-tagline {6031  margin: 0;6032  font-style: italic;6033  color: var(--peach-t2);6034  font-size: 0.6875rem;6035}60366037.peach-pro-features {6038  display: flex;6039  flex-direction: column;6040  gap: 8px;6041  border-top: 1px solid var(--peach-border);6042  border-bottom: 1px solid var(--peach-border);6043  padding: 10px 4px;6044}60456046.peach-pro-feature {6047  display: flex;6048  gap: 9px;6049  align-items: baseline;6050}60516052.peach-pro-feature-mark {6053  color: var(--peach-accent);6054  font-size: 0.6875rem;6055  flex-shrink: 0;6056  display: inline-block;6057  transform-origin: center;6058  opacity: 0.8;6059}60606061.peach-pro-feature-text {6062  display: flex;6063  flex-direction: column;6064  gap: 1px;6065}60666067.peach-pro-feature-name {6068  font-size: 0.75rem;6069  color: var(--peach-t0);6070}60716072.peach-pro-feature-desc {6073  font-size: 0.625rem;6074  color: var(--peach-t2);6075}60766077.peach-pro-feature.is-highlighted .peach-pro-feature-mark {6078  animation: peach-pulse-accent 600ms ease-out forwards;6079}60806081@keyframes peach-pulse-accent {6082  0%   { opacity: 1; transform: scale(1.4); }6083  100% { opacity: 0.7; transform: scale(1); }6084}60856086.peach-pro-upgrade-actions {6087  display: flex;6088  flex-direction: column;6089  align-items: center;6090  gap: 8px;6091  padding-top: 2px;6092}60936094.peach-pro-pricing {6095  margin: 0;6096  text-align: center;6097  font-size: 0.6875rem;6098  color: var(--peach-t2);6099  letter-spacing: 0.04em;6100}61016102.peach-pro-upgrade-cta {6103  align-self: center;6104  text-align: center;6105  text-decoration: none;6106  display: block;6107  padding: 9px 32px;6108  font-size: 0.8125rem;6109  min-width: 180px;6110}61116112.peach-pro-key-divider {6113  display: flex;6114  align-items: center;6115  gap: 8px;6116  width: 100%;6117  color: var(--peach-t3);6118  font-size: 0.625rem;6119  letter-spacing: 0.08em;6120}61216122.peach-pro-key-divider::before,6123.peach-pro-key-divider::after {6124  content: "";6125  flex: 1;6126  height: 1px;6127  background: var(--peach-border);6128}61296130.peach-pro-key-link {6131  background: transparent;6132  border: 1px solid var(--peach-border);6133  border-radius: 8px;6134  color: var(--peach-t1);6135  font-size: 0.75rem;6136  cursor: pointer;6137  align-self: stretch;6138  padding: 8px 12px;6139  text-align: center;6140  transition: border-color 0.2s, color 0.2s;6141}61426143.peach-pro-key-link:hover {6144  border-color: var(--peach-accent);6145  color: var(--peach-accent);6146}61476148/* ── Pro tier — key ceremony ─────────────────────────────────── */6149.peach-pro-key-ceremony {6150  display: flex;6151  flex-direction: column;6152  align-items: center;6153  gap: 12px;6154  padding: 20px 4px 16px;6155}61566157.peach-pro-key-ceremony .peach-lock-rune-string {6158  font-size: 1rem;6159  gap: 12px;6160  flex: 0;6161  justify-content: center;6162}61636164.peach-pro-key-ceremony-label {6165  margin: 0;6166  font-size: 0.6875rem;6167  color: var(--peach-t2);6168  font-style: italic;6169  letter-spacing: 0.04em;6170}61716172.peach-pro-key-input {6173  font-family: var(--font-mono, monospace);6174  letter-spacing: 0.06em;6175  text-align: center;6176  width: 100%;6177  box-sizing: border-box;6178}61796180.peach-pro-key-error {6181  margin: 0;6182  font-size: 0.75rem;6183  text-align: center;6184  color: var(--peach-breach, #e55);6185  padding: 0;6186}61876188.peach-pro-key-activate {6189  width: 100%;6190  text-align: center;6191  box-sizing: border-box;6192  padding: 10px 20px;6193  font-size: 0.8125rem;6194}61956196.peach-pro-key-cancel {6197  background: transparent;6198  border: 0;6199  color: var(--peach-t2);6200  font-size: 0.6875rem;6201  cursor: pointer;6202  padding: 2px 8px;6203  transition: color 0.2s;6204}62056206.peach-pro-key-cancel:hover { color: var(--peach-accent); }62076208/* ── Pro tier — active state ─────────────────────────────────── */6209.peach-pro-active {6210  display: flex;6211  flex-direction: column;6212  align-items: center;6213  gap: 0;6214  padding: 8px 4px 16px;6215  min-height: 280px;6216}62176218.peach-pro-active-hero {6219  display: flex;6220  flex-direction: column;6221  align-items: center;6222  gap: 6px;6223  padding: 20px 0 22px;6224}62256226.peach-pro-active-mark-wrap {6227  display: flex;6228  align-items: center;6229  justify-content: center;6230  margin-bottom: 4px;6231}62326233.peach-pro-active-mark {6234  width: 60px;6235  height: 60px;6236  filter:6237    drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 55%, transparent))6238    drop-shadow(0 0 26px color-mix(in srgb, var(--peach-accent) 22%, transparent));6239}62406241.peach-pro-active-title {6242  font-family: var(--font-display, var(--font-ui));6243  font-size: 26px;6244  margin: 0;6245  color: var(--peach-t0);6246  letter-spacing: 0.01em;6247}62486249.peach-pro-active-since {6250  margin: 0;6251  font-size: 0.6875rem;6252  color: var(--peach-t2);6253  font-style: italic;6254}62556256.peach-pro-active-features {6257  display: flex;6258  flex-direction: column;6259  gap: 8px;6260  width: 100%;6261  padding: 14px 8px 0;6262  border-top: 1px solid var(--peach-border);6263  flex: 1;6264}62656266.peach-pro-active-feature {6267  display: flex;6268  align-items: center;6269  gap: 9px;6270}62716272.peach-pro-active-feature-mark {6273  color: var(--peach-accent);6274  font-size: 0.625rem;6275  opacity: 0.65;6276  flex-shrink: 0;6277}62786279.peach-pro-active-feature-name {6280  font-size: 0.75rem;6281  color: var(--peach-t1);6282}62836284.peach-pro-deactivate {6285  align-self: center;6286  background: transparent;6287  border: 0;6288  color: var(--peach-t3);6289  font-size: 0.625rem;6290  cursor: pointer;6291  padding: 8px 0 0;6292  margin-top: 16px;6293  letter-spacing: 0.03em;6294  transition: color 0.2s;6295}62966297.peach-pro-deactivate:hover { color: var(--peach-t2); }62986299.peach-pro-deactivate:disabled {6300  opacity: 0.5;6301  cursor: default;6302}63036304/* ── Pro advanced health remediation queue ──────────────────── */6305.peach-health-pro-queue {6306  display: flex;6307  flex-direction: column;6308  gap: 10px;6309  padding: 12px;6310  margin: 0 0 12px;6311  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6312  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6313  border-radius: 10px;6314}63156316.peach-health-pro-queue-head {6317  display: flex;6318  justify-content: space-between;6319  align-items: baseline;6320}63216322.peach-health-pro-queue-title {6323  font-size: 0.75rem;6324  font-weight: 500;6325  letter-spacing: 0.04em;6326  text-transform: uppercase;6327  color: var(--peach-accent);6328}63296330.peach-health-pro-queue-score {6331  font-size: 0.6875rem;6332  color: var(--peach-t2);6333}63346335.peach-health-pro-row {6336  display: flex;6337  gap: 10px;6338  align-items: center;6339  padding: 8px 0;6340  border-top: 1px solid var(--peach-border);6341}63426343.peach-health-pro-row-info {6344  flex: 1;6345  display: flex;6346  flex-direction: column;6347  gap: 4px;6348  min-width: 0;6349}63506351.peach-health-pro-row-name {6352  font-size: 0.8125rem;6353  color: var(--peach-t0);6354  overflow: hidden;6355  text-overflow: ellipsis;6356  white-space: nowrap;6357}63586359.peach-health-pro-row-meta {6360  font-size: 0.6875rem;6361  color: var(--peach-t2);6362}63636364.peach-health-pro-bar {6365  height: 2px;6366  background: var(--peach-border);6367  border-radius: 2px;6368  overflow: hidden;6369  margin-top: 2px;6370}63716372.peach-health-pro-bar-fill {6373  height: 100%;6374  background: var(--peach-accent);6375  transition: width 200ms ease-out;6376}63776378/* ── Pro activation celebration ── */6379@keyframes peach-pro-bloom {6380  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6381  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6382                 drop-shadow(0 0 48px var(--peach-glow)); }6383  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6384}63856386@keyframes peach-pro-wordmark-in {6387  from { opacity: 0; transform: translateY(4px); }6388  to   { opacity: 1; transform: translateY(0); }6389}63906391@keyframes peach-pro-fade-out {6392  from { opacity: 1; }6393  to   { opacity: 0; }6394}63956396.peach-pro-celebration {6397  background:6398    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6399    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6400    var(--peach-bg);6401  border: 1px solid var(--peach-t3);6402  box-shadow:6403    0 2px 8px rgba(0,0,0,0.55),6404    0 14px 48px rgba(0,0,0,0.7),6405    0 0 0 1px rgba(240,232,216,0.04);6406  overflow: hidden;6407  width: 320px;6408  height: 520px;6409  display: flex;6410  flex-direction: column;6411  align-items: center;6412  justify-content: center;6413  gap: 8px;6414  padding: 32px 24px;6415  text-align: center;6416}64176418.peach-pro-celebration.is-leaving {6419  animation: peach-pro-fade-out 400ms ease forwards;6420}64216422.peach-pro-bloom-target {6423  display: flex;6424  align-items: center;6425  justify-content: center;6426  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6427  margin-bottom: 12px;6428}64296430.peach-pro-bloom-icon {6431  width: 48px;6432  height: 48px;6433}64346435.peach-pro-wordmark {6436  font-family: var(--font-display);6437  font-size: 22px;6438  font-style: italic;6439  font-weight: 400;6440  color: var(--peach-accent);6441  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6442}64436444.peach-pro-thankyou {6445  font-size: 0.75rem;6446  font-style: italic;6447  color: var(--peach-t2);6448  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6449}645064516452/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6453.peach-pro-notice-banner {6454  display: flex;6455  align-items: center;6456  gap: 8px;6457  padding: 7px 12px;6458  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6459  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6460  font-size: 0.6875rem;6461  color: var(--peach-t2);6462  font-family: "IBM Plex Mono", monospace;6463  flex-shrink: 0;6464}64656466.peach-pro-notice-link {6467  background: none;6468  border: none;6469  padding: 0;6470  cursor: pointer;6471  font-size: 0.6875rem;6472  color: var(--peach-accent);6473  font-family: "IBM Plex Mono", monospace;6474  margin-left: auto;6475  white-space: nowrap;6476}64776478.peach-pro-notice-close {6479  background: none;6480  border: none;6481  padding: 0 0 0 4px;6482  cursor: pointer;6483  font-size: 0.625rem;6484  color: var(--peach-t3);6485  line-height: 1;6486}64876488/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6489   Renders over whatever view is showing. 60-second expiry; the popup ticks6490   the countdown each second and clears the banner when it hits zero. */6491.peach-pair-request-banner {6492  display: flex;6493  flex-direction: column;6494  gap: 8px;6495  padding: 10px 12px;6496  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6497  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6498  font-family: "IBM Plex Mono", monospace;6499  flex-shrink: 0;6500}65016502.peach-pair-toast {6503  padding: 8px 12px;6504  font-family: "IBM Plex Mono", monospace;6505  font-size: 0.75rem;6506  color: var(--peach-t1);6507  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6508  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6509  flex-shrink: 0;6510  text-align: center;6511}65126513.peach-pair-toast strong {6514  color: var(--peach-t0);6515  font-weight: 500;6516}65176518.peach-pair-request-header {6519  display: flex;6520  align-items: center;6521  gap: 8px;6522  font-size: 0.75rem;6523  color: var(--peach-t1);6524}65256526.peach-pair-request-mark {6527  font-size: 0.875rem;6528  display: inline-flex;6529  align-items: center;6530}65316532.peach-pair-request-icon {6533  width: 1em;6534  height: 1em;6535}65366537.peach-pair-request-title {6538  font-weight: 600;6539  color: var(--peach-t0);6540}65416542.peach-pair-request-countdown {6543  margin-left: auto;6544  font-variant-numeric: tabular-nums;6545  color: var(--peach-t2);6546  font-size: 0.6875rem;6547}65486549.peach-pair-request-body {6550  margin: 0;6551  font-size: 0.75rem;6552  color: var(--peach-t1);6553  line-height: 1.4;6554}65556556.peach-pair-request-body strong {6557  color: var(--peach-t0);6558  font-weight: 600;6559}65606561.peach-pair-request-actions {6562  display: flex;6563  gap: 8px;6564  justify-content: flex-end;6565}65666567/* ─── First-run onboarding ──────────────────────────────────────────────6568   Three-card welcome shown once before vault creation. The PeachScript6569   rune background drifts behind everything at very low opacity — it's6570   atmosphere, not focus. The cards themselves use the same panel6571   language as the rest of the popup so the transition into NewVault is6572   continuous, not a jarring switch of visual register. */65736574.peach-onboarding {6575  position: relative;6576  display: flex;6577  flex-direction: column;6578  width: 100%;6579  height: 100%;6580  padding: 16px 16px 18px;6581  box-sizing: border-box;6582  overflow: hidden;6583  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6584}65856586.peach-onboarding.is-completing {6587  animation: peach-onboard-exit 200ms ease-out forwards;6588}65896590.peach-rune-background {6591  position: absolute;6592  inset: 0;6593  width: 100%;6594  height: 100%;6595  pointer-events: none;6596  z-index: 0;6597  transition: opacity 500ms ease-out;6598}65996600.peach-onboarding.is-completing .peach-rune-background {6601  opacity: 0;6602}66036604.peach-onboarding-header {6605  position: relative;6606  z-index: 1;6607  display: flex;6608  align-items: center;6609  margin-bottom: 14px;6610}66116612.peach-onboarding-card {6613  position: relative;6614  z-index: 1;6615  flex: 1;6616  display: flex;6617  flex-direction: column;6618  gap: 10px;6619  padding: 22px 20px;6620  border-radius: 16px;6621  border: 1px solid var(--peach-t3);6622  background:6623    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6624  backdrop-filter: blur(3px);6625  -webkit-backdrop-filter: blur(3px);6626  box-shadow:6627    inset 0 1px 0 rgba(240, 232, 216, 0.04),6628    0 12px 28px rgba(0, 0, 0, 0.12);6629  cursor: pointer;6630  user-select: none;6631  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6632}66336634.peach-onboarding-card.is-exiting {6635  animation: peach-card-out 120ms ease-in forwards;6636  pointer-events: none;6637}66386639.peach-onboarding-card-headline {6640  margin: 0;6641  font-family: var(--font-display);6642  font-style: italic;6643  font-weight: 400;6644  font-size: 22px;6645  line-height: 1.05;6646  color: var(--peach-t0);6647  white-space: pre-line;6648}66496650.peach-onboarding-divider {6651  margin: 4px 0 6px;6652  border: 0;6653  border-top: 1px solid var(--peach-t3);6654  width: 100%;6655}66566657.peach-onboarding-body {6658  margin: 0;6659  font-size: 0.8125rem;6660  line-height: 1.6;6661  color: var(--peach-t1);6662}66636664.peach-onboarding-warning {6665  display: flex;6666  align-items: flex-start;6667  gap: 8px;6668  margin: 6px 0 0;6669  padding-top: 8px;6670  border-top: 1px dashed var(--peach-t3);6671  font-size: 0.8125rem;6672  line-height: 1.5;6673  color: var(--peach-t1);6674}66756676.peach-onboarding-warning-icon {6677  color: var(--peach-accent);6678  font-size: 0.8125rem;6679  line-height: 1.5;6680  flex: 0 0 auto;6681}66826683.peach-onboarding-nav {6684  position: relative;6685  z-index: 1;6686  display: flex;6687  align-items: center;6688  justify-content: space-between;6689  margin-top: 12px;6690  padding: 0 4px;6691}66926693.peach-onboarding-dots {6694  display: flex;6695  align-items: center;6696  gap: 6px;6697}66986699.peach-onboarding-dot {6700  width: 6px;6701  height: 6px;6702  border-radius: 50%;6703  background: var(--peach-t2);6704  transition: width 200ms ease, height 200ms ease, background 200ms ease;6705}67066707.peach-onboarding-dot.is-active {6708  width: 8px;6709  height: 8px;6710  background: var(--peach-accent);6711}67126713.peach-onboarding-next {6714  background: none;6715  border: none;6716  padding: 4px 0;6717  cursor: pointer;6718  font-family: "IBM Plex Mono", monospace;6719  font-size: 0.6875rem;6720  letter-spacing: 0.04em;6721  color: var(--peach-t1);6722  transition: color 150ms ease;6723}67246725.peach-onboarding-next:hover {6726  color: var(--peach-t0);6727}67286729.peach-onboarding-next:disabled {6730  opacity: 0.5;6731  cursor: default;6732}67336734.peach-onboarding-back {6735  background: none;6736  border: none;6737  padding: 4px 0;6738  cursor: pointer;6739  font-family: "IBM Plex Mono", monospace;6740  font-size: 0.6875rem;6741  letter-spacing: 0.04em;6742  color: var(--peach-t2);6743  transition: color 150ms ease;6744}67456746.peach-onboarding-back:hover {6747  color: var(--peach-t0);6748}67496750.peach-onboarding-back:disabled {6751  opacity: 0.5;6752  cursor: default;6753}67546755/* Reserve back-button width on the first card so the dots stay centred */6756.peach-onboarding-back-spacer {6757  width: 44px;6758}67596760.peach-onboarding-mobile-card-buttons {6761  display: flex;6762  flex-direction: column;6763  gap: 8px;6764  margin-top: 16px;6765}67666767@keyframes peach-onboard-enter {6768  from { opacity: 0; transform: translateY(20px); }6769  to   { opacity: 1; transform: translateY(0); }6770}67716772@keyframes peach-onboard-exit {6773  from { opacity: 1; }6774  to   { opacity: 0; }6775}67766777@keyframes peach-card-in {6778  from { opacity: 0; transform: translateX(12px); }6779  to   { opacity: 1; transform: translateX(0); }6780}67816782@keyframes peach-card-out {6783  from { opacity: 1; transform: translateX(0); }6784  to   { opacity: 0; transform: translateX(-12px); }6785}67866787/* ─── New vault screen — matched to onboarding card language ─────────── */67886789.peach-newvault {6790  position: relative;6791  display: flex;6792  flex-direction: column;6793  gap: 12px;6794  padding: 16px 16px 18px;6795  overflow: hidden;6796}67976798/* Suppress the warm-blob ambient art inherited from .lock-screen — the6799   new vault card now carries the visual weight. */6800.peach-newvault::before {6801  content: none;6802}68036804.peach-newvault-header {6805  position: relative;6806  z-index: 2;6807  display: flex;6808  align-items: center;6809  gap: 10px;6810  margin-bottom: 2px;6811}68126813.peach-newvault-back {6814  display: inline-flex;6815  align-items: center;6816  gap: 4px;6817  background: transparent;6818  border: none;6819  color: var(--peach-t2);6820  font-family: "IBM Plex Mono", monospace;6821  font-size: 0.625rem;6822  letter-spacing: 0.06em;6823  cursor: pointer;6824  padding: 4px 6px;6825  border-radius: 6px;6826  transition: color 120ms ease, background 120ms ease;6827}68286829.peach-newvault-back:hover {6830  color: var(--peach-t0);6831  background: rgba(240, 232, 216, 0.04);6832}68336834.peach-newvault-mark {6835  position: absolute;6836  right: -12px;6837  top: 6px;6838  width: 110px;6839  height: 110px;6840  pointer-events: none;6841  opacity: 0.10;6842  filter: saturate(0.9);6843  z-index: 0;6844}6845.peach-newvault-mark-art {6846  width: 100%;6847  height: 100%;6848}6849.peach-newvault-mark-art path:nth-child(2),6850.peach-newvault-mark-art path:nth-child(3) {6851  stroke: rgba(123, 144, 96, 0.88);6852  fill: rgba(123, 144, 96, 0.88);6853}68546855.peach-newvault-card {6856  position: relative;6857  z-index: 1;6858  display: flex;6859  flex-direction: column;6860  gap: 12px;6861  padding: 22px 20px 18px;6862  border-radius: 16px;6863  border: 1px solid var(--peach-t3);6864  background:6865    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6866  backdrop-filter: blur(3px);6867  -webkit-backdrop-filter: blur(3px);6868  box-shadow:6869    inset 0 1px 0 rgba(240, 232, 216, 0.04),6870    0 12px 28px rgba(0, 0, 0, 0.12);6871  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6872}68736874.peach-newvault-headline {6875  margin: 0;6876  font-family: var(--font-display);6877  font-style: italic;6878  font-weight: 400;6879  font-size: 24px;6880  line-height: 1.05;6881  color: var(--peach-t0);6882  white-space: pre-line;6883}68846885.peach-newvault-divider {6886  margin: 2px 0 4px;6887  border: 0;6888  border-top: 1px solid var(--peach-t3);6889  width: 100%;6890}68916892.peach-newvault-field {6893  display: flex;6894  flex-direction: column;6895  gap: 4px;6896}68976898.peach-newvault-label-row {6899  display: flex;6900  align-items: center;6901  justify-content: space-between;6902}69036904/* Monospace input scaled to the card. Replaces the 22px unlock-input6905   so the placeholder no longer overflows and the field reads as part6906   of the same surface as the body copy. */6907.peach-newvault-input {6908  font-size: 0.875rem;6909  letter-spacing: 0.18em;6910  padding: 8px 0;6911}6912.peach-newvault-input::placeholder {6913  letter-spacing: 0.18em;6914  color: var(--peach-t2);6915}69166917.peach-newvault-hint {6918  margin: 2px 0 0;6919  font-family: "IBM Plex Mono", monospace;6920  font-size: 0.625rem;6921  color: var(--peach-t2);6922  letter-spacing: 0.04em;6923}69246925.peach-newvault-submit {6926  margin-top: 4px;6927}69286929.peach-newvault-warning {6930  display: flex;6931  align-items: flex-start;6932  gap: 8px;6933  margin: 4px 0 0;6934  padding-top: 10px;6935  border-top: 1px dashed var(--peach-t3);6936  font-size: 0.75rem;6937  line-height: 1.5;6938  color: var(--peach-t1);6939}69406941.peach-newvault-warning-icon {6942  color: var(--peach-accent);6943  font-size: 0.8125rem;6944  line-height: 1.4;6945  flex: 0 0 auto;6946}69476948.peach-newvault-footer {6949  position: relative;6950  z-index: 1;6951  display: flex;6952  flex-direction: column;6953  gap: 4px;6954  padding: 4px 4px 0;6955}69566957/* Settings body — warm accent gradient gives the glass something to blur against */6958.peach-settings-body {6959  background:6960    radial-gradient(6961      ellipse at 30% 20%,6962      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6963      transparent 60%6964    );6965}69666967/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6968/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6969 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6970 * (replacing the vault from a backup file) and "hazard" for actions that6971 * are absolutely irreversible (Panic). Both use the same card scaffold so6972 * they read as a pair, but the colour family signals the severity at a6973 * glance — yellow for caution, red for don't.6974 */6975.peach-danger-card {6976  --danger-tint: 235, 158, 52; /* amber */6977  display: flex;6978  flex-direction: column;6979  gap: 8px;6980  padding: 14px;6981  margin-top: 10px;6982  border-radius: 12px;6983  border: 1px solid rgba(var(--danger-tint), 0.32);6984  background:6985    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6986    rgba(var(--danger-tint), 0.04);6987  box-shadow:6988    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6989    0 0 24px rgba(var(--danger-tint), 0.04);6990  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6991}69926993.peach-danger-card:hover {6994  border-color: rgba(var(--danger-tint), 0.55);6995  box-shadow:6996    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6997    0 0 36px rgba(var(--danger-tint), 0.10);6998}69997000.peach-danger-card--hazard {7001  --danger-tint: 220, 38, 38; /* red */7002}70037004.peach-danger-card-head {7005  display: flex;7006  align-items: center;7007  gap: 10px;7008}70097010.peach-danger-card-glyph {7011  width: 28px;7012  height: 28px;7013  flex-shrink: 0;7014  display: flex;7015  align-items: center;7016  justify-content: center;7017  border-radius: 8px;7018  background: rgba(var(--danger-tint), 0.12);7019  color: rgba(var(--danger-tint), 0.95);7020  font-size: 1rem;7021  line-height: 1;7022}70237024.peach-danger-card-title {7025  margin: 0;7026  font-size: 0.8125rem;7027  font-weight: 600;7028  color: rgba(var(--danger-tint), 0.92);7029  letter-spacing: 0.01em;7030}70317032.peach-danger-card-copy {7033  margin: 0;7034  font-size: 0.6875rem;7035  line-height: 1.5;7036  color: var(--peach-t2);7037}70387039.peach-danger-card-button {7040  width: 100%;7041  padding: 9px;7042  margin-top: 4px;7043  background: transparent;7044  border: 1px solid rgba(var(--danger-tint), 0.45);7045  border-radius: 8px;7046  color: rgba(var(--danger-tint), 0.9);7047  font-size: 0.75rem;7048  font-weight: 500;7049  letter-spacing: 0.02em;7050  cursor: pointer;7051  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7052}70537054.peach-danger-card-button:hover {7055  background: rgba(var(--danger-tint), 0.10);7056  border-color: rgba(var(--danger-tint), 0.75);7057  color: rgb(var(--danger-tint));7058}70597060/* ── Panic flow (three-step destruction) ───────────────────────────────── */7061.peach-panic {7062  display: flex;7063  flex-direction: column;7064  flex: 1;7065  min-height: 0;7066  padding: 28px 20px 20px;7067  gap: 18px;7068  overflow-y: auto;7069  scrollbar-width: none;7070  -ms-overflow-style: none;7071}70727073.peach-panic::-webkit-scrollbar { display: none; }70747075.peach-panic-step2 {7076  background: rgba(220, 38, 38, 0.04);7077}70787079.peach-panic-step3 {7080  position: relative;7081  background: #0f0505;7082  color: #ffffff;7083  overflow: hidden;7084}70857086.peach-panic-rune-bg {7087  position: absolute;7088  inset: 0;7089  opacity: 0.22;7090  pointer-events: none;7091  overflow: hidden;7092}70937094.peach-panic-rune-bg canvas {7095  width: 100% !important;7096  height: 100% !important;7097}70987099.peach-panic-icon {7100  font-size: 32px;7101  color: rgb(220, 38, 38);7102  line-height: 1;7103}71047105.peach-panic-title {7106  margin: 0;7107  font-size: 18px;7108  font-weight: 500;7109  color: var(--peach-t1);7110}71117112.peach-panic-title--severe {7113  font-size: 20px;7114  font-weight: 700;7115  color: rgb(220, 38, 38);7116}71177118.peach-panic-body {7119  margin: 0;7120  font-size: 0.8125rem;7121  line-height: 1.55;7122  color: var(--peach-t2);7123}71247125.peach-panic-body--severe {7126  color: rgba(220, 38, 38, 0.85);7127}71287129.peach-panic-body--final {7130  font-size: 1rem;7131  font-weight: 700;7132  color: rgb(255, 80, 80);7133  line-height: 1.4;7134}71357136.peach-panic-body--final-intro {7137  font-size: 1rem;7138  color: #ffffff;7139  font-weight: 400;7140}71417142.peach-panic-divider {7143  height: 1px;7144  background: rgba(255, 255, 255, 0.08);7145  margin: 4px 0;7146}71477148.peach-panic-confirm-input {7149  width: 100%;7150  padding: 10px 12px;7151  background: rgba(255, 255, 255, 0.02);7152  border: 1px solid rgba(220, 38, 38, 0.4);7153  border-radius: 8px;7154  color: var(--peach-t1);7155  font-family: "IBM Plex Mono", monospace;7156  font-size: 0.875rem;7157  letter-spacing: 0.12em;7158  text-transform: uppercase;7159}71607161.peach-panic-confirm-input:focus {7162  outline: none;7163  border-color: rgb(220, 38, 38);7164}71657166.peach-panic-confirm-input--match {7167  border-color: rgb(220, 38, 38);7168  color: rgb(220, 38, 38);7169}71707171.peach-panic-confirm-label {7172  font-size: 0.6875rem;7173  color: var(--peach-t2);7174  margin: 0 0 -8px;7175  letter-spacing: 0.06em;7176}71777178.peach-panic-actions {7179  display: flex;7180  flex-direction: column;7181  gap: 10px;7182  margin-top: auto;7183}71847185.peach-panic-button {7186  width: 100%;7187  padding: 12px;7188  border-radius: 8px;7189  font-size: 0.8125rem;7190  cursor: pointer;7191  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7192}71937194.peach-panic-button--primary {7195  background: var(--peach-accent);7196  border: 1px solid var(--peach-accent);7197  color: #ffffff;7198  font-weight: 600;7199}72007201.peach-panic-button--primary:hover {7202  background: color-mix(in srgb, var(--peach-accent) 88%, white);7203}72047205.peach-panic-button--danger {7206  background: rgb(220, 38, 38);7207  border: 1px solid rgb(220, 38, 38);7208  color: #ffffff;7209  font-weight: 600;7210}72117212.peach-panic-button--danger:disabled {7213  opacity: 0.35;7214  cursor: not-allowed;7215}72167217.peach-panic-button--ghost {7218  background: transparent;7219  border: 1px solid rgba(255, 255, 255, 0.18);7220  color: var(--peach-t2);7221}72227223.peach-panic-button--ghost:hover {7224  border-color: rgba(255, 255, 255, 0.32);7225  color: var(--peach-t1);7226}72277228.peach-panic-link {7229  background: transparent;7230  border: none;7231  padding: 4px 0;7232  color: rgba(220, 38, 38, 0.65);7233  font-size: 0.75rem;7234  cursor: pointer;7235  text-align: left;7236  text-decoration: underline;7237  text-underline-offset: 3px;7238}72397240.peach-panic-link:hover {7241  color: rgb(220, 38, 38);7242}72437244.peach-panic-bar {7245  background: rgb(220, 38, 38);7246  padding: 16px 20px;7247  margin: -28px -20px 0;7248  text-align: center;7249  font-size: 0.8125rem;7250  font-weight: 700;7251  letter-spacing: 0.12em;7252  color: #ffffff;7253}72547255.peach-panic-final-button {7256  width: 100%;7257  padding: 14px;7258  background: rgb(220, 38, 38);7259  border: none;7260  border-radius: 8px;7261  color: #ffffff;7262  font-size: 0.875rem;7263  font-weight: 700;7264  letter-spacing: 0.08em;7265  text-transform: uppercase;7266  cursor: pointer;7267  animation: peach-panic-pulse 2s ease-in-out infinite;7268}72697270.peach-settings-license {7271  margin-top: 10px;7272  padding-top: 10px;7273  border-top: 1px solid var(--peach-t3);7274}72757276.peach-settings-label {7277  font-size: 0.625rem;7278  letter-spacing: 0.08em;7279  color: var(--peach-t3);7280  display: block;7281  margin-bottom: 6px;7282}72837284.peach-settings-license-row {7285  display: flex;7286  align-items: center;7287  justify-content: space-between;7288  gap: 8px;7289}72907291.peach-settings-license-key {7292  font-family: 'IBM Plex Mono', monospace;7293  font-size: 0.75rem;7294  color: var(--peach-t0);7295  letter-spacing: 0.04em;7296  word-break: break-all;7297}72987299.peach-settings-license-copy {7300  font-size: 0.6875rem;7301  color: var(--peach-accent);7302  background: transparent;7303  border: none;7304  cursor: pointer;7305  padding: 4px 8px;7306  border-radius: 4px;7307  flex-shrink: 0;7308  transition: opacity 150ms ease;7309}73107311.peach-settings-license-copy:hover {7312  opacity: 0.75;7313}73147315@keyframes peach-panic-pulse {7316  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7317  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7318}73197320[data-motion="reduce"] .peach-panic-final-button {7321  animation: none;7322}73237324/* Vault History — Settings → Vault sub-view */73257326.peach-history-list {7327  border: 1px solid var(--peach-border);7328  border-radius: 8px;7329  overflow: hidden;7330  margin: 8px 0 4px;7331}73327333.peach-history-row {7334  display: flex;7335  align-items: center;7336  justify-content: space-between;7337  padding: 9px 12px;7338  gap: 10px;7339  border-bottom: 1px solid var(--peach-border);7340}73417342.peach-history-row:last-child {7343  border-bottom: none;7344}73457346.peach-history-meta {7347  display: flex;7348  flex-direction: column;7349  gap: 2px;7350  min-width: 0;7351  flex: 1;7352}73537354.peach-history-time {7355  font-size: 0.75rem;7356  font-family: 'IBM Plex Mono', ui-monospace, monospace;7357  color: var(--peach-t0);7358  white-space: nowrap;7359  overflow: hidden;7360  text-overflow: ellipsis;7361}73627363.peach-history-sub {7364  font-size: 0.625rem;7365  color: var(--peach-t2);7366  letter-spacing: 0.06em;7367  text-transform: uppercase;7368  white-space: nowrap;7369  overflow: hidden;7370  text-overflow: ellipsis;7371}73727373.peach-history-btn {7374  flex-shrink: 0;7375  white-space: nowrap;7376  min-width: 56px;7377  text-align: center;7378}73797380.peach-history-btn.is-busy {7381  opacity: 0.65;7382}73837384.peach-history-footer {7385  font-size: 0.625rem;7386  color: var(--peach-t3);7387  letter-spacing: 0.05em;7388  text-align: right;7389  margin: 0;7390  padding: 2px 0 0;7391}73927393/* ── Context menu + swipe-copy flash ─────────────────────── */7394.peach-context-menu-backdrop {7395  position: fixed;7396  inset: 0;7397  background: rgba(0, 0, 0, 0.45);7398  z-index: 100;7399  display: flex;7400  align-items: flex-end;7401  justify-content: center;7402  animation: peach-ctx-fade 140ms ease both;7403}7404.peach-context-menu {7405  width: min(360px, calc(100vw - 24px));7406  margin-bottom: max(env(safe-area-inset-bottom), 12px);7407  background: var(--peach-bg);7408  border: 1px solid var(--peach-t3);7409  border-radius: 14px;7410  padding: 6px;7411  display: flex;7412  flex-direction: column;7413  gap: 2px;7414  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7415  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7416}7417@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7418@keyframes peach-ctx-rise {7419  from { transform: translateY(16px); opacity: 0; }7420  to   { transform: translateY(0);    opacity: 1; }7421}7422.peach-context-menu-item {7423  background: transparent;7424  color: var(--peach-t0);7425  border: 0;7426  border-radius: 10px;7427  padding: 12px 14px;7428  text-align: left;7429  font: inherit;7430  cursor: pointer;7431}7432.peach-context-menu-item:hover,7433.peach-context-menu-item:focus-visible {7434  background: var(--peach-t3);7435}7436.peach-context-menu-item--danger {7437  color: var(--peach-health-bad, #d96868);7438}7439.peach-context-menu-item--cancel {7440  color: var(--peach-t2);7441  margin-top: 4px;7442  border-top: 1px solid var(--peach-t3);7443  border-radius: 0 0 10px 10px;7444}74457446/* Swipe-to-copy flash */7447.peach-entry-row.is-copy-flash {7448  animation: peach-copy-flash 600ms ease both;7449}7450@keyframes peach-copy-flash {7451  0%   { background: transparent; }7452  20%  { background: rgba(217, 153, 51, 0.32); }7453  100% { background: transparent; }7454}74557456html { font-size: 16px; }74577458/* ── Recovery word entry ─────────────────────────────────────────── */7459.peach-lock-recover-link {7460  display: block;7461  width: 100%;7462  margin-top: 12px;7463  background: none;7464  border: none;7465  font-family: "IBM Plex Mono", monospace;7466  font-size: 0.625rem;7467  letter-spacing: 0.06em;7468  color: var(--peach-t2);7469  cursor: pointer;7470  text-align: center;7471  padding: 4px;7472  transition: color 120ms ease;7473}7474.peach-lock-recover-link:hover {7475  color: var(--peach-t0);7476}74777478.lock-screen--recovery {7479  display: flex;7480  flex-direction: column;7481  align-items: stretch;7482  padding: 12px 20px 24px;7483  overflow: hidden;7484}74857486.peach-recovery-nav {7487  display: flex;7488  align-items: center;7489  position: relative;7490  z-index: 1;7491  margin-bottom: 4px;7492}74937494/* Mask runes to the top decorative band only — keep inputs and the7495   bottom CTA button clear. The bottom of the popup is reserved for7496   submit buttons; rendering runes there overlaps the button glyph. */7497.peach-rune-background--recovery {7498  -webkit-mask-image: linear-gradient(7499    to bottom,7500    black 0px, black 85px,7501    transparent 110px,7502    transparent 100%7503  );7504  mask-image: linear-gradient(7505    to bottom,7506    black 0px, black 85px,7507    transparent 110px,7508    transparent 100%7509  );7510}75117512.peach-recovery-header {7513  text-align: center;7514  margin-bottom: 16px;7515  margin-top: 4px;7516}7517.peach-recovery-header .peach-onboarding-headline {7518  font-size: 1.25rem;7519  font-weight: 300;7520  letter-spacing: 0.02em;7521  margin: 0 0 4px;7522}7523.peach-recovery-header .peach-hint {7524  font-family: "IBM Plex Mono", monospace;7525  font-size: 0.625rem;7526  color: var(--peach-t2);7527  letter-spacing: 0.04em;7528  margin: 0;7529}75307531/* 12-word grid: 2 columns × 6 rows */7532.peach-recovery-grid {7533  display: grid;7534  grid-template-columns: repeat(2, 1fr);7535  gap: 12px 20px;7536  width: 100%;7537  margin-bottom: 0;7538}75397540.peach-recovery-word-slot {7541  display: flex;7542  align-items: center;7543  gap: 6px;7544  min-width: 0;7545}75467547.peach-recovery-word-index {7548  font-family: "IBM Plex Mono", monospace;7549  font-size: 0.5rem;7550  color: rgba(255, 255, 255, 0.35);7551  min-width: 14px;7552  flex-shrink: 0;7553  text-align: right;7554  letter-spacing: 0.04em;7555}75567557.peach-recovery-word-input {7558  flex: 1;7559  min-width: 0;7560  background: transparent;7561  border: none;7562  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7563  color: var(--peach-t0);7564  font-family: "IBM Plex Mono", monospace;7565  font-size: 0.6875rem;7566  letter-spacing: 0.06em;7567  padding: 5px 2px 4px;7568  outline: none;7569  text-transform: lowercase;7570  transition: border-color 120ms ease;7571}7572.peach-recovery-word-input::placeholder {7573  color: rgba(255, 255, 255, 0.18);7574}7575.peach-recovery-word-input:focus {7576  border-bottom-color: var(--peach-accent);7577}75787579.peach-recovery-submit {7580  width: 100%;7581  margin-top: auto;7582}75837584.peach-recovery-new-password-form {7585  width: 100%;7586  display: flex;7587  flex-direction: column;7588  gap: 16px;7589  margin-bottom: 8px;7590}7591.peach-recovery-new-password-form .peach-newvault-field {7592  display: flex;7593  flex-direction: column;7594  gap: 4px;7595}75967597/* ── Recovery words display (post-create) ────────────────────────── */7598.lock-screen--recovery-display {7599  display: flex;7600  flex-direction: column;7601  align-items: stretch;7602  padding: 0 20px 20px;7603  min-height: 0;7604  overflow-y: auto;7605}76067607.peach-recovery-words-display {7608  width: 100%;7609  margin-bottom: 16px;7610  border: 1px solid var(--peach-t3);7611  border-radius: 8px;7612  padding: 12px 14px;7613  background: rgba(245, 240, 234, 0.04);7614}76157616.peach-recovery-words-label {7617  font-family: "IBM Plex Mono", monospace;7618  font-size: 0.5rem;7619  letter-spacing: 0.08em;7620  color: var(--peach-t2);7621  text-transform: uppercase;7622  margin-bottom: 10px;7623}76247625.peach-recovery-word-list {7626  list-style: none;7627  margin: 0;7628  padding: 0;7629  display: grid;7630  grid-template-columns: repeat(2, 1fr);7631  gap: 6px 16px;7632}76337634.peach-recovery-word-item {7635  display: flex;7636  align-items: baseline;7637  gap: 5px;7638}76397640.peach-recovery-word-num {7641  font-family: "IBM Plex Mono", monospace;7642  font-size: 0.5rem;7643  color: var(--peach-t2);7644  width: 14px;7645  flex: 0 0 14px;7646  text-align: right;7647  letter-spacing: 0.04em;7648  font-variant-numeric: tabular-nums;7649}76507651.peach-recovery-download-btn {7652  display: block;7653  margin: 10px auto 0;7654  padding: 4px 10px;7655  background: transparent;7656  border: 1px solid var(--peach-border);7657  border-radius: 6px;7658  color: var(--peach-t2);7659  font-family: "IBM Plex Mono", monospace;7660  font-size: 0.5625rem;7661  letter-spacing: 0.06em;7662  text-transform: lowercase;7663  cursor: pointer;7664  transition: border-color 0.15s, color 0.15s;7665}76667667.peach-recovery-download-btn:hover {7668  border-color: var(--peach-accent);7669  color: var(--peach-t0);7670}76717672.peach-recovery-word-text {7673  font-family: "IBM Plex Mono", monospace;7674  font-size: 0.6875rem;7675  letter-spacing: 0.06em;7676  color: var(--peach-t0);7677  text-transform: lowercase;7678}76797680.peach-hint--warning {7681  color: var(--peach-accent);7682  font-style: italic;7683}7684.peach-hint--success {7685  color: var(--peach-t2);7686  font-family: "IBM Plex Mono", monospace;7687  font-size: 0.625rem;7688  letter-spacing: 0.06em;7689}76907691/* Confirmation step */7692.peach-recovery-confirm {7693  width: 100%;7694  flex: 1;7695  display: flex;7696  flex-direction: column;7697}7698.peach-recovery-confirm-label {7699  font-family: "IBM Plex Mono", monospace;7700  font-size: 0.5625rem;7701  letter-spacing: 0.04em;7702  color: var(--peach-t2);7703  text-align: center;7704  margin: 0 0 12px;7705}7706.peach-recovery-confirm-fields {7707  display: flex;7708  flex-direction: column;7709  gap: 14px;7710  margin-bottom: 10px;7711}7712.peach-recovery-confirm-field {7713  display: flex;7714  align-items: center;7715  gap: 8px;7716}7717.peach-recovery-confirm-num {7718  font-family: "IBM Plex Mono", monospace;7719  font-size: 0.5rem;7720  color: var(--peach-t2);7721  min-width: 44px;7722  letter-spacing: 0.04em;7723}7724.peach-recovery-confirm-input {7725  flex: 1;7726  background: transparent;7727  border: none;7728  border-bottom: 1px solid var(--peach-t3);7729  color: var(--peach-t0);7730  font-family: "IBM Plex Mono", monospace;7731  font-size: 0.6875rem;7732  letter-spacing: 0.06em;7733  padding: 4px 2px 3px;7734  outline: none;7735  text-transform: lowercase;7736  transition: border-color 120ms ease;7737}7738.peach-recovery-confirm-input:focus {7739  border-bottom-color: var(--peach-accent);7740}7741.peach-recovery-confirm-input:disabled {7742  opacity: 0.4;7743  cursor: not-allowed;7744}7745.peach-recovery-confirm-btn {7746  width: 100%;7747  margin-top: auto;7748}77497750/* ============================================================7751   Sync info sheet7752   ============================================================ */77537754.peach-sync-info-backdrop {7755  position: fixed;7756  inset: 0;7757  z-index: 200;7758  background: rgba(0, 0, 0, 0.55);7759  display: flex;7760  align-items: flex-end;7761  animation: peach-fade-in 200ms ease forwards;7762}77637764@keyframes peach-fade-in {7765  from { opacity: 0; }7766  to   { opacity: 1; }7767}77687769.peach-sync-info-sheet {7770  width: 100%;7771  background: var(--peach-bg-card, var(--peach-bg));7772  border-top-left-radius: 20px;7773  border-top-right-radius: 20px;7774  padding: 12px 24px 32px;7775  display: flex;7776  flex-direction: column;7777  gap: 20px;7778  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7779}77807781@keyframes peach-sheet-up {7782  from { transform: translateY(100%); }7783  to   { transform: translateY(0); }7784}77857786.peach-sync-info-handle {7787  width: 36px;7788  height: 4px;7789  border-radius: 2px;7790  background: var(--peach-border);7791  margin: 0 auto 4px;7792  flex-shrink: 0;7793}77947795.peach-sync-info-title {7796  font-family: 'Cormorant Garamond', serif;7797  font-style: italic;7798  font-size: 26px;7799  font-weight: 600;7800  color: var(--peach-t0);7801  margin: 0;7802  line-height: 1.2;7803}78047805.peach-sync-info-body {7806  display: flex;7807  flex-direction: column;7808  gap: 14px;7809}78107811.peach-sync-info-point {7812  display: flex;7813  gap: 12px;7814  align-items: flex-start;7815  font-size: 14px;7816  color: var(--peach-t2);7817  line-height: 1.6;7818  margin: 0;7819}78207821.peach-sync-info-icon {7822  color: var(--peach-accent);7823  font-size: 16px;7824  flex-shrink: 0;7825  margin-top: 1px;7826}78277828.peach-sync-info-actions {7829  display: flex;7830  flex-direction: column;7831  gap: 12px;7832  margin-top: 4px;7833}78347835.peach-sync-info-pro-link {7836  background: none;7837  border: none;7838  font-size: 13px;7839  color: var(--peach-t3);7840  cursor: pointer;7841  padding: 0;7842  font-family: inherit;7843  text-align: center;7844  transition: color 150ms ease;7845}78467847.peach-sync-info-pro-link:hover {7848  color: var(--peach-accent);7849}78507851.peach-btn--full {7852  width: 100%;7853}78547855/* ── Sync screen ── */78567857.peach-sync-coming-soon {7858  display: flex;7859  align-items: flex-start;7860  gap: 10px;7861  padding: 12px 14px;7862  background: var(--peach-s1);7863  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);7864  border-radius: 10px;7865}7866.peach-sync-coming-soon__icon {7867  flex-shrink: 0;7868  color: var(--peach-accent);7869  margin-top: 1px;7870  line-height: 0;7871}7872.peach-sync-coming-soon__title {7873  font-family: 'Cormorant Garamond', serif;7874  font-weight: 500;7875  font-size: 13px;7876  color: var(--peach-accent);7877  margin: 0 0 5px;7878  line-height: 1.3;7879}7880.peach-sync-coming-soon__body {7881  font-size: 12px;7882  color: var(--peach-t1);7883  line-height: 1.55;7884  margin: 0;7885}78867887.peach-sync-screen {7888  display: flex;7889  flex-direction: column;7890  height: 100%;7891}78927893.peach-sync-content {7894  flex: 1;7895  overflow-y: auto;7896  padding: 24px 20px 40px;7897  display: flex;7898  flex-direction: column;7899  gap: 24px;7900}79017902/* Intro (State A) */7903.peach-sync-headline {7904  font-family: 'Cormorant Garamond', serif;7905  font-style: italic;7906  font-size: 28px;7907  font-weight: 600;7908  color: var(--peach-t0);7909  margin: 0 0 10px;7910  line-height: 1.2;7911}79127913.peach-sync-intro-body {7914  font-size: 14px;7915  color: var(--peach-t1);7916  line-height: 1.6;7917  margin: 0;7918}79197920.peach-sync-pro-note {7921  display: flex;7922  flex-direction: column;7923  gap: 8px;7924  background: var(--peach-t3);7925  border-radius: 10px;7926  padding: 12px 14px;7927}79287929.peach-sync-pro-note-text {7930  font-size: 12px;7931  color: var(--peach-t2);7932  line-height: 1.5;7933  margin: 0;7934}79357936.peach-sync-pro-link {7937  background: none;7938  border: none;7939  font-size: 12px;7940  color: var(--peach-accent);7941  cursor: pointer;7942  padding: 0;7943  font-family: inherit;7944  text-align: left;7945}79467947/* Status (State C) */7948.peach-sync-status {7949  padding: 12px 0;7950  border-bottom: 1px solid var(--peach-border);7951}79527953.peach-sync-status-row {7954  display: flex;7955  align-items: center;7956  gap: 8px;7957}79587959.peach-sync-dot {7960  width: 7px;7961  height: 7px;7962  border-radius: 50%;7963  flex-shrink: 0;7964}79657966.peach-sync-dot--green { background: var(--peach-health-ok); }7967.peach-sync-dot--amber { background: var(--peach-accent); }79687969.peach-sync-status-text {7970  font-family: 'IBM Plex Mono', monospace;7971  font-size: 11px;7972  color: var(--peach-t2);7973}79747975/* Paired devices */7976.peach-sync-section {7977  display: flex;7978  flex-direction: column;7979  gap: 2px;7980}79817982.peach-sync-section-label {7983  font-family: 'IBM Plex Mono', monospace;7984  font-size: 10px;7985  letter-spacing: 0.1em;7986  color: var(--peach-t3);7987  margin: 0 0 10px;7988}79897990.peach-sync-device-row {7991  display: flex;7992  justify-content: space-between;7993  align-items: baseline;7994  padding: 10px 0;7995  border-bottom: 1px solid var(--peach-border);7996  gap: 12px;7997}79987999.peach-sync-device-name {8000  font-size: 14px;8001  color: var(--peach-t1);8002}80038004.peach-sync-device-meta {8005  font-family: 'IBM Plex Mono', monospace;8006  font-size: 11px;8007  color: var(--peach-t3);8008  white-space: nowrap;8009}80108011.peach-sync-hub-note {8012  padding: 14px 16px;8013  border: 1px solid var(--peach-border);8014  border-radius: 10px;8015  display: flex;8016  flex-direction: column;8017  gap: 6px;8018  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8019}80208021.peach-sync-hub-note-title {8022  font-size: 13px;8023  font-weight: 600;8024  color: var(--peach-t0);8025  margin: 0;8026}80278028.peach-sync-hub-note-body {8029  font-size: 12px;8030  color: var(--peach-t2);8031  line-height: 1.6;8032  margin: 0;8033}80348035/* Action buttons */8036.peach-sync-actions {8037  display: flex;8038  gap: 10px;8039  flex-wrap: wrap;8040}80418042/* Upgrade prompt (State B) */8043.peach-sync-upgrade {8044  display: flex;8045  flex-direction: column;8046  gap: 12px;8047  padding: 16px;8048  border: 1px solid var(--peach-border);8049  border-radius: 10px;8050}80518052.peach-sync-upgrade-text {8053  font-size: 13px;8054  color: var(--peach-t2);8055  line-height: 1.6;8056  margin: 0;8057}80588059/* Network note */8060.peach-sync-network-note {8061  font-size: 12px;8062  color: var(--peach-t3);8063  line-height: 1.6;8064  margin: 0;8065}80668067/* Advanced */8068.peach-sync-advanced {8069  margin-top: auto;8070  padding-top: 16px;8071  border-top: 1px solid var(--peach-border);8072}80738074.peach-sync-advanced-toggle {8075  display: flex;8076  align-items: center;8077  gap: 8px;8078  background: none;8079  border: none;8080  font-family: 'IBM Plex Mono', monospace;8081  font-size: 11px;8082  letter-spacing: 0.08em;8083  color: var(--peach-t3);8084  cursor: pointer;8085  padding: 0;8086  text-transform: uppercase;8087}80888089.peach-sync-advanced-chevron {8090  display: inline-block;8091  transition: transform 200ms ease;8092  font-size: 10px;8093}80948095.peach-sync-advanced-chevron.is-open {8096  transform: rotate(90deg);8097}80988099.peach-sync-advanced-content {8100  margin-top: 14px;8101}81028103.peach-sync-advanced-row {8104  display: flex;8105  justify-content: space-between;8106  align-items: center;8107  gap: 16px;8108}81098110.peach-sync-advanced-title {8111  font-size: 14px;8112  color: var(--peach-t1);8113  margin: 0 0 2px;8114}81158116.peach-sync-advanced-subtitle {8117  font-size: 12px;8118  color: var(--peach-t3);8119  margin: 0;8120  line-height: 1.5;8121}81228123/* ── Add Device — Android scan tabs ─────────────────────────────────────── */81248125.peach-pairing-tabs {8126  display: flex;8127  border: 1px solid var(--peach-border);8128  border-radius: 8px;8129  overflow: hidden;8130  margin-bottom: 4px;8131}81328133.peach-pairing-tab {8134  flex: 1;8135  padding: 10px 0;8136  background: none;8137  border: none;8138  font-family: 'IBM Plex Mono', monospace;8139  font-size: 11px;8140  letter-spacing: 0.06em;8141  color: var(--peach-t2);8142  cursor: pointer;8143  transition: background 150ms, color 150ms;8144}81458146.peach-pairing-tab.is-active {8147  background: var(--peach-accent);8148  color: #fff;8149  font-weight: 600;8150}81518152.peach-pairing-tab:not(.is-active):active {8153  background: var(--peach-border);8154}81558156/* Camera view */8157.peach-pairing-camera-container {8158  position: relative;8159  width: 100%;8160  aspect-ratio: 1;8161  border-radius: 12px;8162  overflow: hidden;8163  background: #000;8164  flex-shrink: 0;8165}81668167.peach-pairing-video {8168  width: 100%;8169  height: 100%;8170  object-fit: cover;8171}81728173.peach-pairing-scan-frame {8174  position: absolute;8175  top: 50%;8176  left: 50%;8177  transform: translate(-50%, -50%);8178  width: 60%;8179  aspect-ratio: 1;8180  border: 2px solid var(--peach-accent);8181  border-radius: 8px;8182  pointer-events: none;8183}81848185/* ── Notes Mode ── */81868187/* Overlay that crossfades over the vault */8188.peach-notes-overlay {8189  position: fixed;8190  inset: 0;8191  z-index: 90;8192  opacity: 0;8193  pointer-events: none;8194  animation: peach-mode-in 220ms ease-in forwards;8195}81968197.peach-notes-overlay.is-visible {8198  opacity: 1;8199  pointer-events: auto;8200}82018202@keyframes peach-mode-in {8203  from { opacity: 0; }8204  to   { opacity: 1; }8205}82068207/* Top-level notes surface */8208.peach-notes-mode {8209  position: absolute;8210  inset: 0;8211  background: var(--peach-bg);8212  display: flex;8213  flex-direction: column;8214}82158216/* Rune canvas positioned behind content */8217.peach-note-rune-canvas {8218  position: absolute;8219  inset: 0;8220  width: 100%;8221  height: 100%;8222  pointer-events: none;8223  z-index: 0;8224}82258226/* TOC wrapper */8227.peach-notes-toc-wrapper {8228  position: absolute;8229  inset: 0;8230  z-index: 1;8231  opacity: 1;8232  pointer-events: auto;8233  transition: opacity 200ms ease;8234}82358236.peach-notes-toc-wrapper.is-hidden {8237  opacity: 0;8238  pointer-events: none;8239}82408241/* Editor wrapper */8242.peach-notes-editor-wrapper {8243  position: absolute;8244  inset: 0;8245  z-index: 2;8246  opacity: 0;8247  pointer-events: none;8248  transition: opacity 200ms ease;8249}82508251.peach-notes-editor-wrapper.is-visible {8252  opacity: 1;8253  pointer-events: auto;8254}82558256/* TOC inner */8257.peach-notes-toc {8258  position: relative;8259  display: flex;8260  flex-direction: column;8261  height: 100%;8262  padding-top: env(safe-area-inset-top, 0px);8263  padding-bottom: env(safe-area-inset-bottom, 0px);8264}82658266/* Shared header */8267.peach-notes-header {8268  display: flex;8269  align-items: center;8270  padding: 12px 16px;8271  gap: 12px;8272  flex-shrink: 0;8273  min-height: 52px;8274  position: relative;8275  z-index: 2;8276}82778278.peach-notes-back {8279  font-size: 22px;8280  color: var(--peach-t2);8281  background: none;8282  border: none;8283  padding: 4px;8284  cursor: pointer;8285  line-height: 1;8286  flex-shrink: 0;8287  transition: color 150ms ease;8288  -webkit-tap-highlight-color: transparent;8289}82908291.peach-notes-back:active { color: var(--peach-t0); }82928293.peach-notes-header-title {8294  flex: 1;8295  font-family: 'Cormorant Garamond', serif;8296  font-style: italic;8297  font-size: 22px;8298  color: var(--peach-t0);8299  text-align: center;8300}83018302.peach-notes-header-title.is-breadcrumb {8303  font-family: 'IBM Plex Mono', monospace;8304  font-style: normal;8305  font-size: 11px;8306  color: var(--peach-t3);8307  letter-spacing: 0.08em;8308  text-transform: uppercase;8309  cursor: pointer;8310}83118312.peach-notes-header-actions {8313  display: flex;8314  gap: 8px;8315  flex-shrink: 0;8316}83178318.peach-notes-header-btn {8319  width: 36px;8320  height: 36px;8321  display: flex;8322  align-items: center;8323  justify-content: center;8324  background: none;8325  border: none;8326  color: var(--peach-t2);8327  cursor: pointer;8328  border-radius: 8px;8329  font-size: 16px;8330  transition: color 150ms ease, background 150ms ease;8331  -webkit-tap-highlight-color: transparent;8332}83338334.peach-notes-header-btn:active {8335  background: rgba(255,255,255,0.06);8336  color: var(--peach-t0);8337}83388339/* Inline search bar */8340.peach-notes-search-input {8341  flex: 1;8342  background: none;8343  border: none;8344  outline: none;8345  font-family: 'IBM Plex Mono', monospace;8346  font-size: 13px;8347  color: var(--peach-t0);8348  padding: 4px 0;8349  letter-spacing: 0.02em;8350}83518352.peach-notes-search-input::placeholder {8353  color: var(--peach-t3);8354}83558356/* TOC list */8357.peach-notes-list-container {8358  flex: 1;8359  overflow-y: auto;8360  overflow-x: hidden;8361  scrollbar-width: none;8362  -webkit-overflow-scrolling: touch;8363  overscroll-behavior: contain;8364  position: relative;8365  z-index: 1;8366}83678368.peach-notes-list-container::-webkit-scrollbar { display: none; }83698370/* Note row */8371.peach-note-row {8372  position: relative;8373  display: grid;8374  grid-template-columns: 44px 8px 1fr 8px auto;8375  align-items: center;8376  min-height: 72px;8377  padding: 16px 20px;8378  border-bottom: 0.5px solid var(--peach-border);8379  cursor: pointer;8380  overflow: hidden;8381  touch-action: pan-y;8382  user-select: none;8383  -webkit-user-select: none;8384  -webkit-tap-highlight-color: transparent;8385}83868387.peach-note-row:first-child {8388  border-top: 0.5px solid var(--peach-border);8389}83908391.peach-note-row:active {8392  background: rgba(255,255,255,0.02);8393}83948395.peach-note-numeral {8396  font-family: 'Cormorant Garamond', serif;8397  font-style: italic;8398  font-size: 15px;8399  color: var(--peach-accent);8400  text-align: right;8401  line-height: 1;8402  flex-shrink: 0;8403}84048405.peach-note-title-gap { /* grid spacer */ }84068407.peach-note-title {8408  font-family: 'Cormorant Garamond', serif;8409  font-style: italic;8410  font-size: 18px;8411  color: var(--peach-t0);8412  line-height: 1.3;8413  min-width: 0;8414  overflow-wrap: break-word;8415}84168417.peach-note-title-match {8418  color: var(--peach-accent);8419}84208421.peach-note-date {8422  font-family: 'IBM Plex Mono', monospace;8423  font-size: 11px;8424  color: var(--peach-t2);8425  white-space: nowrap;8426  text-align: right;8427  flex-shrink: 0;8428  grid-column: 5;8429}84308431/* Swipe underlays */8432.peach-note-row-underlay {8433  position: absolute;8434  inset: 0;8435  display: flex;8436  align-items: center;8437  padding: 0 24px;8438  font-family: 'IBM Plex Mono', monospace;8439  font-size: 11px;8440  letter-spacing: 0.1em;8441  pointer-events: none;8442  z-index: 0;8443}84448445.peach-note-row-underlay--delete {8446  background: #8B2020;8447  color: rgba(255,255,255,0.9);8448  justify-content: flex-end;8449}84508451.peach-note-row-underlay--archive {8452  background: var(--peach-accent);8453  color: #0C0A06;8454  justify-content: flex-start;8455}84568457/* Delete confirm strip */8458.peach-note-delete-confirm {8459  position: absolute;8460  inset: 0;8461  background: var(--peach-bg);8462  display: flex;8463  align-items: center;8464  gap: 12px;8465  padding: 0 20px;8466  font-family: 'IBM Plex Mono', monospace;8467  font-size: 11px;8468  color: var(--peach-t1);8469  letter-spacing: 0.04em;8470  animation: peach-delete-confirm-in 150ms ease both;8471  z-index: 10;8472}84738474@keyframes peach-delete-confirm-in {8475  from { opacity: 0; }8476  to   { opacity: 1; }8477}84788479.peach-note-delete-confirm-btn {8480  background: #8B2020;8481  color: rgba(255,255,255,0.9);8482  border: none;8483  border-radius: 6px;8484  padding: 4px 10px;8485  font-family: 'IBM Plex Mono', monospace;8486  font-size: 10px;8487  cursor: pointer;8488  letter-spacing: 0.06em;8489}84908491.peach-note-delete-cancel-btn {8492  background: none;8493  border: none;8494  color: var(--peach-t3);8495  font-family: 'IBM Plex Mono', monospace;8496  font-size: 10px;8497  cursor: pointer;8498  letter-spacing: 0.06em;8499  padding: 4px 6px;8500}85018502/* + New note button */8503.peach-notes-new-btn {8504  font-family: 'IBM Plex Mono', monospace;8505  font-size: 12px;8506  color: var(--peach-t3);8507  text-align: center;8508  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8509  background: none;8510  border: none;8511  width: 100%;8512  cursor: pointer;8513  letter-spacing: 0.04em;8514  transition: color 150ms ease;8515  -webkit-tap-highlight-color: transparent;8516}85178518.peach-notes-new-btn:active { color: var(--peach-accent); }85198520/* Empty state */8521.peach-notes-empty {8522  display: flex;8523  flex-direction: column;8524  align-items: center;8525  justify-content: center;8526  flex: 1;8527  padding: 48px 32px;8528  gap: 16px;8529}85308531.peach-notes-empty-text {8532  font-family: 'Cormorant Garamond', serif;8533  font-style: italic;8534  font-size: 20px;8535  color: var(--peach-t3);8536  text-align: center;8537  margin: 0;8538  line-height: 1.4;8539  white-space: pre-line;8540}85418542/* ── Editor surface ── */85438544.peach-note-editor-surface {8545  position: absolute;8546  inset: 0;8547  background: var(--peach-bg);8548  display: flex;8549  flex-direction: column;8550  padding-top: env(safe-area-inset-top, 0px);8551}85528553.peach-note-editor-scroll {8554  flex: 1;8555  overflow-y: auto;8556  overflow-x: hidden;8557  scrollbar-width: none;8558  -webkit-overflow-scrolling: touch;8559  padding: 0 24px 120px;8560  position: relative;8561  z-index: 1;8562}85638564.peach-note-editor-scroll::-webkit-scrollbar { display: none; }85658566/* Desktop toolbar (always visible above body) */8567.peach-note-toolbar-desktop-inline {8568  display: flex;8569  align-items: center;8570  gap: 2px;8571  padding: 6px 0 12px;8572  margin-bottom: 4px;8573  border-bottom: 0.5px solid var(--peach-border);8574}85758576/* Title field */8577.peach-note-title-field {8578  font-family: 'Cormorant Garamond', serif;8579  font-style: italic;8580  font-size: 32px;8581  font-weight: 600;8582  color: var(--peach-t0);8583  line-height: 1.2;8584  padding: 8px 0 0;8585  outline: none;8586  min-height: 44px;8587  word-break: break-word;8588  position: relative;8589  z-index: 1;8590}85918592.peach-note-title-field:empty::before {8593  content: attr(data-placeholder);8594  color: var(--peach-t3);8595  pointer-events: none;8596}85978598/* Hairline separator */8599.peach-note-hairline {8600  height: 0.5px;8601  background: var(--peach-border);8602  margin: 12px 0 20px;8603  position: relative;8604  z-index: 1;8605}86068607/* Body field */8608.peach-note-body-field {8609  font-family: 'DM Sans', sans-serif;8610  font-size: 16px;8611  color: var(--peach-t0);8612  line-height: 1.85;8613  padding: 0;8614  outline: none;8615  min-height: 240px;8616  word-break: break-word;8617  position: relative;8618  z-index: 1;8619}86208621.peach-note-body-field:empty::before {8622  content: attr(data-placeholder);8623  color: var(--peach-t3);8624  font-style: italic;8625  pointer-events: none;8626}86278628.peach-note-body-field h2 {8629  font-family: 'Cormorant Garamond', serif;8630  font-style: italic;8631  font-size: 22px;8632  font-weight: 600;8633  color: var(--peach-t0);8634  margin: 20px 0 8px;8635}86368637.peach-note-body-field blockquote {8638  border-left: 2px solid var(--peach-accent);8639  margin: 12px 0;8640  padding-left: 16px;8641  color: var(--peach-t1);8642  font-style: italic;8643}86448645.peach-note-body-field ul,8646.peach-note-body-field ol {8647  padding-left: 20px;8648  margin: 8px 0;8649}86508651.peach-note-body-field li {8652  margin: 4px 0;8653}86548655.peach-note-body-field hr {8656  border: none;8657  border-top: 0.5px solid var(--peach-border);8658  margin: 16px 0;8659}86608661/* Saved indicator */8662.peach-note-saved-indicator {8663  font-family: 'IBM Plex Mono', monospace;8664  font-size: 11px;8665  color: var(--peach-t3);8666  letter-spacing: 0.04em;8667  text-align: right;8668  padding: 6px 24px;8669  flex-shrink: 0;8670  transition: opacity 300ms ease;8671  pointer-events: none;8672  position: relative;8673  z-index: 1;8674}86758676/* Mobile keyboard toolbar */8677.peach-note-toolbar-mobile {8678  display: flex;8679  align-items: center;8680  padding: 8px 16px;8681  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8682  background: var(--peach-bg);8683  border-top: 0.5px solid var(--peach-border);8684  gap: 4px;8685  flex-shrink: 0;8686  position: relative;8687  z-index: 10;8688}86898690.peach-note-toolbar-btn {8691  min-width: 36px;8692  height: 36px;8693  display: flex;8694  align-items: center;8695  justify-content: center;8696  background: none;8697  border: none;8698  border-radius: 8px;8699  cursor: pointer;8700  font-size: 14px;8701  color: var(--peach-t1);8702  font-family: 'DM Sans', sans-serif;8703  font-weight: 600;8704  transition: background 100ms ease, color 100ms ease;8705  -webkit-tap-highlight-color: transparent;8706}87078708.peach-note-toolbar-btn--italic { font-style: italic; }8709.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8710.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }87118712.peach-note-toolbar-divider {8713  width: 0.5px;8714  height: 20px;8715  background: var(--peach-border);8716  margin: 0 4px;8717  flex-shrink: 0;8718}87198720.peach-note-toolbar-spacer { flex: 1; }87218722/* Desktop: larger headline in TOC */8723@media (min-width: 400px) {8724  .peach-notes-header-title:not(.is-breadcrumb) {8725    font-size: 32px;8726  }87278728  .peach-note-row {8729    min-height: 64px;8730    padding: 14px 16px;8731  }8732}87338734/* Flying title — shared element during expansion/collapse */