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(205, 191, 164, 0.68);1601  border-color: rgba(26, 18, 8, 0.10);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(205, 191, 164, 0.95);1610    border-color: rgba(26, 18, 8, 0.12);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(206, 196, 186, 0.70);3523  border: 1px solid rgba(26, 18, 8, 0.10);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(206, 196, 186, 0.95);3532    border: 1px solid rgba(26, 18, 8, 0.12);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(196, 188, 181, 0.78);3549  border: 1px solid rgba(26, 18, 8, 0.12);3550  box-shadow:3551    inset 0 1px 0 rgba(255, 255, 255, 0.4),3552    0 8px 24px rgba(80, 56, 32, 0.20);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(196, 188, 181, 0.97);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.peach-pill-group {5865  display: flex;5866  gap: 6px;5867}5868.peach-pill-group .peach-btn.is-active {5869  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5870  border-color: var(--peach-accent);5871  color: var(--peach-t0);5872}58735874/* ── Card entry styles ───────────────────────────────────────── */5875.peach-card-number {5876  font-family: var(--peach-mono);5877  letter-spacing: 0.08em;5878}58795880.peach-card-network-badge {5881  font-size: 0.625rem;5882  padding: 1px 5px;5883  border-radius: 4px;5884  border: 0.5px solid var(--peach-border);5885  color: var(--peach-text-dim);5886  margin-left: 6px;5887  vertical-align: middle;5888}58895890.peach-card-expiry-row {5891  display: flex;5892  align-items: center;5893  gap: 8px;5894}58955896.peach-card-expiry-sep {5897  color: var(--peach-text-dim);5898}58995900/* ── Pro tier — upgrade screen ──────────────────────────────── */5901.peach-pro-mark {5902  font-size: 0.5625rem;5903  color: var(--peach-accent);5904  margin-left: 6px;5905  vertical-align: super;5906  opacity: 0.7;5907}59085909.peach-pro-mini-badge {5910  display: block;5911  font-size: 0.625rem;5912  font-style: italic;5913  color: var(--peach-accent);5914  letter-spacing: 0.04em;5915  margin-top: -2px;5916  padding-left: 2px;5917  opacity: 0.85;5918  text-align: center;5919}59205921.peach-wordmark-stack {5922  display: inline-flex;5923  flex-direction: column;5924  align-items: center;5925}59265927/* ── Pro tier — upgrade page ─────────────────────────────────── */5928.peach-pro-upgrade {5929  display: flex;5930  flex-direction: column;5931  align-items: stretch;5932  gap: 10px;5933  padding: 0 4px 8px;5934}59355936.peach-pro-upgrade-hero {5937  display: flex;5938  flex-direction: column;5939  align-items: center;5940  gap: 4px;5941  padding: 10px 0 6px;5942}59435944.peach-pro-upgrade-mark-wrap {5945  display: flex;5946  align-items: center;5947  justify-content: center;5948  margin-bottom: 2px;5949}59505951.peach-pro-upgrade-mark {5952  width: 38px;5953  height: 38px;5954  opacity: 0.9;5955}59565957.peach-pro-upgrade-title {5958  font-family: var(--font-display, var(--font-ui));5959  font-size: 22px;5960  margin: 0;5961  color: var(--peach-t0);5962  letter-spacing: 0.01em;5963}59645965.peach-pro-upgrade-tagline {5966  margin: 0;5967  font-style: italic;5968  color: var(--peach-t2);5969  font-size: 0.6875rem;5970}59715972.peach-pro-features {5973  display: flex;5974  flex-direction: column;5975  gap: 8px;5976  border-top: 1px solid var(--peach-border);5977  border-bottom: 1px solid var(--peach-border);5978  padding: 10px 4px;5979}59805981.peach-pro-feature {5982  display: flex;5983  gap: 9px;5984  align-items: baseline;5985}59865987.peach-pro-feature-mark {5988  color: var(--peach-accent);5989  font-size: 0.6875rem;5990  flex-shrink: 0;5991  display: inline-block;5992  transform-origin: center;5993  opacity: 0.8;5994}59955996.peach-pro-feature-text {5997  display: flex;5998  flex-direction: column;5999  gap: 1px;6000}60016002.peach-pro-feature-name {6003  font-size: 0.75rem;6004  color: var(--peach-t0);6005}60066007.peach-pro-feature-desc {6008  font-size: 0.625rem;6009  color: var(--peach-t2);6010}60116012.peach-pro-feature.is-highlighted .peach-pro-feature-mark {6013  animation: peach-pulse-accent 600ms ease-out forwards;6014}60156016@keyframes peach-pulse-accent {6017  0%   { opacity: 1; transform: scale(1.4); }6018  100% { opacity: 0.7; transform: scale(1); }6019}60206021.peach-pro-upgrade-actions {6022  display: flex;6023  flex-direction: column;6024  align-items: center;6025  gap: 8px;6026  padding-top: 2px;6027}60286029.peach-pro-pricing {6030  margin: 0;6031  text-align: center;6032  font-size: 0.6875rem;6033  color: var(--peach-t2);6034  letter-spacing: 0.04em;6035}60366037.peach-pro-upgrade-cta {6038  align-self: center;6039  text-align: center;6040  text-decoration: none;6041  display: block;6042  padding: 9px 32px;6043  font-size: 0.8125rem;6044  min-width: 180px;6045}60466047.peach-pro-key-divider {6048  display: flex;6049  align-items: center;6050  gap: 8px;6051  width: 100%;6052  color: var(--peach-t3);6053  font-size: 0.625rem;6054  letter-spacing: 0.08em;6055}60566057.peach-pro-key-divider::before,6058.peach-pro-key-divider::after {6059  content: "";6060  flex: 1;6061  height: 1px;6062  background: var(--peach-border);6063}60646065.peach-pro-key-link {6066  background: transparent;6067  border: 1px solid var(--peach-border);6068  border-radius: 8px;6069  color: var(--peach-t1);6070  font-size: 0.75rem;6071  cursor: pointer;6072  align-self: stretch;6073  padding: 8px 12px;6074  text-align: center;6075  transition: border-color 0.2s, color 0.2s;6076}60776078.peach-pro-key-link:hover {6079  border-color: var(--peach-accent);6080  color: var(--peach-accent);6081}60826083/* ── Pro tier — key ceremony ─────────────────────────────────── */6084.peach-pro-key-ceremony {6085  display: flex;6086  flex-direction: column;6087  align-items: center;6088  gap: 12px;6089  padding: 20px 4px 16px;6090}60916092.peach-pro-key-ceremony .peach-lock-rune-string {6093  font-size: 1rem;6094  gap: 12px;6095  flex: 0;6096  justify-content: center;6097}60986099.peach-pro-key-ceremony-label {6100  margin: 0;6101  font-size: 0.6875rem;6102  color: var(--peach-t2);6103  font-style: italic;6104  letter-spacing: 0.04em;6105}61066107.peach-pro-key-input {6108  font-family: var(--font-mono, monospace);6109  letter-spacing: 0.06em;6110  text-align: center;6111  width: 100%;6112  box-sizing: border-box;6113}61146115.peach-pro-key-error {6116  margin: 0;6117  font-size: 0.75rem;6118  text-align: center;6119  color: var(--peach-breach, #e55);6120  padding: 0;6121}61226123.peach-pro-key-activate {6124  width: 100%;6125  text-align: center;6126  box-sizing: border-box;6127  padding: 10px 20px;6128  font-size: 0.8125rem;6129}61306131.peach-pro-key-cancel {6132  background: transparent;6133  border: 0;6134  color: var(--peach-t2);6135  font-size: 0.6875rem;6136  cursor: pointer;6137  padding: 2px 8px;6138  transition: color 0.2s;6139}61406141.peach-pro-key-cancel:hover { color: var(--peach-accent); }61426143/* ── Pro tier — active state ─────────────────────────────────── */6144.peach-pro-active {6145  display: flex;6146  flex-direction: column;6147  align-items: center;6148  gap: 0;6149  padding: 8px 4px 16px;6150  min-height: 280px;6151}61526153.peach-pro-active-hero {6154  display: flex;6155  flex-direction: column;6156  align-items: center;6157  gap: 6px;6158  padding: 20px 0 22px;6159}61606161.peach-pro-active-mark-wrap {6162  display: flex;6163  align-items: center;6164  justify-content: center;6165  margin-bottom: 4px;6166}61676168.peach-pro-active-mark {6169  width: 60px;6170  height: 60px;6171  filter:6172    drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 55%, transparent))6173    drop-shadow(0 0 26px color-mix(in srgb, var(--peach-accent) 22%, transparent));6174}61756176.peach-pro-active-title {6177  font-family: var(--font-display, var(--font-ui));6178  font-size: 26px;6179  margin: 0;6180  color: var(--peach-t0);6181  letter-spacing: 0.01em;6182}61836184.peach-pro-active-since {6185  margin: 0;6186  font-size: 0.6875rem;6187  color: var(--peach-t2);6188  font-style: italic;6189}61906191.peach-pro-active-features {6192  display: flex;6193  flex-direction: column;6194  gap: 8px;6195  width: 100%;6196  padding: 14px 8px 0;6197  border-top: 1px solid var(--peach-border);6198  flex: 1;6199}62006201.peach-pro-active-feature {6202  display: flex;6203  align-items: center;6204  gap: 9px;6205}62066207.peach-pro-active-feature-mark {6208  color: var(--peach-accent);6209  font-size: 0.625rem;6210  opacity: 0.65;6211  flex-shrink: 0;6212}62136214.peach-pro-active-feature-name {6215  font-size: 0.75rem;6216  color: var(--peach-t1);6217}62186219.peach-pro-deactivate {6220  align-self: center;6221  background: transparent;6222  border: 0;6223  color: var(--peach-t3);6224  font-size: 0.625rem;6225  cursor: pointer;6226  padding: 8px 0 0;6227  margin-top: 16px;6228  letter-spacing: 0.03em;6229  transition: color 0.2s;6230}62316232.peach-pro-deactivate:hover { color: var(--peach-t2); }62336234.peach-pro-deactivate:disabled {6235  opacity: 0.5;6236  cursor: default;6237}62386239/* ── Pro advanced health remediation queue ──────────────────── */6240.peach-health-pro-queue {6241  display: flex;6242  flex-direction: column;6243  gap: 10px;6244  padding: 12px;6245  margin: 0 0 12px;6246  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6247  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6248  border-radius: 10px;6249}62506251.peach-health-pro-queue-head {6252  display: flex;6253  justify-content: space-between;6254  align-items: baseline;6255}62566257.peach-health-pro-queue-title {6258  font-size: 0.75rem;6259  font-weight: 500;6260  letter-spacing: 0.04em;6261  text-transform: uppercase;6262  color: var(--peach-accent);6263}62646265.peach-health-pro-queue-score {6266  font-size: 0.6875rem;6267  color: var(--peach-t2);6268}62696270.peach-health-pro-row {6271  display: flex;6272  gap: 10px;6273  align-items: center;6274  padding: 8px 0;6275  border-top: 1px solid var(--peach-border);6276}62776278.peach-health-pro-row-info {6279  flex: 1;6280  display: flex;6281  flex-direction: column;6282  gap: 4px;6283  min-width: 0;6284}62856286.peach-health-pro-row-name {6287  font-size: 0.8125rem;6288  color: var(--peach-t0);6289  overflow: hidden;6290  text-overflow: ellipsis;6291  white-space: nowrap;6292}62936294.peach-health-pro-row-meta {6295  font-size: 0.6875rem;6296  color: var(--peach-t2);6297}62986299.peach-health-pro-bar {6300  height: 2px;6301  background: var(--peach-border);6302  border-radius: 2px;6303  overflow: hidden;6304  margin-top: 2px;6305}63066307.peach-health-pro-bar-fill {6308  height: 100%;6309  background: var(--peach-accent);6310  transition: width 200ms ease-out;6311}63126313/* ── Pro activation celebration ── */6314@keyframes peach-pro-bloom {6315  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6316  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6317                 drop-shadow(0 0 48px var(--peach-glow)); }6318  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6319}63206321@keyframes peach-pro-wordmark-in {6322  from { opacity: 0; transform: translateY(4px); }6323  to   { opacity: 1; transform: translateY(0); }6324}63256326@keyframes peach-pro-fade-out {6327  from { opacity: 1; }6328  to   { opacity: 0; }6329}63306331.peach-pro-celebration {6332  background:6333    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6334    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6335    var(--peach-bg);6336  border: 1px solid var(--peach-t3);6337  box-shadow:6338    0 2px 8px rgba(0,0,0,0.55),6339    0 14px 48px rgba(0,0,0,0.7),6340    0 0 0 1px rgba(240,232,216,0.04);6341  overflow: hidden;6342  width: 320px;6343  height: 520px;6344  display: flex;6345  flex-direction: column;6346  align-items: center;6347  justify-content: center;6348  gap: 8px;6349  padding: 32px 24px;6350  text-align: center;6351}63526353.peach-pro-celebration.is-leaving {6354  animation: peach-pro-fade-out 400ms ease forwards;6355}63566357.peach-pro-bloom-target {6358  display: flex;6359  align-items: center;6360  justify-content: center;6361  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6362  margin-bottom: 12px;6363}63646365.peach-pro-bloom-icon {6366  width: 48px;6367  height: 48px;6368}63696370.peach-pro-wordmark {6371  font-family: var(--font-display);6372  font-size: 22px;6373  font-style: italic;6374  font-weight: 400;6375  color: var(--peach-accent);6376  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6377}63786379.peach-pro-thankyou {6380  font-size: 0.75rem;6381  font-style: italic;6382  color: var(--peach-t2);6383  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6384}638563866387/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6388.peach-pro-notice-banner {6389  display: flex;6390  align-items: center;6391  gap: 8px;6392  padding: 7px 12px;6393  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6394  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6395  font-size: 0.6875rem;6396  color: var(--peach-t2);6397  font-family: "IBM Plex Mono", monospace;6398  flex-shrink: 0;6399}64006401.peach-pro-notice-link {6402  background: none;6403  border: none;6404  padding: 0;6405  cursor: pointer;6406  font-size: 0.6875rem;6407  color: var(--peach-accent);6408  font-family: "IBM Plex Mono", monospace;6409  margin-left: auto;6410  white-space: nowrap;6411}64126413.peach-pro-notice-close {6414  background: none;6415  border: none;6416  padding: 0 0 0 4px;6417  cursor: pointer;6418  font-size: 0.625rem;6419  color: var(--peach-t3);6420  line-height: 1;6421}64226423/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6424   Renders over whatever view is showing. 60-second expiry; the popup ticks6425   the countdown each second and clears the banner when it hits zero. */6426.peach-pair-request-banner {6427  display: flex;6428  flex-direction: column;6429  gap: 8px;6430  padding: 10px 12px;6431  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6432  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6433  font-family: "IBM Plex Mono", monospace;6434  flex-shrink: 0;6435}64366437.peach-pair-toast {6438  padding: 8px 12px;6439  font-family: "IBM Plex Mono", monospace;6440  font-size: 0.75rem;6441  color: var(--peach-t1);6442  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6443  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6444  flex-shrink: 0;6445  text-align: center;6446}64476448.peach-pair-toast strong {6449  color: var(--peach-t0);6450  font-weight: 500;6451}64526453.peach-pair-request-header {6454  display: flex;6455  align-items: center;6456  gap: 8px;6457  font-size: 0.75rem;6458  color: var(--peach-t1);6459}64606461.peach-pair-request-mark {6462  font-size: 0.875rem;6463  display: inline-flex;6464  align-items: center;6465}64666467.peach-pair-request-icon {6468  width: 1em;6469  height: 1em;6470}64716472.peach-pair-request-title {6473  font-weight: 600;6474  color: var(--peach-t0);6475}64766477.peach-pair-request-countdown {6478  margin-left: auto;6479  font-variant-numeric: tabular-nums;6480  color: var(--peach-t2);6481  font-size: 0.6875rem;6482}64836484.peach-pair-request-body {6485  margin: 0;6486  font-size: 0.75rem;6487  color: var(--peach-t1);6488  line-height: 1.4;6489}64906491.peach-pair-request-body strong {6492  color: var(--peach-t0);6493  font-weight: 600;6494}64956496.peach-pair-request-actions {6497  display: flex;6498  gap: 8px;6499  justify-content: flex-end;6500}65016502/* ─── First-run onboarding ──────────────────────────────────────────────6503   Three-card welcome shown once before vault creation. The PeachScript6504   rune background drifts behind everything at very low opacity — it's6505   atmosphere, not focus. The cards themselves use the same panel6506   language as the rest of the popup so the transition into NewVault is6507   continuous, not a jarring switch of visual register. */65086509.peach-onboarding {6510  position: relative;6511  display: flex;6512  flex-direction: column;6513  width: 100%;6514  height: 100%;6515  padding: 16px 16px 18px;6516  box-sizing: border-box;6517  overflow: hidden;6518  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6519}65206521.peach-onboarding.is-completing {6522  animation: peach-onboard-exit 200ms ease-out forwards;6523}65246525.peach-rune-background {6526  position: absolute;6527  inset: 0;6528  width: 100%;6529  height: 100%;6530  pointer-events: none;6531  z-index: 0;6532  transition: opacity 500ms ease-out;6533}65346535.peach-onboarding.is-completing .peach-rune-background {6536  opacity: 0;6537}65386539.peach-onboarding-header {6540  position: relative;6541  z-index: 1;6542  display: flex;6543  align-items: center;6544  margin-bottom: 14px;6545}65466547.peach-onboarding-card {6548  position: relative;6549  z-index: 1;6550  flex: 1;6551  display: flex;6552  flex-direction: column;6553  gap: 10px;6554  padding: 22px 20px;6555  border-radius: 16px;6556  border: 1px solid var(--peach-t3);6557  background:6558    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6559  backdrop-filter: blur(3px);6560  -webkit-backdrop-filter: blur(3px);6561  box-shadow:6562    inset 0 1px 0 rgba(240, 232, 216, 0.04),6563    0 12px 28px rgba(0, 0, 0, 0.12);6564  cursor: pointer;6565  user-select: none;6566  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6567}65686569.peach-onboarding-card.is-exiting {6570  animation: peach-card-out 120ms ease-in forwards;6571  pointer-events: none;6572}65736574.peach-onboarding-card-headline {6575  margin: 0;6576  font-family: var(--font-display);6577  font-style: italic;6578  font-weight: 400;6579  font-size: 22px;6580  line-height: 1.05;6581  color: var(--peach-t0);6582  white-space: pre-line;6583}65846585.peach-onboarding-divider {6586  margin: 4px 0 6px;6587  border: 0;6588  border-top: 1px solid var(--peach-t3);6589  width: 100%;6590}65916592.peach-onboarding-body {6593  margin: 0;6594  font-size: 0.8125rem;6595  line-height: 1.6;6596  color: var(--peach-t1);6597}65986599.peach-onboarding-warning {6600  display: flex;6601  align-items: flex-start;6602  gap: 8px;6603  margin: 6px 0 0;6604  padding-top: 8px;6605  border-top: 1px dashed var(--peach-t3);6606  font-size: 0.8125rem;6607  line-height: 1.5;6608  color: var(--peach-t1);6609}66106611.peach-onboarding-warning-icon {6612  color: var(--peach-accent);6613  font-size: 0.8125rem;6614  line-height: 1.5;6615  flex: 0 0 auto;6616}66176618.peach-onboarding-nav {6619  position: relative;6620  z-index: 1;6621  display: flex;6622  align-items: center;6623  justify-content: space-between;6624  margin-top: 12px;6625  padding: 0 4px;6626}66276628.peach-onboarding-dots {6629  display: flex;6630  align-items: center;6631  gap: 6px;6632}66336634.peach-onboarding-dot {6635  width: 6px;6636  height: 6px;6637  border-radius: 50%;6638  background: var(--peach-t2);6639  transition: width 200ms ease, height 200ms ease, background 200ms ease;6640}66416642.peach-onboarding-dot.is-active {6643  width: 8px;6644  height: 8px;6645  background: var(--peach-accent);6646}66476648.peach-onboarding-next {6649  background: none;6650  border: none;6651  padding: 4px 0;6652  cursor: pointer;6653  font-family: "IBM Plex Mono", monospace;6654  font-size: 0.6875rem;6655  letter-spacing: 0.04em;6656  color: var(--peach-t1);6657  transition: color 150ms ease;6658}66596660.peach-onboarding-next:hover {6661  color: var(--peach-t0);6662}66636664.peach-onboarding-next:disabled {6665  opacity: 0.5;6666  cursor: default;6667}66686669.peach-onboarding-back {6670  background: none;6671  border: none;6672  padding: 4px 0;6673  cursor: pointer;6674  font-family: "IBM Plex Mono", monospace;6675  font-size: 0.6875rem;6676  letter-spacing: 0.04em;6677  color: var(--peach-t2);6678  transition: color 150ms ease;6679}66806681.peach-onboarding-back:hover {6682  color: var(--peach-t0);6683}66846685.peach-onboarding-back:disabled {6686  opacity: 0.5;6687  cursor: default;6688}66896690/* Reserve back-button width on the first card so the dots stay centred */6691.peach-onboarding-back-spacer {6692  width: 44px;6693}66946695.peach-onboarding-mobile-card-buttons {6696  display: flex;6697  flex-direction: column;6698  gap: 8px;6699  margin-top: 16px;6700}67016702@keyframes peach-onboard-enter {6703  from { opacity: 0; transform: translateY(20px); }6704  to   { opacity: 1; transform: translateY(0); }6705}67066707@keyframes peach-onboard-exit {6708  from { opacity: 1; }6709  to   { opacity: 0; }6710}67116712@keyframes peach-card-in {6713  from { opacity: 0; transform: translateX(12px); }6714  to   { opacity: 1; transform: translateX(0); }6715}67166717@keyframes peach-card-out {6718  from { opacity: 1; transform: translateX(0); }6719  to   { opacity: 0; transform: translateX(-12px); }6720}67216722/* ─── New vault screen — matched to onboarding card language ─────────── */67236724.peach-newvault {6725  position: relative;6726  display: flex;6727  flex-direction: column;6728  gap: 12px;6729  padding: 16px 16px 18px;6730  overflow: hidden;6731}67326733/* Suppress the warm-blob ambient art inherited from .lock-screen — the6734   new vault card now carries the visual weight. */6735.peach-newvault::before {6736  content: none;6737}67386739.peach-newvault-header {6740  position: relative;6741  z-index: 2;6742  display: flex;6743  align-items: center;6744  gap: 10px;6745  margin-bottom: 2px;6746}67476748.peach-newvault-back {6749  display: inline-flex;6750  align-items: center;6751  gap: 4px;6752  background: transparent;6753  border: none;6754  color: var(--peach-t2);6755  font-family: "IBM Plex Mono", monospace;6756  font-size: 0.625rem;6757  letter-spacing: 0.06em;6758  cursor: pointer;6759  padding: 4px 6px;6760  border-radius: 6px;6761  transition: color 120ms ease, background 120ms ease;6762}67636764.peach-newvault-back:hover {6765  color: var(--peach-t0);6766  background: rgba(240, 232, 216, 0.04);6767}67686769.peach-newvault-mark {6770  position: absolute;6771  right: -12px;6772  top: 6px;6773  width: 110px;6774  height: 110px;6775  pointer-events: none;6776  opacity: 0.10;6777  filter: saturate(0.9);6778  z-index: 0;6779}6780.peach-newvault-mark-art {6781  width: 100%;6782  height: 100%;6783}6784.peach-newvault-mark-art path:nth-child(2),6785.peach-newvault-mark-art path:nth-child(3) {6786  stroke: rgba(123, 144, 96, 0.88);6787  fill: rgba(123, 144, 96, 0.88);6788}67896790.peach-newvault-card {6791  position: relative;6792  z-index: 1;6793  display: flex;6794  flex-direction: column;6795  gap: 12px;6796  padding: 22px 20px 18px;6797  border-radius: 16px;6798  border: 1px solid var(--peach-t3);6799  background:6800    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6801  backdrop-filter: blur(3px);6802  -webkit-backdrop-filter: blur(3px);6803  box-shadow:6804    inset 0 1px 0 rgba(240, 232, 216, 0.04),6805    0 12px 28px rgba(0, 0, 0, 0.12);6806  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6807}68086809.peach-newvault-headline {6810  margin: 0;6811  font-family: var(--font-display);6812  font-style: italic;6813  font-weight: 400;6814  font-size: 24px;6815  line-height: 1.05;6816  color: var(--peach-t0);6817  white-space: pre-line;6818}68196820.peach-newvault-divider {6821  margin: 2px 0 4px;6822  border: 0;6823  border-top: 1px solid var(--peach-t3);6824  width: 100%;6825}68266827.peach-newvault-field {6828  display: flex;6829  flex-direction: column;6830  gap: 4px;6831}68326833.peach-newvault-label-row {6834  display: flex;6835  align-items: center;6836  justify-content: space-between;6837}68386839/* Monospace input scaled to the card. Replaces the 22px unlock-input6840   so the placeholder no longer overflows and the field reads as part6841   of the same surface as the body copy. */6842.peach-newvault-input {6843  font-size: 0.875rem;6844  letter-spacing: 0.18em;6845  padding: 8px 0;6846}6847.peach-newvault-input::placeholder {6848  letter-spacing: 0.18em;6849  color: var(--peach-t2);6850}68516852.peach-newvault-hint {6853  margin: 2px 0 0;6854  font-family: "IBM Plex Mono", monospace;6855  font-size: 0.625rem;6856  color: var(--peach-t2);6857  letter-spacing: 0.04em;6858}68596860.peach-newvault-submit {6861  margin-top: 4px;6862}68636864.peach-newvault-warning {6865  display: flex;6866  align-items: flex-start;6867  gap: 8px;6868  margin: 4px 0 0;6869  padding-top: 10px;6870  border-top: 1px dashed var(--peach-t3);6871  font-size: 0.75rem;6872  line-height: 1.5;6873  color: var(--peach-t1);6874}68756876.peach-newvault-warning-icon {6877  color: var(--peach-accent);6878  font-size: 0.8125rem;6879  line-height: 1.4;6880  flex: 0 0 auto;6881}68826883.peach-newvault-footer {6884  position: relative;6885  z-index: 1;6886  display: flex;6887  flex-direction: column;6888  gap: 4px;6889  padding: 4px 4px 0;6890}68916892/* Settings body — warm accent gradient gives the glass something to blur against */6893.peach-settings-body {6894  background:6895    radial-gradient(6896      ellipse at 30% 20%,6897      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6898      transparent 60%6899    );6900}69016902/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6903/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6904 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6905 * (replacing the vault from a backup file) and "hazard" for actions that6906 * are absolutely irreversible (Panic). Both use the same card scaffold so6907 * they read as a pair, but the colour family signals the severity at a6908 * glance — yellow for caution, red for don't.6909 */6910.peach-danger-card {6911  --danger-tint: 235, 158, 52; /* amber */6912  display: flex;6913  flex-direction: column;6914  gap: 8px;6915  padding: 14px;6916  margin-top: 10px;6917  border-radius: 12px;6918  border: 1px solid rgba(var(--danger-tint), 0.32);6919  background:6920    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6921    rgba(var(--danger-tint), 0.04);6922  box-shadow:6923    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6924    0 0 24px rgba(var(--danger-tint), 0.04);6925  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6926}69276928.peach-danger-card:hover {6929  border-color: rgba(var(--danger-tint), 0.55);6930  box-shadow:6931    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6932    0 0 36px rgba(var(--danger-tint), 0.10);6933}69346935.peach-danger-card--hazard {6936  --danger-tint: 220, 38, 38; /* red */6937}69386939.peach-danger-card-head {6940  display: flex;6941  align-items: center;6942  gap: 10px;6943}69446945.peach-danger-card-glyph {6946  width: 28px;6947  height: 28px;6948  flex-shrink: 0;6949  display: flex;6950  align-items: center;6951  justify-content: center;6952  border-radius: 8px;6953  background: rgba(var(--danger-tint), 0.12);6954  color: rgba(var(--danger-tint), 0.95);6955  font-size: 1rem;6956  line-height: 1;6957}69586959.peach-danger-card-title {6960  margin: 0;6961  font-size: 0.8125rem;6962  font-weight: 600;6963  color: rgba(var(--danger-tint), 0.92);6964  letter-spacing: 0.01em;6965}69666967.peach-danger-card-copy {6968  margin: 0;6969  font-size: 0.6875rem;6970  line-height: 1.5;6971  color: var(--peach-t2);6972}69736974.peach-danger-card-button {6975  width: 100%;6976  padding: 9px;6977  margin-top: 4px;6978  background: transparent;6979  border: 1px solid rgba(var(--danger-tint), 0.45);6980  border-radius: 8px;6981  color: rgba(var(--danger-tint), 0.9);6982  font-size: 0.75rem;6983  font-weight: 500;6984  letter-spacing: 0.02em;6985  cursor: pointer;6986  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6987}69886989.peach-danger-card-button:hover {6990  background: rgba(var(--danger-tint), 0.10);6991  border-color: rgba(var(--danger-tint), 0.75);6992  color: rgb(var(--danger-tint));6993}69946995/* ── Panic flow (three-step destruction) ───────────────────────────────── */6996.peach-panic {6997  display: flex;6998  flex-direction: column;6999  flex: 1;7000  min-height: 0;7001  padding: 28px 20px 20px;7002  gap: 18px;7003  overflow-y: auto;7004  scrollbar-width: none;7005  -ms-overflow-style: none;7006}70077008.peach-panic::-webkit-scrollbar { display: none; }70097010.peach-panic-step2 {7011  background: rgba(220, 38, 38, 0.04);7012}70137014.peach-panic-step3 {7015  position: relative;7016  background: #0f0505;7017  color: #ffffff;7018  overflow: hidden;7019}70207021.peach-panic-rune-bg {7022  position: absolute;7023  inset: 0;7024  opacity: 0.22;7025  pointer-events: none;7026  overflow: hidden;7027}70287029.peach-panic-rune-bg canvas {7030  width: 100% !important;7031  height: 100% !important;7032}70337034.peach-panic-icon {7035  font-size: 32px;7036  color: rgb(220, 38, 38);7037  line-height: 1;7038}70397040.peach-panic-title {7041  margin: 0;7042  font-size: 18px;7043  font-weight: 500;7044  color: var(--peach-t1);7045}70467047.peach-panic-title--severe {7048  font-size: 20px;7049  font-weight: 700;7050  color: rgb(220, 38, 38);7051}70527053.peach-panic-body {7054  margin: 0;7055  font-size: 0.8125rem;7056  line-height: 1.55;7057  color: var(--peach-t2);7058}70597060.peach-panic-body--severe {7061  color: rgba(220, 38, 38, 0.85);7062}70637064.peach-panic-body--final {7065  font-size: 1rem;7066  font-weight: 700;7067  color: rgb(255, 80, 80);7068  line-height: 1.4;7069}70707071.peach-panic-body--final-intro {7072  font-size: 1rem;7073  color: #ffffff;7074  font-weight: 400;7075}70767077.peach-panic-divider {7078  height: 1px;7079  background: rgba(255, 255, 255, 0.08);7080  margin: 4px 0;7081}70827083.peach-panic-confirm-input {7084  width: 100%;7085  padding: 10px 12px;7086  background: rgba(255, 255, 255, 0.02);7087  border: 1px solid rgba(220, 38, 38, 0.4);7088  border-radius: 8px;7089  color: var(--peach-t1);7090  font-family: "IBM Plex Mono", monospace;7091  font-size: 0.875rem;7092  letter-spacing: 0.12em;7093  text-transform: uppercase;7094}70957096.peach-panic-confirm-input:focus {7097  outline: none;7098  border-color: rgb(220, 38, 38);7099}71007101.peach-panic-confirm-input--match {7102  border-color: rgb(220, 38, 38);7103  color: rgb(220, 38, 38);7104}71057106.peach-panic-confirm-label {7107  font-size: 0.6875rem;7108  color: var(--peach-t2);7109  margin: 0 0 -8px;7110  letter-spacing: 0.06em;7111}71127113.peach-panic-actions {7114  display: flex;7115  flex-direction: column;7116  gap: 10px;7117  margin-top: auto;7118}71197120.peach-panic-button {7121  width: 100%;7122  padding: 12px;7123  border-radius: 8px;7124  font-size: 0.8125rem;7125  cursor: pointer;7126  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7127}71287129.peach-panic-button--primary {7130  background: var(--peach-accent);7131  border: 1px solid var(--peach-accent);7132  color: #ffffff;7133  font-weight: 600;7134}71357136.peach-panic-button--primary:hover {7137  background: color-mix(in srgb, var(--peach-accent) 88%, white);7138}71397140.peach-panic-button--danger {7141  background: rgb(220, 38, 38);7142  border: 1px solid rgb(220, 38, 38);7143  color: #ffffff;7144  font-weight: 600;7145}71467147.peach-panic-button--danger:disabled {7148  opacity: 0.35;7149  cursor: not-allowed;7150}71517152.peach-panic-button--ghost {7153  background: transparent;7154  border: 1px solid rgba(255, 255, 255, 0.18);7155  color: var(--peach-t2);7156}71577158.peach-panic-button--ghost:hover {7159  border-color: rgba(255, 255, 255, 0.32);7160  color: var(--peach-t1);7161}71627163.peach-panic-link {7164  background: transparent;7165  border: none;7166  padding: 4px 0;7167  color: rgba(220, 38, 38, 0.65);7168  font-size: 0.75rem;7169  cursor: pointer;7170  text-align: left;7171  text-decoration: underline;7172  text-underline-offset: 3px;7173}71747175.peach-panic-link:hover {7176  color: rgb(220, 38, 38);7177}71787179.peach-panic-bar {7180  background: rgb(220, 38, 38);7181  padding: 16px 20px;7182  margin: -28px -20px 0;7183  text-align: center;7184  font-size: 0.8125rem;7185  font-weight: 700;7186  letter-spacing: 0.12em;7187  color: #ffffff;7188}71897190.peach-panic-final-button {7191  width: 100%;7192  padding: 14px;7193  background: rgb(220, 38, 38);7194  border: none;7195  border-radius: 8px;7196  color: #ffffff;7197  font-size: 0.875rem;7198  font-weight: 700;7199  letter-spacing: 0.08em;7200  text-transform: uppercase;7201  cursor: pointer;7202  animation: peach-panic-pulse 2s ease-in-out infinite;7203}72047205.peach-settings-license {7206  margin-top: 10px;7207  padding-top: 10px;7208  border-top: 1px solid var(--peach-t3);7209}72107211.peach-settings-label {7212  font-size: 0.625rem;7213  letter-spacing: 0.08em;7214  color: var(--peach-t3);7215  display: block;7216  margin-bottom: 6px;7217}72187219.peach-settings-license-row {7220  display: flex;7221  align-items: center;7222  justify-content: space-between;7223  gap: 8px;7224}72257226.peach-settings-license-key {7227  font-family: 'IBM Plex Mono', monospace;7228  font-size: 0.75rem;7229  color: var(--peach-t0);7230  letter-spacing: 0.04em;7231  word-break: break-all;7232}72337234.peach-settings-license-copy {7235  font-size: 0.6875rem;7236  color: var(--peach-accent);7237  background: transparent;7238  border: none;7239  cursor: pointer;7240  padding: 4px 8px;7241  border-radius: 4px;7242  flex-shrink: 0;7243  transition: opacity 150ms ease;7244}72457246.peach-settings-license-copy:hover {7247  opacity: 0.75;7248}72497250@keyframes peach-panic-pulse {7251  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7252  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7253}72547255[data-motion="reduce"] .peach-panic-final-button {7256  animation: none;7257}72587259/* Vault History — Settings → Vault sub-view */72607261.peach-history-list {7262  border: 1px solid var(--peach-border);7263  border-radius: 8px;7264  overflow: hidden;7265  margin: 8px 0 4px;7266}72677268.peach-history-row {7269  display: flex;7270  align-items: center;7271  justify-content: space-between;7272  padding: 9px 12px;7273  gap: 10px;7274  border-bottom: 1px solid var(--peach-border);7275}72767277.peach-history-row:last-child {7278  border-bottom: none;7279}72807281.peach-history-meta {7282  display: flex;7283  flex-direction: column;7284  gap: 2px;7285  min-width: 0;7286  flex: 1;7287}72887289.peach-history-time {7290  font-size: 0.75rem;7291  font-family: 'IBM Plex Mono', ui-monospace, monospace;7292  color: var(--peach-t0);7293  white-space: nowrap;7294  overflow: hidden;7295  text-overflow: ellipsis;7296}72977298.peach-history-sub {7299  font-size: 0.625rem;7300  color: var(--peach-t2);7301  letter-spacing: 0.06em;7302  text-transform: uppercase;7303  white-space: nowrap;7304  overflow: hidden;7305  text-overflow: ellipsis;7306}73077308.peach-history-btn {7309  flex-shrink: 0;7310  white-space: nowrap;7311  min-width: 56px;7312  text-align: center;7313}73147315.peach-history-btn.is-busy {7316  opacity: 0.65;7317}73187319.peach-history-footer {7320  font-size: 0.625rem;7321  color: var(--peach-t3);7322  letter-spacing: 0.05em;7323  text-align: right;7324  margin: 0;7325  padding: 2px 0 0;7326}73277328/* ── Context menu + swipe-copy flash ─────────────────────── */7329.peach-context-menu-backdrop {7330  position: fixed;7331  inset: 0;7332  background: rgba(0, 0, 0, 0.45);7333  z-index: 100;7334  display: flex;7335  align-items: flex-end;7336  justify-content: center;7337  animation: peach-ctx-fade 140ms ease both;7338}7339.peach-context-menu {7340  width: min(360px, calc(100vw - 24px));7341  margin-bottom: max(env(safe-area-inset-bottom), 12px);7342  background: var(--peach-bg);7343  border: 1px solid var(--peach-t3);7344  border-radius: 14px;7345  padding: 6px;7346  display: flex;7347  flex-direction: column;7348  gap: 2px;7349  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7350  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7351}7352@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7353@keyframes peach-ctx-rise {7354  from { transform: translateY(16px); opacity: 0; }7355  to   { transform: translateY(0);    opacity: 1; }7356}7357.peach-context-menu-item {7358  background: transparent;7359  color: var(--peach-t0);7360  border: 0;7361  border-radius: 10px;7362  padding: 12px 14px;7363  text-align: left;7364  font: inherit;7365  cursor: pointer;7366}7367.peach-context-menu-item:hover,7368.peach-context-menu-item:focus-visible {7369  background: var(--peach-t3);7370}7371.peach-context-menu-item--danger {7372  color: var(--peach-health-bad, #d96868);7373}7374.peach-context-menu-item--cancel {7375  color: var(--peach-t2);7376  margin-top: 4px;7377  border-top: 1px solid var(--peach-t3);7378  border-radius: 0 0 10px 10px;7379}73807381/* Swipe-to-copy flash */7382.peach-entry-row.is-copy-flash {7383  animation: peach-copy-flash 600ms ease both;7384}7385@keyframes peach-copy-flash {7386  0%   { background: transparent; }7387  20%  { background: rgba(217, 153, 51, 0.32); }7388  100% { background: transparent; }7389}73907391html { font-size: 16px; }73927393/* ── Recovery word entry ─────────────────────────────────────────── */7394.peach-lock-recover-link {7395  display: block;7396  width: 100%;7397  margin-top: 12px;7398  background: none;7399  border: none;7400  font-family: "IBM Plex Mono", monospace;7401  font-size: 0.625rem;7402  letter-spacing: 0.06em;7403  color: var(--peach-t2);7404  cursor: pointer;7405  text-align: center;7406  padding: 4px;7407  transition: color 120ms ease;7408}7409.peach-lock-recover-link:hover {7410  color: var(--peach-t0);7411}74127413.lock-screen--recovery {7414  display: flex;7415  flex-direction: column;7416  align-items: stretch;7417  padding: 12px 20px 24px;7418  overflow: hidden;7419}74207421.peach-recovery-nav {7422  display: flex;7423  align-items: center;7424  position: relative;7425  z-index: 1;7426  margin-bottom: 4px;7427}74287429/* Mask runes to the top decorative band only — keep inputs and the7430   bottom CTA button clear. The bottom of the popup is reserved for7431   submit buttons; rendering runes there overlaps the button glyph. */7432.peach-rune-background--recovery {7433  -webkit-mask-image: linear-gradient(7434    to bottom,7435    black 0px, black 85px,7436    transparent 110px,7437    transparent 100%7438  );7439  mask-image: linear-gradient(7440    to bottom,7441    black 0px, black 85px,7442    transparent 110px,7443    transparent 100%7444  );7445}74467447.peach-recovery-header {7448  text-align: center;7449  margin-bottom: 16px;7450  margin-top: 4px;7451}7452.peach-recovery-header .peach-onboarding-headline {7453  font-size: 1.25rem;7454  font-weight: 300;7455  letter-spacing: 0.02em;7456  margin: 0 0 4px;7457}7458.peach-recovery-header .peach-hint {7459  font-family: "IBM Plex Mono", monospace;7460  font-size: 0.625rem;7461  color: var(--peach-t2);7462  letter-spacing: 0.04em;7463  margin: 0;7464}74657466/* 12-word grid: 2 columns × 6 rows */7467.peach-recovery-grid {7468  display: grid;7469  grid-template-columns: repeat(2, 1fr);7470  gap: 12px 20px;7471  width: 100%;7472  margin-bottom: 0;7473}74747475.peach-recovery-word-slot {7476  display: flex;7477  align-items: center;7478  gap: 6px;7479  min-width: 0;7480}74817482.peach-recovery-word-index {7483  font-family: "IBM Plex Mono", monospace;7484  font-size: 0.5rem;7485  color: rgba(255, 255, 255, 0.35);7486  min-width: 14px;7487  flex-shrink: 0;7488  text-align: right;7489  letter-spacing: 0.04em;7490}74917492.peach-recovery-word-input {7493  flex: 1;7494  min-width: 0;7495  background: transparent;7496  border: none;7497  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7498  color: var(--peach-t0);7499  font-family: "IBM Plex Mono", monospace;7500  font-size: 0.6875rem;7501  letter-spacing: 0.06em;7502  padding: 5px 2px 4px;7503  outline: none;7504  text-transform: lowercase;7505  transition: border-color 120ms ease;7506}7507.peach-recovery-word-input::placeholder {7508  color: rgba(255, 255, 255, 0.18);7509}7510.peach-recovery-word-input:focus {7511  border-bottom-color: var(--peach-accent);7512}75137514.peach-recovery-submit {7515  width: 100%;7516  margin-top: auto;7517}75187519.peach-recovery-new-password-form {7520  width: 100%;7521  display: flex;7522  flex-direction: column;7523  gap: 16px;7524  margin-bottom: 8px;7525}7526.peach-recovery-new-password-form .peach-newvault-field {7527  display: flex;7528  flex-direction: column;7529  gap: 4px;7530}75317532/* ── Recovery words display (post-create) ────────────────────────── */7533.lock-screen--recovery-display {7534  display: flex;7535  flex-direction: column;7536  align-items: stretch;7537  padding: 0 20px 20px;7538  min-height: 0;7539  overflow-y: auto;7540}75417542.peach-recovery-words-display {7543  width: 100%;7544  margin-bottom: 16px;7545  border: 1px solid var(--peach-t3);7546  border-radius: 8px;7547  padding: 12px 14px;7548  background: rgba(245, 240, 234, 0.04);7549}75507551.peach-recovery-words-label {7552  font-family: "IBM Plex Mono", monospace;7553  font-size: 0.5rem;7554  letter-spacing: 0.08em;7555  color: var(--peach-t2);7556  text-transform: uppercase;7557  margin-bottom: 10px;7558}75597560.peach-recovery-word-list {7561  list-style: none;7562  margin: 0;7563  padding: 0;7564  display: grid;7565  grid-template-columns: repeat(2, 1fr);7566  gap: 6px 16px;7567}75687569.peach-recovery-word-item {7570  display: flex;7571  align-items: baseline;7572  gap: 5px;7573}75747575.peach-recovery-word-num {7576  font-family: "IBM Plex Mono", monospace;7577  font-size: 0.5rem;7578  color: var(--peach-t2);7579  width: 14px;7580  flex: 0 0 14px;7581  text-align: right;7582  letter-spacing: 0.04em;7583  font-variant-numeric: tabular-nums;7584}75857586.peach-recovery-download-btn {7587  display: block;7588  margin: 10px auto 0;7589  padding: 4px 10px;7590  background: transparent;7591  border: 1px solid var(--peach-border);7592  border-radius: 6px;7593  color: var(--peach-t2);7594  font-family: "IBM Plex Mono", monospace;7595  font-size: 0.5625rem;7596  letter-spacing: 0.06em;7597  text-transform: lowercase;7598  cursor: pointer;7599  transition: border-color 0.15s, color 0.15s;7600}76017602.peach-recovery-download-btn:hover {7603  border-color: var(--peach-accent);7604  color: var(--peach-t0);7605}76067607.peach-recovery-word-text {7608  font-family: "IBM Plex Mono", monospace;7609  font-size: 0.6875rem;7610  letter-spacing: 0.06em;7611  color: var(--peach-t0);7612  text-transform: lowercase;7613}76147615.peach-hint--warning {7616  color: var(--peach-accent);7617  font-style: italic;7618}7619.peach-hint--success {7620  color: var(--peach-t2);7621  font-family: "IBM Plex Mono", monospace;7622  font-size: 0.625rem;7623  letter-spacing: 0.06em;7624}76257626/* Confirmation step */7627.peach-recovery-confirm {7628  width: 100%;7629  flex: 1;7630  display: flex;7631  flex-direction: column;7632}7633.peach-recovery-confirm-label {7634  font-family: "IBM Plex Mono", monospace;7635  font-size: 0.5625rem;7636  letter-spacing: 0.04em;7637  color: var(--peach-t2);7638  text-align: center;7639  margin: 0 0 12px;7640}7641.peach-recovery-confirm-fields {7642  display: flex;7643  flex-direction: column;7644  gap: 14px;7645  margin-bottom: 10px;7646}7647.peach-recovery-confirm-field {7648  display: flex;7649  align-items: center;7650  gap: 8px;7651}7652.peach-recovery-confirm-num {7653  font-family: "IBM Plex Mono", monospace;7654  font-size: 0.5rem;7655  color: var(--peach-t2);7656  min-width: 44px;7657  letter-spacing: 0.04em;7658}7659.peach-recovery-confirm-input {7660  flex: 1;7661  background: transparent;7662  border: none;7663  border-bottom: 1px solid var(--peach-t3);7664  color: var(--peach-t0);7665  font-family: "IBM Plex Mono", monospace;7666  font-size: 0.6875rem;7667  letter-spacing: 0.06em;7668  padding: 4px 2px 3px;7669  outline: none;7670  text-transform: lowercase;7671  transition: border-color 120ms ease;7672}7673.peach-recovery-confirm-input:focus {7674  border-bottom-color: var(--peach-accent);7675}7676.peach-recovery-confirm-input:disabled {7677  opacity: 0.4;7678  cursor: not-allowed;7679}7680.peach-recovery-confirm-btn {7681  width: 100%;7682  margin-top: auto;7683}76847685/* ============================================================7686   Sync info sheet7687   ============================================================ */76887689.peach-sync-info-backdrop {7690  position: fixed;7691  inset: 0;7692  z-index: 200;7693  background: rgba(0, 0, 0, 0.55);7694  display: flex;7695  align-items: flex-end;7696  animation: peach-fade-in 200ms ease forwards;7697}76987699@keyframes peach-fade-in {7700  from { opacity: 0; }7701  to   { opacity: 1; }7702}77037704.peach-sync-info-sheet {7705  width: 100%;7706  background: var(--peach-bg-card, var(--peach-bg));7707  border-top-left-radius: 20px;7708  border-top-right-radius: 20px;7709  padding: 12px 24px 32px;7710  display: flex;7711  flex-direction: column;7712  gap: 20px;7713  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;7714}77157716@keyframes peach-sheet-up {7717  from { transform: translateY(100%); }7718  to   { transform: translateY(0); }7719}77207721.peach-sync-info-handle {7722  width: 36px;7723  height: 4px;7724  border-radius: 2px;7725  background: var(--peach-border);7726  margin: 0 auto 4px;7727  flex-shrink: 0;7728}77297730.peach-sync-info-title {7731  font-family: 'Cormorant Garamond', serif;7732  font-style: italic;7733  font-size: 26px;7734  font-weight: 600;7735  color: var(--peach-t0);7736  margin: 0;7737  line-height: 1.2;7738}77397740.peach-sync-info-body {7741  display: flex;7742  flex-direction: column;7743  gap: 14px;7744}77457746.peach-sync-info-point {7747  display: flex;7748  gap: 12px;7749  align-items: flex-start;7750  font-size: 14px;7751  color: var(--peach-t2);7752  line-height: 1.6;7753  margin: 0;7754}77557756.peach-sync-info-icon {7757  color: var(--peach-accent);7758  font-size: 16px;7759  flex-shrink: 0;7760  margin-top: 1px;7761}77627763.peach-sync-info-actions {7764  display: flex;7765  flex-direction: column;7766  gap: 12px;7767  margin-top: 4px;7768}77697770.peach-sync-info-pro-link {7771  background: none;7772  border: none;7773  font-size: 13px;7774  color: var(--peach-t3);7775  cursor: pointer;7776  padding: 0;7777  font-family: inherit;7778  text-align: center;7779  transition: color 150ms ease;7780}77817782.peach-sync-info-pro-link:hover {7783  color: var(--peach-accent);7784}77857786.peach-btn--full {7787  width: 100%;7788}77897790/* ── Sync screen ── */77917792.peach-sync-coming-soon {7793  display: flex;7794  align-items: flex-start;7795  gap: 10px;7796  padding: 12px 14px;7797  background: var(--peach-s1);7798  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);7799  border-radius: 10px;7800}7801.peach-sync-coming-soon__icon {7802  flex-shrink: 0;7803  color: var(--peach-accent);7804  margin-top: 1px;7805  line-height: 0;7806}7807.peach-sync-coming-soon__title {7808  font-family: 'Cormorant Garamond', serif;7809  font-weight: 500;7810  font-size: 13px;7811  color: var(--peach-accent);7812  margin: 0 0 5px;7813  line-height: 1.3;7814}7815.peach-sync-coming-soon__body {7816  font-size: 12px;7817  color: var(--peach-t1);7818  line-height: 1.55;7819  margin: 0;7820}78217822.peach-sync-screen {7823  display: flex;7824  flex-direction: column;7825  height: 100%;7826}78277828.peach-sync-content {7829  flex: 1;7830  overflow-y: auto;7831  padding: 24px 20px 40px;7832  display: flex;7833  flex-direction: column;7834  gap: 24px;7835}78367837/* Intro (State A) */7838.peach-sync-headline {7839  font-family: 'Cormorant Garamond', serif;7840  font-style: italic;7841  font-size: 28px;7842  font-weight: 600;7843  color: var(--peach-t0);7844  margin: 0 0 10px;7845  line-height: 1.2;7846}78477848.peach-sync-intro-body {7849  font-size: 14px;7850  color: var(--peach-t1);7851  line-height: 1.6;7852  margin: 0;7853}78547855.peach-sync-pro-note {7856  display: flex;7857  flex-direction: column;7858  gap: 8px;7859  background: var(--peach-t3);7860  border-radius: 10px;7861  padding: 12px 14px;7862}78637864.peach-sync-pro-note-text {7865  font-size: 12px;7866  color: var(--peach-t2);7867  line-height: 1.5;7868  margin: 0;7869}78707871.peach-sync-pro-link {7872  background: none;7873  border: none;7874  font-size: 12px;7875  color: var(--peach-accent);7876  cursor: pointer;7877  padding: 0;7878  font-family: inherit;7879  text-align: left;7880}78817882/* Status (State C) */7883.peach-sync-status {7884  padding: 12px 0;7885  border-bottom: 1px solid var(--peach-border);7886}78877888.peach-sync-status-row {7889  display: flex;7890  align-items: center;7891  gap: 8px;7892}78937894.peach-sync-dot {7895  width: 7px;7896  height: 7px;7897  border-radius: 50%;7898  flex-shrink: 0;7899}79007901.peach-sync-dot--green { background: var(--peach-health-ok); }7902.peach-sync-dot--amber { background: var(--peach-accent); }79037904.peach-sync-status-text {7905  font-family: 'IBM Plex Mono', monospace;7906  font-size: 11px;7907  color: var(--peach-t2);7908}79097910/* Paired devices */7911.peach-sync-section {7912  display: flex;7913  flex-direction: column;7914  gap: 2px;7915}79167917.peach-sync-section-label {7918  font-family: 'IBM Plex Mono', monospace;7919  font-size: 10px;7920  letter-spacing: 0.1em;7921  color: var(--peach-t3);7922  margin: 0 0 10px;7923}79247925.peach-sync-device-row {7926  display: flex;7927  justify-content: space-between;7928  align-items: baseline;7929  padding: 10px 0;7930  border-bottom: 1px solid var(--peach-border);7931  gap: 12px;7932}79337934.peach-sync-device-name {7935  font-size: 14px;7936  color: var(--peach-t1);7937}79387939.peach-sync-device-meta {7940  font-family: 'IBM Plex Mono', monospace;7941  font-size: 11px;7942  color: var(--peach-t3);7943  white-space: nowrap;7944}79457946.peach-sync-hub-note {7947  padding: 14px 16px;7948  border: 1px solid var(--peach-border);7949  border-radius: 10px;7950  display: flex;7951  flex-direction: column;7952  gap: 6px;7953  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);7954}79557956.peach-sync-hub-note-title {7957  font-size: 13px;7958  font-weight: 600;7959  color: var(--peach-t0);7960  margin: 0;7961}79627963.peach-sync-hub-note-body {7964  font-size: 12px;7965  color: var(--peach-t2);7966  line-height: 1.6;7967  margin: 0;7968}79697970/* Action buttons */7971.peach-sync-actions {7972  display: flex;7973  gap: 10px;7974  flex-wrap: wrap;7975}79767977/* Upgrade prompt (State B) */7978.peach-sync-upgrade {7979  display: flex;7980  flex-direction: column;7981  gap: 12px;7982  padding: 16px;7983  border: 1px solid var(--peach-border);7984  border-radius: 10px;7985}79867987.peach-sync-upgrade-text {7988  font-size: 13px;7989  color: var(--peach-t2);7990  line-height: 1.6;7991  margin: 0;7992}79937994/* Network note */7995.peach-sync-network-note {7996  font-size: 12px;7997  color: var(--peach-t3);7998  line-height: 1.6;7999  margin: 0;8000}80018002/* Advanced */8003.peach-sync-advanced {8004  margin-top: auto;8005  padding-top: 16px;8006  border-top: 1px solid var(--peach-border);8007}80088009.peach-sync-advanced-toggle {8010  display: flex;8011  align-items: center;8012  gap: 8px;8013  background: none;8014  border: none;8015  font-family: 'IBM Plex Mono', monospace;8016  font-size: 11px;8017  letter-spacing: 0.08em;8018  color: var(--peach-t3);8019  cursor: pointer;8020  padding: 0;8021  text-transform: uppercase;8022}80238024.peach-sync-advanced-chevron {8025  display: inline-block;8026  transition: transform 200ms ease;8027  font-size: 10px;8028}80298030.peach-sync-advanced-chevron.is-open {8031  transform: rotate(90deg);8032}80338034.peach-sync-advanced-content {8035  margin-top: 14px;8036}80378038.peach-sync-advanced-row {8039  display: flex;8040  justify-content: space-between;8041  align-items: center;8042  gap: 16px;8043}80448045.peach-sync-advanced-title {8046  font-size: 14px;8047  color: var(--peach-t1);8048  margin: 0 0 2px;8049}80508051.peach-sync-advanced-subtitle {8052  font-size: 12px;8053  color: var(--peach-t3);8054  margin: 0;8055  line-height: 1.5;8056}80578058/* ── Add Device — Android scan tabs ─────────────────────────────────────── */80598060.peach-pairing-tabs {8061  display: flex;8062  border: 1px solid var(--peach-border);8063  border-radius: 8px;8064  overflow: hidden;8065  margin-bottom: 4px;8066}80678068.peach-pairing-tab {8069  flex: 1;8070  padding: 10px 0;8071  background: none;8072  border: none;8073  font-family: 'IBM Plex Mono', monospace;8074  font-size: 11px;8075  letter-spacing: 0.06em;8076  color: var(--peach-t2);8077  cursor: pointer;8078  transition: background 150ms, color 150ms;8079}80808081.peach-pairing-tab.is-active {8082  background: var(--peach-accent);8083  color: #fff;8084  font-weight: 600;8085}80868087.peach-pairing-tab:not(.is-active):active {8088  background: var(--peach-border);8089}80908091/* Camera view */8092.peach-pairing-camera-container {8093  position: relative;8094  width: 100%;8095  aspect-ratio: 1;8096  border-radius: 12px;8097  overflow: hidden;8098  background: #000;8099  flex-shrink: 0;8100}81018102.peach-pairing-video {8103  width: 100%;8104  height: 100%;8105  object-fit: cover;8106}81078108.peach-pairing-scan-frame {8109  position: absolute;8110  top: 50%;8111  left: 50%;8112  transform: translate(-50%, -50%);8113  width: 60%;8114  aspect-ratio: 1;8115  border: 2px solid var(--peach-accent);8116  border-radius: 8px;8117  pointer-events: none;8118}81198120/* ── Notes Mode ── */81218122/* Overlay that crossfades over the vault */8123.peach-notes-overlay {8124  position: fixed;8125  inset: 0;8126  z-index: 90;8127  opacity: 0;8128  pointer-events: none;8129  animation: peach-mode-in 220ms ease-in forwards;8130}81318132.peach-notes-overlay.is-visible {8133  opacity: 1;8134  pointer-events: auto;8135}81368137@keyframes peach-mode-in {8138  from { opacity: 0; }8139  to   { opacity: 1; }8140}81418142/* Top-level notes surface */8143.peach-notes-mode {8144  position: absolute;8145  inset: 0;8146  background: var(--peach-bg);8147  display: flex;8148  flex-direction: column;8149}81508151/* Rune canvas positioned behind content */8152.peach-note-rune-canvas {8153  position: absolute;8154  inset: 0;8155  width: 100%;8156  height: 100%;8157  pointer-events: none;8158  z-index: 0;8159}81608161/* TOC wrapper */8162.peach-notes-toc-wrapper {8163  position: absolute;8164  inset: 0;8165  z-index: 1;8166  opacity: 1;8167  pointer-events: auto;8168  transition: opacity 200ms ease;8169}81708171.peach-notes-toc-wrapper.is-hidden {8172  opacity: 0;8173  pointer-events: none;8174}81758176/* Editor wrapper */8177.peach-notes-editor-wrapper {8178  position: absolute;8179  inset: 0;8180  z-index: 2;8181  opacity: 0;8182  pointer-events: none;8183  transition: opacity 200ms ease;8184}81858186.peach-notes-editor-wrapper.is-visible {8187  opacity: 1;8188  pointer-events: auto;8189}81908191/* TOC inner */8192.peach-notes-toc {8193  position: relative;8194  display: flex;8195  flex-direction: column;8196  height: 100%;8197  padding-top: env(safe-area-inset-top, 0px);8198  padding-bottom: env(safe-area-inset-bottom, 0px);8199}82008201/* Shared header */8202.peach-notes-header {8203  display: flex;8204  align-items: center;8205  padding: 12px 16px;8206  gap: 12px;8207  flex-shrink: 0;8208  min-height: 52px;8209  position: relative;8210  z-index: 2;8211}82128213.peach-notes-back {8214  font-size: 22px;8215  color: var(--peach-t2);8216  background: none;8217  border: none;8218  padding: 4px;8219  cursor: pointer;8220  line-height: 1;8221  flex-shrink: 0;8222  transition: color 150ms ease;8223  -webkit-tap-highlight-color: transparent;8224}82258226.peach-notes-back:active { color: var(--peach-t0); }82278228.peach-notes-header-title {8229  flex: 1;8230  font-family: 'Cormorant Garamond', serif;8231  font-style: italic;8232  font-size: 22px;8233  color: var(--peach-t0);8234  text-align: center;8235}82368237.peach-notes-header-title.is-breadcrumb {8238  font-family: 'IBM Plex Mono', monospace;8239  font-style: normal;8240  font-size: 11px;8241  color: var(--peach-t3);8242  letter-spacing: 0.08em;8243  text-transform: uppercase;8244  cursor: pointer;8245}82468247.peach-notes-header-actions {8248  display: flex;8249  gap: 8px;8250  flex-shrink: 0;8251}82528253.peach-notes-header-btn {8254  width: 36px;8255  height: 36px;8256  display: flex;8257  align-items: center;8258  justify-content: center;8259  background: none;8260  border: none;8261  color: var(--peach-t2);8262  cursor: pointer;8263  border-radius: 8px;8264  font-size: 16px;8265  transition: color 150ms ease, background 150ms ease;8266  -webkit-tap-highlight-color: transparent;8267}82688269.peach-notes-header-btn:active {8270  background: rgba(255,255,255,0.06);8271  color: var(--peach-t0);8272}82738274/* Inline search bar */8275.peach-notes-search-input {8276  flex: 1;8277  background: none;8278  border: none;8279  outline: none;8280  font-family: 'IBM Plex Mono', monospace;8281  font-size: 13px;8282  color: var(--peach-t0);8283  padding: 4px 0;8284  letter-spacing: 0.02em;8285}82868287.peach-notes-search-input::placeholder {8288  color: var(--peach-t3);8289}82908291/* TOC list */8292.peach-notes-list-container {8293  flex: 1;8294  overflow-y: auto;8295  overflow-x: hidden;8296  scrollbar-width: none;8297  -webkit-overflow-scrolling: touch;8298  overscroll-behavior: contain;8299  position: relative;8300  z-index: 1;8301}83028303.peach-notes-list-container::-webkit-scrollbar { display: none; }83048305/* Note row */8306.peach-note-row {8307  position: relative;8308  display: grid;8309  grid-template-columns: 44px 8px 1fr 8px auto;8310  align-items: center;8311  min-height: 72px;8312  padding: 16px 20px;8313  border-bottom: 0.5px solid var(--peach-border);8314  cursor: pointer;8315  overflow: hidden;8316  touch-action: pan-y;8317  user-select: none;8318  -webkit-user-select: none;8319  -webkit-tap-highlight-color: transparent;8320}83218322.peach-note-row:first-child {8323  border-top: 0.5px solid var(--peach-border);8324}83258326.peach-note-row:active {8327  background: rgba(255,255,255,0.02);8328}83298330.peach-note-numeral {8331  font-family: 'Cormorant Garamond', serif;8332  font-style: italic;8333  font-size: 15px;8334  color: var(--peach-accent);8335  text-align: right;8336  line-height: 1;8337  flex-shrink: 0;8338}83398340.peach-note-title-gap { /* grid spacer */ }83418342.peach-note-title {8343  font-family: 'Cormorant Garamond', serif;8344  font-style: italic;8345  font-size: 18px;8346  color: var(--peach-t0);8347  line-height: 1.3;8348  min-width: 0;8349  overflow-wrap: break-word;8350}83518352.peach-note-title-match {8353  color: var(--peach-accent);8354}83558356.peach-note-date {8357  font-family: 'IBM Plex Mono', monospace;8358  font-size: 11px;8359  color: var(--peach-t2);8360  white-space: nowrap;8361  text-align: right;8362  flex-shrink: 0;8363  grid-column: 5;8364}83658366/* Swipe underlays */8367.peach-note-row-underlay {8368  position: absolute;8369  inset: 0;8370  display: flex;8371  align-items: center;8372  padding: 0 24px;8373  font-family: 'IBM Plex Mono', monospace;8374  font-size: 11px;8375  letter-spacing: 0.1em;8376  pointer-events: none;8377  z-index: 0;8378}83798380.peach-note-row-underlay--delete {8381  background: #8B2020;8382  color: rgba(255,255,255,0.9);8383  justify-content: flex-end;8384}83858386.peach-note-row-underlay--archive {8387  background: var(--peach-accent);8388  color: #0C0A06;8389  justify-content: flex-start;8390}83918392/* Delete confirm strip */8393.peach-note-delete-confirm {8394  position: absolute;8395  inset: 0;8396  background: var(--peach-bg);8397  display: flex;8398  align-items: center;8399  gap: 12px;8400  padding: 0 20px;8401  font-family: 'IBM Plex Mono', monospace;8402  font-size: 11px;8403  color: var(--peach-t1);8404  letter-spacing: 0.04em;8405  animation: peach-delete-confirm-in 150ms ease both;8406  z-index: 10;8407}84088409@keyframes peach-delete-confirm-in {8410  from { opacity: 0; }8411  to   { opacity: 1; }8412}84138414.peach-note-delete-confirm-btn {8415  background: #8B2020;8416  color: rgba(255,255,255,0.9);8417  border: none;8418  border-radius: 6px;8419  padding: 4px 10px;8420  font-family: 'IBM Plex Mono', monospace;8421  font-size: 10px;8422  cursor: pointer;8423  letter-spacing: 0.06em;8424}84258426.peach-note-delete-cancel-btn {8427  background: none;8428  border: none;8429  color: var(--peach-t3);8430  font-family: 'IBM Plex Mono', monospace;8431  font-size: 10px;8432  cursor: pointer;8433  letter-spacing: 0.06em;8434  padding: 4px 6px;8435}84368437/* + New note button */8438.peach-notes-new-btn {8439  font-family: 'IBM Plex Mono', monospace;8440  font-size: 12px;8441  color: var(--peach-t3);8442  text-align: center;8443  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8444  background: none;8445  border: none;8446  width: 100%;8447  cursor: pointer;8448  letter-spacing: 0.04em;8449  transition: color 150ms ease;8450  -webkit-tap-highlight-color: transparent;8451}84528453.peach-notes-new-btn:active { color: var(--peach-accent); }84548455/* Empty state */8456.peach-notes-empty {8457  display: flex;8458  flex-direction: column;8459  align-items: center;8460  justify-content: center;8461  flex: 1;8462  padding: 48px 32px;8463  gap: 16px;8464}84658466.peach-notes-empty-text {8467  font-family: 'Cormorant Garamond', serif;8468  font-style: italic;8469  font-size: 20px;8470  color: var(--peach-t3);8471  text-align: center;8472  margin: 0;8473  line-height: 1.4;8474  white-space: pre-line;8475}84768477/* ── Editor surface ── */84788479.peach-note-editor-surface {8480  position: absolute;8481  inset: 0;8482  background: var(--peach-bg);8483  display: flex;8484  flex-direction: column;8485  padding-top: env(safe-area-inset-top, 0px);8486}84878488.peach-note-editor-scroll {8489  flex: 1;8490  overflow-y: auto;8491  overflow-x: hidden;8492  scrollbar-width: none;8493  -webkit-overflow-scrolling: touch;8494  padding: 0 24px 120px;8495  position: relative;8496  z-index: 1;8497}84988499.peach-note-editor-scroll::-webkit-scrollbar { display: none; }85008501/* Desktop toolbar (always visible above body) */8502.peach-note-toolbar-desktop-inline {8503  display: flex;8504  align-items: center;8505  gap: 2px;8506  padding: 6px 0 12px;8507  margin-bottom: 4px;8508  border-bottom: 0.5px solid var(--peach-border);8509}85108511/* Title field */8512.peach-note-title-field {8513  font-family: 'Cormorant Garamond', serif;8514  font-style: italic;8515  font-size: 32px;8516  font-weight: 600;8517  color: var(--peach-t0);8518  line-height: 1.2;8519  padding: 8px 0 0;8520  outline: none;8521  min-height: 44px;8522  word-break: break-word;8523  position: relative;8524  z-index: 1;8525}85268527.peach-note-title-field:empty::before {8528  content: attr(data-placeholder);8529  color: var(--peach-t3);8530  pointer-events: none;8531}85328533/* Hairline separator */8534.peach-note-hairline {8535  height: 0.5px;8536  background: var(--peach-border);8537  margin: 12px 0 20px;8538  position: relative;8539  z-index: 1;8540}85418542/* Body field */8543.peach-note-body-field {8544  font-family: 'DM Sans', sans-serif;8545  font-size: 16px;8546  color: var(--peach-t0);8547  line-height: 1.85;8548  padding: 0;8549  outline: none;8550  min-height: 240px;8551  word-break: break-word;8552  position: relative;8553  z-index: 1;8554}85558556.peach-note-body-field:empty::before {8557  content: attr(data-placeholder);8558  color: var(--peach-t3);8559  font-style: italic;8560  pointer-events: none;8561}85628563.peach-note-body-field h2 {8564  font-family: 'Cormorant Garamond', serif;8565  font-style: italic;8566  font-size: 22px;8567  font-weight: 600;8568  color: var(--peach-t0);8569  margin: 20px 0 8px;8570}85718572.peach-note-body-field blockquote {8573  border-left: 2px solid var(--peach-accent);8574  margin: 12px 0;8575  padding-left: 16px;8576  color: var(--peach-t1);8577  font-style: italic;8578}85798580.peach-note-body-field ul,8581.peach-note-body-field ol {8582  padding-left: 20px;8583  margin: 8px 0;8584}85858586.peach-note-body-field li {8587  margin: 4px 0;8588}85898590.peach-note-body-field hr {8591  border: none;8592  border-top: 0.5px solid var(--peach-border);8593  margin: 16px 0;8594}85958596/* Saved indicator */8597.peach-note-saved-indicator {8598  font-family: 'IBM Plex Mono', monospace;8599  font-size: 11px;8600  color: var(--peach-t3);8601  letter-spacing: 0.04em;8602  text-align: right;8603  padding: 6px 24px;8604  flex-shrink: 0;8605  transition: opacity 300ms ease;8606  pointer-events: none;8607  position: relative;8608  z-index: 1;8609}86108611/* Mobile keyboard toolbar */8612.peach-note-toolbar-mobile {8613  display: flex;8614  align-items: center;8615  padding: 8px 16px;8616  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8617  background: var(--peach-bg);8618  border-top: 0.5px solid var(--peach-border);8619  gap: 4px;8620  flex-shrink: 0;8621  position: relative;8622  z-index: 10;8623}86248625.peach-note-toolbar-btn {8626  min-width: 36px;8627  height: 36px;8628  display: flex;8629  align-items: center;8630  justify-content: center;8631  background: none;8632  border: none;8633  border-radius: 8px;8634  cursor: pointer;8635  font-size: 14px;8636  color: var(--peach-t1);8637  font-family: 'DM Sans', sans-serif;8638  font-weight: 600;8639  transition: background 100ms ease, color 100ms ease;8640  -webkit-tap-highlight-color: transparent;8641}86428643.peach-note-toolbar-btn--italic { font-style: italic; }8644.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8645.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }86468647.peach-note-toolbar-divider {8648  width: 0.5px;8649  height: 20px;8650  background: var(--peach-border);8651  margin: 0 4px;8652  flex-shrink: 0;8653}86548655.peach-note-toolbar-spacer { flex: 1; }86568657/* Desktop: larger headline in TOC */8658@media (min-width: 400px) {8659  .peach-notes-header-title:not(.is-breadcrumb) {8660    font-size: 32px;8661  }86628663  .peach-note-row {8664    min-height: 64px;8665    padding: 14px 16px;8666  }8667}86688669/* Flying title — shared element during expansion/collapse */86708671/* ─── Light theme overrides ───────────────────────────────────────────────8672   Tokens that cannot be expressed as variable substitutions — hardcoded8673   context-specific values that need separate light-mode rules. */86748675/* Settings section headers: use text-label (#5C4228) for more presence8676   than --t2 alone — gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY8677   the dark anchor they need against the warmer background. */8678.light .peach-settings-sub-label,8679[data-theme="light"] .peach-settings-sub-label,8680.light .peach-settings-nav-label,8681[data-theme="light"] .peach-settings-nav-label {8682  color: #5C4228;8683}86848685/* Secondary action buttons (ghost / subtle): filled with the sunken surface8686   colour so they read as embedded and intentional on the linen background8687   rather than floating. Values track --s3 (bg-sunken) and border-default. */8688.light .peach-btn--ghost,8689[data-theme="light"] .peach-btn--ghost {8690  background: #C4BCB5;8691  border-color: #96724C;8692  color: #1A1208;8693}8694.light .peach-btn--subtle,8695[data-theme="light"] .peach-btn--subtle {8696  background: #C4BCB5;8697  border-color: #96724C;8698}86998700/* Wide secondary action button on the lock screen — override the8701   hardcoded dark-mode rgba values with warm-surface equivalents. */8702.light .peach-lock-secondary,8703[data-theme="light"] .peach-lock-secondary {8704  background: #C4BCB5;8705  border-color: #96724C;8706  color: #1A1208;8707}8708.light .peach-lock-secondary:hover,8709[data-theme="light"] .peach-lock-secondary:hover {8710  background: #C9C0B8;8711}87128713/* Entry row hover: replace the near-invisible light-on-light rgba value. */8714.light .peach-entry-row:hover,8715[data-theme="light"] .peach-entry-row:hover {8716  background: rgba(26, 18, 8, 0.05);8717}8718.light .peach-entry-row.is-active,8719[data-theme="light"] .peach-entry-row.is-active {8720  background: rgba(26, 18, 8, 0.04);8721}8722.light .peach-entry-row.is-selected,8723[data-theme="light"] .peach-entry-row.is-selected {8724  background: rgba(26, 18, 8, 0.06);8725}87268727/* ──────────────────────────────────────────────────────────────────────────8728   Chirp pairing flow — bird-stage animation (Phase 1)8729   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.8730   Three-act animation gated on the [data-phase] attribute of8731   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)8732   each react via either pose class or visibility flag.8733   Tokens: accent surfaces use var(--peach-accent); bird illustration8734   colours are baked into the SVG per the brand-peach exception in §3.1.8735   ────────────────────────────────────────────────────────────────────── */87368737.peach-chirp-pair {8738  position: relative;8739  display: flex;8740  flex-direction: column;8741  padding: 16px 18px 14px;8742  min-height: 100%;8743  gap: 0;8744  background:8745    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 8%, transparent), transparent 70%),8746    var(--peach-bg);8747  color: var(--peach-text);8748  overflow: hidden;8749  isolation: isolate;8750}8751.peach-chirp-pair::before {8752  content: '';8753  position: absolute;8754  inset: 0;8755  border-radius: inherit;8756  pointer-events: none;8757  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);8758  z-index: 0;8759}8760.peach-chirp-pair > * { position: relative; z-index: 1; }87618762/* Header --------------------------------------------------------------- */8763.peach-chirp-head {8764  display: flex; align-items: center; gap: 10px;8765}8766.peach-chirp-back {8767  width: 32px; height: 32px;8768  display: inline-flex; align-items: center; justify-content: center;8769  background: color-mix(in srgb, var(--peach-text) 4%, transparent);8770  border: 1px solid color-mix(in srgb, var(--peach-text) 8%, transparent);8771  border-radius: 8px;8772  color: var(--peach-text-dim);8773  cursor: pointer;8774  transition: background 0.15s ease, color 0.15s ease;8775}8776.peach-chirp-back:hover {8777  background: color-mix(in srgb, var(--peach-text) 7%, transparent);8778  color: var(--peach-text);8779}8780.peach-chirp-title {8781  font-family: var(--peach-serif, Georgia, serif);8782  font-style: italic;8783  font-size: 22px;8784  letter-spacing: 0.01em;8785  color: var(--peach-text);8786  line-height: 1;8787}8788.peach-chirp-head-spacer { flex: 1; }87898790/* Chip row ------------------------------------------------------------- */8791.peach-chirp-chip-row {8792  display: flex;8793  align-items: center;8794  justify-content: flex-start;8795  margin-top: 12px;8796}8797.peach-chirp-chip {8798  display: inline-flex; align-items: center; gap: 8px;8799  padding: 5px 10px 5px 8px;8800  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);8801  border: 1px solid color-mix(in srgb, var(--peach-accent) 20%, transparent);8802  border-radius: 999px;8803  font-family: var(--peach-mono, ui-monospace, monospace);8804  font-size: 10.5px;8805  letter-spacing: 0.04em;8806  color: var(--peach-accent);8807}8808.peach-chirp-chip-dot {8809  width: 6px; height: 6px; border-radius: 50%;8810  background: var(--peach-accent);8811  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);8812}8813.peach-chirp-chip[data-phase="paired"] {8814  background: color-mix(in srgb, #4f9eda 12%, transparent);8815  border-color: color-mix(in srgb, #4f9eda 28%, transparent);8816  color: #76b6e8;8817}8818.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {8819  background: #76b6e8;8820  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);8821}8822.peach-chirp-chip[data-phase="timeout"],8823.peach-chirp-chip[data-phase="mic_denied"],8824.peach-chirp-chip[data-phase="version_mismatch"],8825.peach-chirp-chip[data-phase="handshake_failed"] {8826  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);8827  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);8828  color: var(--peach-warn, #d29257);8829}8830.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,8831.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,8832.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,8833.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {8834  background: var(--peach-warn, #d29257);8835  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);8836}88378838/* Bird stage ----------------------------------------------------------- */8839.peach-chirp-stage {8840  position: relative;8841  margin: 14px -4px 8px;8842  height: 180px;8843  border-radius: 12px;8844  background:8845    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 8%, transparent), transparent 70%),8846    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 12%, transparent), transparent 70%),8847    color-mix(in srgb, var(--peach-bg) 92%, #000);8848  border: 1px solid color-mix(in srgb, var(--peach-text) 6%, transparent);8849  overflow: hidden;8850  isolation: isolate;8851}8852.peach-chirp-stage::after {8853  content: '';8854  position: absolute;8855  left: 12%; right: 12%;8856  bottom: 36px;8857  height: 1px;8858  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-text) 12%, transparent), transparent);8859}88608861.peach-chirp-bird-slot {8862  position: absolute;8863  bottom: 8px;8864  width: 100px;8865  height: 110px;8866  display: flex;8867  align-items: flex-end;8868  justify-content: center;8869}8870.peach-chirp-bird-slot-desktop { left: 28px; }8871.peach-chirp-bird-slot-mobile { right: 28px; }88728873/* Mobile bird hops in from the right when handshake begins */8874.peach-chirp-bird-slot-mobile {8875  opacity: 1;8876  transform: translateX(-6px);8877  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);8878}8879.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,8880.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,8881.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {8882  opacity: 0;8883  transform: translateX(60px) rotate(8deg);8884}8885.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,8886.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {8887  transform: translateX(6px);8888  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);8889}88908891/* Paired: both birds bob together */8892.peach-chirp-stage.act-paired .peach-chirp-bird-slot {8893  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;8894}8895.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }8896.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }8897.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }8898@keyframes peach-chirp-happy-bob {8899  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }8900  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }8901}89028903/* Bird internal -------------------------------------------------------- */8904.peach-chirp-bird {8905  width: 108px;8906  height: 108px;8907  transform-origin: 50% 95%;8908}8909.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }89108911.peach-chirp-bird-body {8912  transform-origin: 50% 80%;8913  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;8914}8915@keyframes peach-chirp-bird-bob {8916  0%, 100% { transform: translateY(0) scale(1, 1); }8917  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }8918}89198920.peach-chirp-bird-eye-group {8921  animation: peach-chirp-blink 5.2s steps(1, end) infinite;8922  transform-origin: center;8923  transform-box: fill-box;8924}8925@keyframes peach-chirp-blink {8926  0%, 92%, 96%, 100% { transform: scaleY(1); }8927  94%                { transform: scaleY(0.05); }8928}89298930/* Pose: chirping — beak opens, head bobs, aura blooms */8931.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {8932  animation:8933    peach-chirp-bird-bob 2.4s ease-in-out infinite,8934    peach-chirp-squeeze 1.7s ease-in-out infinite;8935}8936@keyframes peach-chirp-squeeze {8937  0%, 70%, 100% { transform-origin: 50% 85%; }8938  78%           { transform: scale(1.04, 0.96) translateY(1px); }8939  86%           { transform: scale(0.98, 1.02); }8940}8941.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {8942  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;8943}8944@keyframes peach-chirp-head-bob {8945  0%, 70%, 100% { transform: translateY(0) rotate(0); }8946  78%           { transform: translateY(-3px) rotate(-4deg); }8947  86%           { transform: translateY(-1px) rotate(-2deg); }8948}8949.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {8950  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;8951}8952@keyframes peach-chirp-beak-open {8953  0%, 70%, 100% { transform: rotate(0) scaleX(1); }8954  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }8955  86%           { transform: rotate(-6deg); }8956}8957.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {8958  animation: peach-chirp-aura 1.7s ease-in-out infinite;8959}8960@keyframes peach-chirp-aura {8961  0%, 100% { opacity: 0; }8962  50%      { opacity: 0.8; }8963}8964.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {8965  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;8966  transform-origin: 100% 50%;8967}8968@keyframes peach-chirp-tail-twitch {8969  0%, 75%, 100% { transform: rotate(0); }8970  82%           { transform: rotate(-3deg) translateX(-1px); }8971}89728973/* Pose: attentive — head tilts toward partner */8974.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {8975  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;8976}8977@keyframes peach-chirp-head-tilt {8978  0%   { transform: rotate(0) translateY(0); }8979  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }8980  100% { transform: rotate(-6deg); }8981}8982.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {8983  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;8984  transform-origin: 100% 50%;8985}8986@keyframes peach-chirp-tail-cock {8987  0%   { transform: rotate(0); }8988  100% { transform: rotate(-4deg); }8989}89908991/* Pose: happy — wing flutter, tuft perk, tail wag */8992.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {8993  transform-origin: 80% 60%;8994  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;8995}8996@keyframes peach-chirp-wing-flutter {8997  0%, 100% { transform: rotate(0) translateY(0); }8998  50%      { transform: rotate(-16deg) translateY(-2px); }8999}9000.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9001  transform-origin: 0% 100%;9002  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9003}9004@keyframes peach-chirp-tuft-perk {9005  0%, 100% { transform: rotate(0); }9006  50%      { transform: rotate(-15deg) translateY(-1px); }9007}9008.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9009  transform-origin: 100% 50%;9010  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9011}9012@keyframes peach-chirp-tail-wag {9013  0%, 100% { transform: rotate(0); }9014  25%      { transform: rotate(6deg); }9015  75%      { transform: rotate(-6deg); }9016}9017.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9018  animation: peach-chirp-head-perk 0.5s ease-out;9019}9020@keyframes peach-chirp-head-perk {9021  0%   { transform: translateY(0); }9022  40%  { transform: translateY(-3px) rotate(2deg); }9023  100% { transform: translateY(0); }9024}90259026/* Pose: sad — body droops forward */9027.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9028  transform: translateY(5px) rotate(-2deg);9029  animation: none;9030}9031.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9032  transform: translateY(4px) rotate(8deg);9033}9034.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9035.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }90369037.peach-chirp-bird-pose-hidden { opacity: 0; }90389039/* Chirp arcs ----------------------------------------------------------- */9040.peach-chirp-arcs {9041  position: absolute;9042  top: 18px;9043  width: 96px;9044  height: 70px;9045  pointer-events: none;9046}9047.peach-chirp-arcs-right { right: -60px; }9048.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9049.peach-chirp-arc {9050  position: absolute;9051  top: 50%;9052  left: 0;9053  width: 40px;9054  height: 40px;9055  margin-top: -20px;9056  border: 1.2px solid #f4d5a8;9057  border-color: transparent #f4d5a8 transparent transparent;9058  border-radius: 50%;9059  opacity: 0;9060  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9061}9062@keyframes peach-chirp-arc-expand {9063  0%   { transform: scale(0.4); opacity: 0; }9064  20%  { opacity: 0.9; }9065  100% { transform: scale(1.6); opacity: 0; }9066}90679068/* Flight wave ---------------------------------------------------------- */9069.peach-chirp-flight-track {9070  position: absolute;9071  inset: 32px 36px 38px 36px;9072  pointer-events: none;9073}9074.peach-chirp-flight-wave {9075  position: absolute;9076  top: 8px;9077  left: 76px;9078  right: 76px;9079  height: 60px;9080  width: auto;9081  opacity: 0;9082  transition: opacity 0.15s ease;9083  stroke: #f4d5a8;9084  fill: none;9085}9086.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9087.peach-chirp-flight-wave.is-visible { opacity: 1; }9088.peach-chirp-flight-path,9089.peach-chirp-flight-path-2 {9090  stroke-dasharray: 240;9091  stroke-dashoffset: 240;9092  stroke-linecap: round;9093  fill: none;9094}9095.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9096.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9097.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9098  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9099}9100.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9101  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9102}9103@keyframes peach-chirp-fly {9104  0%   { stroke-dashoffset: 240; opacity: 0; }9105  20%  { opacity: 1; }9106  100% { stroke-dashoffset: -120; opacity: 0; }9107}91089109/* Connection dot ------------------------------------------------------- */9110.peach-chirp-dot {9111  position: absolute;9112  top: 50%; left: 50%;9113  transform: translate(-50%, -50%);9114  width: 40px; height: 40px;9115  opacity: 0;9116  pointer-events: none;9117  transition: opacity 0.3s ease;9118  color: var(--peach-accent);9119}9120.peach-chirp-dot.is-visible { opacity: 1; }9121.peach-chirp-dot-glow {9122  position: absolute; top: 50%; left: 50%;9123  transform: translate(-50%, -50%);9124  width: 38px; height: 38px;9125  border-radius: 50%;9126  filter: blur(10px);9127  opacity: 0.55;9128  background: var(--peach-accent);9129  animation: peach-chirp-dot-bloom 1.4s ease-out;9130}9131.peach-chirp-dot-core {9132  position: absolute; top: 50%; left: 50%;9133  transform: translate(-50%, -50%);9134  width: 8px; height: 8px;9135  border-radius: 50%;9136  background: var(--peach-accent);9137  box-shadow: 0 0 12px currentColor;9138  animation: peach-chirp-dot-core 1.4s ease-out;9139}9140.peach-chirp-dot-ring {9141  position: absolute; top: 50%; left: 50%;9142  width: 60px; height: 60px;9143  transform: translate(-50%, -50%);9144  animation: peach-chirp-dot-ring 1.4s linear;9145  stroke: var(--peach-accent);9146}9147@keyframes peach-chirp-dot-bloom {9148  0%   { width: 4px; height: 4px; opacity: 0; }9149  35%  { width: 60px; height: 60px; opacity: 0.7; }9150  100% { width: 38px; height: 38px; opacity: 0.55; }9151}9152@keyframes peach-chirp-dot-core {9153  0%   { width: 0; height: 0; }9154  35%  { width: 12px; height: 12px; }9155  100% { width: 8px; height: 8px; }9156}9157@keyframes peach-chirp-dot-ring {9158  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9159  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9160  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9161}91629163/* Motes — drift upward across the stage */9164.peach-chirp-motes {9165  position: absolute;9166  inset: 0;9167  pointer-events: none;9168}9169.peach-chirp-mote {9170  position: absolute;9171  width: 2px; height: 2px;9172  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9173  border-radius: 50%;9174  bottom: 32px;9175  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9176  opacity: 0;9177  animation: peach-chirp-mote-drift 6s linear infinite;9178  animation-delay: calc(var(--mote-i, 0) * 0.7s);9179}9180@keyframes peach-chirp-mote-drift {9181  0%   { transform: translateY(0); opacity: 0; }9182  10%  { opacity: 0.6; }9183  90%  { opacity: 0.1; }9184  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9185}91869187/* Status copy ---------------------------------------------------------- */9188.peach-chirp-copy-host {9189  margin: 4px 4px 10px;9190  text-align: center;9191  min-height: 50px;9192}9193.peach-chirp-copy {9194  animation: peach-chirp-copy-in 0.35s ease both;9195}9196@keyframes peach-chirp-copy-in {9197  from { opacity: 0; transform: translateY(4px); }9198  to   { opacity: 1; transform: translateY(0); }9199}9200.peach-chirp-headline {9201  font-family: var(--peach-serif, Georgia, serif);9202  font-style: italic;9203  font-size: 20px;9204  line-height: 1.15;9205  letter-spacing: 0.01em;9206  color: var(--peach-text);9207  margin-bottom: 5px;9208}9209.peach-chirp-copy-listening .peach-chirp-headline,9210.peach-chirp-copy-chirping .peach-chirp-headline,9211.peach-chirp-copy-idle .peach-chirp-headline {9212  font-family: inherit;9213  font-style: normal;9214  font-weight: 500;9215  font-size: 14.5px;9216  color: var(--peach-text-dim);9217  letter-spacing: 0;9218}9219.peach-chirp-copy-paired .peach-chirp-headline {9220  color: var(--peach-text);9221  font-weight: 600;9222}9223.peach-chirp-sub {9224  font-size: 12px;9225  line-height: 1.45;9226  color: var(--peach-text-muted);9227  max-width: 280px;9228  margin: 0 auto;9229  text-wrap: pretty;9230}92319232/* Status action -------------------------------------------------------- */9233.peach-chirp-action {9234  margin: 2px 4px 10px;9235}9236.peach-chirp-action-waiting {9237  display: flex;9238  align-items: center;9239  justify-content: space-between;9240  gap: 12px;9241}9242.peach-chirp-cancel {9243  min-width: 96px;9244}9245.peach-chirp-listening {9246  display: inline-flex; align-items: center; gap: 4px;9247  font-family: var(--peach-mono, ui-monospace, monospace);9248  font-size: 9.5px;9249  text-transform: uppercase;9250  letter-spacing: 0.12em;9251  color: var(--peach-text-muted);9252  padding: 8px 10px;9253}9254.peach-chirp-listen-dot {9255  width: 4px; height: 4px;9256  border-radius: 50%;9257  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9258  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9259}9260.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9261.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9262.peach-chirp-listen-label { margin-left: 6px; }9263@keyframes peach-chirp-listen-pulse {9264  0%, 100% { opacity: 0.25; transform: scale(0.9); }9265  50%      { opacity: 1;     transform: scale(1.15); }9266}92679268.peach-chirp-action-handshake {9269  display: flex;9270  flex-direction: column;9271  align-items: center;9272  gap: 8px;9273  padding: 8px 4px;9274}9275.peach-chirp-meter {9276  width: 100%;9277  max-width: 280px;9278  height: 2px;9279  background: color-mix(in srgb, var(--peach-text) 8%, transparent);9280  border-radius: 2px;9281  position: relative;9282  overflow: hidden;9283}9284.peach-chirp-meter-bar {9285  position: absolute;9286  top: 0; bottom: 0;9287  width: 30%;9288  left: -30%;9289  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9290  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9291}9292@keyframes peach-chirp-meter-sweep {9293  0%   { left: -30%; }9294  100% { left: 100%; }9295}9296.peach-chirp-meter-label {9297  font-family: var(--peach-mono, ui-monospace, monospace);9298  font-size: 9.5px;9299  text-transform: uppercase;9300  letter-spacing: 0.14em;9301  color: var(--peach-text-muted);9302}93039304.peach-chirp-action-paired {9305  display: flex;9306  align-items: center;9307  gap: 10px;9308}9309.peach-chirp-device-confirm {9310  flex: 1;9311  display: inline-flex;9312  align-items: center;9313  gap: 8px;9314  padding: 9px 10px 9px 12px;9315  border-radius: 10px;9316  background: color-mix(in srgb, #76b6e8 10%, transparent);9317  border: 1px solid color-mix(in srgb, #76b6e8 26%, transparent);9318  font-size: 12.5px;9319  color: var(--peach-text);9320  min-width: 0;9321}9322.peach-chirp-device-confirm-glyph {9323  display: inline-flex;9324  color: #76b6e8;9325}9326.peach-chirp-device-confirm-name {9327  flex: 1;9328  overflow: hidden;9329  text-overflow: ellipsis;9330  white-space: nowrap;9331}9332.peach-chirp-device-confirm-trust {9333  font-family: var(--peach-mono, ui-monospace, monospace);9334  font-size: 9.5px;9335  text-transform: uppercase;9336  letter-spacing: 0.1em;9337  color: color-mix(in srgb, #76b6e8 85%, var(--peach-text));9338  padding: 2px 6px;9339  border-radius: 4px;9340  background: color-mix(in srgb, #76b6e8 12%, transparent);9341}9342.peach-chirp-done {9343  min-width: 80px;9344}9345.peach-chirp-retry {9346  align-self: center;9347  display: block;9348  margin: 6px auto 0;9349  min-width: 120px;9350}9351.peach-chirp-mic-help {9352  font-size: 12px;9353  color: var(--peach-text-muted);9354  text-align: center;9355  max-width: 320px;9356  margin: 0 auto;9357}93589359/* Footer --------------------------------------------------------------- */9360.peach-chirp-foot {9361  margin: 10px -4px -2px;9362  margin-top: auto;9363}9364.peach-chirp-foot-divider {9365  height: 1px;9366  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-text) 14%, transparent), transparent);9367  margin-bottom: 10px;9368}9369.peach-chirp-foot-text {9370  font-size: 11px;9371  line-height: 1.5;9372  color: var(--peach-text-muted);9373  text-align: center;9374  padding: 0 8px;9375  text-wrap: pretty;9376}93779378/* Screen-reader-only live region. Kept off the visual flow but read by9379   assistive tech as the pairing phase advances. */9380.peach-sr-only {9381  position: absolute;9382  width: 1px; height: 1px;9383  padding: 0; margin: -1px;9384  overflow: hidden;9385  clip: rect(0, 0, 0, 0);9386  white-space: nowrap;9387  border: 0;9388}93899390/* Reduced motion — stage simplifies to opacity transitions only */9391@media (prefers-reduced-motion: reduce) {9392  .peach-chirp-bird-body,9393  .peach-chirp-bird-head-group,9394  .peach-chirp-bird-beak,9395  .peach-chirp-bird-wing,9396  .peach-chirp-bird-tuft,9397  .peach-chirp-bird-tail,9398  .peach-chirp-bird-eye-group,9399  .peach-chirp-bird-aura,9400  .peach-chirp-arc,9401  .peach-chirp-flight-path,9402  .peach-chirp-flight-path-2,9403  .peach-chirp-dot-glow,9404  .peach-chirp-dot-core,9405  .peach-chirp-dot-ring,9406  .peach-chirp-mote,9407  .peach-chirp-meter-bar,9408  .peach-chirp-listen-dot,9409  .peach-chirp-bird-slot,9410  .peach-chirp-bird-slot-mobile {9411    animation: none !important;9412    transition: opacity 0.2s linear !important;9413  }9414}94159416/* ─────────────────────────────────────────────────────────────────9417   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9418   animation used by the pairing flow with a paired-devices list and9419   the "Pair a device" CTA.9420   ───────────────────────────────────────────────────────────────── */9421.peach-chirp-settings {9422  position: relative;9423  display: flex;9424  flex-direction: column;9425  gap: 18px;9426  padding: 16px 18px 14px;9427  width: 100%;9428  box-sizing: border-box;9429  overflow-y: auto;9430  overflow-x: hidden;9431  height: 100%;9432  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9433  background:9434    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 8%, transparent), transparent 70%),9435    var(--peach-bg);9436  color: var(--peach-text);9437  isolation: isolate;9438  /* Hide native scrollbar — content fits 99% of the time and a chunky9439     gutter ruins the surface. */9440  scrollbar-width: none;9441}9442.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9443.peach-chirp-settings::before {9444  content: '';9445  position: absolute;9446  inset: 0;9447  pointer-events: none;9448  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9449  z-index: 0;9450}9451.peach-chirp-settings > * { position: relative; z-index: 1; }94529453.peach-chirp-settings--pairing {9454  padding: 0;9455  align-items: stretch;9456  justify-content: stretch;9457  background: none;9458  isolation: auto;9459}9460.peach-chirp-settings--pairing::before { display: none; }94619462.peach-chirp-settings-header {9463  display: flex;9464  align-items: center;9465  gap: 10px;9466}9467.peach-chirp-settings-title {9468  margin: 0;9469  font-family: var(--peach-serif, Georgia, serif);9470  font-style: italic;9471  font-size: 22px;9472  font-weight: 500;9473  line-height: 1;9474  color: var(--peach-text);9475  letter-spacing: 0.01em;9476}9477.peach-chirp-settings-section {9478  margin: 6px 0 -4px;9479  font-size: 11px;9480  font-weight: 600;9481  letter-spacing: 0.08em;9482  text-transform: uppercase;9483  color: var(--peach-text-muted);9484}9485.peach-chirp-settings-error {9486  font-size: 12px;9487  padding: 8px 10px;9488  border-radius: 8px;9489  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9490  color: var(--peach-text);9491}9492.peach-chirp-settings-footer {9493  margin-top: auto;9494  padding-top: 18px;9495  font-size: 11.5px;9496  line-height: 1.5;9497  color: var(--peach-text-muted);9498  text-align: center;9499}95009501/* Hero card shown when no devices are paired yet. */9502.peach-chirp-hero {9503  display: flex;9504  flex-direction: column;9505  align-items: center;9506  gap: 12px;9507  padding: 20px 12px 8px;9508  text-align: center;9509}9510.peach-chirp-hero-svg {9511  display: block;9512  max-width: 100%;9513  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9514}9515.peach-chirp-hero-headline {9516  margin: 0;9517  font-family: var(--peach-serif, Georgia, serif);9518  font-style: italic;9519  font-size: 20px;9520  font-weight: 500;9521  line-height: 1.2;9522  letter-spacing: 0.01em;9523  color: var(--peach-text);9524}9525.peach-chirp-hero-sub {9526  margin: 0;9527  font-size: 13px;9528  line-height: 1.5;9529  color: var(--peach-text-muted);9530  max-width: 320px;9531  text-wrap: pretty;9532}95339534.peach-chirp-pair-cta {9535  display: flex;9536  justify-content: center;9537  padding: 4px 0 6px;9538}9539.peach-chirp-pair-button {9540  display: inline-flex;9541  align-items: center;9542  gap: 8px;9543  min-width: 220px;9544  justify-content: center;9545}9546.peach-chirp-pair-button-icon {9547  flex: 0 0 auto;9548}95499550/* Paired devices list. Roomy rows that look at home next to the rest9551   of Settings; stale rows get a soft warm-warning border tint. */9552.peach-chirp-device-list {9553  list-style: none;9554  margin: 0;9555  padding: 0;9556  display: flex;9557  flex-direction: column;9558  gap: 8px;9559}9560.peach-chirp-device-row {9561  display: flex;9562  align-items: center;9563  gap: 12px;9564  padding: 12px;9565  border-radius: 10px;9566  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9567  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);9568}9569.peach-chirp-device-row[data-stale="true"] {9570  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);9571}9572.peach-chirp-device-icon {9573  width: 32px;9574  height: 32px;9575  display: flex;9576  align-items: center;9577  justify-content: center;9578  border-radius: 8px;9579  color: var(--peach-text);9580  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);9581}9582.peach-chirp-device-info {9583  flex: 1;9584  display: flex;9585  flex-direction: column;9586  gap: 2px;9587  min-width: 0;9588}9589.peach-chirp-device-name {9590  font-size: 14px;9591  font-weight: 600;9592  color: var(--peach-text);9593  overflow: hidden;9594  text-overflow: ellipsis;9595  white-space: nowrap;9596}9597.peach-chirp-device-meta {9598  font-size: 11.5px;9599  color: var(--peach-text-muted);9600  display: flex;9601  flex-wrap: wrap;9602  align-items: center;9603  gap: 8px;9604}9605.peach-chirp-device-badge {9606  font-size: 10.5px;9607  font-weight: 500;9608  letter-spacing: 0.02em;9609  padding: 2px 6px;9610  border-radius: 999px;9611  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);9612  color: var(--peach-text);9613}9614.peach-chirp-device-stale {9615  font-size: 10.5px;9616  font-weight: 500;9617  color: var(--peach-warn, #d29257);9618}9619.peach-chirp-device-remove {9620  flex: 0 0 auto;9621  color: var(--peach-text-muted);9622}9623.peach-chirp-device-remove:hover {9624  color: var(--peach-danger, #c25b4a);9625}9626.peach-chirp-unpair-confirm {9627  display: flex;9628  gap: 6px;9629  align-items: center;9630}96319632/* Pro-gate card — soft upsell with a stylised wave illustration. */9633.peach-chirp-pro-card {9634  margin: 8px 0;9635  padding: 22px 18px;9636  border-radius: 14px;9637  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 84%, var(--peach-accent) 16%);9638  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);9639  display: flex;9640  flex-direction: column;9641  align-items: center;9642  gap: 12px;9643  text-align: center;9644}9645.peach-chirp-pro-illustration {9646  display: flex;9647  align-items: center;9648  justify-content: center;9649  gap: 10px;9650  color: var(--peach-accent);9651}9652.peach-chirp-pro-mark {9653  width: 44px;9654  height: 44px;9655}9656.peach-chirp-pro-waves {9657  opacity: 0.85;9658}9659.peach-chirp-pro-headline {9660  margin: 2px 0 0;9661  font-size: 16px;9662  font-weight: 600;9663  color: var(--peach-text);9664}9665.peach-chirp-pro-body {9666  margin: 0;9667  font-size: 13px;9668  line-height: 1.55;9669  color: var(--peach-text-dim);9670  max-width: 320px;9671}