popup.css

1html,2body,3#app,4.popup-root {5  width: 320px;6  min-height: 520px;7  height: 520px;8  margin: 0;9}1011body {12  overflow: hidden;13  background: var(--bg);14  color: var(--t0);15  font-family: var(--font-ui);16  font-weight: 300;17  position: relative;18}1920* {21  box-sizing: border-box;22}2324button,25input,26textarea,27select {28  font: inherit;29}3031button {32  border: 0;33}3435.popup-root {36  position: relative;37  overflow: hidden;38}3940.peach-theme {41  color: var(--peach-t0);42  font-family: var(--font-ui);43  font-weight: 300;44  box-sizing: border-box;45  text-align: left;46}47.peach-theme, .peach-theme * { box-sizing: inherit; }4849.peach-brand-mark {50  width: 14px;51  height: 14px;52  flex-shrink: 0;53}5455.peach-status-pip.is-hidden {56  display: none;57}5859.peach-status-pip.unlocked {60  background: var(--peach-health-ok);61  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);62}6364.peach-status-pip.pulse {65  animation: pip-pulse 400ms var(--peach-curve-settle) both;66}6768/* Shell */69.peach-shell, .peach-screen {70  background:71    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),72    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),73    var(--peach-bg);74  border: 1px solid var(--peach-t3);75  box-shadow:76    0 2px 8px rgba(0,0,0,0.55),77    0 14px 48px rgba(0,0,0,0.7),78    0 0 0 1px rgba(240,232,216,0.04);79  overflow: hidden;80}81.peach-shell {82  display: grid;83  grid-template-rows: auto 1fr;84  min-height: 520px;85  position: relative;86  isolation: isolate;87}8889.peach-shell[data-surface="extension"] {90  width: min(320px, 100vw);91  border-radius: 0;92  height: 520px;93  max-height: 520px;94  overflow: hidden;95}9697/* ── Lock screen – full-window lock/create stage ── */98.lock-screen--vault-stage {99  display: flex;100  flex-direction: column;101  gap: 18px;102  padding: 20px 18px 18px;103  justify-content: flex-start;104}105.lock-screen--vault-stage .peach-lock-panel {106  margin-top: auto;107}108.peach-lock-headline--unlock {109  max-width: 220px;110}111.peach-lock-hero--unlock {112  padding-top: 14px;113}114.peach-lock-panel--unlock {115  gap: 10px;116}117118.peach-lock-restore-link {119  background: transparent;120  border: none;121  cursor: pointer;122  font-family: var(--font-mono);123  font-size: 0.625rem;124  letter-spacing: 0.08em;125  color: var(--t1);126  padding: 5px 0;127  text-align: left;128  transition: color 150ms ease;129}130131.peach-lock-restore-link:hover {132  color: var(--t0);133}134.peach-shell[data-surface="extension"] .peach-stage {135  min-height: 250px;136}137138/* Screen (unlock) */139.peach-screen {140  width: min(320px, 100vw);141  min-height: 100%;142  height: 100%;143  border-radius: 0;144  padding: 16px 20px 18px;145  display: grid;146  gap: 14px;147}148.peach-screen[data-motion-phase="enter"] {149  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;150}151.peach-screen-header { min-height: 20px; }152153/* Wordmark */154.peach-wordmark {155  margin: 0;156  font-family: var(--font-display);157  font-size: 0.9375rem;158  font-style: italic;159  letter-spacing: 0.03em;160  color: var(--peach-t0);161  display: inline-flex;162  min-height: 1em;163}164165/* Motion text / char animation */166.peach-motion-text { display: inline-flex; min-height: 1em; }167.peach-motion-char {168  display: inline-block;169  white-space: pre;170  opacity: 0;171  transform: translateY(0.22em);172  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;173  animation-delay: calc(var(--peach-char-index, 0) * 20ms);174}175176/* Chrome */177.peach-chrome {178  position: relative;179  z-index: 10;180  padding: 16px 20px 0;181  display: flex;182  justify-content: space-between;183  align-items: center;184  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense185     fallback) per §15 regression guard. Without pointer-events:none, the186     empty header strip also sits above `.peach-overlay-view` (z-index:2)187     and swallows clicks meant for an overlay's back button / top search. */188  pointer-events: none;189}190.peach-chrome .peach-btn { pointer-events: auto; }191.peach-chrome.is-hidden-for-overlay,192.peach-search-wrap.is-hidden-for-overlay {193  opacity: 0;194  visibility: hidden;195  pointer-events: none;196}197/* The pair-device surface owns its own header and header — fully collapse the global198   chrome row so the warm gradient reaches the popup edge. */199.peach-chrome.is-collapsed,200.peach-search-wrap.is-collapsed {201  display: none;202}203.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }204.peach-status-pip {205  width: 5px;206  height: 5px;207  border-radius: 50%;208  background: var(--peach-t3);209  display: inline-flex;210  flex-shrink: 0;211  transition: background 400ms ease, box-shadow 400ms ease;212}213.peach-chrome-actions { display: flex; gap: 6px; }214215/* Shell body */216.peach-shell-body {217  position: relative;218  display: grid;219  grid-template-rows: 1fr auto;220  min-height: 0;221  min-width: 0;222  width: 100%;223  overflow: hidden;224  height: 100%;225}226.peach-shell-veil {227  position: absolute; inset: 0;228  background: #000; opacity: 0;229  pointer-events: none; z-index: 1;230}231.peach-shell[data-motion-phase="enter"] .peach-shell-body {232  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;233}234.peach-shell[data-motion-phase="exit"] .peach-shell-veil {235  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;236}237238/* Content frame */239.peach-content-frame {240  display: grid;241  grid-template-rows: 1fr auto;242  grid-template-columns: minmax(0, 1fr);243  align-content: start;244  min-height: 0;245  min-width: 0;246  overflow: hidden;247  transition: opacity 80ms ease, transform 80ms ease;248}249.peach-content-frame.navigating {250  opacity: 0.93;251  transform: translateX(2px);252}253.peach-content-frame[data-content-phase="enter"] {254  animation: peach-content-enter 135ms ease-out both;255}256.peach-content-frame[data-content-phase="exit"] {257  animation: peach-content-exit 95ms ease-in forwards;258}259.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }260261/* Stage */262.peach-stage {263  padding: 10px 20px 12px;264  display: grid;265  gap: 12px;266  align-content: start;267  min-width: 0;268  min-height: 0;269  max-width: 100%;270  overflow-y: auto;271  overflow-x: hidden;272  scrollbar-width: none;273  -ms-overflow-style: none;274  overscroll-behavior: contain;275}276.peach-stage::-webkit-scrollbar { display: none; }277278/* Entry name */279.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }280.peach-entry-header {281  position: relative;282  z-index: 1;283  display: flex;284  align-items: flex-start;285  gap: 6px;286  min-width: 0;287}288.peach-entry-header-name {289  flex: 1;290  min-width: 0;291}292.peach-entry-name {293  margin: 0;294  padding-bottom: 0.12em;295  font-family: var(--font-display);296  font-style: italic; font-weight: 400;297  font-size: 44px; line-height: 0.95;298  color: var(--peach-t0);299  display: -webkit-box;300  -webkit-line-clamp: 2;301  -webkit-box-orient: vertical;302  overflow: hidden;303  text-wrap: balance;304}305.peach-entry-name--lg { font-size: 40px; }306.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }307.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }308.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }309310/* Trash icon in entry header */311.peach-entry-trash-btn {312  flex-shrink: 0;313  padding: 4px;314  margin-top: 4px;315  background: transparent;316  border: none;317  cursor: pointer;318  color: var(--peach-t2);319  border-radius: 4px;320  transition: color 140ms ease, background 140ms ease;321  display: flex;322  align-items: center;323  justify-content: center;324}325.peach-entry-trash-btn:hover {326  color: var(--peach-t1);327  background: var(--peach-t3);328}329.peach-entry-trash-confirm {330  display: flex;331  align-items: center;332  gap: 6px;333  flex-shrink: 0;334  margin-top: 6px;335  flex-wrap: nowrap;336}337.peach-entry-trash-confirm-label {338  font-family: var(--font-mono);339  font-size: 0.5625rem;340  letter-spacing: 0.1em;341  color: var(--peach-t2);342  white-space: nowrap;343}344.peach-entry-name-button {345  padding: 0;346  background: transparent;347  text-align: left;348  cursor: pointer;349  max-width: 100%;350  overflow: hidden;351  display: block;352}353.peach-entry-name-char {354  display: inline-block;355  white-space: pre;356  opacity: 0;357  transform: translateY(0.22em);358  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;359  animation-delay: calc(var(--char-index, 0) * 20ms);360}361362/* Domain */363.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }364.peach-domain-row {365  width: 100%; border: 0; background: transparent; color: inherit;366  padding: 0; display: flex; justify-content: space-between; align-items: baseline;367  cursor: default;368}369.peach-domain-value {370  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;371  font-size: 0.625rem; font-style: italic;372  letter-spacing: 0.12em; color: var(--peach-t1);373}374375/* Fields */376.peach-fields { display: grid; gap: 10px; }377.peach-field-card { display: grid; gap: 7px; }378.peach-label {379  font-family: Inter, system-ui, sans-serif;380  text-transform: uppercase; letter-spacing: 0.2em;381  font-size: 0.5rem; color: var(--peach-t2);382}383.peach-add-field-btn {384  align-self: flex-start;385  background: none; border: none; padding: 2px 0;386  font-family: Inter, system-ui, sans-serif;387  font-size: 0.6875rem; color: var(--peach-accent);388  cursor: pointer; opacity: 0.75;389  letter-spacing: 0.02em;390}391.peach-add-field-btn:hover { opacity: 1; }392.peach-field-value-row {393  display: flex; justify-content: space-between;394  align-items: center; gap: 8px;395  min-width: 0;396}397.peach-field-value {398  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;399  font-size: 0.8125rem; color: var(--peach-t1);400  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;401  flex: 1;402  min-width: 0;403}404.peach-password-value {405  display: inline-flex;406  align-items: center;407  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;408  font-size: 1rem; letter-spacing: 0.3em; color: var(--peach-t0);409  overflow: hidden;410  text-overflow: ellipsis;411  white-space: nowrap;412  flex: 1;413  min-width: 0;414  max-width: 100%;415}416.peach-password-value.is-revealed {417  font-size: 0.875rem;418  letter-spacing: 0.08em;419}420.peach-password-text,421.peach-password-mask {422  display: block;423  width: 100%;424  overflow: hidden;425  white-space: nowrap;426  /* Render as uniform mid-line bullets, not baseline periods */427  font-family: Inter, system-ui, sans-serif;428  font-size: 0.625rem;429  letter-spacing: 3px;430  user-select: none;431}432.peach-field-actions { display: flex; gap: 4px; align-items: center; }433.peach-password-strength { display: flex; align-items: center; gap: 8px; }434.peach-strength-bar { display: flex; gap: 3px; }435.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }436.peach-strength-label {437  font-family: "IBM Plex Mono", monospace;438  font-style: italic;439  font-size: 0.5625rem;440  font-weight: 300;441  min-width: 36px;442  text-align: right;443  color: var(--peach-t2);444  letter-spacing: 0.06em;445}446447.peach-strength-hairline {448  display: flex;449  align-items: center;450  gap: 10px;451  margin-top: -2px;452}453454.peach-strength-hairline-track {455  flex: 1;456  height: 3px;457  border-radius: 2px;458  background: var(--peach-s2);459  overflow: hidden;460}461462.peach-strength-hairline-fill {463  height: 100%;464  border-radius: 2px;465  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),466    background 400ms ease;467}468469/* Note content (display) */470.peach-note-content {471  border-top: 1px solid var(--peach-t3);472  padding-top: 10px;473  font-family: var(--font-display);474  font-size: 0.9375rem;475  line-height: 1.75;476  color: var(--peach-t1);477}478479/* ── Inline editing ─────────────────────────────────────────────────── */480481/* Clickable display values */482.peach-inline-clickable {483  cursor: text;484  border-radius: 3px;485  transition: background 150ms ease;486}487.peach-inline-clickable:hover {488  background: rgba(240, 232, 216, 0.05);489}490491/* Subtle "edit" hint that appears on hover */492.peach-inline-edit-hint {493  font-family: Inter, system-ui, sans-serif;494  font-size: 0.5625rem;495  text-transform: uppercase;496  letter-spacing: 0.14em;497  color: var(--peach-t2);498  opacity: 0;499  transition: opacity 120ms ease;500  pointer-events: none;501  margin-left: 6px;502  flex-shrink: 0;503}504.peach-domain-row:hover .peach-inline-edit-hint {505  opacity: 1;506}507508/* Title editing */509.peach-inline-title-wrap {510  display: flex;511  flex-direction: column;512  gap: 6px;513}514.peach-inline-title-input {515  font-family: var(--font-display);516  font-style: italic;517  font-weight: 400;518  font-size: 40px;519  line-height: 0.95;520  color: var(--peach-t0);521  background: transparent;522  border: none;523  border-bottom: 1px solid var(--peach-accent);524  outline: none;525  width: 100%;526  padding: 2px 0;527}528529/* Generic inline field */530.peach-inline-field-wrap {531  display: flex;532  flex-direction: column;533  gap: 6px;534}535.peach-inline-input {536  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;537  font-size: 0.8125rem;538  color: var(--peach-t0);539  background: transparent;540  border: none;541  border-bottom: 1px solid var(--peach-accent);542  outline: none;543  width: 100%;544  padding: 3px 0;545}546.peach-inline-textarea {547  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;548  font-size: 0.6875rem;549  line-height: 1.7;550  color: var(--peach-t0);551  background: rgba(240, 232, 216, 0.04);552  border: 1px solid var(--peach-accent);553  border-radius: 4px;554  outline: none;555  width: 100%;556  padding: 8px;557  resize: vertical;558  min-height: 80px;559}560561/* Save / cancel row */562.peach-inline-actions {563  display: flex;564  gap: 6px;565  align-items: center;566}567.peach-inline-save-btn,568.peach-inline-cancel-btn {569  display: inline-flex;570  align-items: center;571  justify-content: center;572  width: 26px;573  height: 26px;574  border-radius: 4px;575  border: none;576  cursor: pointer;577  transition: background 140ms ease, opacity 140ms ease;578  flex-shrink: 0;579}580.peach-inline-save-btn {581  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);582  color: var(--peach-accent);583}584.peach-inline-save-btn:hover:not(:disabled) {585  background: color-mix(in srgb, var(--peach-accent) 30%, transparent);586}587.peach-inline-cancel-btn {588  background: rgba(240, 232, 216, 0.06);589  color: var(--peach-t2);590}591.peach-inline-cancel-btn:hover:not(:disabled) {592  background: rgba(240, 232, 216, 0.12);593  color: var(--peach-t1);594}595.peach-inline-save-btn:disabled,596.peach-inline-cancel-btn:disabled {597  opacity: 0.4;598  cursor: not-allowed;599}600601/* Inline password generator wrapper */602.peach-inline-generator-wrap {603  margin-top: 10px;604  padding-top: 10px;605  border-top: 1px solid var(--peach-t3);606  display: flex;607  flex-direction: column;608  gap: 8px;609}610.peach-inline-generator-cancel {611  align-self: flex-start;612  font-size: 0.6875rem;613  color: var(--peach-t2);614}615616/* "is-editing" card state */617.peach-field-card.is-editing {618  background: rgba(240, 232, 216, 0.02);619  border-radius: 6px;620  padding: 8px;621  margin: -8px;622}623624/* Inline tag editor on Entry detail view */625.peach-inline-tag-editor {626  display: flex;627  flex-direction: column;628  gap: 6px;629}630631/* Quiet inline "+ add X" link in the entry detail body */632.peach-entry-add-link {633  justify-self: start;634  margin-top: 8px;635}636637/* Additional URLs editor revealed by clicking the URL field */638.peach-additional-urls {639  display: flex;640  flex-direction: column;641  gap: 6px;642  margin-top: 8px;643}644.peach-additional-urls-label {645  font-size: 0.5625rem;646  letter-spacing: 0.1em;647  text-transform: uppercase;648  color: var(--peach-t2);649  margin-bottom: 2px;650}651/* UI-5 / LV-4: recovery words grid in the view-words reveal. */652.peach-recovery-words-grid {653  display: grid;654  grid-template-columns: 1fr 1fr;655  gap: 4px 10px;656}657.peach-recovery-word {658  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;659  font-size: 11px;660  color: var(--peach-t0);661}662.peach-recovery-word b {663  color: var(--peach-t2);664  font-weight: 400;665  margin-right: 4px;666}667668/* UI-1 / HV-1b: dismissible sync alert banners at the top of the vault view. */669.peach-sync-alerts {670  display: flex;671  flex-direction: column;672  gap: 6px;673  padding: 8px 12px 0;674}675.peach-sync-alert {676  display: flex;677  align-items: flex-start;678  gap: 8px;679  padding: 8px 10px;680  border-radius: 7px;681  background: color-mix(in srgb, #C8A840 14%, transparent);682  border: 1px solid color-mix(in srgb, #C8A840 38%, transparent);683}684.peach-sync-alert-text {685  flex: 1;686  font-family: "IBM Plex Mono", "SFMono-Regular", monospace;687  font-size: 10px;688  line-height: 1.45;689  color: var(--peach-t0);690}691.peach-sync-alert-dismiss {692  flex-shrink: 0;693  background: none;694  border: none;695  color: var(--peach-t2);696  font-size: 14px;697  line-height: 1;698  cursor: pointer;699  padding: 0 2px;700}701.peach-sync-alert-dismiss:hover { color: var(--peach-t0); }702703/* UI-8 / LV-2: non-blocking homograph warning under the URL editor. */704.peach-homograph-warning {705  margin: 4px 0 2px;706  padding: 6px 8px;707  border-radius: 6px;708  background: color-mix(in srgb, var(--peach-breach) 12%, transparent);709  border: 1px solid color-mix(in srgb, var(--peach-breach) 36%, transparent);710  color: var(--peach-t1);711  font-size: 0.6875rem;712  line-height: 1.4;713}714.peach-additional-url-row {715  display: flex;716  align-items: center;717  gap: 6px;718}719.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }720.peach-additional-url-remove {721  background: transparent;722  border: 1px solid var(--peach-t3);723  color: var(--peach-t2);724  width: 22px;725  height: 22px;726  border-radius: 4px;727  cursor: pointer;728  font-size: 0.875rem;729  line-height: 1;730  display: inline-flex;731  align-items: center;732  justify-content: center;733  flex-shrink: 0;734  transition: color 120ms ease, border-color 120ms ease;735}736.peach-additional-url-remove:hover:not(:disabled) {737  color: var(--peach-accent);738  border-color: var(--peach-border-accent);739}740.peach-additional-urls-add { align-self: flex-start; }741742/* Delete row */743.peach-entry-delete-row {744  display: flex;745  align-items: center;746  gap: 8px;747  padding-top: 18px;748  margin-top: 8px;749  border-top: 1px solid var(--peach-t3);750}751.peach-delete-btn {752  font-size: 0.6875rem;753  color: var(--peach-t2);754  padding: 4px 0;755}756.peach-delete-confirm-text {757  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;758  font-size: 0.6875rem;759  font-style: italic;760  color: var(--peach-t2);761  flex-shrink: 0;762}763764/* TOTP band */765.peach-totp-band {766  border-top: 1px solid var(--peach-t3);767  padding: 12px 20px 14px;768  position: relative;769  display: grid;770  grid-template-columns: 1fr auto;771  gap: 10px;772}773.peach-totp-main {774  min-width: 0;775  cursor: pointer;776  user-select: none;777}778.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }779.peach-totp-code-row {780  display: flex;781  align-items: flex-end;782  gap: 10px;783  min-width: 0;784}785.peach-totp-code {786  margin: 2px 0 0;787  font-family: var(--font-display);788  font-style: italic;789  font-weight: 300;790  font-size: 38px; color: var(--peach-accent);791  line-height: 0.95; min-height: 1em;792  min-width: 0;793}794.peach-totp-code-text {795  display: inline-flex;796  overflow: hidden;797  text-overflow: ellipsis;798  white-space: nowrap;799}800.peach-totp-copy-btn {801  margin-bottom: 2px;802  flex-shrink: 0;803  border-color: transparent;804}805.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }806.peach-totp-countdown {807  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;808  font-size: 22px; color: var(--peach-t1);809}810.peach-totp-ring { transform: rotate(-90deg); }811.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }812.peach-totp-ring-progress {813  fill: none; stroke: var(--peach-accent); stroke-width: 2;814  stroke-linecap: round;815  transition: stroke-dashoffset 1s linear, stroke 500ms ease;816}817/* Search bar */818.peach-search-wrap {819  border-top: 1px solid var(--peach-t3);820  background: var(--peach-s1);821  min-height: 54px; position: relative;822  box-shadow: inset 0 6px 18px transparent;823  transition: box-shadow 700ms ease;824}825.peach-search-wrap::before {826  content: "";827  position: absolute;828  left: 0;829  top: 0;830  height: 2px;831  width: var(--peach-totp-progress, 0%);832  background: var(--peach-accent);833  opacity: 0;834  transition: width 1s linear, opacity 180ms ease;835  pointer-events: none;836}837.peach-shell[data-totp-active="true"] .peach-search-wrap::before {838  opacity: 0.9;839}840.peach-shell[data-totp-active="true"] .peach-search-wrap {841  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);842}843844@keyframes peach-totp-code-flare {845  0%   { filter: brightness(1); }846  25%  { filter: brightness(1.3); }847  100% { filter: brightness(1); }848}849.peach-totp-code.is-hot {850  animation: peach-totp-code-flare 3000ms ease-in-out both;851}852.peach-search-bar {853  min-height: 54px;854  display: grid;855  grid-template-columns: auto minmax(0, 1fr) auto;856  align-items: center;857  gap: 8px; padding: 0 9px 0 12px;858}859.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }860.peach-search-input {861  border: 0; background: transparent; color: var(--peach-t0);862  font-family: var(--font-display);863  font-style: italic; font-size: 18px;864  outline: none; width: 100%; min-width: 0; padding: 0;865  caret-color: var(--peach-accent);866}867.peach-search-input::placeholder { color: var(--peach-t2); }868.peach-search-meta {869  display: grid;870  grid-auto-flow: column;871  align-items: center;872  justify-content: end;873  gap: 6px;874  min-width: max-content;875}876.peach-search-counter {877  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;878  font-size: 0.625rem; color: var(--peach-t2);879  display: inline-flex;880  align-items: center;881  line-height: 1;882}883.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }884885/* Buttons */886.peach-btn {887  border: 1px solid transparent; border-radius: 12px;888  background: transparent; color: var(--peach-t0);889  font-family: Inter, system-ui, sans-serif;890  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;891  cursor: pointer;892  transition:893    background-color var(--peach-dur-80) var(--peach-curve-arrival),894    color var(--peach-dur-80) var(--peach-curve-arrival),895    border-color var(--peach-dur-150) var(--peach-curve-arrival);896}897.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }898.peach-btn:disabled {899  opacity: 0.45;900  cursor: not-allowed;901}902.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }903.peach-btn--md { min-height: 38px; }904.peach-btn--accent {905  background: var(--peach-accent);906  color: rgba(0,0,0,0.92);907  font-weight: 500;908  box-shadow:909    0 1px 0 rgba(255,255,255,0.08) inset,910    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),911    0 3px 16px var(--peach-glow),912    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);913}914.peach-btn--accent:hover:not(:disabled) {915  background: var(--peach-accent);916  filter: brightness(1.10) saturate(1.05);917  box-shadow:918    0 1px 0 rgba(255,255,255,0.10) inset,919    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),920    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),921    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);922}923.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }924.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }925.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }926.peach-icon-btn {927  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;928  display: inline-flex; align-items: center; justify-content: center;929  border-color: transparent;930  transition:931    color var(--peach-dur-80) var(--peach-curve-arrival),932    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),933    background-color var(--peach-dur-80) var(--peach-curve-arrival);934}935.peach-icon-btn:hover:not(:disabled) {936  background: transparent;937  color: var(--peach-accent);938  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),939              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);940}941942/* Topbar sync. Only rendered when a device is paired, so it never sits there943   as a control that cannot do anything. */944.peach-sync-btn.is-syncing { color: var(--peach-accent); }945.peach-sync-btn.is-syncing .peach-sync-icon {946  animation: peach-sync-spin 900ms linear infinite;947  transform-origin: 50% 50%;948}949.peach-sync-btn.is-ok { color: var(--peach-accent); }950.peach-sync-btn.is-error { color: var(--peach-breach, #d66); }951@keyframes peach-sync-spin { to { transform: rotate(360deg); } }952@media (prefers-reduced-motion: reduce) {953  .peach-sync-btn.is-syncing .peach-sync-icon { animation: none; opacity: 0.6; }954}955956.peach-btn:focus-visible {957  outline: none;958  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);959}960961/* Lock button */962.peach-lock-icon { transform-origin: center; }963.peach-lock-btn { color: var(--peach-accent); }964.peach-lock-btn.is-locking .peach-lock-icon {965  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);966}967968/* Biometric unlock button */969.peach-biometric-btn {970  display: flex;971  align-items: center;972  justify-content: center;973  gap: 6px;974  margin-top: 8px;975  width: 100%;976}977978/* Copy button */979.peach-copy-btn {980  position: relative; overflow: hidden;981  color: var(--peach-t2); border-color: var(--peach-t3);982}983.peach-copy-icon {984  display: inline-flex; align-items: center; justify-content: center;985  position: relative; z-index: 1;986}987.peach-copy-icon-svg { display: block; }988.peach-copy-sheen {989  position: absolute; inset: 0;990  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%);991  opacity: 0; transform: scaleX(0.15); transform-origin: left center;992}993.peach-copy-btn.is-copied {994  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;995  box-shadow:996    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),997    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),998    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);999}1000.peach-copy-btn.is-copied .peach-copy-icon {1001  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;1002}1003.peach-copy-btn.is-copied .peach-copy-sheen {1004  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;1005}1006.peach-copy-btn.is-retreat {1007  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1008}1009.peach-copy-btn.is-retreat .peach-copy-sheen {1010  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;1011}1012.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }1013.peach-copy-drain-bar {1014  display: block; width: 100%; height: 100%;1015  background: var(--peach-accent); opacity: 0.7;1016  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;1017}10181019/* Unlock screen elements */1020.peach-underline-input {1021  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);1022  padding: 6px 0; background: transparent; color: var(--peach-t0);1023  outline: none;1024  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1025  font-size: 0.8125rem;1026  caret-color: var(--peach-accent);1027}1028.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }1029.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }1030.peach-hint {1031  margin: 0;1032  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1033  font-size: 0.625rem; color: var(--peach-t2);1034}1035.peach-unlock-footer {1036  margin-top: 4px; display: flex; align-items: center; gap: 7px;1037  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1038  font-size: 0.625rem; color: var(--peach-t2);1039}1040.peach-unlock-footer--lock {1041  padding-top: 2px;1042}10431044/* Desktop helper (peach-sync) code pairing — additive hooks. The shared pairing1045   classes (peach-pair-*) carry the shared layout; these only style the parts1046   unique to the typed-code path. Inline styles cover the SAS/confirm gate. */1047.peach-desktop-pair { display: flex; flex-direction: column; }1048.peach-desktop-enter,1049.peach-desktop-searching,1050.peach-desktop-paired,1051.peach-desktop-error {1052  display: flex; flex-direction: column; gap: 8px;1053  padding: 4px 18px 16px; text-align: center; align-items: center;1054}1055.peach-desktop-enter .peach-label { align-self: flex-start; }1056/* Sized for a full 19-character pairing code (A74H-48J3-KI32-OEP4) in a1057   320px popup — a 6-digit legacy helper code still reads fine at this size. */1058.peach-code-input {1059  text-align: center; letter-spacing: 0.12em; padding-left: 0.12em;1060  font-size: 15px;1061}1062.peach-code-input::placeholder { letter-spacing: 0.12em; }10631064/* Sync card "pair a device" options — bordered, raised tappable rows that read1065   as buttons on any card hue (theme-neutral light overlay, not the peach accent). */1066.peach-sync-pair-option {1067  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;1068  width: 100%; text-align: left; cursor: pointer; font-family: inherit;1069  padding: 11px 12px; border-radius: 10px;1070  background: color-mix(in srgb, var(--peach-t0) 6%, transparent);1071  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);1072  color: var(--peach-t0);1073  transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;1074}1075.peach-sync-pair-option + .peach-sync-pair-option { margin-top: 8px; }1076.peach-sync-pair-option:hover {1077  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);1078  border-color: color-mix(in srgb, var(--peach-t0) 28%, transparent);1079}1080.peach-sync-pair-option:active { transform: translateY(1px); }1081.peach-sync-pair-option:disabled { opacity: 0.5; cursor: default; }1082.peach-sync-pair-option-icon { flex-shrink: 0; display: flex; align-items: center; color: var(--peach-t1); margin-top: 1px; }1083.peach-sync-pair-option-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }1084.peach-sync-pair-option-title { font-size: 0.8125rem; font-weight: 600; }1085.peach-sync-pair-option-sub { font-size: 0.6875rem; line-height: 1.45; color: var(--peach-t2); }1086.peach-sync-pair-option-chevron { flex-shrink: 0; color: var(--peach-t2); font-size: 1.05rem; line-height: 1.3; }10871088/* Breach badge */1089.peach-breach-badge {1090  display: flex;1091  position: relative;1092  z-index: 1;1093  align-items: center;1094  gap: 7px;1095  font-size: 0.5625rem;1096  color: var(--peach-breach);1097  padding: 5px 10px;1098  margin-bottom: 4px;1099  border-radius: 8px;1100  background: rgba(220, 80, 60, 0.07);1101  border: 1px solid rgba(220, 80, 60, 0.18);1102  letter-spacing: 0.04em;1103}11041105.peach-password-value.is-breached {1106  color: rgba(220, 80, 60, 0.75);1107  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1108}11091110/* ── Overlay views ─────────────────────────────────────────────────── */1111.peach-overlay-view {1112  position: absolute;1113  inset: 0;1114  display: flex;1115  flex-direction: column;1116  background:1117    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1118    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1119    var(--peach-bg);1120  z-index: 2;1121  overflow: hidden;1122  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1123}11241125.peach-overlay-view:has(.stk-shell) {1126  background: var(--peach-bg);1127}1128@keyframes overlay-in {1129  from { opacity: 0; transform: translateY(8px); }1130  to   { opacity: 1; transform: translateY(0); }1131}1132.peach-overlay-view.ov-enter-up {1133  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1134}1135.peach-overlay-view.ov-exit-up {1136  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1137}1138.peach-overlay-view.ov-enter-right {1139  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1140}1141.peach-overlay-view.ov-exit-right {1142  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1143}11441145@keyframes ov-enter-up {1146  from { opacity: 0; transform: translateY(18px); }1147  to   { opacity: 1; transform: translateY(0); }1148}1149@keyframes ov-exit-up {1150  from { opacity: 1; transform: translateY(0); }1151  to   { opacity: 0; transform: translateY(-12px); }1152}1153@keyframes ov-enter-right {1154  from { opacity: 0; transform: translateX(20px); }1155  to   { opacity: 1; transform: translateX(0); }1156}1157@keyframes ov-exit-right {1158  from { opacity: 1; transform: translateX(0); }1159  to   { opacity: 0; transform: translateX(20px); }1160}11611162/* Overlay shared header */1163.peach-overlay-header {1164  padding: 10px 12px 8px;1165  display: flex;1166  align-items: center;1167  gap: 10px;1168  flex-shrink: 0;1169}1170/* Back button — circular pill matching the settings stack masthead (.stk-back) */1171.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1172  width: 28px;1173  height: 28px;1174  flex: 0 0 28px;1175  border-radius: 999px;1176  border: 1px solid var(--peach-border);1177  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1178  color: var(--peach-t1);1179  padding: 0;1180}1181.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1182  color: var(--peach-t0);1183  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1184  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1185}1186.peach-overlay-title {1187  font-family: var(--font-display);1188  font-style: italic;1189  font-weight: 400;1190  font-size: 20px;1191  line-height: 1;1192  color: var(--peach-t0);1193  flex: 1;1194  text-align: center;1195}1196/* Balances the 28px back button so the title stays visually centred */1197.peach-overlay-spacer {1198  width: 28px;1199  flex: 0 0 28px;1200}12011202.peach-overlay-card {1203  background: var(--peach-s1);1204  border: 1px solid var(--peach-t3);1205  border-radius: 12px;1206  overflow: hidden;1207  width: 100%;1208}12091210.peach-onboarding-alt-actions {1211  display: flex;1212  flex-direction: column;1213  gap: 4px;1214  padding: 0;1215}12161217.peach-settings-copy {1218  margin: 0 0 10px;1219  font-size: 0.6875rem;1220  line-height: 1.5;1221  color: var(--peach-t2);1222}12231224.peach-settings-copy strong {1225  color: var(--peach-t0);1226}12271228.peach-settings-copy--spacious {1229  margin-bottom: 12px;1230}12311232.peach-settings-copy--result {1233  color: var(--peach-accent);1234  font-size: 0.8125rem;1235  text-align: center;1236  padding: 8px 0;1237}12381239.peach-settings-copy--danger {1240  color: var(--peach-breach);1241}12421243.peach-settings-copy--success {1244  color: var(--peach-accent);1245}12461247.peach-inline-feedback {1248  font-size: 0.6875rem;1249  margin: 10px 0 0;1250}12511252.peach-inline-feedback--ok {1253  color: var(--peach-accent);1254}12551256.peach-inline-feedback--error {1257  color: var(--peach-breach);1258}12591260.peach-inline-feedback--muted {1261  color: var(--peach-t2);1262  font-size: 0.625rem;1263  margin: 4px 0;1264}12651266.peach-inline-feedback--spaced {1267  margin-top: 12px;1268}12691270.peach-settings-actions--row {1271  display: flex;1272  gap: 6px;1273}12741275.peach-settings-actions--end {1276  margin-top: 14px;1277  justify-content: flex-end;1278}12791280.peach-settings-stack {1281  display: flex;1282  flex-direction: column;1283  gap: 6px;1284}12851286.peach-settings-stack--tight {1287  gap: 4px;1288}12891290.peach-settings-stack--spacious {1291  gap: 8px;1292}12931294.peach-settings-input {1295  width: 100%;1296  box-sizing: border-box;1297  padding: 8px 10px;1298  background: rgba(0, 0, 0, 0.22);1299  border: 1px solid transparent;1300  border-radius: 6px;1301  color: var(--peach-t0);1302  font-family: var(--font-ui);1303  font-size: 0.75rem;1304  outline: none;1305  transition: border-color 120ms ease, background 120ms ease;1306}13071308.peach-settings-input:focus {1309  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1310  background: rgba(0, 0, 0, 0.28);1311}13121313.peach-settings-input[type="password"] {1314  font-family: var(--font-mono);1315  letter-spacing: 0.04em;1316}13171318.peach-hidden-file-input {1319  display: none;1320}13211322.peach-checkbox-note {1323  display: flex;1324  align-items: flex-start;1325  gap: 8px;1326  font-size: 0.6875rem;1327  color: var(--peach-t1);1328  cursor: pointer;1329  margin: 12px 0;1330}13311332.peach-checkbox-note input {1333  margin-top: 1px;1334}13351336.peach-danger-notice {1337  background: rgba(220, 80, 60, 0.08);1338  border: 1px solid rgba(220, 80, 60, 0.2);1339  border-radius: 6px;1340  padding: 9px 11px;1341  font-size: 0.6875rem;1342  color: var(--peach-t1);1343  line-height: 1.5;1344}13451346.peach-info-notice {1347  font-size: 0.6875rem;1348  color: var(--peach-t1);1349  line-height: 1.5;1350  background: var(--surface-card);1351  border: 1px solid var(--peach-t3);1352  border-radius: 6px;1353  padding: 8px 10px;1354}13551356.peach-info-notice--warn {1357  border-color: rgba(220, 38, 38, 0.4);1358  background: rgba(220, 38, 38, 0.06);1359  color: rgba(220, 38, 38, 0.92);1360  margin-bottom: 8px;1361}13621363/* Warm helpful-context note — reads as a soft aside, not an alert. */1364.peach-info-notice--note {1365  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);1366  border-color: color-mix(in srgb, var(--peach-accent) 18%, transparent);1367  color: var(--peach-t2);1368}13691370.peach-strength-row {1371  display: flex;1372  align-items: center;1373  gap: 8px;1374  margin-bottom: 10px;1375}13761377.peach-strength-track {1378  flex: 1;1379  height: 4px;1380  background: var(--peach-s2);1381  border-radius: 2px;1382  overflow: hidden;1383}13841385.peach-strength-fill {1386  height: 100%;1387  border-radius: 2px;1388  transition: width 120ms ease, background 120ms ease;1389}13901391/* ── Type selector tabs ── */1392.peach-type-tabs {1393  display: flex;1394  gap: 0;1395  background: var(--peach-t4);1396  border-radius: 8px;1397  padding: 3px;1398}13991400.peach-type-tab {1401  flex: 1;1402  display: flex;1403  align-items: center;1404  justify-content: center;1405  gap: 6px;1406  padding: 6px 10px;1407  border-radius: 6px;1408  border: none;1409  background: transparent;1410  cursor: pointer;1411  font-family: Inter, system-ui, sans-serif;1412  font-size: 0.6875rem;1413  font-weight: 400;1414  letter-spacing: 0.04em;1415  color: var(--peach-t1);1416  transition: background 150ms ease, color 150ms ease;1417}14181419.peach-type-tab.is-active {1420  background: var(--peach-s2);1421  color: var(--peach-t0);1422  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1423}14241425.peach-type-tab:not(.is-active):hover {1426  color: var(--peach-t0);1427}14281429.peach-type-tab svg {1430  opacity: 0.7;1431  flex-shrink: 0;1432}14331434.peach-type-tab.is-active svg {1435  opacity: 1;1436}14371438/* ── List view ───────────────────────────────────────────────────────── */1439.peach-list-top {1440  padding: 0 10px;1441  min-height: 46px;1442  display: flex;1443  align-items: center;1444  gap: 6px;1445  border-bottom: 1px solid var(--peach-t3);1446  flex-shrink: 0;1447  background: var(--peach-s1);1448}14491450.peach-vault-list {1451  flex: 1;1452  overflow-y: auto;1453  scrollbar-width: none;1454}1455.peach-vault-list::-webkit-scrollbar { display: none; }14561457/* Scrollbar — vault list */1458.peach-vault-list {1459  scrollbar-width: thin;1460  scrollbar-color: var(--peach-t3) transparent;1461}14621463.peach-vault-list::-webkit-scrollbar {1464  width: 3px;1465}14661467.peach-vault-list::-webkit-scrollbar-thumb {1468  background: var(--peach-t3);1469  border-radius: 2px;1470}14711472.peach-entry-row {1473  width: 100%;1474  display: flex;1475  align-items: center;1476  gap: 10px;1477  padding: 9px 16px;1478  background: transparent;1479  border: none;1480  border-bottom: 1px solid var(--peach-t3);1481  cursor: pointer;1482  color: inherit;1483  text-align: left;1484  transition: background 80ms ease;1485}1486.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1487.peach-entry-row:last-child { border-bottom: none; }1488.peach-entry-row.is-active {1489  box-shadow: inset 2px 0 0 var(--peach-accent);1490  background: rgba(240,232,216,0.03);1491}1492.peach-entry-row:focus-visible {1493  outline: none;1494  box-shadow: 0 0 0 1px var(--peach-border-accent);1495  background: rgba(240,232,216,0.03);1496}1497.peach-entry-row-icon {1498  width: 26px; height: 26px;1499  border-radius: 7px;1500  border: 1px solid var(--peach-t3);1501  display: flex; align-items: center; justify-content: center;1502  color: var(--peach-t2);1503  flex-shrink: 0;1504}1505.peach-entry-row-icon.is-breach {1506  border-color: rgba(220,80,60,0.3);1507  color: rgba(220,80,60,0.7);1508}15091510/* Title-initials chip used as the favicon fallback for login entries whose1511 * real favicon hasn't been cached by the browser yet (freshly-imported,1512 * never-visited domains). Background colour is hashed from the title so1513 * the same entry always shows the same chip. The chip fits the same1514 * 26×26 row icon slot the favicon would take. */1515.peach-favicon-initials {1516  display: inline-flex;1517  align-items: center;1518  justify-content: center;1519  width: 100%;1520  height: 100%;1521  border-radius: 4px;1522  font-family: "IBM Plex Mono", monospace;1523  font-size: 0.5625rem;1524  font-weight: 600;1525  letter-spacing: 0.04em;1526  color: rgba(240, 232, 216, 0.92);1527  text-transform: uppercase;1528  user-select: none;1529}1530.peach-entry-row-info { flex: 1; min-width: 0; }1531.peach-entry-row-name {1532  display: block;1533  font-family: var(--font-display);1534  font-size: 1.0625rem;1535  font-style: italic;1536  font-weight: 400;1537  color: var(--peach-t0);1538  line-height: 1.2;1539  white-space: nowrap;1540  overflow: hidden;1541  text-overflow: ellipsis;1542}1543.peach-entry-row-meta {1544  display: block;1545  font-family: "IBM Plex Mono", monospace;1546  font-size: 0.5625rem;1547  color: var(--peach-t2);1548  margin-top: 1px;1549  letter-spacing: 0.05em;1550}1551.peach-entry-row-dot {1552  width: 5px; height: 5px;1553  border-radius: 50%;1554  background: rgba(220,80,60,0.7);1555  flex-shrink: 0;1556}1557.peach-new-entry-row {1558  display: flex;1559  align-items: center;1560  justify-content: center;1561  gap: 6px;1562  width: 100%;1563  padding: 11px;1564  background: transparent;1565  border: none;1566  border-top: 1px solid var(--peach-t3);1567  color: var(--peach-t2);1568  font-family: "IBM Plex Mono", monospace;1569  font-size: 0.5625rem;1570  text-transform: uppercase;1571  letter-spacing: 0.14em;1572  cursor: pointer;1573  flex-shrink: 0;1574  transition: color 120ms ease, background 120ms ease;1575}1576.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }15771578/* ── Multi-select mode ─────────────────────────────────────────────── */15791580/* Select-mode trigger button in sort bar — same shape as trash btn */1581.peach-sort-select-btn {1582  display: flex;1583  align-items: center;1584  justify-content: center;1585  padding: 3px 5px;1586  background: transparent;1587  border: none;1588  cursor: pointer;1589  color: var(--peach-t2);1590  border-radius: 4px;1591  transition: color 140ms ease, background 140ms ease;1592}1593.peach-sort-select-btn:hover {1594  color: var(--peach-t1);1595  background: var(--peach-t3);1596}15971598/* Sort bar in select mode */1599.peach-select-cancel-btn {1600  background: transparent;1601  border: none;1602  padding: 0 4px;1603  cursor: pointer;1604  font-family: "IBM Plex Mono", monospace;1605  font-size: 0.5625rem;1606  letter-spacing: 0.12em;1607  text-transform: uppercase;1608  color: var(--peach-t2);1609  transition: color 140ms ease;1610  flex-shrink: 0;1611}1612.peach-select-cancel-btn:hover { color: var(--peach-t0); }16131614.peach-select-count-label {1615  flex: 1;1616  text-align: center;1617  font-family: "IBM Plex Mono", monospace;1618  font-size: 0.5625rem;1619  letter-spacing: 0.14em;1620  text-transform: uppercase;1621  color: var(--peach-t1);1622}16231624.peach-select-all-btn {1625  background: transparent;1626  border: none;1627  padding: 0 4px;1628  cursor: pointer;1629  font-family: "IBM Plex Mono", monospace;1630  font-size: 0.5625rem;1631  letter-spacing: 0.12em;1632  text-transform: uppercase;1633  color: var(--peach-t2);1634  transition: color 140ms ease;1635  flex-shrink: 0;1636}1637.peach-select-all-btn:hover { color: var(--peach-accent); }16381639/* List in select mode */1640.peach-vault-list.is-selecting .peach-entry-row {1641  cursor: default;1642}1643.peach-vault-list.is-selecting .peach-entry-row:hover {1644  background: rgba(240,232,216,0.02);1645}1646.peach-vault-list.is-selecting .peach-entry-row.is-selected {1647  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1648}1649.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1650  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1651}16521653/* Select indicator circles in icon slot */1654.peach-entry-row-icon.is-select-icon {1655  color: var(--peach-t2);1656}1657.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1658  color: var(--peach-accent);1659}16601661/* Delete action bar at bottom (replaces new-entry row) */1662.peach-select-action-bar {1663  display: flex;1664  align-items: center;1665  justify-content: center;1666  gap: 7px;1667  width: 100%;1668  padding: 11px;1669  background: transparent;1670  border: none;1671  border-top: 1px solid var(--peach-t3);1672  color: var(--peach-t1);1673  font-family: "IBM Plex Mono", monospace;1674  font-size: 0.5625rem;1675  text-transform: uppercase;1676  letter-spacing: 0.14em;1677  cursor: pointer;1678  flex-shrink: 0;1679  transition: color 120ms ease, background 120ms ease;1680}1681.peach-select-action-bar:not(:disabled):hover {1682  color: var(--peach-t0);1683  background: rgba(220,80,60,0.06);1684}1685.peach-select-action-bar:not(:disabled):hover svg {1686  stroke: rgba(220,80,60,0.8);1687}1688.peach-select-action-bar:disabled,1689.peach-select-action-bar.is-empty {1690  color: var(--peach-t2);1691  cursor: default;1692  opacity: 0.5;1693}1694.peach-search-counter-list {1695  white-space: nowrap;1696  flex-shrink: 0;1697}1698.peach-list-empty {1699  min-height: 180px;1700  display: grid;1701  place-items: center;1702  color: var(--peach-t2);1703  font-family: "IBM Plex Mono", monospace;1704  font-size: 0.6875rem;1705}17061707/* ── Settings view ───────────────────────────────────────────────────── */1708.peach-settings-body {1709  flex: 1;1710  overflow-y: auto;1711  min-height: 0;1712  display: flex;1713  flex-direction: column;1714  padding: 2px 0 10px;1715}1716.peach-settings-group {1717  margin: 4px 10px;1718  padding: 9px 14px 11px;1719  border-radius: 12px;1720  border: 1px solid rgba(255, 255, 255, 0.07);1721  background: rgba(26, 20, 16, 0.60);1722  backdrop-filter: blur(10px) saturate(1.3);1723  -webkit-backdrop-filter: blur(10px) saturate(1.3);1724}17251726.peach-settings-group + .peach-settings-group {1727  margin-top: 6px;1728}17291730@supports not (backdrop-filter: blur(1px)) {1731  .peach-settings-group {1732    background: rgba(26, 20, 16, 0.90);1733    border-color: rgba(255, 255, 255, 0.09);1734    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1735  }1736}17371738.light .peach-settings-group,1739[data-theme="light"] .peach-settings-group {1740  background: rgba(245, 237, 226, 0.70);1741  border-color: rgba(26, 18, 8, 0.08);1742  backdrop-filter: blur(10px) saturate(1.2);1743  -webkit-backdrop-filter: blur(10px) saturate(1.2);1744}17451746@supports not (backdrop-filter: blur(1px)) {1747  .light .peach-settings-group,1748  [data-theme="light"] .peach-settings-group {1749    background: rgba(245, 237, 226, 0.97);1750    border-color: rgba(26, 18, 8, 0.10);1751  }1752}1753.peach-export-intro {1754  padding-bottom: 8px;1755}1756.peach-export-card {1757  display: grid;1758  gap: 10px;1759}1760.peach-rune-canvas {1761  border-radius: 8px;1762  background: rgba(0, 0, 0, 0.22);1763  flex: 1;1764  align-self: center;1765}1766.peach-script-input {1767  font-family: "PeachScript", monospace;1768  font-size: 0.6875rem;1769  line-height: 1.9;1770  letter-spacing: 0.06em;1771  color: var(--peach-t0);1772  background: rgba(0, 0, 0, 0.22);1773  border: none;1774  border-radius: 6px;1775  padding: 12px;1776  width: 100%;1777  min-height: 96px;1778  resize: vertical;1779  word-break: break-all;1780  scrollbar-width: none;1781  -ms-overflow-style: none;1782}17831784.peach-script-input::-webkit-scrollbar { display: none; }1785.peach-csv-warning {1786  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1787  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1788  color: var(--peach-t0);1789  border-radius: 6px;1790  padding: 10px 12px;1791  margin-bottom: 8px;1792  font-size: 0.75rem;1793  line-height: 1.45;1794}1795.peach-export-card--primary {1796  background:1797    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1798}17991800/* Export menu — distribute the three format cards across the popup. */1801.peach-export-menu {1802  display: flex;1803  flex-direction: column;1804  flex: 1;1805  min-height: 0;1806}1807.peach-export-menu .peach-settings-group {1808  flex: 1;1809  display: flex;1810  flex-direction: column;1811  justify-content: center;1812  gap: 10px;1813}18141815/* Result view — the script-string fills the remaining vertical surface. */1816.peach-export-result-group {1817  flex: 1;1818  display: flex;1819  flex-direction: column;1820  min-height: 0;1821  border-bottom: none;1822}1823.peach-export-result-group .peach-export-card {1824  flex: 1;1825  min-height: 0;1826  display: flex;1827  flex-direction: column;1828  gap: 10px;1829}1830.peach-export-result-group .peach-export-card-copy {1831  flex-shrink: 0;1832}1833.peach-export-result-group .peach-settings-label {1834  flex-shrink: 0;1835}1836.peach-export-result-group button {1837  flex-shrink: 0;1838}1839.peach-export-card-head {1840  display: flex;1841  align-items: center;1842  justify-content: space-between;1843  gap: 10px;1844}1845.peach-export-card-copy {1846  margin: 0;1847  font-size: 0.75rem;1848  line-height: 1.55;1849  color: var(--peach-t1);1850}1851.peach-export-note {1852  margin: 0;1853  font-size: 0.625rem;1854  line-height: 1.5;1855  color: var(--peach-t2);1856}1857.peach-export-strength-track {1858  height: 3px;1859  background: var(--peach-border);1860  border-radius: 2px;1861  margin: 4px 0 2px;1862  overflow: hidden;1863}1864.peach-export-strength-fill {1865  height: 100%;1866  border-radius: 2px;1867  transition: width 250ms ease, background 250ms ease;1868}1869.peach-export-strength-warn {1870  margin: 0;1871  font-size: 0.625rem;1872  line-height: 1.5;1873  color: #e84040;1874  font-family: "IBM Plex Mono", monospace;1875}1876.peach-export-strength-hint {1877  margin: 0;1878  font-size: 0.625rem;1879  line-height: 1.5;1880  color: var(--peach-t2);1881  font-family: "IBM Plex Mono", monospace;1882}1883.peach-export-pill {1884  display: inline-flex;1885  align-items: center;1886  padding: 4px 8px;1887  border-radius: 999px;1888  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1889  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1890  color: var(--peach-accent);1891  font-family: "IBM Plex Mono", monospace;1892  font-size: 0.5rem;1893  letter-spacing: 0.12em;1894  text-transform: uppercase;1895  white-space: nowrap;1896}1897.peach-export-pill--danger {1898  border-color: rgba(220,80,60,0.22);1899  background: rgba(220,80,60,0.08);1900  color: var(--peach-breach);1901}1902.peach-settings-label {1903  margin: 0 0 6px;1904  font-family: "IBM Plex Mono", monospace;1905  font-size: 0.5rem;1906  text-transform: uppercase;1907  letter-spacing: 0.18em;1908  color: var(--peach-t2);1909}1910.peach-settings-row {1911  display: flex;1912  align-items: center;1913  justify-content: space-between;1914  gap: 12px;1915  min-height: 34px;1916  padding: 6px 0;1917  font-size: 0.8125rem;1918  color: var(--peach-t1);1919}1920.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1921.peach-settings-value {1922  font-family: "IBM Plex Mono", monospace;1923  font-size: 0.625rem;1924  color: var(--peach-t2);1925}19261927.peach-settings-value--status {1928  display: flex;1929  align-items: center;1930  gap: 6px;1931}19321933.peach-settings-link {1934  font-family: "IBM Plex Mono", monospace;1935  font-size: 0.625rem;1936  color: var(--peach-accent);1937  text-decoration: none;1938  cursor: pointer;1939}1940.peach-settings-link:hover {1941  text-decoration: underline;1942}19431944.peach-settings-row--stack {1945  flex-direction: column;1946  align-items: stretch;1947  gap: 6px;1948}19491950.peach-settings-row--top {1951  align-items: flex-start;1952}19531954.peach-settings-row-main {1955  display: flex;1956  flex-direction: column;1957  gap: 4px;1958  flex: 1;1959}1960.peach-toggle {1961  width: 28px; height: 16px;1962  border-radius: 999px;1963  background: var(--peach-t3);1964  border: 1px solid var(--peach-t3);1965  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1966  flex-shrink: 0;1967  transition: background 200ms ease, border-color 200ms ease;1968  cursor: pointer;1969}1970.peach-toggle.is-on {1971  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1972  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1973}1974.peach-toggle-knob {1975  width: 10px; height: 10px;1976  border-radius: 50%;1977  background: var(--peach-t2);1978  flex-shrink: 0;1979  transform: translateX(0px);1980  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1981}1982.peach-toggle.is-on .peach-toggle-knob {1983  background: var(--peach-accent);1984  transform: translateX(12px);1985}1986.peach-settings-footer {1987  display: flex;1988  align-items: center;1989  gap: 8px;1990  margin-top: auto;1991  padding: 14px 16px 8px;1992  font-family: "IBM Plex Mono", monospace;1993  font-size: 0.5625rem;1994  color: var(--peach-t2);1995}19961997/* ── Settings home navigation ──────────────────────────────────────────── */1998.peach-settings-nav-label {1999  margin: 0 0 2px;2000  padding: 12px 16px 4px;2001  font-family: "IBM Plex Mono", monospace;2002  font-size: 0.5rem;2003  text-transform: uppercase;2004  letter-spacing: 0.18em;2005  color: var(--peach-t2);2006}20072008.peach-settings-cat-row {2009  display: flex;2010  align-items: center;2011  gap: 10px;2012  width: 100%;2013  padding: 9px 16px;2014  background: none;2015  border: none;2016  border-bottom: 1px solid var(--peach-t3);2017  cursor: pointer;2018  text-align: left;2019  color: inherit;2020  transition: background var(--peach-dur-80) ease;2021}2022.peach-settings-cat-row:hover {2023  background: var(--peach-t3);2024}2025.peach-settings-cat-row:last-child {2026  border-bottom: none;2027}20282029.peach-settings-cat-icon {2030  width: 28px;2031  height: 28px;2032  border-radius: 7px;2033  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2034  color: var(--peach-accent);2035  display: flex;2036  align-items: center;2037  justify-content: center;2038  flex-shrink: 0;2039}2040/* Light theme: peach-on-cream is too low-contrast — both colors are warm.2041   Darken the icon stroke to ink and bump the bg tint so the icon reads2042   sharply while the cell still feels accent-tinted. */2043.light .peach-settings-cat-icon {2044  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);2045  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));2046}20472048.peach-settings-cat-content {2049  flex: 1;2050  display: flex;2051  flex-direction: column;2052  gap: 2px;2053  min-width: 0;2054}20552056.peach-settings-cat-name {2057  font-size: 0.8125rem;2058  font-weight: 450;2059  color: var(--peach-t0);2060  line-height: 1.2;2061}20622063.peach-settings-cat-desc {2064  font-size: 0.625rem;2065  color: var(--peach-t2);2066  line-height: 1.3;2067  white-space: nowrap;2068  overflow: hidden;2069  text-overflow: ellipsis;2070}20712072.peach-settings-cat-chevron {2073  color: var(--peach-t2);2074  flex-shrink: 0;2075  opacity: 0.5;2076}20772078/* ── Settings sub-view section labels ──────────────────────────────────── */2079.peach-settings-sub-label {2080  margin: 12px 0 4px;2081  font-family: "IBM Plex Mono", monospace;2082  font-size: 0.5rem;2083  text-transform: uppercase;2084  letter-spacing: 0.18em;2085  color: var(--peach-t2);2086}2087.peach-settings-sub-label:first-child {2088  margin-top: 4px;2089}20902091/* ── Settings: collapsible Advanced section ─────────────────────────────── */2092.peach-settings-advanced-toggle {2093  display: flex;2094  align-items: center;2095  justify-content: space-between;2096  width: 100%;2097  background: none;2098  border: none;2099  cursor: pointer;2100  padding: 12px 0 4px;2101  margin: 0;2102  color: inherit;2103}2104.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {2105  color: var(--peach-t1);2106}2107.peach-settings-advanced-chevron {2108  font-size: 0.5625rem;2109  color: var(--peach-t3);2110  letter-spacing: 0;2111  transition: color 120ms ease;2112}21132114/* ── Feedback form ──────────────────────────────────────────────────────── */2115.peach-feedback-group {2116  flex: 1;2117  display: flex;2118  flex-direction: column;2119  border-bottom: none;2120}21212122.peach-feedback-intro {2123  margin: 4px 0 14px;2124  font-size: 0.75rem;2125  line-height: 1.55;2126  color: var(--peach-t1);2127}21282129.peach-feedback-chips {2130  display: flex;2131  flex-wrap: wrap;2132  gap: 6px;2133  margin-bottom: 14px;2134}21352136.peach-feedback-chip {2137  padding: 4px 10px;2138  border-radius: 999px;2139  border: 1px solid var(--peach-t3);2140  background: none;2141  color: var(--peach-t2);2142  font-size: 0.6875rem;2143  font-family: var(--font-ui);2144  cursor: pointer;2145  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2146    background var(--peach-dur-80) ease;2147}2148.peach-feedback-chip:hover {2149  border-color: var(--peach-t2);2150  color: var(--peach-t1);2151}2152.peach-feedback-chip.is-active {2153  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2154  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2155  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2156  box-shadow:2157    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2158    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2159  font-weight: 700;2160}21612162.peach-feedback-textarea {2163  flex: 1;2164  width: 100%;2165  min-height: 120px;2166  box-sizing: border-box;2167  background: rgba(0, 0, 0, 0.22);2168  border: 1px solid transparent;2169  border-radius: 6px;2170  color: var(--peach-t0);2171  font-size: 0.75rem;2172  font-family: var(--font-ui);2173  line-height: 1.5;2174  padding: 8px 10px;2175  resize: none;2176  outline: none;2177  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2178}2179.peach-feedback-textarea:focus {2180  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2181  background: rgba(0, 0, 0, 0.28);2182}2183.peach-feedback-textarea:focus {2184  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2185}2186.peach-feedback-textarea::placeholder {2187  color: var(--peach-t2);2188}21892190.peach-feedback-meta {2191  margin: 6px 0 0;2192  font-size: 0.625rem;2193  color: var(--peach-t2);2194  font-family: "IBM Plex Mono", monospace;2195}21962197.peach-feedback-result {2198  margin: 8px 0 0;2199  font-size: 0.6875rem;2200  font-family: "IBM Plex Mono", monospace;2201}2202.peach-feedback-result--ok { color: var(--peach-sync-ok); }2203.peach-feedback-result--err { color: var(--peach-breach); }22042205.peach-feedback-submit {2206  width: 100%;2207  margin-top: 12px;2208  justify-content: center;2209}22102211.peach-feedback-anon {2212  margin: 8px 0 0;2213  font-size: 0.625rem;2214  color: var(--peach-t2);2215  text-align: center;2216}22172218.peach-feedback-thanks {2219  margin: auto 0;2220  padding: 18px 14px;2221  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2222  border-radius: 8px;2223  background:2224    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2225    rgba(0, 0, 0, 0.18);2226  color: var(--peach-t1);2227  text-align: center;2228}22292230.peach-feedback-thanks p {2231  margin: 0;2232  font-size: 0.75rem;2233  line-height: 1.5;2234}22352236.peach-feedback-thanks-title {2237  color: var(--peach-t0);2238  font-family: "Cormorant Garamond", serif;2239  font-size: 1.375rem !important;2240  line-height: 1.1 !important;2241  margin-bottom: 8px !important;2242}22432244.peach-passkey-badge {2245  margin-left: 8px;2246  font-size: 0.625rem;2247  letter-spacing: 0.06em;2248  text-transform: uppercase;2249  color: var(--peach-t2);2250  font-family: var(--font-ui);2251  vertical-align: middle;2252}22532254.peach-passkey-delete-btn {2255  color: var(--peach-breach);2256  border-color: rgba(229, 85, 85, 0.25);2257}22582259.peach-passkey-delete-confirm {2260  display: flex;2261  align-items: center;2262  gap: 8px;2263  padding: 8px 10px;2264  background: rgba(229, 85, 85, 0.06);2265  border: 1px solid rgba(229, 85, 85, 0.2);2266  border-radius: 6px;2267}22682269.peach-passkey-delete-confirm-copy {2270  flex: 1;2271  font-size: 0.6875rem;2272  color: var(--peach-t1);2273}22742275.peach-passkey-delete-btn--confirm {2276  color: var(--peach-breach);2277  border-color: rgba(229, 85, 85, 0.4);2278}22792280.peach-passkey-activity {2281  flex-direction: column;2282  align-items: flex-start;2283  gap: 4px;2284}22852286.peach-passkey-meta {2287  font-size: 0.6875rem;2288  color: var(--peach-t2);2289}22902291.peach-passkey-actions {2292  position: relative;2293  z-index: 1;2294  margin-top: 14px;2295  display: flex;2296  flex-direction: column;2297  gap: 8px;2298}22992300.peach-passkey-approval {2301  display: flex;2302  flex-direction: column;2303  align-items: center;2304  padding: 16px 20px 14px;2305  gap: 8px;2306  text-align: center;2307}23082309.peach-passkey-approval-icon {2310  width: 36px;2311  height: 36px;2312  border-radius: 10px;2313  background: var(--peach-s2);2314  border: 1px solid var(--peach-t3);2315  display: flex;2316  align-items: center;2317  justify-content: center;2318  flex-shrink: 0;2319  color: var(--peach-accent);2320}23212322.peach-passkey-approval-icon img,2323.peach-passkey-approval-icon svg {2324  width: 22px;2325  height: 22px;2326  border-radius: 5px;2327}23282329.peach-passkey-approval-rp {2330  font-family: var(--font-ui);2331  font-size: 0.75rem;2332  color: var(--peach-t2);2333  letter-spacing: 0.03em;2334}23352336.peach-passkey-approval-action {2337  font-family: var(--font-display);2338  font-style: italic;2339  font-weight: 300;2340  font-size: 18px;2341  color: var(--peach-t0);2342  line-height: 1.1;2343  margin: 1px 0;2344}23452346.peach-passkey-approval-user {2347  font-family: var(--font-mono);2348  font-size: 0.6875rem;2349  color: var(--peach-t1);2350  background: var(--peach-s2);2351  border: 1px solid var(--peach-t3);2352  border-radius: 4px;2353  padding: 3px 8px;2354}23552356.peach-passkey-approval-notice {2357  font-size: 0.625rem;2358  color: var(--peach-t2);2359  line-height: 1.5;2360  max-width: 220px;2361}23622363.peach-passkey-approval-actions {2364  display: flex;2365  gap: 8px;2366  width: 100%;2367  margin-top: 6px;2368}23692370.peach-passkey-approval-actions .peach-btn {2371  flex: 1;2372}23732374/* ── Inline generator drawer ── */2375.peach-generator-drawer {2376  display: grid;2377  grid-template-rows: 0fr;2378  transition: grid-template-rows 320ms var(--peach-curve-arrival);2379  overflow: hidden;2380}2381.peach-generator-drawer.is-open {2382  grid-template-rows: 1fr;2383}2384.peach-generator-drawer-inner {2385  min-height: 0;2386  overflow: hidden;2387}2388.peach-generator-drawer-content {2389  border-top: 1px solid var(--peach-t3);2390  padding: 8px 0 4px;2391  display: flex;2392  flex-direction: column;2393  gap: 8px;2394}23952396/* ── Compact generator (inside entry edit) ── */2397.peach-generator-drawer-content--compact {2398  border-top: 1px solid var(--peach-t3);2399  padding: 8px 0 2px;2400  gap: 7px;2401}2402.peach-pwgen-compact-display-row {2403  display: flex;2404  align-items: center;2405  gap: 6px;2406}2407.peach-pwgen-compact-output {2408  flex: 1;2409  min-width: 0;2410  font-family: "IBM Plex Mono", monospace;2411  font-size: 0.6875rem;2412  font-weight: 400;2413  letter-spacing: 0.04em;2414  color: var(--peach-t0);2415  background: rgba(240, 232, 216, 0.04);2416  border: 1px solid var(--peach-t3);2417  border-radius: 5px;2418  padding: 5px 8px;2419  line-height: 1.5;2420  outline: none;2421  transition: border-color 120ms ease;2422}24232424.peach-pwgen-compact-output:focus {2425  border-color: var(--peach-t1);2426}2427.peach-pwgen-compact-controls {2428  display: flex;2429  align-items: center;2430  gap: 6px;2431}2432.peach-pwgen-compact-slider {2433  flex: 1;2434  min-width: 0;2435  height: 2px !important;2436}2437.peach-pwgen-compact-controls .peach-pwgen-len-num {2438  flex-shrink: 0;2439  min-width: 18px;2440  text-align: right;2441}2442.peach-pwgen-compact-pills {2443  display: flex;2444  gap: 3px;2445  flex-shrink: 0;2446}2447.peach-pwgen-compact-pills .peach-pwgen-pill {2448  padding: 2px 7px;2449  font-size: 0.5rem;2450}2451.peach-pwgen-compact-use {2452  flex-shrink: 0;2453  font-size: 0.625rem !important;2454  padding: 3px 9px !important;2455  min-height: 22px !important;2456  border-radius: 5px !important;2457}24582459/* ── Password edit row (input + eye toggle side-by-side) ── */2460.peach-password-edit-row {2461  display: flex;2462  align-items: center;2463  gap: 6px;2464}2465.peach-password-edit-row .peach-inline-input {2466  flex: 1;2467  min-width: 0;2468}24692470/* ── Generate toggle link ── */2471.peach-generate-toggle-link {2472  display: inline-flex;2473  align-items: center;2474  gap: 5px;2475  background: none;2476  border: none;2477  padding: 0;2478  cursor: pointer;2479  font-family: "IBM Plex Mono", monospace;2480  font-size: 0.625rem;2481  color: var(--peach-t2);2482  letter-spacing: 0.04em;2483  transition: color 120ms ease;2484  align-self: flex-start;2485}2486.peach-generate-toggle-link:hover {2487  color: var(--peach-accent);2488}24892490/* Holds the generate + history toggle links on one row under the editor. */2491.peach-password-edit-links {2492  display: flex;2493  align-items: center;2494  gap: 14px;2495  flex-wrap: wrap;2496}24972498/* ── Past-password history list ── */2499.peach-password-history {2500  display: grid;2501  gap: 4px;2502  margin-top: 2px;2503  max-height: 168px;2504  overflow-y: auto;2505  scrollbar-width: thin;2506}2507.peach-history-row {2508  display: flex;2509  align-items: center;2510  justify-content: space-between;2511  gap: 8px;2512  padding: 5px 7px;2513  border-radius: 7px;2514  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2515  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2516}2517.peach-history-main {2518  display: flex;2519  flex-direction: column;2520  gap: 1px;2521  min-width: 0;2522  flex: 1;2523}2524.peach-history-pw {2525  font-family: "IBM Plex Mono", monospace;2526  font-size: 0.6875rem;2527  color: var(--peach-t1);2528  white-space: nowrap;2529  overflow: hidden;2530  text-overflow: ellipsis;2531}2532.peach-history-pw .peach-password-mask {2533  letter-spacing: 0.08em;2534  color: var(--peach-t2);2535}2536.peach-history-age {2537  font-family: "IBM Plex Mono", monospace;2538  font-size: 0.5625rem;2539  color: var(--peach-t3, var(--peach-t2));2540  letter-spacing: 0.03em;2541}2542.peach-history-actions {2543  display: flex;2544  align-items: center;2545  gap: 2px;2546  flex-shrink: 0;2547}2548.peach-history-use {2549  font-family: "IBM Plex Mono", monospace;2550  font-size: 0.5625rem;2551  letter-spacing: 0.05em;2552  padding: 3px 7px;2553}2554.peach-history-empty {2555  font-family: "IBM Plex Mono", monospace;2556  font-size: 0.625rem;2557  line-height: 1.45;2558  color: var(--peach-t2);2559  padding: 6px 8px;2560  border-radius: 7px;2561  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2562  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2563}25642565/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2566.peach-entry-body {2567  flex: 1;2568  overflow-y: auto;2569  overflow-x: hidden;2570  scrollbar-width: none;2571  -ms-overflow-style: none;2572  overscroll-behavior: contain;2573  display: grid;2574  gap: 10px;2575  align-content: start;2576  padding: 10px 20px 14px;2577  min-width: 0;2578  min-height: 0;2579}2580.peach-entry-body::-webkit-scrollbar { display: none; }25812582/* Type-toggle pills + inline note toolbar */2583.peach-new-type-row {2584  display: flex;2585  align-items: center;2586  gap: 6px;2587  margin-bottom: 2px;2588}2589.peach-new-type-btn {2590  background: transparent;2591  border: 1px solid var(--peach-t3);2592  border-radius: 12px;2593  padding: 3px 10px;2594  font-family: "IBM Plex Mono", monospace;2595  font-size: 0.5625rem;2596  letter-spacing: 0.12em;2597  text-transform: uppercase;2598  color: var(--peach-t2);2599  cursor: pointer;2600  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2601}2602.peach-new-type-btn.is-active {2603  color: var(--peach-t0);2604  border-color: var(--peach-accent);2605  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2606}2607.peach-new-type-btn:not(.is-active):hover {2608  color: var(--peach-t1);2609  border-color: var(--peach-t2);2610}26112612/* Editable title */2613.peach-new-title-wrap { margin: 0 0 2px; }2614.peach-new-title-input {2615  background: transparent;2616  border: none;2617  outline: none;2618  width: 100%;2619  color: var(--peach-t0);2620  font-family: var(--font-display);2621  font-style: italic;2622  font-weight: 400;2623  font-size: 40px;2624  line-height: 0.95;2625  caret-color: var(--peach-accent);2626}2627.peach-new-title-input::placeholder { color: var(--peach-t2); }26282629/* Editable domain field */2630.peach-domain-edit-row {2631  display: flex;2632  align-items: center;2633  gap: 6px;2634}26352636.peach-domain-edit-row .peach-domain-value--edit {2637  flex: 1;2638  width: 0;2639}26402641.peach-domain-url-btn {2642  flex-shrink: 0;2643  background: transparent;2644  border: none;2645  cursor: pointer;2646  color: var(--peach-t3);2647  padding: 2px 3px;2648  display: flex;2649  align-items: center;2650  line-height: 0;2651  border-radius: 3px;2652  transition: color 120ms ease;2653}26542655.peach-domain-url-btn:hover {2656  color: var(--peach-accent);2657}26582659.peach-domain-value--edit {2660  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2661  font-size: 0.625rem;2662  font-style: italic;2663  letter-spacing: 0.12em;2664  color: var(--peach-t1);2665  background: transparent;2666  border: none;2667  border-bottom: 1px solid var(--peach-t3);2668  outline: none;2669  width: 100%;2670  padding: 2px 0;2671  caret-color: var(--peach-accent);2672  transition: border-color 140ms ease, color 140ms ease;2673}2674.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2675.peach-domain-value--edit:focus {2676  border-bottom-color: rgba(240, 232, 216, 0.28);2677  color: var(--peach-t0);2678}26792680/* Editable field values (username, password, totp) */2681.peach-field-value--edit {2682  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2683  font-size: 0.8125rem;2684  color: var(--peach-t0);2685  background: transparent;2686  border: none;2687  border-bottom: 1px solid var(--peach-t3);2688  outline: none;2689  flex: 1;2690  min-width: 0;2691  padding: 3px 0;2692  caret-color: var(--peach-accent);2693  transition: border-color 140ms ease, color 140ms ease;2694}2695.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2696.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2697.peach-field-value--edit:focus {2698  border-bottom-color: rgba(240, 232, 216, 0.28);2699  color: var(--peach-t0);2700}27012702/* "+ add optional field" links */2703.peach-entry-add-links {2704  display: flex;2705  gap: 12px;2706  flex-wrap: wrap;2707  margin-top: -2px;2708}2709.peach-add-field-link {2710  background: transparent;2711  border: none;2712  padding: 0;2713  cursor: pointer;2714  font-family: "IBM Plex Mono", monospace;2715  font-size: 0.5625rem;2716  letter-spacing: 0.1em;2717  text-transform: uppercase;2718  color: var(--peach-t2);2719  transition: color 140ms ease;2720}2721.peach-add-field-link:hover { color: var(--peach-accent); }27222723/* ── New entry form (legacy classes) ────────────────────────────────── */2724.peach-new-body {2725  flex: 1;2726  overflow-y: auto;2727  padding: 10px 20px 14px;2728}2729.peach-new-name-input {2730  background: transparent;2731  border: none;2732  outline: none;2733  width: 100%;2734  color: var(--peach-t0);2735  font-family: var(--font-display);2736  font-style: italic;2737  font-weight: 400;2738  font-size: 40px;2739  line-height: 0.95;2740  caret-color: var(--peach-accent);2741}2742.peach-new-name-input::placeholder { color: var(--peach-t2); }2743.peach-new-field-input {2744  background: transparent;2745  border: none;2746  outline: none;2747  flex: 1;2748  min-width: 0;2749  caret-color: var(--peach-accent);2750}2751.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }27522753/* ── Canary card ── */2754.peach-canary-card {2755  border: 1px solid rgba(217, 160, 48, 0.2);2756  background: rgba(217, 160, 48, 0.03);2757  border-radius: 8px;2758  padding: 12px;2759}27602761.peach-canary-settings-header {2762  display: flex;2763  align-items: center;2764  justify-content: space-between;2765  cursor: pointer;2766  user-select: none;2767}27682769.peach-canary-card .peach-label {2770  color: rgba(217, 160, 48, 0.85);2771}27722773.peach-canary-card .peach-new-field-input {2774  border-color: rgba(217, 160, 48, 0.25);2775}27762777.peach-canary-card .peach-new-field-input:focus {2778  border-color: rgba(217, 160, 48, 0.5);2779}27802781.peach-canary-body {2782  margin-top: 12px;2783  display: flex;2784  flex-direction: column;2785  gap: 10px;2786}27872788.peach-canary-explainer {2789  display: flex;2790  gap: 10px;2791  padding: 10px 12px;2792  border-radius: 10px;2793  background: rgba(217, 160, 48, 0.06);2794  border: 1px solid rgba(217, 160, 48, 0.22);2795  margin-bottom: 4px;2796}27972798.peach-canary-explainer-icon {2799  font-size: 1rem;2800  flex-shrink: 0;2801  line-height: 1.2;2802}28032804.peach-canary-explainer-title {2805  font-family: var(--font-ui);2806  font-size: 0.6875rem;2807  font-weight: 500;2808  color: rgba(217, 160, 48, 0.9);2809  margin: 0 0 3px;2810}28112812.peach-canary-explainer-copy {2813  font-family: var(--font-ui);2814  font-size: 0.625rem;2815  color: var(--peach-t2);2816  line-height: 1.55;2817  margin: 0;2818}28192820.peach-canary-hint {2821  font-size: 0.625rem;2822  color: var(--peach-t2);2823  font-family: Inter, system-ui, sans-serif;2824  line-height: 1.5;2825  margin-top: 4px;2826}28272828.peach-canary-actions-row {2829  display: flex;2830  align-items: center;2831  gap: 8px;2832}28332834.peach-canary-test-btn {2835  border-color: rgba(217, 160, 48, 0.3);2836  color: rgba(217, 160, 48, 0.85);2837}28382839.peach-canary-test-result {2840  font-size: 0.625rem;2841  font-family: Inter, system-ui, sans-serif;2842}28432844.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2845.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }28462847.peach-canary-badge {2848  display: flex;2849  position: relative;2850  z-index: 1;2851  align-items: center;2852  gap: 5px;2853  padding: 4px 10px;2854  background: rgba(217, 160, 48, 0.12);2855  border: 1px solid rgba(217, 160, 48, 0.35);2856  border-radius: 6px;2857  margin-bottom: 6px;2858  width: fit-content;2859}28602861.peach-canary-badge-label {2862  font-size: 0.625rem;2863  letter-spacing: 0.06em;2864  color: rgba(217, 160, 48, 0.9);2865  font-family: var(--font-ui);2866  text-transform: uppercase;2867}28682869.peach-canary-badge-icon {2870  font-size: 0.6875rem;2871}28722873.peach-canary-suppress-row {2874  display: flex;2875  align-items: center;2876  gap: 8px;2877  padding: 6px 10px;2878  background: rgba(217, 160, 48, 0.08);2879  border-radius: 6px;2880  margin-bottom: 8px;2881}28822883.peach-canary-suppress-label {2884  font-size: 0.6875rem;2885  color: rgba(217, 160, 48, 0.85);2886  cursor: pointer;2887  font-family: var(--font-ui);2888  letter-spacing: 0.04em;2889}28902891.peach-regen-panel {2892  position: relative;2893  z-index: 1;2894  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2895  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2896  border-radius: 8px;2897  padding: 12px;2898  margin-bottom: 8px;2899}29002901.peach-regen-panel-header {2902  display: flex;2903  align-items: center;2904  justify-content: space-between;2905  margin-bottom: 10px;2906}29072908.peach-regen-panel-title {2909  font-size: 0.6875rem;2910  font-weight: 600;2911  letter-spacing: 0.06em;2912  text-transform: uppercase;2913  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2914}29152916.peach-regen-output {2917  background: rgba(0, 0, 0, 0.2);2918  border-radius: 6px;2919  padding: 10px;2920  margin-bottom: 10px;2921  font-family: var(--font-mono);2922  font-size: 0.8125rem;2923  word-break: break-all;2924  color: var(--peach-t1);2925}29262927.peach-regen-actions {2928  display: flex;2929  gap: 6px;2930}29312932.peach-regen-actions--spaced {2933  margin-bottom: 8px;2934}29352936.peach-regen-action-grow {2937  flex: 1;2938}29392940.peach-regen-copy-btn {2941  padding: 0 8px;2942}29432944.peach-regen-success {2945  position: relative;2946  z-index: 1;2947  background: rgba(40, 180, 80, 0.1);2948  border: 1px solid rgba(40, 180, 80, 0.3);2949  border-radius: 8px;2950  padding: 10px 12px;2951  margin-bottom: 8px;2952  display: flex;2953  align-items: center;2954  gap: 8px;2955  font-size: 0.6875rem;2956  color: rgba(40, 180, 80, 0.9);2957}29582959/* ── Note editor overlay ── */2960.peach-note-editor {2961  position: absolute;2962  inset: 0;2963  z-index: 200;2964  display: flex;2965  flex-direction: column;2966  background:2967    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2968    var(--peach-bg);2969  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2970}29712972.peach-note-editor-header {2973  display: flex;2974  align-items: center;2975  gap: 10px;2976  padding: 14px 16px 10px;2977  border-bottom: 1px solid var(--peach-t3);2978  flex-shrink: 0;2979}29802981.peach-note-editor-back {2982  background: transparent;2983  border: none;2984  cursor: pointer;2985  color: var(--peach-t2);2986  padding: 4px 6px;2987  border-radius: 6px;2988  display: flex;2989  align-items: center;2990  transition: color 120ms ease, background 120ms ease;2991  flex-shrink: 0;2992}2993.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }29942995.peach-note-editor-label {2996  flex: 1;2997  font-family: var(--font-display);2998  font-style: italic;2999  font-size: 0.9375rem;3000  color: var(--peach-t1);3001  letter-spacing: 0.02em;3002}30033004.peach-note-editor-save-btn {3005  background: transparent;3006  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);3007  border-radius: 8px;3008  color: var(--peach-accent);3009  font-family: "IBM Plex Mono", monospace;3010  font-size: 0.625rem;3011  letter-spacing: 0.06em;3012  text-transform: uppercase;3013  padding: 3px 10px;3014  cursor: pointer;3015  transition: background 120ms ease, border-color 120ms ease;3016}3017.peach-note-editor-save-btn:hover:not(:disabled) {3018  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3019  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3020}3021.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }30223023.peach-note-toolbar {3024  display: flex;3025  align-items: center;3026  gap: 3px;3027  padding: 6px 14px 5px;3028  border-bottom: 1px solid var(--peach-t3);3029  flex-shrink: 0;3030}30313032.peach-note-tool-btn {3033  background: transparent;3034  border: 1px solid transparent;3035  border-radius: 5px;3036  color: var(--peach-t2);3037  font-family: "IBM Plex Mono", monospace;3038  font-size: 0.625rem;3039  letter-spacing: 0.04em;3040  padding: 2px 8px;3041  cursor: pointer;3042  line-height: 1.6;3043  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;3044}3045.peach-note-tool-btn:hover {3046  background: var(--peach-t4);3047  color: var(--peach-t0);3048  border-color: var(--peach-t3);3049}30503051.peach-note-tool-icon {3052  padding: 3px 7px;3053  display: inline-flex;3054  align-items: center;3055  justify-content: center;3056}30573058.peach-note-tool-divider {3059  width: 1px;3060  height: 14px;3061  background: var(--peach-t3);3062  margin: 0 4px;3063  flex-shrink: 0;3064}30653066.peach-note-editor-body {3067  flex: 1;3068  overflow-y: auto;3069  padding: 16px 20px 20px;3070  outline: none;3071  font-family: var(--font-display);3072  font-size: 1rem;3073  line-height: 1.75;3074  color: var(--peach-t0);3075  scrollbar-width: none;3076  word-break: break-word;3077}3078.peach-note-editor-body:empty::before {3079  content: "write your note…";3080  color: var(--peach-t3);3081  font-style: italic;3082  pointer-events: none;3083}30843085/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */3086.peach-note-editor-inline {3087  display: flex;3088  flex-direction: column;3089  flex: 1;3090  min-height: 0;3091}3092.peach-note-editor-body--inline {3093  flex: 1;3094  min-height: 0;3095  font-size: 0.9375rem;3096  padding: 10px 20px 14px;3097}30983099/* Full-width toolbar row inside the body (Add.tsx note type).3100   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */3101.peach-note-toolbar-body {3102  display: flex;3103  align-items: center;3104  gap: 3px;3105  padding: 5px 20px 4px;3106  margin: 2px -20px 0;3107  border-bottom: 1px solid var(--peach-t3);3108  flex-shrink: 0;3109}31103111/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)3112   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn3113   and .peach-note-tool-divider button-level styles. */3114.peach-note-toolbar-inline {3115  display: flex;3116  align-items: center;3117  gap: 3px;3118  margin-left: auto;3119  padding-left: 10px;3120  border-left: 1px solid var(--peach-t3);3121  min-height: 22px;3122}31233124/* Entry.tsx toolbar row (no tabs, toolbar only) */3125.peach-entry-note-toolbar-row {3126  display: flex;3127  align-items: center;3128  margin: 4px 0 6px;3129  position: relative;3130  z-index: 1;3131}3132.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3133  border-left: none;3134  padding-left: 0;3135  margin-left: 0;3136}31373138/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3139.peach-note-body {3140  display: flex;3141  flex-direction: column;3142  flex: 1;3143  min-height: 0;3144  margin: 4px 0 0;3145}3146.peach-entry-body--new .peach-note-body {3147  margin: 8px -20px 0;3148}31493150/* Add.tsx body is a grid by default; swap to a flex column when a note is3151   active so the note body can stretch and pin the tags row to the bottom. */3152.peach-entry-body--new:has(.peach-note-body) {3153  display: flex;3154  flex-direction: column;3155}31563157/* Rich content element styles (editor + display) */3158.peach-note-editor-body h2,3159.peach-note-content h2 {3160  font-family: var(--font-display);3161  font-size: 20px;3162  font-weight: 600;3163  font-style: italic;3164  color: var(--peach-t0);3165  margin: 6px 0 2px;3166  line-height: 1.3;3167}3168.peach-note-editor-body ul,3169.peach-note-content ul {3170  padding-left: 18px;3171  margin: 3px 0;3172  list-style: disc;3173}3174.peach-note-editor-body ol,3175.peach-note-content ol {3176  padding-left: 18px;3177  margin: 3px 0;3178  list-style: decimal;3179}3180.peach-note-editor-body li,3181.peach-note-content li { margin: 2px 0; }3182.peach-note-editor-body hr,3183.peach-note-content hr {3184  border: none;3185  border-top: 1px solid var(--peach-t3);3186  margin: 10px 0;3187}31883189/* font size elements from execCommand */3190.peach-note-editor-body font[size="1"],3191.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3192.peach-note-editor-body font[size="2"],3193.peach-note-content font[size="2"] { font-size: 0.8125rem; }3194.peach-note-editor-body font[size="3"],3195.peach-note-content font[size="3"] { font-size: 1rem; }3196.peach-note-editor-body font[size="4"],3197.peach-note-content font[size="4"] { font-size: 20px; }3198.peach-note-editor-body font[size="5"],3199.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }32003201/* bold / italic inside the editor and note display */3202.peach-note-editor-body b, .peach-note-editor-body strong,3203.peach-note-content b, .peach-note-content strong { font-weight: 700; }3204.peach-note-editor-body em, .peach-note-editor-body i,3205.peach-note-content em, .peach-note-content i { font-style: italic; }32063207/* note display — rendered HTML, no pre-wrap */3208.peach-note-content {3209  overflow: auto;3210  max-height: 340px;3211  word-break: break-word;3212}32133214/* ── Note textarea ── */3215.peach-note-textarea {3216  width: 100%;3217  min-height: 180px;3218  max-height: 280px;3219  resize: vertical;3220  background: var(--peach-t4);3221  border: 1px solid var(--peach-t3);3222  border-radius: 8px;3223  padding: 10px 12px;3224  font-family: "IBM Plex Mono", monospace;3225  font-size: 0.75rem;3226  line-height: 1.7;3227  color: var(--peach-t1);3228  outline: none;3229  transition: border-color 150ms ease;3230}32313232.peach-note-textarea:focus {3233  border-color: var(--peach-t2);3234}32353236.peach-note-char-count {3237  font-family: "IBM Plex Mono", monospace;3238  font-size: 0.5625rem;3239  color: var(--peach-t3);3240  text-align: right;3241  margin-top: 4px;3242  letter-spacing: 0.1em;3243}32443245/* ── Field input baseline ── */3246.peach-new-field-input {3247  width: 100%;3248  background: transparent;3249  border: none;3250  border-bottom: 1px solid var(--peach-t3);3251  padding: 4px 0;3252  color: var(--peach-t1);3253  font-family: "IBM Plex Mono", monospace;3254  font-size: 0.8125rem;3255  outline: none;3256  transition: border-color 150ms ease;3257}32583259.peach-new-field-input:focus {3260  border-bottom-color: var(--peach-t0);3261  color: var(--peach-t0);3262}32633264.peach-new-name-input {3265  width: 100%;3266  background: transparent;3267  border: none;3268  border-bottom: 1px solid var(--peach-t3);3269  padding: 6px 0;3270  font-family: var(--font-display);3271  font-style: italic;3272  font-size: 28px;3273  color: var(--peach-t0);3274  outline: none;3275  transition: border-color 150ms ease;3276}32773278.peach-new-name-input:focus {3279  border-bottom-color: var(--peach-t1);3280}32813282.peach-new-name-input::placeholder {3283  color: var(--peach-t2);3284  font-style: italic;3285}32863287.peach-new-field-input::placeholder {3288  color: var(--peach-t3);3289}32903291/* ── Demo entrance animation ── */3292#hd-shell {3293  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3294}3295@keyframes hd-shell-enter {3296  from { opacity: 0; transform: scale(0.96) translateY(16px); }3297  to   { opacity: 1; transform: scale(1) translateY(0); }3298}32993300/* ── Keyframes ── */3301@keyframes peach-char-enter {3302  from { opacity: 0; transform: translateY(0.22em); }3303  to   { opacity: 1; transform: translateY(0); }3304}3305@keyframes peach-content-enter {3306  from { opacity: 0.96; transform: translateY(4px); }3307  to   { opacity: 1; transform: translateY(0); }3308}3309@keyframes peach-content-exit {3310  from { opacity: 1; transform: translateY(0); }3311  to   { opacity: 0.92; transform: translateY(-3px); }3312}3313@keyframes peach-screen-enter {3314  from { opacity: 0; transform: translateY(14px); }3315  to   { opacity: 1; transform: translateY(0); }3316}3317@keyframes peach-shell-fade-in {3318  from { opacity: 0; }3319  to   { opacity: 1; }3320}3321@keyframes peach-veil-in {3322  from { opacity: 0; }3323  to   { opacity: 1; }3324}3325@keyframes peach-lock-settle {3326  0%   { transform: scale(0.9); }3327  65%  { transform: scale(1.08); }3328  100% { transform: scale(1); }3329}3330@keyframes peach-copy-confirm {3331  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3332  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); }3333}3334@keyframes peach-copy-retreat {3335  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); }3336  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3337}3338@keyframes peach-copy-flood {3339  from { opacity: 0; transform: scaleX(0.15); }3340  to   { opacity: 1; transform: scaleX(1); }3341}3342@keyframes peach-copy-icon-settle {3343  from  { transform: scale(0.84); }3344  70%   { transform: scale(1.08); }3345  to    { transform: scale(1); }3346}3347@keyframes peach-copy-sheen-retreat {3348  from { opacity: 1; transform: scaleX(1); }3349  to   { opacity: 0; transform: scaleX(0.15); }3350}3351@keyframes peach-copy-drain {3352  from { width: 100%; }3353  to   { width: 0; }3354}3355@keyframes peach-shake {3356  0%, 100% { transform: translateX(0); }3357  20%      { transform: translateX(-6px); }3358  40%      { transform: translateX(6px); }3359  60%      { transform: translateX(-4px); }3360  80%      { transform: translateX(4px); }3361}33623363@keyframes pip-pulse {3364  0% { transform: scale(1); }3365  40% { transform: scale(2.2); }3366  100% { transform: scale(1); }3367}336833693370/* ── Password generator ── */3371.peach-pwgen-body {3372  flex: 1; overflow-y: auto;3373  display: flex; flex-direction: column;3374}3375.peach-policy-badge {3376  display: flex; align-items: center;3377  padding: 6px 20px 0;3378  font-size: 0.625rem; font-family: Inter, sans-serif;3379  color: var(--peach-t2); letter-spacing: 0.04em;3380}3381.peach-pwgen-display {3382  padding: 14px 20px 12px;3383  border-bottom: 1px solid var(--peach-t3);3384  display: flex; align-items: flex-start; gap: 10px;3385}3386.peach-pwgen-display-row {3387  display: flex;3388  align-items: flex-start;3389  gap: 8px;3390  padding-bottom: 8px;3391  border-bottom: 1px solid var(--peach-t3);3392}3393.peach-pwgen-output {3394  flex: 1; min-width: 0; margin: 0;3395  font-family: "IBM Plex Mono", monospace;3396  font-size: 0.8125rem; color: var(--peach-t0);3397  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3398  white-space: normal;3399  padding: 10px 12px;3400  background: var(--peach-t4);3401  border-radius: 6px;3402  min-height: 36px;3403}3404.peach-pwgen-output-display {3405  flex: 1;3406  min-width: 0;3407  margin: 0;3408  font-family: var(--font-display);3409  font-style: italic;3410  font-weight: 300;3411  font-size: 32px;3412  line-height: 1.05;3413  color: var(--peach-t0);3414  word-break: break-all;3415  overflow-wrap: break-word;3416  white-space: normal;3417  letter-spacing: 0.02em;3418}3419.peach-pwgen-display-actions {3420  display: flex;3421  flex-direction: column;3422  gap: 4px;3423  flex-shrink: 0;3424  margin-top: 2px;3425}3426.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3427.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3428.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3429.peach-pwgen-len-num {3430  font-family: "IBM Plex Mono", monospace;3431  font-size: 0.75rem; color: var(--peach-accent);3432}3433.peach-pwgen-len-num--edit {3434  cursor: text;3435  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3436}3437.peach-pwgen-len-input {3438  font-family: "IBM Plex Mono", monospace;3439  font-size: 0.75rem;3440  color: var(--peach-accent);3441  background: transparent;3442  border: none;3443  border-bottom: 1px solid var(--peach-accent);3444  outline: none;3445  width: 32px;3446  text-align: right;3447  padding: 0;3448}3449.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3450.peach-pwgen-toggles { display: flex; flex-direction: column; }3451.peach-pwgen-charset-pills {3452  display: flex;3453  gap: 6px;3454  flex-wrap: wrap;3455}3456.peach-pwgen-pill {3457  padding: 4px 11px;3458  border-radius: 999px;3459  border: 1px solid var(--peach-t3);3460  background: transparent;3461  color: var(--peach-t2);3462  font-family: "IBM Plex Mono", monospace;3463  font-size: 0.5625rem;3464  letter-spacing: 0.08em;3465  cursor: pointer;3466  transition: all 150ms ease;3467}3468.peach-pwgen-pill.is-on {3469  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3470  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3471  color: var(--peach-accent);3472}3473.peach-pwgen-pill:not(.is-on):hover {3474  color: var(--peach-t1);3475  border-color: var(--peach-t2);3476}3477.peach-pwgen-use-btn {3478  width: 100%;3479  min-height: 34px;3480  border-radius: 8px;3481  margin-top: 2px;3482}3483.peach-generator-constraint-note {3484  font-family: 'IBM Plex Mono', monospace;3485  font-size: 10px;3486  color: var(--peach-t3);3487  letter-spacing: 0.04em;3488  margin: 0;3489  transition: opacity 200ms ease;3490}3491.peach-pwgen-toggle-row {3492  display: flex; align-items: center; justify-content: space-between;3493  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3494}3495.peach-pwgen-toggle-row:last-child { border-bottom: none; }3496.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }34973498/* Peach popup should not expose native scrollbars on internal panels. */3499.peach-settings-body,3500.peach-new-body,3501.peach-pwgen-body,3502.lock-screen,3503.peach-import-preview {3504  scrollbar-width: none;3505  -ms-overflow-style: none;3506  overscroll-behavior: contain;3507}3508.peach-settings-body::-webkit-scrollbar,3509.peach-new-body::-webkit-scrollbar,3510.peach-pwgen-body::-webkit-scrollbar,3511.lock-screen::-webkit-scrollbar,3512.peach-import-preview::-webkit-scrollbar {3513  width: 0;3514  height: 0;3515  display: none;3516}35173518.lock-screen {3519  height: 100%;3520  min-height: 100%;3521  overflow-y: auto;3522  padding: 18px 18px 16px;3523  gap: 14px;3524  grid-template-rows: auto auto auto 1fr auto;3525  align-content: stretch;3526  position: relative;3527  isolation: isolate;3528}3529.peach-screen.lock-screen--vault-stage {3530  display: flex;3531  flex-direction: column;3532  justify-content: flex-start;3533  gap: 18px;3534  padding: 20px 18px 18px;3535  overflow: hidden;3536}3537.peach-screen.lock-screen--vault-stage .peach-lock-panel {3538  margin-top: 0;3539}3540.lock-screen--onboarding {3541  display: flex;3542  flex-direction: column;3543  gap: 12px;3544  justify-content: flex-start;3545}35463547.lock-screen::before {3548  content: "";3549  position: absolute;3550  inset: 12px 18px auto auto;3551  width: 160px;3552  height: 160px;3553  border-radius: 999px;3554  background:3555    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%);3556  filter: blur(6px);3557  opacity: 0.7;3558  pointer-events: none;3559  z-index: 0;3560}35613562.peach-lock-rune-string {3563  flex: 1;3564  display: flex;3565  align-items: center;3566  justify-content: center;3567  gap: 6px;3568  font-family: PeachScript, monospace;3569  font-size: 0.8125rem;3570  letter-spacing: 0.05em;3571  pointer-events: none;3572  user-select: none;3573  position: relative;3574  z-index: 1;3575}35763577.peach-lock-rune-string span {3578  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3579  text-shadow:3580    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3581    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3582  transition: color 0.9s ease, text-shadow 0.9s ease;3583}35843585.peach-lock-rune-string span.is-glowing {3586  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3587  text-shadow:3588    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3589    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3590}35913592.lock-screen-header {3593  display: flex;3594  align-items: center;3595  justify-content: space-between;3596  position: relative;3597  z-index: 1;3598}35993600.lock-password-input.shake {3601  animation: peach-shake 300ms ease-in-out;3602}36033604.peach-hint-error {3605  color: rgba(220, 80, 60, 0.92);3606}36073608.peach-onboarding-headline {3609  margin: 0;3610  font-family: var(--font-display);3611  font-size: 35px;3612  line-height: 0.88;3613  font-style: italic;3614  font-weight: 400;3615  max-width: 252px;3616}36173618.peach-lock-copy {3619  display: grid;3620  gap: 8px;3621  position: relative;3622  z-index: 1;3623}36243625.peach-lock-copy--onboarding {3626  gap: 10px;3627}36283629.peach-lock-hero {3630  position: relative;3631  z-index: 1;3632  display: grid;3633  gap: 8px;3634  min-height: 0;3635  padding: 4px 2px 0;3636  border: none;3637  border-radius: 0;3638  background: transparent;3639  box-shadow: none;3640}3641.peach-lock-hero-art {3642  position: absolute;3643  right: -8px;3644  top: -6px;3645  width: 120px;3646  height: 120px;3647  display: flex;3648  align-items: center;3649  justify-content: center;3650  pointer-events: none;3651  opacity: 0.12;3652  filter: saturate(0.9);3653}3654.peach-lock-hero-mark {3655  width: 100%;3656  height: 100%;3657}3658/* Peach body stays brand-peach across every accent — we don't want a3659   green or blue peach when sage/sky is selected. Leaf + vein keep the3660   sage tint because a real peach has a sage leaf. In the new brand-kit3661   mark the leaf is path 1 and the vein stroke is path 2; the body and3662   back-lobe (paths 3 + 4) must stay untouched. */3663.peach-lock-hero-mark path:nth-child(1) {3664  fill: rgba(123, 144, 96, 0.88);3665}3666.peach-lock-hero-mark path:nth-child(2) {3667  stroke: rgba(94, 122, 66, 0.95);3668}3669.peach-lock-hero > *:not(.peach-lock-hero-art) {3670  position: relative;3671  z-index: 1;3672}36733674.peach-lock-eyebrow {3675  display: inline-flex;3676  align-items: center;3677  width: fit-content;3678  padding: 4px 9px;3679  border-radius: 999px;3680  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3681  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3682  color: var(--peach-t0);3683  font-family: "IBM Plex Mono", monospace;3684  font-size: 0.5rem;3685  letter-spacing: 0.18em;3686  text-transform: uppercase;3687}36883689.peach-lock-label-row {3690  display: flex;3691  align-items: center;3692  justify-content: space-between;3693  margin-bottom: 0;3694}36953696.peach-lock-reveal-btn {3697  display: inline-flex;3698  align-items: center;3699  gap: 4px;3700  background: none;3701  border: none;3702  cursor: pointer;3703  font-family: "IBM Plex Mono", monospace;3704  font-size: 0.5625rem;3705  letter-spacing: 0.06em;3706  color: var(--peach-t2);3707  padding: 2px 0;3708  transition: color 150ms ease;3709}37103711.peach-lock-reveal-btn:hover {3712  color: var(--peach-t1);3713}37143715.peach-lock-warning {3716  color: rgba(220, 80, 60, 0.85) !important;3717  line-height: 1.5;3718}37193720.peach-onboarding-cards {3721  display: grid;3722  gap: 8px;3723  position: relative;3724  z-index: 1;3725}37263727.peach-lock-panel {3728  position: relative;3729  z-index: 1;3730  display: grid;3731  gap: 9px;3732  padding: 14px 16px 15px;3733  border-radius: 18px;3734  border: 1px solid var(--peach-t3);3735  background:3736    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3737  box-shadow:3738    inset 0 1px 0 rgba(240, 232, 216, 0.04),3739    0 12px 28px rgba(0, 0, 0, 0.12);3740}37413742/* Glass surface — lock panel and settings groups */3743.peach-glass {3744  background: rgba(26, 20, 16, 0.65);3745  border: 1px solid rgba(255, 255, 255, 0.08);3746  border-radius: 12px;3747  backdrop-filter: blur(12px) saturate(1.4);3748  -webkit-backdrop-filter: blur(12px) saturate(1.4);3749}37503751@supports not (backdrop-filter: blur(1px)) {3752  .peach-glass {3753    background: rgba(26, 20, 16, 0.92);3754    border: 1px solid rgba(255, 255, 255, 0.10);3755    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3756  }3757}37583759.light .peach-glass,3760[data-theme="light"] .peach-glass {3761  background: rgba(240, 233, 223, 0.72);3762  border: 1px solid rgba(26, 18, 8, 0.08);3763  backdrop-filter: blur(12px) saturate(1.2);3764  -webkit-backdrop-filter: blur(12px) saturate(1.2);3765}37663767@supports not (backdrop-filter: blur(1px)) {3768  .light .peach-glass,3769  [data-theme="light"] .peach-glass {3770    background: rgba(240, 233, 223, 0.97);3771    border: 1px solid rgba(26, 18, 8, 0.10);3772  }3773}37743775/* Lock panel keeps its own border-radius over the generic glass token */3776.peach-lock-panel.peach-glass {3777  border-radius: 18px;3778  background: rgba(26, 20, 16, 0.65);3779  border: 1px solid rgba(255, 255, 255, 0.08);3780  box-shadow:3781    inset 0 1px 0 rgba(255, 255, 255, 0.05),3782    0 12px 28px rgba(0, 0, 0, 0.3);3783}37843785.light .peach-lock-panel.peach-glass,3786[data-theme="light"] .peach-lock-panel.peach-glass {3787  background: rgba(240, 233, 223, 0.82);3788  border: 1px solid rgba(26, 18, 8, 0.08);3789  box-shadow:3790    inset 0 1px 0 rgba(255, 255, 255, 0.4),3791    0 8px 24px rgba(80, 56, 32, 0.15);3792}37933794@supports not (backdrop-filter: blur(1px)) {3795  .peach-lock-panel.peach-glass {3796    background: rgba(26, 20, 16, 0.92);3797    box-shadow:3798      inset 0 1px 0 rgba(255, 255, 255, 0.05),3799      0 12px 28px rgba(0, 0, 0, 0.4);3800  }3801  .light .peach-lock-panel.peach-glass,3802  [data-theme="light"] .peach-lock-panel.peach-glass {3803    background: rgba(240, 233, 223, 0.98);3804  }3805}38063807.peach-lock-panel--secondary {3808  gap: 12px;3809}38103811.peach-lock-panel-header {3812  display: flex;3813  align-items: baseline;3814  justify-content: space-between;3815  gap: 12px;3816}38173818.peach-lock-option-grid {3819  display: grid;3820  gap: 10px;3821}38223823.peach-lock-option {3824  width: 100%;3825  display: grid;3826  gap: 6px;3827  padding: 14px 15px;3828  border-radius: 16px;3829  border: 1px solid rgba(240, 232, 216, 0.08);3830  background: rgba(240, 232, 216, 0.02);3831  color: var(--peach-t0);3832  text-align: left;3833  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3834}38353836.peach-lock-option:hover {3837  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3838  background: rgba(240, 232, 216, 0.04);3839  transform: translateY(-1px);3840}38413842.peach-lock-option-title {3843  font-size: 0.75rem;3844  color: var(--peach-t0);3845}38463847.peach-lock-option-copy {3848  font-size: 0.6875rem;3849  line-height: 1.55;3850  color: var(--peach-t1);3851}38523853.peach-onboarding-stack {3854  margin-top: 2px;3855}3856.peach-lock-panel-footer {3857  display: grid;3858  gap: 6px;3859  margin-top: 2px;3860  padding-top: 10px;3861  border-top: 1px solid rgba(240, 232, 216, 0.06);3862}38633864/* ── Restore tab view ─────────────────────────────────────────────────────3865   Tab-based restore screen replacing the old three-card picker. */38663867.peach-restore-tabview {3868  overflow: hidden;3869}38703871.peach-restore-tabcard {3872  flex: 1;3873  display: flex;3874  flex-direction: column;3875  gap: 0;3876  padding: 0;3877  overflow: hidden;3878  cursor: default;3879  user-select: none;3880  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3881}38823883/* ── Tab selector ─────────────────────────────────────────────────────── */38843885.peach-restore-tabs {3886  display: flex;3887  justify-content: space-around;3888  padding: 14px 10px 10px;3889  border-bottom: 1px solid var(--peach-t3);3890  gap: 2px;3891  overflow: hidden;3892  scrollbar-width: none;3893}3894.peach-restore-tabs::-webkit-scrollbar { display: none; }38953896.peach-restore-tab {3897  background: none;3898  border: none;3899  cursor: pointer;3900  padding: 3px 2px;3901  font-family: 'Cormorant Garamond', Georgia, serif;3902  font-style: italic;3903  font-size: 11px;3904  color: var(--peach-t2);3905  transition: color 150ms ease, text-shadow 150ms ease;3906  flex: 1;3907  min-width: 0;3908  text-align: center;3909  white-space: nowrap;3910  overflow: hidden;3911  text-overflow: ellipsis;3912}3913.peach-restore-tab:hover {3914  color: var(--peach-accent);3915  text-shadow:3916    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3917    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3918}3919.peach-restore-tab.is-active {3920  color: var(--peach-accent);3921  text-shadow:3922    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3923    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3924}39253926/* ── Content area ─────────────────────────────────────────────────────── */39273928.peach-restore-content {3929  padding: 16px 16px 14px;3930  display: flex;3931  flex-direction: column;3932  gap: 8px;3933  overflow: hidden;3934  scrollbar-width: none;3935  flex: 1;3936}3937.peach-restore-content::-webkit-scrollbar { display: none; }3938.peach-restore-content > * {3939  overflow: hidden;3940  scrollbar-width: none;3941}3942.peach-restore-content > *::-webkit-scrollbar { display: none; }39433944/* ── Shared tab inner layout ──────────────────────────────────────────── */39453946.peach-rt-symbols,3947.peach-rt-csv,3948.peach-rt-phone,3949.peach-restore-codex {3950  display: flex;3951  flex-direction: column;3952  gap: 8px;3953  overflow: hidden;3954}39553956.peach-restore-codex {3957  min-height: 0;3958  justify-content: center;3959}39603961.peach-restore-codex-title {3962  margin: 0;3963  font-family: var(--font-display);3964  font-size: 1rem;3965  font-style: italic;3966  color: var(--peach-t0);3967}39683969.peach-restore-codex-copy {3970  margin: 0;3971  font-size: 0.75rem;3972  line-height: 1.5;3973  color: var(--peach-t1);3974}39753976.peach-restore-codex-button {3977  width: 100%;3978  justify-content: center;3979}39803981.peach-rt-submit {3982  width: 100%;3983}39843985.peach-rt-error {3986  margin: 0;3987  font-size: 0.6875rem;3988  color: var(--peach-breach);3989  line-height: 1.4;3990}39913992/* ── PeachScript tab ──────────────────────────────────────────────────── */39933994.peach-restore-symbols-textarea {3995  font-family: 'PeachScript', monospace;3996  font-size: 13px;3997  line-height: 1.9;3998  letter-spacing: 0.1em;3999  word-break: break-all;4000  resize: none;4001  width: 100%;4002  min-height: 56px;4003  max-height: 72px;4004  overflow: hidden;4005  scrollbar-width: none;4006  -ms-overflow-style: none;4007  box-sizing: border-box;4008  padding: 6px 8px;4009  border-radius: 8px;4010  border: 1px solid var(--peach-t3);4011  background: rgba(240, 232, 216, 0.03);4012  color: var(--peach-t0);4013}4014.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }4015.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40164017.peach-restore-symbols-pass {4018  width: 100%;4019  box-sizing: border-box;4020  padding: 7px 10px;4021  border-radius: 8px;4022  border: 1px solid var(--peach-t3);4023  background: rgba(240, 232, 216, 0.03);4024  color: var(--peach-t0);4025  font-size: 0.8125rem;4026}4027.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }4028.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }40294030.peach-rt-divider {4031  text-align: center;4032  font-size: 0.6875rem;4033  color: var(--peach-t2);4034  font-style: italic;4035}40364037.peach-rt-file-label {4038  width: 100%;4039  justify-content: center;4040}40414042.peach-rt-anim-canvas {4043  width: 100%;4044  height: 180px;4045  border-radius: 10px;4046  overflow: hidden;4047  display: block;4048}40494050/* ── CSV tab ──────────────────────────────────────────────────────────── */40514052.peach-rt-csv-sources {4053  margin: 0;4054  font-size: 0.6875rem;4055  color: var(--peach-t2);4056  line-height: 1.5;4057  text-align: center;4058}40594060.peach-rt-csv-warning {4061  margin: 0;4062  font-family: "IBM Plex Mono", monospace;4063  font-size: 0.5625rem;4064  letter-spacing: 0.12em;4065  color: var(--peach-breach);4066  text-align: center;4067}40684069/* ── From Phone tab ───────────────────────────────────────────────────── */40704071.peach-rt-phone-code {4072  margin: 0;4073  text-align: center;4074  font-family: "IBM Plex Mono", monospace;4075  font-size: 22px;4076  letter-spacing: 0.18em;4077  color: var(--peach-t0);4078}40794080.peach-rt-phone-qr {4081  display: block;4082  width: 96px;4083  height: 96px;4084  margin: 0 auto;4085  border-radius: 6px;4086  image-rendering: pixelated;4087  overflow: hidden;4088}40894090.peach-rt-phone-hint {4091  margin: 0;4092  font-size: 0.6875rem;4093  color: var(--peach-t2);4094  line-height: 1.55;4095  text-align: center;4096}40974098/* ── Intro popup ──────────────────────────────────────────────────────── */40994100.peach-restore-intro-overlay {4101  position: absolute;4102  inset: 0;4103  z-index: 100;4104  display: flex;4105  align-items: center;4106  justify-content: center;4107  padding: 20px;4108  background: rgba(12, 10, 6, 0.7);4109  backdrop-filter: blur(4px);4110  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;4111}41124113.peach-restore-intro-card {4114  width: 100%;4115  display: flex;4116  flex-direction: column;4117  gap: 12px;4118  padding: 22px 20px 20px;4119  border-radius: 16px;4120  border: 1px solid var(--peach-t3);4121  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));4122  backdrop-filter: blur(4px);4123  -webkit-backdrop-filter: blur(4px);4124  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);4125}41264127.peach-restore-intro-headline {4128  margin: 0;4129  font-family: var(--font-display);4130  font-style: italic;4131  font-size: 20px;4132  font-weight: 400;4133  color: var(--peach-t0);4134}41354136.peach-restore-intro-body {4137  display: flex;4138  flex-direction: column;4139  gap: 8px;4140}4141.peach-restore-intro-body p {4142  margin: 0;4143  font-size: 0.75rem;4144  color: var(--peach-t1);4145  line-height: 1.5;4146}41474148.peach-restore-intro-btn {4149  width: 100%;4150  margin-top: 4px;4151}41524153/* Snapshot restore panel */4154.peach-snapshot-panel {4155  gap: 10px;4156  overflow-y: auto;4157  max-height: 340px;4158}4159.peach-snapshot-list {4160  display: flex;4161  flex-direction: column;4162  gap: 4px;4163}4164.peach-snapshot-row {4165  display: flex;4166  align-items: center;4167  justify-content: space-between;4168  width: 100%;4169  padding: 8px 10px;4170  border-radius: 8px;4171  border: 1px solid rgba(240, 232, 216, 0.07);4172  background: transparent;4173  cursor: pointer;4174  transition: border-color 120ms, background 120ms;4175  text-align: left;4176  gap: 8px;4177}4178.peach-snapshot-row:hover {4179  border-color: rgba(240, 232, 216, 0.14);4180  background: rgba(240, 232, 216, 0.03);4181}4182.peach-snapshot-row.is-selected {4183  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4184  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4185}4186.peach-snapshot-time {4187  font-size: 11.5px;4188  color: var(--peach-t0);4189  flex: 1;4190}4191.peach-snapshot-count {4192  font-family: "IBM Plex Mono", monospace;4193  font-size: 0.625rem;4194  color: var(--peach-t2);4195  flex-shrink: 0;4196}4197.peach-snapshot-confirm {4198  display: flex;4199  flex-direction: column;4200  gap: 8px;4201  padding-top: 10px;4202  border-top: 1px solid rgba(240, 232, 216, 0.06);4203}4204.peach-snapshot-warning {4205  display: flex;4206  align-items: flex-start;4207  gap: 6px;4208  font-size: 10.5px;4209  color: rgba(220, 80, 60, 0.85);4210  line-height: 1.55;4211}4212.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4213.peach-snapshot-confirm-row {4214  display: flex;4215  gap: 6px;4216  align-items: center;4217}4218.peach-snapshot-restore-btn {4219  width: 100%;4220}4221.peach-lock-hero--unlock .peach-lock-hero-art {4222  width: 112px;4223  height: 112px;4224  right: 0;4225  top: 2px;4226  opacity: 0.1;4227}42284229.peach-card {4230  border: 1px solid var(--peach-t3);4231  border-radius: 18px;4232  background:4233    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4234  box-shadow:4235    inset 0 0 0 1px var(--peach-border-accent),4236    inset 0 1px 0 rgba(240, 232, 216, 0.04),4237    0 12px 32px rgba(0, 0, 0, 0.14);4238  overflow: hidden;4239}42404241.peach-card-active {4242  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4243  box-shadow:4244    inset 0 1px 0 rgba(240, 232, 216, 0.05),4245    0 16px 38px rgba(0, 0, 0, 0.18),4246    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4247}42484249.peach-card-disabled {4250  opacity: 0.72;4251}42524253.peach-card-header {4254  width: 100%;4255  padding: 13px 16px 11px;4256  background: transparent;4257  color: var(--peach-t0);4258  display: flex;4259  justify-content: space-between;4260  align-items: center;4261  text-align: left;4262  font-size: 0.75rem;4263}42644265.peach-card-body {4266  padding: 0 16px 16px;4267  display: grid;4268  gap: 9px;4269}42704271.peach-card-tag {4272  color: var(--peach-t2);4273  font-family: "IBM Plex Mono", monospace;4274  font-size: 0.5625rem;4275  letter-spacing: 0.12em;4276  text-transform: uppercase;4277}42784279.peach-empty-copy {4280  display: grid;4281  gap: 6px;4282  color: var(--peach-t1);4283  font-size: 0.8125rem;4284}42854286.peach-lock-submit {4287  width: 100%;4288  box-shadow:4289    0 1px 0 rgba(255,255,255,0.10) inset,4290    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4291    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4292    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4293}42944295.peach-lock-secondary {4296  width: 100%;4297  border-color: var(--peach-t3);4298  background: rgba(240, 232, 216, 0.02);4299}43004301.peach-lock-secondary:hover {4302  background: rgba(240, 232, 216, 0.04);4303}43044305.peach-lock-note {4306  max-width: none;4307  line-height: 1.55;4308  margin: 0;4309}43104311.peach-overlay-action {4312  font-size: 0.625rem;4313  padding: 4px 8px;4314  letter-spacing: 0.06em;4315  min-width: 44px;4316  text-align: center;4317}43184319.peach-inline-action {4320  flex-shrink: 0;4321  font-size: 0.5625rem;4322  letter-spacing: 0.1em;4323  text-transform: uppercase;4324  padding: 4px 7px;4325}4326.peach-password-toggle-btn {4327  display: inline-flex;4328  align-items: center;4329  justify-content: center;4330  min-width: 30px;4331  min-height: 26px;4332  padding: 0 7px;4333  border: 1px solid var(--peach-t3);4334  border-radius: 999px;4335  background: rgba(240, 232, 216, 0.04);4336  color: var(--peach-t2);4337  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4338}4339.peach-password-toggle-btn:hover {4340  border-color: var(--peach-t2);4341  color: var(--peach-t0);4342  background: rgba(240, 232, 216, 0.06);4343}43444345.peach-new-textarea {4346  width: 100%;4347  min-height: 88px;4348  resize: vertical;4349  border: 0;4350  outline: none;4351  background: transparent;4352  color: var(--peach-t1);4353  font-family: "IBM Plex Mono", monospace;4354  font-size: 0.75rem;4355  line-height: 1.65;4356  caret-color: var(--peach-accent);4357}43584359.peach-new-textarea::placeholder {4360  color: var(--peach-t2);4361  opacity: 0.7;4362}43634364.peach-settings-actions {4365  display: grid;4366  gap: 8px;4367}43684369.peach-sync-section-label {4370  font-size: 0.6875rem;4371  color: var(--peach-t2);4372  text-transform: uppercase;4373  letter-spacing: 0.05em;4374}43754376.peach-sync-network-note {4377  margin: 0 0 6px;4378  font-size: 0.75rem;4379  color: var(--peach-t2);4380  line-height: 1.4;4381}43824383.peach-settings-row--tappable {4384  background: none;4385  border: none;4386  width: 100%;4387  text-align: left;4388  cursor: pointer;4389  color: var(--peach-t1);4390  font-size: 0.8125rem;4391}4392.peach-settings-row--tappable:hover {4393  color: var(--peach-t0);4394}43954396.peach-sync-pro-hint {4397  display: flex;4398  flex-direction: column;4399  align-items: flex-start;4400  gap: 8px;4401  padding: 12px 0 4px;4402}44034404.peach-sync-device-row {4405  display: flex;4406  justify-content: space-between;4407  align-items: center;4408  padding: 6px 0;4409  border-bottom: 1px solid var(--peach-t3);4410}44114412.peach-sync-device-info {4413  display: flex;4414  flex-direction: column;4415  gap: 2px;4416}44174418.peach-sync-device-name {4419  font-size: 0.8125rem;4420  color: var(--peach-t0);4421}44224423.peach-sync-device-meta {4424  font-size: 0.6875rem;4425  color: var(--peach-t2);4426}44274428.peach-sync-status-dot {4429  display: inline-block;4430  width: 8px;4431  height: 8px;4432  border-radius: 50%;4433  vertical-align: middle;4434}44354436.peach-sync-remove-btn {4437  color: var(--peach-breach);4438}44394440.peach-sync-advanced-row {4441  display: flex;4442  justify-content: space-between;4443  align-items: center;4444  padding: 6px 0;4445  gap: 12px;4446}44474448.peach-sync-advanced-info {4449  display: flex;4450  flex-direction: column;4451  gap: 2px;4452  flex: 1;4453}44544455.peach-sync-advanced-name {4456  font-size: 0.8125rem;4457  color: var(--peach-t0);4458}44594460.peach-sync-reset-confirm {4461  display: flex;4462  flex-direction: column;4463  gap: 8px;4464  padding: 10px;4465  border: 1px solid var(--peach-breach);4466  border-radius: 10px;4467  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4468}44694470.peach-sync-reset-confirm-headline {4471  font-size: 0.8125rem;4472  font-weight: 600;4473  color: var(--peach-t0);4474  margin: 0;4475}44764477.peach-sync-reset-confirm-body {4478  font-size: 0.75rem;4479  color: var(--peach-t1);4480  margin: 0;4481  line-height: 1.4;4482}44834484.peach-btn--danger {4485  background: var(--peach-breach);4486  color: #fff;4487  border-color: var(--peach-breach);4488}4489.peach-btn--danger:hover:not(:disabled) {4490  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4491}4492.peach-btn--danger:disabled {4493  opacity: 0.55;4494  cursor: not-allowed;4495}44964497.peach-sync-hero-icon {4498  color: var(--peach-t1);4499  opacity: 0.85;4500}45014502.peach-import-preview {4503  margin-bottom: 12px;4504  max-height: 152px;4505  overflow-y: auto;4506  border: 1px solid var(--peach-t3);4507  border-radius: 10px;4508  padding: 8px 10px;4509  display: grid;4510  gap: 8px;4511  background: rgba(240, 232, 216, 0.02);4512}45134514.peach-import-preview-row {4515  display: flex;4516  justify-content: space-between;4517  gap: 10px;4518  font-size: 0.6875rem;4519  color: var(--peach-t1);4520}45214522.peach-import-preview-title {4523  color: var(--peach-t0);4524  flex: 1;4525  min-width: 0;4526  overflow: hidden;4527  text-overflow: ellipsis;4528  white-space: nowrap;4529}45304531.peach-import-preview-meta {4532  color: var(--peach-t2);4533  flex-shrink: 0;4534  max-width: 42%;4535  overflow: hidden;4536  text-overflow: ellipsis;4537  white-space: nowrap;4538}45394540.peach-import-preview-more {4541  color: var(--peach-t2);4542  font-size: 0.625rem;4543}45444545.peach-restore-copy {4546  margin: 0;4547  color: var(--peach-t1);4548  font-size: 0.6875rem;4549  line-height: 1.6;4550}45514552.peach-restore-warning {4553  padding: 10px 12px;4554  border-radius: 12px;4555  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4556  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4557  color: var(--peach-t0);4558  font-size: 0.6875rem;4559  line-height: 1.55;4560}45614562.peach-provider-chips {4563  display: flex;4564  flex-wrap: wrap;4565  gap: 6px;4566}45674568.peach-provider-chip {4569  display: inline-flex;4570  align-items: center;4571  padding: 5px 8px;4572  border-radius: 999px;4573  border: 1px solid var(--peach-t3);4574  background: rgba(240, 232, 216, 0.02);4575  color: var(--peach-t1);4576  font-family: "IBM Plex Mono", monospace;4577  font-size: 0.5rem;4578  letter-spacing: 0.08em;4579  text-transform: uppercase;4580}45814582.peach-restore-file,4583.peach-restore-input {4584  width: 100%;4585  border-radius: 10px;4586  border: 1px solid var(--peach-t3);4587  background: var(--peach-s2);4588  color: var(--peach-t0);4589  font-size: 0.75rem;4590}45914592.peach-restore-file {4593  padding: 9px 10px;4594}45954596.peach-restore-file::file-selector-button {4597  margin-right: 10px;4598  padding: 7px 10px;4599  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4600  border-radius: 999px;4601  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4602  color: var(--peach-t0);4603  font-size: 0.625rem;4604  letter-spacing: 0.08em;4605  text-transform: uppercase;4606  cursor: pointer;4607}46084609.peach-restore-input {4610  padding: 10px 12px;4611}46124613.peach-auth-grid {4614  display: grid;4615  gap: 10px;4616}46174618.peach-import-summary {4619  color: var(--peach-t1);4620  font-size: 0.75rem;4621  line-height: 1.6;4622  margin-bottom: 12px;4623}46244625.peach-restore-error {4626  color: rgba(220, 80, 60, 0.95);4627  font-size: 0.75rem;4628  line-height: 1.55;4629}46304631.peach-passkey-card {4632  max-width: 400px;4633  margin: auto 16px;4634  align-self: center;4635  width: calc(100% - 32px);4636}46374638/* Center the approval card vertically inside the overlay-view (which sets4639 * flex-direction: column without justify-content). Without this, the card4640 * sits at the top with a tall empty band below — looks unfinished on the4641 * 320px popup. */4642.peach-overlay-view:has(.peach-passkey-card) {4643  justify-content: center;4644}46454646.peach-pro-badge {4647  padding: 2px 6px;4648  border-radius: 999px;4649  font-family: var(--font-ui);4650  font-size: 0.625rem;4651  letter-spacing: 0.08em;4652  text-transform: uppercase;4653  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4654  color: var(--peach-accent);4655}46564657/* ── Shortcuts rebind table ─────────────────────────────────── */4658.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4659.peach-shortcut-row {4660  display: flex;4661  align-items: center;4662  gap: 10px;4663  padding: 6px 0;4664}4665.peach-shortcut-row-label {4666  flex: 1;4667  font-size: 0.75rem;4668  color: var(--peach-t0);4669}4670.peach-shortcut-chip {4671  min-width: 64px;4672  padding: 4px 10px;4673  border-radius: 6px;4674  border: 1px solid var(--peach-t3);4675  background: var(--peach-input-bg, var(--surface-card));4676  color: var(--peach-t0);4677  font-family: var(--font-mono);4678  font-size: 0.6875rem;4679  letter-spacing: 0.04em;4680  cursor: pointer;4681  text-align: center;4682  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4683}4684.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4685.peach-shortcut-chip.is-custom {4686  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4687  color: var(--peach-accent);4688}4689.peach-shortcut-chip.is-capturing {4690  border-color: var(--peach-accent);4691  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4692  color: var(--peach-accent);4693  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4694}4695@keyframes peach-shortcut-capture-pulse {4696  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4697  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4698}4699.peach-shortcut-reset {4700  background: transparent;4701  border: none;4702  cursor: pointer;4703  color: var(--peach-t2);4704  padding: 4px 6px;4705  border-radius: 5px;4706  font-size: 0.875rem;4707  line-height: 1;4708  transition: color 120ms ease, background 120ms ease;4709}4710.peach-shortcut-reset:hover {4711  color: var(--peach-t0);4712  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4713}4714.peach-shortcuts-conflict {4715  margin: 4px 0 0;4716  padding: 8px 10px;4717  border-radius: 7px;4718  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4719  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4720  font-family: var(--font-mono);4721  font-size: 0.6875rem;4722  color: var(--peach-t0);4723}47244725/* ── Help dialog overlay (? to open) ────────────────────────── */4726.peach-shortcuts-help-backdrop {4727  position: fixed;4728  inset: 0;4729  background: rgba(0, 0, 0, 0.55);4730  backdrop-filter: blur(2px);4731  display: flex;4732  align-items: center;4733  justify-content: center;4734  z-index: 1000;4735  animation: peach-help-fade-in 140ms ease forwards;4736}4737@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4738.peach-shortcuts-help-card {4739  width: min(320px, 92vw);4740  max-height: 80vh;4741  overflow-y: auto;4742  border-radius: 14px;4743  border: 1px solid var(--peach-t3);4744  background: var(--peach-bg);4745  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4746  padding: 16px 18px 18px;4747  display: flex;4748  flex-direction: column;4749  gap: 12px;4750}4751.peach-shortcuts-help-head {4752  display: flex; align-items: center; justify-content: space-between;4753}4754.peach-shortcuts-help-head h3 {4755  margin: 0;4756  font-family: var(--font-display);4757  font-style: italic;4758  font-weight: 400;4759  font-size: 22px;4760  color: var(--peach-t0);4761}4762.peach-shortcuts-help-close {4763  background: transparent;4764  border: none;4765  color: var(--peach-t2);4766  cursor: pointer;4767  font-size: 0.875rem;4768  padding: 4px 8px;4769  border-radius: 5px;4770}4771.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4772.peach-shortcuts-help-body ul {4773  list-style: none; padding: 0; margin: 4px 0 12px;4774  display: grid; gap: 8px;4775}4776.peach-shortcuts-help-body li {4777  display: flex; align-items: center; justify-content: space-between; gap: 12px;4778  font-size: 0.75rem; color: var(--peach-t0);4779}4780.peach-shortcuts-help-body kbd {4781  font-family: var(--font-mono);4782  font-size: 0.6875rem;4783  padding: 3px 8px;4784  border-radius: 6px;4785  background: var(--surface-card);4786  border: 1px solid var(--peach-t3);4787  color: var(--peach-accent);4788  letter-spacing: 0.04em;4789}47904791/* ── Pro promo on Account screen ────────────────────────────── */4792.peach-pro-promo {4793  position: relative;4794  border-radius: 14px;4795  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4796  background:4797    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4798    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4799    var(--surface-card);4800  overflow: hidden;4801  margin-bottom: 14px;4802}4803.peach-pro-promo-glow {4804  position: absolute;4805  inset: -40% -20% auto auto;4806  width: 220px; height: 220px;4807  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4808  pointer-events: none;4809  filter: blur(8px);4810}4811.peach-pro-promo-inner {4812  position: relative;4813  padding: 18px 18px 16px;4814}4815.peach-pro-promo-title {4816  font-family: var(--font-display);4817  font-style: italic;4818  font-weight: 400;4819  font-size: 28px;4820  line-height: 1;4821  letter-spacing: -0.005em;4822  color: var(--peach-t0);4823  margin: 0 0 4px;4824}4825.peach-pro-promo-tagline {4826  font-family: var(--font-mono);4827  font-size: 0.625rem;4828  letter-spacing: 0.06em;4829  color: var(--peach-t2);4830  margin: 0 0 14px;4831}4832.peach-pro-promo-list {4833  list-style: none;4834  margin: 0 0 16px;4835  padding: 0;4836  display: grid;4837  gap: 9px;4838}4839.peach-pro-promo-list li {4840  display: flex;4841  align-items: flex-start;4842  gap: 9px;4843  font-size: 0.75rem;4844  color: var(--peach-t1);4845  line-height: 1.4;4846}4847.peach-pro-promo-list svg {4848  width: 14px;4849  height: 14px;4850  flex-shrink: 0;4851  color: var(--peach-accent);4852  margin-top: 2px;4853}4854.peach-pro-promo-list span {4855  color: var(--peach-t0);4856}4857.peach-pro-promo-cta {4858  width: 100%;4859  background: var(--peach-accent);4860  color: #fff;4861  border: none;4862  padding: 9px 12px;4863  border-radius: 9px;4864  font-size: 0.75rem;4865  font-weight: 500;4866  font-family: var(--font-ui);4867  letter-spacing: 0.02em;4868  text-decoration: none;4869  display: inline-flex;4870  align-items: center;4871  justify-content: center;4872  cursor: pointer;4873  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4874  box-shadow: 0 2px 16px var(--peach-glow);4875}4876.peach-pro-promo-cta:hover {4877  filter: brightness(1.07);4878  box-shadow: 0 4px 24px var(--peach-glow);4879  transform: translateY(-1px);4880}4881.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }48824883.peach-pro-or-divider {4884  display: flex;4885  align-items: center;4886  gap: 10px;4887  margin: 4px 0 12px;4888  font-family: var(--font-mono);4889  font-size: 0.625rem;4890  letter-spacing: 0.06em;4891  color: var(--peach-t2);4892  text-transform: uppercase;4893}4894.peach-pro-or-divider::before,4895.peach-pro-or-divider::after {4896  content: "";4897  flex: 1;4898  height: 1px;4899  background: var(--peach-t3);4900}49014902.peach-loading {4903  position: absolute;4904  inset: 0;4905  display: flex;4906  align-items: center;4907  justify-content: center;4908  background: var(--bg);4909  animation: peach-loading-pulse 1.2s ease-in-out infinite;4910}49114912@keyframes peach-loading-pulse {4913  0%, 100% { opacity: 0.6; }4914  50% { opacity: 1; }4915}49164917/* ── Health Dashboard ─────────────────────────────────────────────────── */4918.peach-health-body {4919  flex: 1;4920  overflow-y: auto;4921  display: flex;4922  flex-direction: column;4923  /* Hide the platform scrollbar — every other scrollable surface in the4924   * popup hides it; the Health view was the one outlier and it ruined the4925   * polish. Behavior unchanged, just no rail rendered. */4926  scrollbar-width: none;4927  -ms-overflow-style: none;4928}4929.peach-health-body::-webkit-scrollbar { display: none; }49304931/* Loading screen for the Vault Health view. The advanced report computation4932 * can run for a few seconds on a large vault — without a clear loading4933 * screen the surface looked broken (the entry view bleeds through the4934 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4935.peach-health-loading-screen {4936  flex: 1;4937  display: flex;4938  flex-direction: column;4939  align-items: center;4940  justify-content: center;4941  gap: 14px;4942  padding: 32px 28px;4943  text-align: center;4944}49454946.peach-health-loading-glyph {4947  width: 48px;4948  height: 48px;4949  display: flex;4950  align-items: center;4951  justify-content: center;4952  border-radius: 14px;4953  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4954  color: var(--peach-accent);4955}49564957.peach-health-loading-title {4958  margin: 0;4959  font-family: var(--font-display);4960  font-style: italic;4961  font-weight: 300;4962  font-size: 19px;4963  line-height: 1.2;4964  color: var(--peach-t0);4965}49664967.peach-health-loading-copy {4968  margin: 0;4969  max-width: 240px;4970  font-size: 0.75rem;4971  line-height: 1.55;4972  color: var(--peach-t2);4973}49744975.peach-health-loading-track {4976  width: 200px;4977  height: 3px;4978  margin-top: 6px;4979  border-radius: 999px;4980  background: rgba(240, 232, 216, 0.06);4981  overflow: hidden;4982}49834984.peach-health-loading-fill {4985  width: 40%;4986  height: 100%;4987  border-radius: inherit;4988  background: linear-gradient(4989    90deg,4990    transparent 0%,4991    var(--peach-accent) 50%,4992    transparent 100%4993  );4994  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4995}49964997@keyframes peach-health-loading-sweep {4998  0%   { transform: translateX(-100%); }4999  100% { transform: translateX(350%); }5000}50015002[data-motion="reduce"] .peach-health-loading-fill,5003[data-motion="reduce"] .peach-health-loading-glyph svg path {5004  animation: none;5005}50065007.peach-health-summary {5008  padding: 10px 16px 6px;5009  font-family: "IBM Plex Mono", monospace;5010  font-size: 0.6875rem;5011}5012.peach-health-summary-warn { color: rgba(220,80,60,0.9); }5013.peach-health-summary-ok { color: var(--peach-t2); }50145015.peach-health-check-row {5016  padding: 0 16px 10px;5017}5018.peach-health-check-btn {5019  width: 100%;5020  display: flex;5021  align-items: center;5022  justify-content: center;5023}50245025.peach-health-sections {5026  flex: 1;5027  display: flex;5028  flex-direction: column;5029}50305031.peach-health-section {5032  border-bottom: 1px solid var(--peach-t3);5033}50345035.peach-health-section-header {5036  width: 100%;5037  display: flex;5038  align-items: center;5039  justify-content: space-between;5040  padding: 9px 16px;5041  background: transparent;5042  cursor: pointer;5043  color: var(--peach-t0);5044}50455046.peach-health-section-title-row {5047  display: flex;5048  align-items: center;5049  gap: 8px;5050}50515052.peach-health-count-badge {5053  display: inline-flex;5054  align-items: center;5055  justify-content: center;5056  min-width: 20px;5057  height: 18px;5058  padding: 0 5px;5059  border-radius: 999px;5060  background: rgba(220,80,60,0.15);5061  border: 1px solid rgba(220,80,60,0.25);5062  font-family: "IBM Plex Mono", monospace;5063  font-size: 0.5625rem;5064  color: rgba(220,80,60,0.9);5065}50665067.peach-health-section-title {5068  font-family: "IBM Plex Mono", monospace;5069  font-size: 0.6875rem;5070  text-transform: uppercase;5071  letter-spacing: 0.1em;5072  color: var(--peach-t1);5073}50745075.peach-health-chevron {5076  color: var(--peach-t2);5077  transition: transform 200ms ease;5078  flex-shrink: 0;5079}5080.peach-health-chevron.is-expanded {5081  transform: rotate(180deg);5082}50835084.peach-health-section-body {5085  padding: 0 16px 10px;5086  display: flex;5087  flex-direction: column;5088  gap: 4px;5089}50905091.peach-health-row {5092  display: flex;5093  align-items: flex-start;5094  justify-content: space-between;5095  gap: 8px;5096  padding: 6px 8px;5097  border-radius: 8px;5098  background: rgba(240,232,216,0.02);5099}51005101.peach-health-row-info {5102  flex: 1;5103  min-width: 0;5104  display: flex;5105  flex-direction: column;5106  gap: 2px;5107}51085109.peach-health-row-name {5110  font-family: var(--font-display);5111  font-size: 0.9375rem;5112  font-style: italic;5113  font-weight: 400;5114  color: var(--peach-t0);5115  white-space: nowrap;5116  overflow: hidden;5117  text-overflow: ellipsis;5118}51195120.peach-health-row-meta {5121  font-family: "IBM Plex Mono", monospace;5122  font-size: 0.5625rem;5123  color: var(--peach-t2);5124  letter-spacing: 0.05em;5125}51265127.peach-health-fix-btn {5128  font-size: 0.5625rem;5129  letter-spacing: 0.08em;5130  text-transform: uppercase;5131  padding: 4px 7px;5132  flex-shrink: 0;5133  display: flex;5134  align-items: center;5135}51365137.peach-health-empty {5138  font-family: "IBM Plex Mono", monospace;5139  font-size: 0.625rem;5140  color: var(--peach-t2);5141  padding: 6px 0;5142}51435144.peach-health-loading {5145  font-family: "IBM Plex Mono", monospace;5146  font-size: 0.625rem;5147  color: var(--peach-t2);5148  padding: 6px 0;5149  display: flex;5150  align-items: center;5151  gap: 6px;5152}51535154.peach-health-loading::before {5155  content: "";5156  width: 10px;5157  height: 10px;5158  border: 1.5px solid var(--peach-t3);5159  border-top-color: var(--peach-accent);5160  border-radius: 50%;5161  animation: peach-spin 600ms linear infinite;5162}51635164@keyframes peach-spin {5165  to { transform: rotate(360deg); }5166}51675168.peach-spinner {5169  width: 32px;5170  height: 32px;5171  border: 2px solid var(--peach-s2);5172  border-top-color: var(--peach-accent);5173  border-radius: 50%;5174  margin: 0 auto 16px;5175  animation: peach-spin 0.8s linear infinite;5176}51775178.peach-progress-screen {5179  text-align: center;5180  padding: 32px 16px;5181}51825183.peach-progress-screen-title {5184  font-size: 0.8125rem;5185  color: var(--peach-t0);5186  margin-bottom: 16px;5187}51885189.peach-progress-screen-stage {5190  font-size: 0.6875rem;5191  color: var(--peach-t2);5192  min-height: 14px;5193}51945195.peach-progress-screen-note {5196  font-size: 0.625rem;5197  color: var(--peach-t2);5198  margin-top: 8px;5199}52005201.peach-pairing-body {5202  flex: 1;5203  overflow-y: auto;5204  display: flex;5205  flex-direction: column;5206}52075208.peach-pairing-content {5209  flex: 1;5210  display: flex;5211  flex-direction: column;5212  align-items: center;5213  justify-content: center;5214  gap: 14px;5215  padding: 28px 20px;5216  text-align: center;5217}52185219.peach-pairing-code-screen {5220  gap: 18px;5221}52225223.peach-pairing-headline {5224  font-family: var(--font-display);5225  font-style: italic;5226  font-weight: 300;5227  font-size: 28px;5228  color: var(--peach-t0);5229  margin: 0;5230  line-height: 1;5231}52325233.peach-pairing-subline {5234  font-size: 0.75rem;5235  color: var(--peach-t2);5236  max-width: 220px;5237  line-height: 1.5;5238  margin: 0;5239}52405241.peach-pairing-subline--center {5242  text-align: center;5243}52445245/* 6-digit pairing code — both display (.peach-pairing-code) and entry5246   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5247   so the two modes feel like the same surface. */5248.peach-pairing-code {5249  font-family: "IBM Plex Mono", monospace;5250  font-size: 36px;5251  letter-spacing: 0.25em;5252  color: var(--peach-t0);5253  text-align: center;5254  padding: 24px 0;5255  text-shadow:5256    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5257    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5258  background: transparent;5259  border: 0;5260  cursor: default;5261  user-select: text;5262}52635264.peach-pairing-code--loading,5265.peach-pairing-code--expired {5266  font-size: 18px;5267  letter-spacing: 0.04em;5268  color: var(--peach-t2);5269  cursor: pointer;5270  text-shadow: none;5271}52725273.peach-pairing-qr-container {5274  display: flex;5275  flex-direction: column;5276  align-items: center;5277  gap: 10px;5278}52795280.peach-pairing-qr {5281  width: 240px;5282  height: 240px;5283  display: block;5284}52855286.peach-pairing-instruction {5287  font-size: 0.75rem;5288  color: var(--peach-t2);5289  text-align: center;5290  line-height: 1.5;5291  margin: 0;5292  max-width: 220px;5293}52945295.peach-pairing-expiry {5296  font-family: "IBM Plex Mono", monospace;5297  font-size: 13px;5298  letter-spacing: 0.06em;5299  color: var(--peach-t2);5300  margin: 0;5301}53025303.peach-pairing-regen {5304  font-size: 0.75rem;5305  color: var(--peach-accent);5306  background: transparent;5307  border: 0;5308  cursor: pointer;5309  padding: 4px 0;5310  text-decoration: underline;5311  text-underline-offset: 2px;5312}53135314.peach-pairing-code-input {5315  font-family: "IBM Plex Mono", monospace;5316  font-size: 36px;5317  letter-spacing: 0.25em;5318  color: var(--peach-t0);5319  background: transparent;5320  border: 0;5321  border-bottom: 1px solid var(--peach-t3);5322  outline: none;5323  text-align: center;5324  padding: 18px 0;5325  width: 220px;5326  caret-color: var(--peach-accent);5327  transition: border-color 160ms ease;5328}53295330.peach-pairing-code-input::placeholder {5331  color: var(--peach-t3);5332}53335334.peach-pairing-code-input:focus {5335  border-bottom-color: var(--peach-accent);5336}53375338.peach-pairing-toggle {5339  background: transparent;5340  border: 0;5341  color: var(--peach-t2);5342  font-size: 0.75rem;5343  padding: 8px 4px;5344  cursor: pointer;5345  transition: color 120ms ease;5346}53475348.peach-pairing-toggle:hover:not(:disabled) {5349  color: var(--peach-t1);5350}53515352.peach-pairing-toggle:disabled {5353  opacity: 0.5;5354  cursor: default;5355}53565357.peach-pairing-hint {5358  font-size: 0.6875rem;5359  color: var(--peach-t2);5360  margin: 0;5361  text-align: center;5362}53635364.peach-pairing-status {5365  display: flex;5366  align-items: center;5367  gap: 8px;5368  margin: 0;5369  font-size: 0.75rem;5370  color: var(--peach-t1);5371}53725373.peach-pairing-error {5374  margin: 0;5375  font-size: 0.6875rem;5376  color: var(--peach-breach);5377}53785379.peach-pairing-error--muted {5380  color: var(--peach-t2);5381}53825383.peach-pairing-spinner {5384  width: 12px;5385  height: 12px;5386  border: 1.5px solid var(--peach-t3);5387  border-top-color: var(--peach-accent);5388  border-radius: 50%;5389  animation: peach-spin 0.8s linear infinite;5390}53915392.peach-pairing-success-icon,5393.peach-pairing-error-icon,5394.peach-pairing-hero {5395  display: inline-flex;5396  align-items: center;5397  justify-content: center;5398}53995400/* Tag chips */5401.peach-tag-chip {5402  display: inline-flex;5403  align-items: center;5404  gap: 4px;5405  padding: 3px 8px;5406  border-radius: 999px;5407  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5408  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5409  color: var(--peach-t0);5410  font-family: "IBM Plex Mono", monospace;5411  font-size: 0.625rem;5412  letter-spacing: 0.04em;5413}54145415.peach-tag-chip-remove {5416  background: transparent;5417  border: none;5418  color: inherit;5419  opacity: 0.6;5420  cursor: pointer;5421  padding: 0;5422  font-size: 0.75rem;5423  line-height: 1;5424}54255426.peach-tag-chip-remove:hover {5427  opacity: 1;5428}54295430/* Tag input */5431.peach-tag-input-wrap {5432  border-bottom: 1px solid var(--peach-t3);5433}54345435.peach-tag-suggestions {5436  display: flex;5437  flex-wrap: wrap;5438  gap: 4px;5439  padding: 6px 0;5440}54415442.peach-tag-suggestion {5443  padding: 2px 8px;5444  border-radius: 999px;5445  border: 1px solid var(--peach-t3);5446  background: var(--peach-s2);5447  color: var(--peach-t1);5448  font-family: "IBM Plex Mono", monospace;5449  font-size: 0.625rem;5450  cursor: pointer;5451  transition: border-color 80ms ease, background 80ms ease;5452}54535454.peach-tag-suggestion:hover {5455  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5456  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5457}54585459/* Identity suggestions — shown below username/email inputs in new-entry form */5460@keyframes peach-suggest-in {5461  from { opacity: 0; transform: translateY(-4px); }5462  to   { opacity: 1; transform: none; }5463}54645465.peach-identity-suggestions {5466  display: flex;5467  flex-direction: column;5468  gap: 1px;5469  margin-top: 4px;5470  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5471}54725473.peach-identity-filter-row {5474  display: flex;5475  align-items: center;5476  gap: 4px;5477  padding: 2px 0 5px;5478}54795480.peach-identity-collapse-btn {5481  margin-left: auto;5482  background: transparent;5483  border: none;5484  cursor: pointer;5485  color: var(--peach-t3);5486  padding: 2px 4px;5487  display: flex;5488  align-items: center;5489  line-height: 0;5490  border-radius: 3px;5491  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5492}54935494.peach-identity-collapse-btn:hover {5495  color: var(--peach-t1);5496}54975498.peach-identity-collapse-btn.is-collapsed {5499  transform: rotate(-90deg);5500}55015502.peach-identity-rows {5503  display: grid;5504  grid-template-rows: 1fr;5505  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5506}55075508.peach-identity-rows.is-collapsed {5509  grid-template-rows: 0fr;5510}55115512.peach-identity-rows-inner {5513  overflow-y: auto;5514  min-height: 0;5515  max-height: 148px;5516  scrollbar-width: thin;5517  scrollbar-color: var(--peach-t3) transparent;5518  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5519  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5520}55215522.peach-identity-rows-inner::-webkit-scrollbar {5523  width: 4px;5524}55255526.peach-identity-rows-inner::-webkit-scrollbar-track {5527  background: transparent;5528}55295530.peach-identity-rows-inner::-webkit-scrollbar-thumb {5531  background: var(--peach-t3);5532  border-radius: 2px;5533}55345535.peach-identity-filter-pill {5536  padding: 2px 7px;5537  border-radius: 999px;5538  border: 1px solid var(--peach-t3);5539  background: transparent;5540  color: var(--peach-t2);5541  font-family: "IBM Plex Mono", monospace;5542  font-size: 0.6rem;5543  cursor: pointer;5544  transition: border-color 80ms, background 80ms, color 80ms;5545}55465547.peach-identity-filter-pill.is-on {5548  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5549  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5550  color: var(--peach-accent);5551}55525553.peach-identity-suggestion {5554  display: flex;5555  align-items: center;5556  gap: 6px;5557  width: 100%;5558  padding: 4px 6px;5559  border-radius: 5px;5560  border: none;5561  background: transparent;5562  cursor: pointer;5563  text-align: left;5564  transition: background 80ms ease;5565}55665567.peach-identity-suggestion:hover,5568.peach-identity-suggestion:focus {5569  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5570  outline: none;5571}55725573.peach-identity-suggestion-value {5574  font-family: "IBM Plex Mono", monospace;5575  font-size: 0.7rem;5576  color: var(--peach-t1);5577  overflow: hidden;5578  text-overflow: ellipsis;5579  white-space: nowrap;5580  flex: 1;5581  min-width: 0;5582}55835584.peach-identity-suggestion-type {5585  font-family: "IBM Plex Mono", monospace;5586  font-size: 0.55rem;5587  font-weight: 600;5588  flex-shrink: 0;5589  padding: 1px 4px;5590  border-radius: 3px;5591}55925593.peach-identity-suggestion-type--email {5594  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5595  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5596}55975598.peach-identity-suggestion-type--username {5599  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5600  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5601}56025603.peach-identity-suggestion-meta {5604  font-family: "IBM Plex Mono", monospace;5605  font-size: 0.6rem;5606  color: var(--peach-t3);5607  flex-shrink: 0;5608}56095610/* Tag filter strip */5611.peach-tag-filter-strip {5612  border-bottom: 1px solid var(--peach-t3);5613  flex-shrink: 0;5614}56155616.peach-tag-filter-chip {5617  display: inline-flex;5618  align-items: center;5619  padding: 4px 10px;5620  border-radius: 999px;5621  border: 1px solid var(--peach-t3);5622  background: transparent;5623  color: var(--peach-t2);5624  font-family: "IBM Plex Mono", monospace;5625  font-size: 0.5625rem;5626  letter-spacing: 0.06em;5627  text-transform: uppercase;5628  cursor: pointer;5629  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5630  white-space: nowrap;5631}56325633.peach-tag-filter-chip:hover {5634  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5635  color: var(--peach-t1);5636}56375638.peach-tag-filter-chip.is-selected {5639  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5640  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5641  color: var(--peach-t0);5642}56435644/* ─────────────────────────────────────────────────────────────────────────5645   v1.4.12 additions5646   ─────────────────────────────────────────────────────────────────────── */56475648/* Sort bar */5649.peach-sort-bar {5650  display: flex;5651  align-items: center;5652  gap: 4px;5653  padding: 5px 12px;5654  border-bottom: 1px solid var(--peach-t3);5655  flex-shrink: 0;5656  overflow-x: auto;5657  scrollbar-width: none;5658}56595660.peach-sort-btn {5661  padding: 2px 9px;5662  border-radius: 999px;5663  border: 1px solid transparent;5664  background: transparent;5665  color: var(--peach-t2);5666  font-family: "IBM Plex Mono", monospace;5667  font-size: 0.5625rem;5668  letter-spacing: 0.07em;5669  text-transform: uppercase;5670  cursor: pointer;5671  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5672  white-space: nowrap;5673}56745675.peach-sort-btn:hover {5676  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5677  color: var(--peach-t1);5678}56795680.peach-sort-btn.is-active {5681  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5682  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5683  color: var(--peach-t0);5684}56855686.peach-sort-scope-btn {5687  padding-inline: 8px;5688  font-size: 0.53125rem;5689  letter-spacing: 0.05em;5690}56915692.peach-sort-domain-hint {5693  margin-left: auto;5694  font-family: "IBM Plex Mono", monospace;5695  font-size: 0.5625rem;5696  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5697  white-space: nowrap;5698  overflow: hidden;5699  text-overflow: ellipsis;5700  max-width: 110px;5701}57025703/* Tab-match badge on entry rows */5704.peach-tab-match-badge {5705  display: inline-block;5706  width: 6px;5707  height: 6px;5708  border-radius: 50%;5709  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5710  margin-left: 5px;5711  vertical-align: middle;5712  flex-shrink: 0;5713  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5714}57155716.peach-entry-row.is-tab-match {5717  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5718  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5719}57205721.peach-entry-row.is-tab-match:hover {5722  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5723}57245725/* Entry list stagger entrance */5726@keyframes peach-entry-fadein {5727  from { opacity: 0; transform: translateY(4px); }5728  to   { opacity: 1; transform: translateY(0); }5729}57305731.peach-vault-list .peach-entry-row {5732  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5733}57345735/* Button press micro-interaction */5736.peach-btn:active {5737  transform: scale(0.95);5738  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5739}57405741.peach-sort-btn:active,5742.peach-tag-filter-chip:active {5743  transform: scale(0.93);5744  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5745}57465747/* Password strength bar (Lock view + shared) */5748.peach-password-strength {5749  display: flex;5750  align-items: center;5751  gap: 8px;5752  margin-top: 6px;5753}57545755.peach-strength-bar {5756  flex: 1;5757  height: 3px;5758  border-radius: 2px;5759  background: var(--peach-t3);5760  overflow: hidden;5761}57625763.peach-strength-fill {5764  height: 100%;5765  border-radius: 2px;5766  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5767              background 300ms ease;5768}57695770.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5771.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5772.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5773.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }57745775.peach-strength-label {5776  font-family: "IBM Plex Mono", monospace;5777  font-style: italic;5778  font-size: 0.5625rem;5779  font-weight: 300;5780  letter-spacing: 0.06em;5781  color: var(--peach-t2);5782  min-width: 36px;5783  text-align: right;5784}57855786.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5787.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5788.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5789.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }57905791/* Duress form */5792.peach-duress-status {5793  padding: 2px 8px;5794  border-radius: 999px;5795  border: 1px solid var(--peach-t3);5796  font-family: "IBM Plex Mono", monospace;5797  font-size: 0.5625rem;5798  letter-spacing: 0.07em;5799  text-transform: uppercase;5800  color: var(--peach-t2);5801  flex-shrink: 0;5802}58035804.peach-duress-status.is-active {5805  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5806  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5807  color: var(--peach-t0);5808}58095810.peach-duress-form {5811  padding: 8px 0 4px;5812  display: flex;5813  flex-direction: column;5814  gap: 6px;5815}58165817.peach-duress-form .peach-label {5818  margin-top: 4px;5819}58205821.peach-duress-actions {5822  display: flex;5823  gap: 6px;5824  align-items: center;5825  margin-top: 4px;5826}58275828.peach-duress-actions .peach-btn:first-child {5829  margin-right: auto;5830}58315832/* Improved overlay spring entrance */5833.peach-overlay-view.ov-enter-up {5834  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5835}58365837@keyframes ov-enter-up-spring {5838  from { opacity: 0; transform: translateY(16px) scale(0.98); }5839  to   { opacity: 1; transform: translateY(0) scale(1); }5840}58415842.peach-overlay-view.ov-enter-right {5843  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5844}58455846@keyframes ov-enter-right-spring {5847  from { opacity: 0; transform: translateX(18px) scale(0.98); }5848  to   { opacity: 1; transform: translateX(0) scale(1); }5849}58505851/* ── Onboarding-mode restore screens (file import) ── */5852/* Used when MainImportView renders during onboarding (no vault yet).5853   Animates like a lock-screen transition. */5854.peach-lock-view {5855  position: absolute;5856  inset: 0;5857  display: flex;5858  flex-direction: column;5859  background:5860    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5861    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5862    var(--peach-bg);5863  z-index: 2;5864  overflow: hidden;5865  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5866}58675868.peach-lock-view-header {5869  display: flex;5870  align-items: center;5871  justify-content: space-between;5872  padding: 16px 18px 12px;5873  flex-shrink: 0;5874}58755876/* ───────── Settings: auto-lock select ───────── */5877.peach-settings-select {5878  font-family: "IBM Plex Mono", monospace;5879  font-size: 0.6875rem;5880  background: transparent;5881  border: 1px solid var(--peach-t3);5882  border-radius: 4px;5883  color: var(--peach-t1);5884  padding: 3px 6px;5885  cursor: pointer;5886  outline: none;5887}5888.peach-settings-select:focus {5889  border-color: var(--peach-accent);5890}58915892/* ───────── Duress status pill (new polished) ───────── */5893.peach-duress-status-pill {5894  font-family: "IBM Plex Mono", monospace;5895  font-size: 0.5625rem;5896  text-transform: uppercase;5897  letter-spacing: 0.12em;5898  padding: 2px 8px;5899  border-radius: 12px;5900  background: var(--peach-t3);5901  color: var(--peach-t2);5902  flex-shrink: 0;5903}5904.peach-duress-status-pill.is-active {5905  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5906  color: var(--peach-accent);5907}59085909/* ───────── Entry advanced disclosure (canary) ───────── */5910.peach-entry-advanced {5911  margin-top: 12px;5912  border-top: 1px solid var(--peach-t3);5913  padding-top: 10px;5914  position: relative;5915  z-index: 1;5916}5917.peach-entry-advanced-toggle {5918  display: flex;5919  align-items: center;5920  justify-content: space-between;5921  width: 100%;5922  background: transparent;5923  border: none;5924  cursor: pointer;5925  padding: 0;5926  color: var(--peach-t2);5927}5928.peach-canary-section {5929  margin-top: 10px;5930  display: grid;5931  gap: 6px;5932}59335934/* ───────── Import: merge/replace radio choices ───────── */5935.peach-import-choice {5936  display: flex;5937  align-items: flex-start;5938  gap: 10px;5939  padding: 8px 10px;5940  border: 1px solid var(--peach-t3);5941  border-radius: 10px;5942  cursor: pointer;5943  margin-bottom: 6px;5944  transition: border-color 120ms ease, background 120ms ease;5945}5946.peach-import-choice:hover {5947  border-color: var(--peach-accent);5948}5949.peach-import-choice input[type="radio"] {5950  margin-top: 3px;5951  accent-color: var(--peach-accent);5952  flex-shrink: 0;5953}5954.peach-import-choice-main {5955  display: flex;5956  flex-direction: column;5957  gap: 2px;5958  min-width: 0;5959}5960.peach-import-choice-label {5961  font-size: 0.75rem;5962  color: var(--peach-t0);5963}5964.peach-import-choice-sub {5965  font-size: 0.6875rem;5966  color: var(--peach-t2);5967  line-height: 1.5;5968}59695970/* ───────── Export: success confirmation strip ───────── */5971.peach-export-success {5972  display: flex;5973  align-items: flex-start;5974  gap: 10px;5975  padding: 12px;5976  border-radius: 12px;5977  border: 1px solid rgba(150, 175, 110, 0.3);5978  background: rgba(150, 175, 110, 0.08);5979  color: var(--peach-t0);5980  font-size: 0.75rem;5981  line-height: 1.55;5982}5983.peach-export-success-check {5984  color: rgba(150, 175, 110, 0.9);5985  font-size: 0.875rem;5986  flex-shrink: 0;5987}59885989/* ── Trash view ──────────────────────────────────────────────────────── */5990.peach-trash-entry-row {5991  display: flex;5992  align-items: center;5993  justify-content: space-between;5994  gap: 8px;5995  padding: 8px 0;5996  border-bottom: 1px solid var(--peach-border);5997}5998.peach-trash-entry-info {5999  flex: 1;6000  min-width: 0;6001  display: flex;6002  flex-direction: column;6003  gap: 2px;6004}6005.peach-trash-entry-title {6006  font-size: 0.8125rem;6007  color: var(--peach-t0);6008  overflow: hidden;6009  text-overflow: ellipsis;6010  white-space: nowrap;6011}6012.peach-trash-entry-meta {6013  font-family: var(--font-mono);6014  font-size: 0.5625rem;6015  color: var(--peach-t2);6016  letter-spacing: 0.04em;6017}6018.peach-trash-entry-actions {6019  display: flex;6020  align-items: center;6021  gap: 4px;6022  flex-shrink: 0;6023}6024.peach-trash-delete-btn {6025  background: transparent;6026  border: 0;6027  color: var(--peach-t3);6028  font-size: 1rem;6029  line-height: 1;6030  cursor: pointer;6031  padding: 2px 5px;6032  transition: color 0.15s;6033}6034.peach-trash-delete-btn:hover { color: var(--peach-breach); }6035.peach-trash-list {6036  overflow-y: auto;6037}6038.peach-trash-footer {6039  display: flex;6040  align-items: center;6041  gap: 8px;6042  padding: 8px 0 0;6043  border-top: 1px solid var(--peach-border);6044  margin-top: 4px;6045}6046.peach-trash-purge-all {6047  background: transparent;6048  border: 0;6049  color: var(--peach-t3);6050  font-size: 0.625rem;6051  cursor: pointer;6052  padding: 4px 0;6053  letter-spacing: 0.03em;6054  transition: color 0.2s;6055}6056.peach-trash-purge-all:hover { color: var(--peach-breach); }6057.peach-trash-purge-confirm-label {6058  font-size: 0.625rem;6059  color: var(--peach-t1);6060  flex: 1;6061}60626063/* ── Settings shortcuts grid ─────────────────────────────────────────── */6064.peach-shortcuts-grid {6065  display: grid;6066  grid-template-columns: auto 1fr;6067  gap: 6px 12px;6068  align-items: center;6069  padding: 4px 0;6070}6071.peach-shortcut-key {6072  font-family: var(--font-mono);6073  font-size: 0.625rem;6074  color: var(--peach-t0);6075  background: var(--peach-t3);6076  border-radius: 4px;6077  padding: 2px 6px;6078  white-space: nowrap;6079  text-align: center;6080}6081.peach-shortcut-desc {6082  font-size: 0.6875rem;6083  color: var(--peach-t1);6084}60856086/* ── Sort bar trash button ───────────────────────────────────────────── */6087.peach-sort-trash-btn {6088  display: flex;6089  align-items: center;6090  justify-content: center;6091  padding: 3px 5px;6092  background: transparent;6093  border: none;6094  cursor: pointer;6095  color: var(--peach-t2);6096  border-radius: 4px;6097  transition: color 140ms ease, background 140ms ease;6098}6099.peach-sort-trash-btn:hover {6100  color: var(--peach-t1);6101  background: var(--peach-t3);6102}6103.peach-sort-trash-btn.is-active {6104  color: var(--peach-accent);6105}61066107/* Accent color picker */6108.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }6109.peach-accent-picker {6110  display: flex;6111  flex-wrap: wrap;6112  gap: 7px;6113  padding: 2px 0;6114}6115.peach-accent-swatch {6116  width: 22px;6117  height: 22px;6118  border-radius: 50%;6119  border: 2px solid transparent;6120  cursor: pointer;6121  padding: 0;6122  transition: transform 100ms;6123  outline-offset: 2px;6124}6125.peach-accent-swatch:hover { transform: scale(1.15); }6126.peach-accent-swatch.is-active {6127  border-color: var(--peach-t0);6128  transform: scale(1.1);6129}61306131.peach-pill-group {6132  display: flex;6133  gap: 6px;6134}6135.peach-pill-group .peach-btn.is-active {6136  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);6137  border-color: var(--peach-accent);6138  color: var(--peach-t0);6139}61406141/* ── Card entry styles ───────────────────────────────────────── */6142.peach-card-number {6143  font-family: var(--peach-mono);6144  letter-spacing: 0.08em;6145}61466147.peach-card-network-badge {6148  font-size: 0.625rem;6149  padding: 1px 5px;6150  border-radius: 4px;6151  border: 0.5px solid var(--peach-border);6152  color: var(--peach-text-dim);6153  margin-left: 6px;6154  vertical-align: middle;6155}61566157.peach-card-expiry-row {6158  display: flex;6159  align-items: center;6160  gap: 8px;6161}61626163.peach-card-expiry-sep {6164  color: var(--peach-text-dim);6165}61666167/* ── Pro tier — upgrade screen ──────────────────────────────── */6168.peach-pro-mark {6169  font-size: 0.5625rem;6170  color: var(--peach-accent);6171  margin-left: 6px;6172  vertical-align: super;6173  opacity: 0.7;6174}61756176.peach-pro-mini-badge {6177  display: block;6178  font-size: 0.625rem;6179  font-style: italic;6180  color: var(--peach-accent);6181  letter-spacing: 0.04em;6182  margin-top: -2px;6183  padding-left: 2px;6184  opacity: 0.85;6185  text-align: center;6186}61876188.peach-wordmark-stack {6189  display: inline-flex;6190  flex-direction: column;6191  align-items: center;6192}61936194/* ── Pro tier — upgrade page ─────────────────────────────────── */6195/* ── Pro upgrade — redesigned editorial layout ─────────────────── */61966197.peach-pro-upgrade {6198  display: flex;6199  flex-direction: column;6200  align-items: stretch;6201  gap: 10px;6202  padding: 2px 2px 12px;6203}62046205.peach-pro-eyebrow {6206  margin: 0;6207  font-family: var(--font-ui);6208  font-size: 0.625rem;6209  font-weight: 500;6210  letter-spacing: 0.12em;6211  color: var(--peach-accent);6212}62136214.peach-pro-headline {6215  margin: 0;6216  font-family: var(--font-display, "Cormorant Garamond", serif);6217  font-size: 30px;6218  font-weight: 700;6219  font-style: normal;6220  line-height: 1.05;6221  color: var(--peach-t0);6222  letter-spacing: -0.01em;6223}6224.peach-pro-headline em {6225  font-style: italic;6226  font-weight: 400;6227  color: var(--peach-accent);6228}62296230.peach-pro-subtitle {6231  margin: 0;6232  font-size: 0.6875rem;6233  line-height: 1.5;6234  color: var(--peach-t1);6235}62366237/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6238.peach-pro-section-label {6239  margin: 6px 0 0;6240  font-family: var(--font-ui);6241  font-size: 0.5625rem;6242  font-weight: 500;6243  letter-spacing: 0.12em;6244  text-transform: uppercase;6245  color: var(--peach-t2);6246}62476248/* 2-column numbered feature grid */6249.peach-pro-grid {6250  display: grid;6251  grid-template-columns: 1fr 1fr;6252  border-top: 1px solid var(--peach-border);6253  border-left: 1px solid var(--peach-border);6254}62556256.peach-pro-grid-item {6257  display: flex;6258  flex-direction: column;6259  gap: 2px;6260  padding: 8px 9px;6261  border-right: 1px solid var(--peach-border);6262  border-bottom: 1px solid var(--peach-border);6263}62646265.peach-pro-grid-item--wide {6266  grid-column: 1 / -1;6267}62686269.peach-pro-grid-num {6270  font-family: var(--font-mono);6271  font-size: 0.5625rem;6272  color: var(--peach-accent);6273  letter-spacing: 0.06em;6274  opacity: 0.85;6275}62766277.peach-pro-grid-name {6278  font-size: 0.8125rem;6279  font-weight: 500;6280  color: var(--peach-t0);6281  line-height: 1.2;6282}62836284.peach-pro-grid-desc {6285  font-size: 0.625rem;6286  color: var(--peach-t1);6287  line-height: 1.4;6288}62896290.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6291  animation: peach-pulse-accent 600ms ease-out forwards;6292}62936294@keyframes peach-pulse-accent {6295  0%   { opacity: 1; transform: scale(1.2); }6296  100% { opacity: 0.85; transform: scale(1); }6297}62986299/* Actions */6300.peach-pro-upgrade-actions {6301  display: flex;6302  flex-direction: column;6303  align-items: stretch;6304  gap: 10px;6305}63066307.peach-pro-pricing {6308  margin: 0;6309  font-size: 1rem;6310  font-weight: 600;6311  color: var(--peach-t0);6312  letter-spacing: 0.01em;6313}6314.peach-pro-pricing-sub {6315  font-size: 0.75rem;6316  font-weight: 400;6317  color: var(--peach-t1);6318  letter-spacing: 0.02em;6319}63206321.peach-pro-upgrade-cta {6322  display: flex;6323  align-items: center;6324  justify-content: center;6325  text-decoration: none;6326  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6327  border: 1px solid var(--peach-accent);6328  border-radius: 10px;6329  color: var(--peach-accent);6330  font-family: var(--font-ui);6331  font-size: 0.8125rem;6332  font-weight: 600;6333  letter-spacing: 0.06em;6334  padding: 11px 16px;6335  transition: background 0.15s ease, color 0.15s ease;6336}6337.peach-pro-upgrade-cta:hover {6338  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6339}63406341.peach-pro-key-divider {6342  display: flex;6343  align-items: center;6344  gap: 8px;6345  color: var(--peach-t2);6346  font-size: 0.5625rem;6347  letter-spacing: 0.1em;6348}6349.peach-pro-key-divider::before,6350.peach-pro-key-divider::after {6351  content: "";6352  flex: 1;6353  height: 1px;6354  background: var(--peach-border);6355}63566357/* Inline key entry row */6358.peach-pro-key-inline {6359  display: flex;6360  align-items: center;6361  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6362  border: 1px solid var(--peach-border);6363  border-radius: 8px;6364  overflow: hidden;6365}6366.peach-pro-key-inline-input {6367  flex: 1;6368  background: transparent;6369  border: none;6370  outline: none;6371  color: var(--peach-t1);6372  font-family: var(--font-mono);6373  font-size: 0.625rem;6374  letter-spacing: 0.06em;6375  padding: 9px 10px;6376}6377.peach-pro-key-inline-input::placeholder {6378  color: var(--peach-t2);6379}6380.peach-pro-key-apply {6381  background: transparent;6382  border: none;6383  border-left: 1px solid var(--peach-border);6384  color: var(--peach-t2);6385  font-family: var(--font-ui);6386  font-size: 0.5625rem;6387  font-weight: 600;6388  letter-spacing: 0.08em;6389  padding: 9px 10px;6390  cursor: pointer;6391  transition: color 0.15s ease;6392  flex-shrink: 0;6393}6394.peach-pro-key-apply:not(:disabled):hover {6395  color: var(--peach-accent);6396}6397.peach-pro-key-apply:disabled {6398  opacity: 0.35;6399  cursor: not-allowed;6400}64016402/* ── Pro tier — key ceremony ─────────────────────────────────── */6403.peach-pro-key-ceremony {6404  display: flex;6405  flex-direction: column;6406  align-items: center;6407  gap: 12px;6408  padding: 20px 4px 16px;6409}64106411.peach-pro-key-ceremony .peach-lock-rune-string {6412  font-size: 1rem;6413  gap: 12px;6414  flex: 0;6415  justify-content: center;6416}64176418.peach-pro-key-ceremony-label {6419  margin: 0;6420  font-size: 0.6875rem;6421  color: var(--peach-t2);6422  font-style: italic;6423  letter-spacing: 0.04em;6424}64256426.peach-pro-key-input {6427  font-family: var(--font-mono, monospace);6428  letter-spacing: 0.06em;6429  text-align: center;6430  width: 100%;6431  box-sizing: border-box;6432}64336434.peach-pro-key-error {6435  margin: 0;6436  font-size: 0.75rem;6437  text-align: center;6438  color: var(--peach-breach, #e55);6439  padding: 0;6440}64416442.peach-pro-key-activate {6443  width: 100%;6444  text-align: center;6445  box-sizing: border-box;6446  padding: 10px 20px;6447  font-size: 0.8125rem;6448}64496450.peach-pro-key-cancel {6451  background: transparent;6452  border: 0;6453  color: var(--peach-t2);6454  font-size: 0.6875rem;6455  cursor: pointer;6456  padding: 2px 8px;6457  transition: color 0.2s;6458}64596460.peach-pro-key-cancel:hover { color: var(--peach-accent); }64616462/* ── Pro tier — active state ─────────────────────────────────── */6463.peach-pro-active {6464  display: flex;6465  flex-direction: column;6466  align-items: center;6467  gap: 0;6468  padding: 8px 4px 16px;6469  min-height: 280px;6470}64716472.peach-pro-active-hero {6473  display: flex;6474  flex-direction: column;6475  align-items: center;6476  gap: 6px;6477  padding: 20px 0 8px;6478}64796480.peach-pro-active-mark-wrap {6481  display: flex;6482  align-items: center;6483  justify-content: center;6484  margin-bottom: 4px;6485}64866487.peach-pro-active-mark {6488  width: 60px;6489  height: 60px;6490}64916492.peach-pro-active-title {6493  font-family: var(--font-display, var(--font-ui));6494  font-size: 26px;6495  margin: 0;6496  color: var(--peach-t0);6497  letter-spacing: 0.01em;6498}64996500.peach-pro-active-since {6501  margin: 0;6502  font-size: 0.6875rem;6503  color: var(--peach-t2);6504  font-style: italic;6505}65066507.peach-pro-active-features {6508  display: flex;6509  flex-direction: column;6510  gap: 8px;6511  width: 100%;6512  padding: 14px 8px 0;6513  border-top: 1px solid var(--peach-border);6514  flex: 1;6515}65166517.peach-pro-active-feature {6518  display: flex;6519  align-items: center;6520  gap: 9px;6521}65226523.peach-pro-active-feature-mark {6524  color: var(--peach-accent);6525  font-size: 0.625rem;6526  opacity: 0.65;6527  flex-shrink: 0;6528}65296530.peach-pro-active-feature-name {6531  font-size: 0.75rem;6532  color: var(--peach-t1);6533}65346535.peach-pro-deactivate {6536  align-self: center;6537  background: transparent;6538  border: 0;6539  color: var(--peach-t3);6540  font-size: 0.625rem;6541  cursor: pointer;6542  padding: 8px 0 0;6543  margin-top: 16px;6544  letter-spacing: 0.03em;6545  transition: color 0.2s;6546}65476548.peach-pro-deactivate:hover { color: var(--peach-t2); }65496550.peach-pro-deactivate:disabled {6551  opacity: 0.5;6552  cursor: default;6553}65546555/* ── Pro card activation sparkles & thank-you ── */6556button.peach-pro-active-mark-wrap {6557  background: transparent;6558  border: 0;6559  padding: 0;6560  cursor: pointer;6561  position: relative;6562  overflow: visible;6563}65646565.peach-pro-sparks {6566  position: absolute;6567  inset: 0;6568  pointer-events: none;6569  overflow: visible;6570}65716572.peach-pro-spark {6573  position: absolute;6574  top: 50%;6575  left: 50%;6576  font-size: 9px;6577  line-height: 1;6578  opacity: 0;6579  transform: translate(-50%, -50%);6580  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6581}65826583@keyframes peach-pro-spark-fly {6584  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6585  25%  { opacity: 1; }6586  100% {6587    opacity: 0;6588    transform: translate(6589      calc(-50% + var(--spark-x, 0px)),6590      calc(-50% + var(--spark-y, -40px))6591    ) scale(0.8);6592  }6593}65946595.peach-pro-thankyou-text {6596  margin: 4px 0 0;6597  font-size: 0.6875rem;6598  font-style: italic;6599  color: currentColor;6600  opacity: 0;6601  animation: peach-pro-thankyou-flash 2.5s ease both;6602}66036604@keyframes peach-pro-thankyou-flash {6605  0%   { opacity: 0; transform: translateY(4px); }6606  15%  { opacity: 0.75; transform: translateY(0); }6607  75%  { opacity: 0.75; }6608  100% { opacity: 0; }6609}66106611/* ── Pro advanced health remediation queue ──────────────────── */6612.peach-health-pro-queue {6613  display: flex;6614  flex-direction: column;6615  gap: 10px;6616  padding: 12px;6617  margin: 0 0 12px;6618  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6619  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6620  border-radius: 10px;6621}66226623.peach-health-pro-queue-head {6624  display: flex;6625  justify-content: space-between;6626  align-items: baseline;6627}66286629.peach-health-pro-queue-title {6630  font-size: 0.75rem;6631  font-weight: 500;6632  letter-spacing: 0.04em;6633  text-transform: uppercase;6634  color: var(--peach-accent);6635}66366637.peach-health-pro-queue-score {6638  font-size: 0.6875rem;6639  color: var(--peach-t2);6640}66416642.peach-health-pro-row {6643  display: flex;6644  gap: 10px;6645  align-items: center;6646  padding: 8px 0;6647  border-top: 1px solid var(--peach-border);6648}66496650.peach-health-pro-row-info {6651  flex: 1;6652  display: flex;6653  flex-direction: column;6654  gap: 4px;6655  min-width: 0;6656}66576658.peach-health-pro-action {6659  flex: 0 0 auto;6660  padding: 4px 8px;6661  font-size: 0.5625rem;6662  letter-spacing: 0.08em;6663  text-transform: uppercase;6664}66656666.peach-health-pro-row-name {6667  font-size: 0.8125rem;6668  color: var(--peach-t0);6669  overflow: hidden;6670  text-overflow: ellipsis;6671  white-space: nowrap;6672}66736674.peach-health-pro-row-meta {6675  font-size: 0.6875rem;6676  color: var(--peach-t2);6677}66786679.peach-health-pro-bar {6680  height: 2px;6681  background: var(--peach-border);6682  border-radius: 2px;6683  overflow: hidden;6684  margin-top: 2px;6685}66866687.peach-health-pro-bar-fill {6688  height: 100%;6689  background: var(--peach-accent);6690  transition: width 200ms ease-out;6691}66926693/* ── Pro activation celebration ── */6694@keyframes peach-pro-bloom {6695  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6696  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6697                 drop-shadow(0 0 48px var(--peach-glow)); }6698  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6699}67006701@keyframes peach-pro-wordmark-in {6702  from { opacity: 0; transform: translateY(4px); }6703  to   { opacity: 1; transform: translateY(0); }6704}67056706@keyframes peach-pro-fade-out {6707  from { opacity: 1; }6708  to   { opacity: 0; }6709}67106711.peach-pro-celebration {6712  background:6713    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6714    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6715    var(--peach-bg);6716  border: 1px solid var(--peach-t3);6717  box-shadow:6718    0 2px 8px rgba(0,0,0,0.55),6719    0 14px 48px rgba(0,0,0,0.7),6720    0 0 0 1px rgba(240,232,216,0.04);6721  overflow: hidden;6722  width: 320px;6723  height: 520px;6724  display: flex;6725  flex-direction: column;6726  align-items: center;6727  justify-content: center;6728  gap: 8px;6729  padding: 32px 24px;6730  text-align: center;6731}67326733.peach-pro-celebration.is-leaving {6734  animation: peach-pro-fade-out 400ms ease forwards;6735}67366737.peach-pro-bloom-target {6738  display: flex;6739  align-items: center;6740  justify-content: center;6741  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6742  margin-bottom: 12px;6743}67446745.peach-pro-bloom-icon {6746  width: 48px;6747  height: 48px;6748}67496750.peach-pro-wordmark {6751  font-family: var(--font-display);6752  font-size: 22px;6753  font-style: italic;6754  font-weight: 400;6755  color: var(--peach-accent);6756  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6757}67586759.peach-pro-thankyou {6760  font-size: 0.75rem;6761  font-style: italic;6762  color: var(--peach-t2);6763  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6764}676567666767/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6768.peach-pro-notice-banner {6769  display: flex;6770  align-items: center;6771  gap: 8px;6772  padding: 7px 12px;6773  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6774  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6775  font-size: 0.6875rem;6776  color: var(--peach-t2);6777  font-family: "IBM Plex Mono", monospace;6778  flex-shrink: 0;6779}67806781.peach-pro-notice-link {6782  background: none;6783  border: none;6784  padding: 0;6785  cursor: pointer;6786  font-size: 0.6875rem;6787  color: var(--peach-accent);6788  font-family: "IBM Plex Mono", monospace;6789  margin-left: auto;6790  white-space: nowrap;6791}67926793.peach-pro-notice-close {6794  background: none;6795  border: none;6796  padding: 0 0 0 4px;6797  cursor: pointer;6798  font-size: 0.625rem;6799  color: var(--peach-t3);6800  line-height: 1;6801}68026803/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6804   Renders over whatever view is showing. 60-second expiry; the popup ticks6805   the countdown each second and clears the banner when it hits zero. */6806.peach-pair-request-banner {6807  display: flex;6808  flex-direction: column;6809  gap: 8px;6810  padding: 10px 12px;6811  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6812  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6813  font-family: "IBM Plex Mono", monospace;6814  flex-shrink: 0;6815}68166817.peach-pair-toast {6818  padding: 8px 12px;6819  font-family: "IBM Plex Mono", monospace;6820  font-size: 0.75rem;6821  color: var(--peach-t1);6822  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6823  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6824  flex-shrink: 0;6825  text-align: center;6826}68276828.peach-pair-toast strong {6829  color: var(--peach-t0);6830  font-weight: 500;6831}68326833.peach-pair-request-header {6834  display: flex;6835  align-items: center;6836  gap: 8px;6837  font-size: 0.75rem;6838  color: var(--peach-t1);6839}68406841.peach-pair-request-mark {6842  font-size: 0.875rem;6843  display: inline-flex;6844  align-items: center;6845}68466847.peach-pair-request-icon {6848  width: 1em;6849  height: 1em;6850}68516852.peach-pair-request-title {6853  font-weight: 600;6854  color: var(--peach-t0);6855}68566857.peach-pair-request-countdown {6858  margin-left: auto;6859  font-variant-numeric: tabular-nums;6860  color: var(--peach-t2);6861  font-size: 0.6875rem;6862}68636864.peach-pair-request-body {6865  margin: 0;6866  font-size: 0.75rem;6867  color: var(--peach-t1);6868  line-height: 1.4;6869}68706871.peach-pair-request-body strong {6872  color: var(--peach-t0);6873  font-weight: 600;6874}68756876.peach-pair-request-actions {6877  display: flex;6878  gap: 8px;6879  justify-content: flex-end;6880}68816882/* ─── First-run onboarding ──────────────────────────────────────────────6883   Three-card welcome shown once before vault creation. The PeachScript6884   rune background drifts behind everything at very low opacity — it's6885   atmosphere, not focus. The cards themselves use the same panel6886   language as the rest of the popup so the transition into NewVault is6887   continuous, not a jarring switch of visual register. */68886889.peach-onboarding {6890  position: relative;6891  display: flex;6892  flex-direction: column;6893  width: 100%;6894  height: 100%;6895  padding: 16px 16px 18px;6896  box-sizing: border-box;6897  overflow: hidden;6898  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6899}69006901.peach-onboarding.is-completing {6902  animation: peach-onboard-exit 200ms ease-out forwards;6903}69046905.peach-rune-background {6906  position: absolute;6907  inset: 0;6908  width: 100%;6909  height: 100%;6910  pointer-events: none;6911  z-index: 0;6912  transition: opacity 500ms ease-out;6913}69146915.peach-onboarding.is-completing .peach-rune-background {6916  opacity: 0;6917}69186919.peach-onboarding-header {6920  position: relative;6921  z-index: 1;6922  display: flex;6923  align-items: center;6924  margin-bottom: 14px;6925}69266927.peach-onboarding-card {6928  position: relative;6929  z-index: 1;6930  flex: 1;6931  display: flex;6932  flex-direction: column;6933  gap: 10px;6934  padding: 22px 20px;6935  border-radius: 16px;6936  border: 1px solid var(--peach-t3);6937  background:6938    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6939  backdrop-filter: blur(3px);6940  -webkit-backdrop-filter: blur(3px);6941  box-shadow:6942    inset 0 1px 0 rgba(240, 232, 216, 0.04),6943    0 12px 28px rgba(0, 0, 0, 0.12);6944  cursor: pointer;6945  user-select: none;6946  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6947}69486949.peach-onboarding-card.is-exiting {6950  animation: peach-card-out 120ms ease-in forwards;6951  pointer-events: none;6952}69536954.peach-onboarding-card-headline {6955  margin: 0;6956  font-family: var(--font-display);6957  font-style: italic;6958  font-weight: 400;6959  font-size: 22px;6960  line-height: 1.05;6961  color: var(--peach-t0);6962  white-space: pre-line;6963}69646965.peach-onboarding-divider {6966  margin: 4px 0 6px;6967  border: 0;6968  border-top: 1px solid var(--peach-t3);6969  width: 100%;6970}69716972.peach-onboarding-body {6973  margin: 0;6974  font-size: 0.8125rem;6975  line-height: 1.6;6976  color: var(--peach-t1);6977}69786979.peach-onboarding-warning {6980  display: flex;6981  align-items: flex-start;6982  gap: 8px;6983  margin: 6px 0 0;6984  padding-top: 8px;6985  border-top: 1px dashed var(--peach-t3);6986  font-size: 0.8125rem;6987  line-height: 1.5;6988  color: var(--peach-t1);6989}69906991.peach-onboarding-warning-icon {6992  color: var(--peach-accent);6993  font-size: 0.8125rem;6994  line-height: 1.5;6995  flex: 0 0 auto;6996}69976998.peach-onboarding-nav {6999  position: relative;7000  z-index: 1;7001  display: flex;7002  align-items: center;7003  justify-content: space-between;7004  margin-top: 12px;7005  padding: 0 4px;7006}70077008.peach-onboarding-dots {7009  display: flex;7010  align-items: center;7011  gap: 6px;7012}70137014.peach-onboarding-dot {7015  width: 6px;7016  height: 6px;7017  border-radius: 50%;7018  background: var(--peach-t2);7019  transition: width 200ms ease, height 200ms ease, background 200ms ease;7020}70217022.peach-onboarding-dot.is-active {7023  width: 8px;7024  height: 8px;7025  background: var(--peach-accent);7026}70277028.peach-onboarding-next {7029  background: none;7030  border: none;7031  padding: 4px 0;7032  cursor: pointer;7033  font-family: "IBM Plex Mono", monospace;7034  font-size: 0.6875rem;7035  letter-spacing: 0.04em;7036  color: var(--peach-t1);7037  transition: color 150ms ease;7038}70397040.peach-onboarding-next:hover {7041  color: var(--peach-t0);7042}70437044.peach-onboarding-next:disabled {7045  opacity: 0.5;7046  cursor: default;7047}70487049.peach-onboarding-back {7050  background: none;7051  border: none;7052  padding: 4px 0;7053  cursor: pointer;7054  font-family: "IBM Plex Mono", monospace;7055  font-size: 0.6875rem;7056  letter-spacing: 0.04em;7057  color: var(--peach-t2);7058  transition: color 150ms ease;7059}70607061.peach-onboarding-back:hover {7062  color: var(--peach-t0);7063}70647065.peach-onboarding-back:disabled {7066  opacity: 0.5;7067  cursor: default;7068}70697070/* Reserve back-button width on the first card so the dots stay centred */7071.peach-onboarding-back-spacer {7072  width: 44px;7073}70747075.peach-onboarding-choice-row {7076  display: grid;7077  grid-template-columns: 1fr;7078  gap: 8px;7079  margin-top: 14px;7080}70817082.peach-onboarding-choice {7083  min-height: 34px;7084  border: 1px solid color-mix(in srgb, var(--peach-t0) 16%, transparent);7085  border-radius: 8px;7086  padding: 8px 10px;7087  background: color-mix(in srgb, var(--peach-t0) 7%, transparent);7088  color: var(--peach-t0);7089  font-size: 0.76rem;7090  font-weight: 700;7091  text-align: left;7092}70937094.peach-onboarding-choice--adopt {7095  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);7096  background: color-mix(in srgb, var(--peach-accent) 13%, transparent);7097}70987099.peach-adopt-vault {7100  position: relative;7101  min-height: 100%;7102  padding: 22px;7103  display: grid;7104  place-items: center;7105}71067107.peach-adopt-card {7108  position: relative;7109  z-index: 1;7110  width: min(100%, 330px);7111  padding: 20px;7112  border-radius: 8px;7113  border: 1px solid color-mix(in srgb, var(--peach-t0) 13%, transparent);7114  background: color-mix(in srgb, var(--peach-surface) 90%, transparent);7115  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.28);7116}71177118.peach-adopt-card h1 {7119  margin: 0 0 10px;7120  font-size: 1.28rem;7121  line-height: 1.15;7122}71237124.peach-adopt-card p {7125  margin: 0 0 14px;7126  color: var(--peach-t1);7127  line-height: 1.35;7128}71297130.peach-adopt-input {7131  margin-bottom: 12px;7132}71337134.peach-adopt-card textarea.peach-adopt-input {7135  width: 100%;7136  resize: vertical;7137  overflow-wrap: anywhere;7138  font-family: "IBM Plex Mono", monospace;7139  font-size: 0.64rem;7140}71417142.peach-adopt-qr-video {7143  display: block;7144  width: 100%;7145  max-height: 220px;7146  margin: 0 0 12px;7147  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);7148  border-radius: 8px;7149  background: #000;7150  object-fit: cover;7151}71527153.peach-adoption-source-invitation {7154  display: flex;7155  flex-direction: column;7156  align-items: center;7157  gap: 10px;7158  padding: 4px 18px 16px;7159  text-align: center;7160}71617162.peach-pair-qr {7163  display: block;7164  max-width: min(224px, 100%);7165  height: auto;7166  padding: 8px;7167  border-radius: 10px;7168  background: #fff;7169}71707171.peach-adopt-card > .peach-btn + .peach-btn {7172  margin-top: 8px;7173}71747175.peach-adopt-actions {7176  display: flex;7177  gap: 10px;7178  margin-top: 14px;7179}71807181.peach-adopt-actions > button {7182  flex: 1;7183}71847185.peach-adopt-birds {7186  width: 120px;7187  height: 54px;7188  margin-bottom: 14px;7189  position: relative;7190}71917192.peach-adopt-birds::before {7193  content: "";7194  position: absolute;7195  left: 29px;7196  right: 29px;7197  top: 25px;7198  height: 1px;7199  background: color-mix(in srgb, var(--peach-accent) 50%, transparent);7200}72017202.peach-adopt-birds span {7203  position: absolute;7204  top: 11px;7205  width: 34px;7206  height: 28px;7207  border-radius: 50% 50% 46% 46%;7208  background: color-mix(in srgb, var(--peach-accent) 45%, var(--peach-t0));7209  box-shadow: 0 0 18px color-mix(in srgb, var(--peach-accent) 24%, transparent);7210  animation: peach-adopt-bob 1.8s ease-in-out infinite;7211}72127213.peach-adopt-birds span:first-child {7214  left: 12px;7215}72167217.peach-adopt-birds span:last-child {7218  right: 12px;7219  animation-delay: 0.25s;7220}72217222.peach-adopt-sas {7223  margin: 18px 0;7224  padding: 14px;7225  border-radius: 8px;7226  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);7227  color: var(--peach-t0);7228  font-size: 1.35rem;7229  font-weight: 800;7230  font-variant-numeric: tabular-nums;7231  text-align: center;7232}72337234@keyframes peach-adopt-bob {7235  0%, 100% { transform: translateY(0); }7236  50% { transform: translateY(-5px); }7237}72387239.peach-onboarding-mobile-card-buttons {7240  display: flex;7241  flex-direction: column;7242  gap: 8px;7243  margin-top: 16px;7244}72457246@keyframes peach-onboard-enter {7247  from { opacity: 0; transform: translateY(20px); }7248  to   { opacity: 1; transform: translateY(0); }7249}72507251@keyframes peach-onboard-exit {7252  from { opacity: 1; }7253  to   { opacity: 0; }7254}72557256@keyframes peach-card-in {7257  from { opacity: 0; transform: translateX(12px); }7258  to   { opacity: 1; transform: translateX(0); }7259}72607261@keyframes peach-card-out {7262  from { opacity: 1; transform: translateX(0); }7263  to   { opacity: 0; transform: translateX(-12px); }7264}72657266/* ─── New vault screen — matched to onboarding card language ─────────── */72677268/* Two classes so this beats the shared .peach-screen.lock-screen--vault-stage7269   rule (same element) without loosening the unlock/restore screens. The7270   create-vault screen is the only vault-stage view tall enough to overflow7271   the 520px popup, so its spacing is tuned to fit header → card → restore →7272   recovery warning with nothing clipped. */7273.peach-screen.peach-newvault {7274  position: relative;7275  display: flex;7276  flex-direction: column;7277  gap: 12px;7278  padding: 14px 16px 12px;7279  overflow: hidden;7280}72817282/* Suppress the warm-blob ambient art inherited from .lock-screen — the7283   new vault card now carries the visual weight. */7284.peach-newvault::before {7285  content: none;7286}72877288.peach-newvault-header {7289  position: relative;7290  z-index: 2;7291  display: flex;7292  align-items: center;7293  gap: 10px;7294  margin-bottom: 2px;7295}72967297.peach-newvault-back {7298  display: inline-flex;7299  align-items: center;7300  gap: 4px;7301  background: transparent;7302  border: none;7303  color: var(--peach-t2);7304  font-family: "IBM Plex Mono", monospace;7305  font-size: 0.625rem;7306  letter-spacing: 0.06em;7307  cursor: pointer;7308  padding: 4px 6px;7309  border-radius: 6px;7310  transition: color 120ms ease, background 120ms ease;7311}73127313.peach-newvault-back:hover {7314  color: var(--peach-t0);7315  background: rgba(240, 232, 216, 0.04);7316}73177318.peach-newvault-mark {7319  position: absolute;7320  right: -12px;7321  top: 6px;7322  width: 110px;7323  height: 110px;7324  pointer-events: none;7325  opacity: 0.10;7326  filter: saturate(0.9);7327  z-index: 0;7328}7329.peach-newvault-mark-art {7330  width: 100%;7331  height: 100%;7332}7333.peach-newvault-mark-art path:nth-child(1) {7334  fill: rgba(123, 144, 96, 0.88);7335}7336.peach-newvault-mark-art path:nth-child(2) {7337  stroke: rgba(94, 122, 66, 0.95);7338}73397340.peach-newvault-card {7341  position: relative;7342  z-index: 1;7343  display: flex;7344  flex-direction: column;7345  gap: 8px;7346  padding: 16px 20px 14px;7347  border-radius: 16px;7348  border: 1px solid var(--peach-t3);7349  background:7350    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7351  backdrop-filter: blur(3px);7352  -webkit-backdrop-filter: blur(3px);7353  box-shadow:7354    inset 0 1px 0 rgba(240, 232, 216, 0.04),7355    0 12px 28px rgba(0, 0, 0, 0.12);7356  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7357}73587359.peach-newvault-headline {7360  margin: 0;7361  font-family: var(--font-display);7362  font-style: italic;7363  font-weight: 400;7364  font-size: 24px;7365  line-height: 1.05;7366  color: var(--peach-t0);7367  white-space: pre-line;7368}73697370.peach-newvault-divider {7371  margin: 2px 0 4px;7372  border: 0;7373  border-top: 1px solid var(--peach-t3);7374  width: 100%;7375}73767377.peach-newvault-field {7378  display: flex;7379  flex-direction: column;7380  gap: 4px;7381}73827383.peach-newvault-label-row {7384  display: flex;7385  align-items: center;7386  justify-content: space-between;7387}73887389/* Monospace input scaled to the card. Replaces the 22px unlock-input7390   so the placeholder no longer overflows and the field reads as part7391   of the same surface as the body copy. */7392.peach-newvault-input {7393  font-size: 0.875rem;7394  letter-spacing: 0.18em;7395  padding: 8px 0;7396}7397.peach-newvault-input::placeholder {7398  letter-spacing: 0.18em;7399  color: var(--peach-t2);7400}74017402.peach-newvault-hint {7403  margin: 2px 0 0;7404  font-family: "IBM Plex Mono", monospace;7405  font-size: 0.625rem;7406  color: var(--peach-t2);7407  letter-spacing: 0.04em;7408}74097410.peach-newvault-submit {7411  margin-top: 4px;7412}74137414.peach-newvault-warning {7415  display: flex;7416  align-items: flex-start;7417  gap: 8px;7418  margin: 2px 0 0;7419  padding-top: 8px;7420  border-top: 1px dashed var(--peach-t3);7421  font-size: 0.75rem;7422  line-height: 1.45;7423  color: var(--peach-t1);7424}74257426.peach-newvault-warning-icon {7427  color: var(--peach-accent);7428  font-size: 0.8125rem;7429  line-height: 1.4;7430  flex: 0 0 auto;7431}74327433/* Restore options sit inside the card, directly under "create vault", so7434   they are always reachable without scrolling. The top divider mirrors the7435   warning's so the choice reads as a deliberate fork, not a footnote. */7436.peach-newvault-restore {7437  position: relative;7438  z-index: 1;7439  display: flex;7440  flex-direction: column;7441  gap: 4px;7442  margin-top: 4px;7443  padding-top: 10px;7444  border-top: 1px dashed var(--peach-t3);7445}74467447/* Settings body — warm accent gradient gives the glass something to blur against */7448.peach-settings-body {7449  background:7450    radial-gradient(7451      ellipse at 30% 20%,7452      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7453      transparent 60%7454    );7455}74567457/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7458/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7459 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7460 * (replacing the vault from a backup file) and "hazard" for actions that7461 * are absolutely irreversible (Panic). Both use the same card scaffold so7462 * they read as a pair, but the colour family signals the severity at a7463 * glance — yellow for caution, red for don't.7464 */7465.peach-danger-card {7466  --danger-tint: 235, 158, 52; /* amber */7467  display: flex;7468  flex-direction: column;7469  gap: 8px;7470  padding: 14px;7471  margin-top: 10px;7472  border-radius: 12px;7473  border: 1px solid rgba(var(--danger-tint), 0.32);7474  background:7475    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7476    rgba(var(--danger-tint), 0.04);7477  box-shadow:7478    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7479    0 0 24px rgba(var(--danger-tint), 0.04);7480  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7481}74827483.peach-danger-card:hover {7484  border-color: rgba(var(--danger-tint), 0.55);7485  box-shadow:7486    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7487    0 0 36px rgba(var(--danger-tint), 0.10);7488}74897490.peach-danger-card--hazard {7491  --danger-tint: 220, 38, 38; /* red */7492}74937494.peach-danger-card-head {7495  display: flex;7496  align-items: center;7497  gap: 10px;7498}74997500.peach-danger-card-glyph {7501  width: 28px;7502  height: 28px;7503  flex-shrink: 0;7504  display: flex;7505  align-items: center;7506  justify-content: center;7507  border-radius: 8px;7508  background: rgba(var(--danger-tint), 0.12);7509  color: rgba(var(--danger-tint), 0.95);7510  font-size: 1rem;7511  line-height: 1;7512}75137514.peach-danger-card-title {7515  margin: 0;7516  font-size: 0.8125rem;7517  font-weight: 600;7518  color: rgba(var(--danger-tint), 0.92);7519  letter-spacing: 0.01em;7520}75217522.peach-danger-card-copy {7523  margin: 0;7524  font-size: 0.6875rem;7525  line-height: 1.5;7526  color: var(--peach-t2);7527}75287529.peach-danger-card-button {7530  width: 100%;7531  padding: 9px;7532  margin-top: 4px;7533  background: transparent;7534  border: 1px solid rgba(var(--danger-tint), 0.45);7535  border-radius: 8px;7536  color: rgba(var(--danger-tint), 0.9);7537  font-size: 0.75rem;7538  font-weight: 500;7539  letter-spacing: 0.02em;7540  cursor: pointer;7541  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7542}75437544.peach-danger-card-button:hover {7545  background: rgba(var(--danger-tint), 0.10);7546  border-color: rgba(var(--danger-tint), 0.75);7547  color: rgb(var(--danger-tint));7548}75497550.peach-adoption-consent-backdrop {7551  position: fixed;7552  inset: 0;7553  z-index: 1000;7554  display: grid;7555  place-items: center;7556  padding: 18px;7557  background: rgba(15, 10, 5, 0.72);7558}75597560.peach-adoption-consent {7561  width: min(100%, 340px);7562  border: 1px solid color-mix(in srgb, #f59e0b 54%, var(--peach-border));7563  border-radius: 8px;7564  padding: 18px;7565  background: color-mix(in srgb, #2c1b08 84%, var(--peach-surface));7566  color: var(--peach-t0);7567  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.42);7568}75697570.peach-adoption-consent-icon {7571  width: 32px;7572  height: 32px;7573  display: grid;7574  place-items: center;7575  border-radius: 50%;7576  background: #f59e0b;7577  color: #1f1304;7578  font-weight: 800;7579}75807581.peach-adoption-consent h2 {7582  margin: 12px 0 8px;7583  font-size: 1.22rem;7584  line-height: 1.15;7585}75867587.peach-adoption-consent-device,7588.peach-adoption-consent-warning {7589  margin: 0 0 12px;7590  color: var(--peach-t1);7591  line-height: 1.35;7592}75937594.peach-adoption-consent-device strong {7595  color: var(--peach-t0);7596}75977598.peach-adoption-consent-warning {7599  color: #ffd79a;7600}76017602.peach-adoption-consent-sas {7603  display: flex;7604  justify-content: space-between;7605  align-items: center;7606  gap: 12px;7607  margin: 14px 0;7608  padding: 10px;7609  border-radius: 6px;7610  background: rgba(245, 158, 11, 0.12);7611}76127613/* Tracking, not interleaved spaces: eight digits with per-digit spaces no7614   longer fit beside the label at 320px. */7615.peach-adoption-consent-sas strong {7616  font-variant-numeric: tabular-nums;7617  letter-spacing: 0.18em;7618  white-space: nowrap;7619}76207621.peach-adoption-consent-actions {7622  display: flex;7623  justify-content: space-between;7624  gap: 10px;7625  margin-top: 16px;7626}76277628.peach-adoption-consent-actions > button {7629  flex: 1;7630}76317632/* ── Panic flow (three-step destruction) ───────────────────────────────── */7633.peach-panic {7634  display: flex;7635  flex-direction: column;7636  flex: 1;7637  min-height: 0;7638  padding: 28px 20px 20px;7639  gap: 18px;7640  overflow-y: auto;7641  scrollbar-width: none;7642  -ms-overflow-style: none;7643}76447645.peach-panic::-webkit-scrollbar { display: none; }76467647.peach-panic-step2 {7648  background: rgba(220, 38, 38, 0.04);7649}76507651.peach-panic-step3 {7652  position: relative;7653  background: #0f0505;7654  color: #ffffff;7655  overflow: hidden;7656}76577658.peach-panic-rune-bg {7659  position: absolute;7660  inset: 0;7661  opacity: 0.22;7662  pointer-events: none;7663  overflow: hidden;7664}76657666.peach-panic-rune-bg canvas {7667  width: 100% !important;7668  height: 100% !important;7669}76707671.peach-panic-icon {7672  font-size: 32px;7673  color: rgb(220, 38, 38);7674  line-height: 1;7675}76767677.peach-panic-title {7678  margin: 0;7679  font-size: 18px;7680  font-weight: 500;7681  color: var(--peach-t1);7682}76837684.peach-panic-title--severe {7685  font-size: 20px;7686  font-weight: 700;7687  color: rgb(220, 38, 38);7688}76897690.peach-panic-body {7691  margin: 0;7692  font-size: 0.8125rem;7693  line-height: 1.55;7694  color: var(--peach-t2);7695}76967697.peach-panic-body--severe {7698  color: rgba(220, 38, 38, 0.85);7699}77007701.peach-panic-body--final {7702  font-size: 1rem;7703  font-weight: 700;7704  color: rgb(255, 80, 80);7705  line-height: 1.4;7706}77077708.peach-panic-body--final-intro {7709  font-size: 1rem;7710  color: #ffffff;7711  font-weight: 400;7712}77137714.peach-panic-divider {7715  height: 1px;7716  background: rgba(255, 255, 255, 0.08);7717  margin: 4px 0;7718}77197720.peach-panic-confirm-input {7721  width: 100%;7722  padding: 10px 12px;7723  background: rgba(255, 255, 255, 0.02);7724  border: 1px solid rgba(220, 38, 38, 0.4);7725  border-radius: 8px;7726  color: var(--peach-t1);7727  font-family: "IBM Plex Mono", monospace;7728  font-size: 0.875rem;7729  letter-spacing: 0.12em;7730  text-transform: uppercase;7731}77327733.peach-panic-confirm-input:focus {7734  outline: none;7735  border-color: rgb(220, 38, 38);7736}77377738.peach-panic-confirm-input--match {7739  border-color: rgb(220, 38, 38);7740  color: rgb(220, 38, 38);7741}77427743.peach-panic-confirm-label {7744  font-size: 0.6875rem;7745  color: var(--peach-t2);7746  margin: 0 0 -8px;7747  letter-spacing: 0.06em;7748}77497750.peach-panic-actions {7751  display: flex;7752  flex-direction: column;7753  gap: 10px;7754  margin-top: auto;7755}77567757.peach-panic-button {7758  width: 100%;7759  padding: 12px;7760  border-radius: 8px;7761  font-size: 0.8125rem;7762  cursor: pointer;7763  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7764}77657766.peach-panic-button--primary {7767  background: var(--peach-accent);7768  border: 1px solid var(--peach-accent);7769  color: #ffffff;7770  font-weight: 600;7771}77727773.peach-panic-button--primary:hover {7774  background: color-mix(in srgb, var(--peach-accent) 88%, white);7775}77767777.peach-panic-button--danger {7778  background: rgb(220, 38, 38);7779  border: 1px solid rgb(220, 38, 38);7780  color: #ffffff;7781  font-weight: 600;7782}77837784.peach-panic-button--danger:disabled {7785  opacity: 0.35;7786  cursor: not-allowed;7787}77887789.peach-panic-button--ghost {7790  background: transparent;7791  border: 1px solid rgba(255, 255, 255, 0.18);7792  color: var(--peach-t2);7793}77947795.peach-panic-button--ghost:hover {7796  border-color: rgba(255, 255, 255, 0.32);7797  color: var(--peach-t1);7798}77997800.peach-panic-link {7801  background: transparent;7802  border: none;7803  padding: 4px 0;7804  color: rgba(220, 38, 38, 0.65);7805  font-size: 0.75rem;7806  cursor: pointer;7807  text-align: left;7808  text-decoration: underline;7809  text-underline-offset: 3px;7810}78117812.peach-panic-link:hover {7813  color: rgb(220, 38, 38);7814}78157816.peach-panic-bar {7817  background: rgb(220, 38, 38);7818  padding: 16px 20px;7819  margin: -28px -20px 0;7820  text-align: center;7821  font-size: 0.8125rem;7822  font-weight: 700;7823  letter-spacing: 0.12em;7824  color: #ffffff;7825}78267827.peach-panic-final-button {7828  width: 100%;7829  padding: 14px;7830  background: rgb(220, 38, 38);7831  border: none;7832  border-radius: 8px;7833  color: #ffffff;7834  font-size: 0.875rem;7835  font-weight: 700;7836  letter-spacing: 0.08em;7837  text-transform: uppercase;7838  cursor: pointer;7839  animation: peach-panic-pulse 2s ease-in-out infinite;7840}78417842.peach-settings-license {7843  margin-top: 10px;7844  padding-top: 10px;7845  border-top: 1px solid var(--peach-t3);7846}78477848.peach-settings-label {7849  font-size: 0.625rem;7850  letter-spacing: 0.08em;7851  color: var(--peach-t3);7852  display: block;7853  margin-bottom: 6px;7854}78557856.peach-settings-license-row {7857  display: flex;7858  align-items: center;7859  justify-content: space-between;7860  gap: 8px;7861}78627863.peach-settings-license-key {7864  font-family: 'IBM Plex Mono', monospace;7865  font-size: 0.75rem;7866  color: var(--peach-t0);7867  letter-spacing: 0.04em;7868  word-break: break-all;7869  flex: 1;7870  min-width: 0;7871}78727873.peach-settings-license-key--masked {7874  font-family: 'IBM Plex Mono', monospace;7875  font-size: 0.6rem;7876  color: var(--peach-t1);7877  letter-spacing: 0.18em;7878  user-select: none;7879}78807881.peach-settings-license-actions {7882  display: flex;7883  align-items: center;7884  gap: 2px;7885  flex-shrink: 0;7886}78877888.peach-settings-license-copy {7889  font-size: 0.6875rem;7890  color: var(--peach-accent);7891  background: transparent;7892  border: none;7893  cursor: pointer;7894  padding: 4px 8px;7895  border-radius: 4px;7896  flex-shrink: 0;7897  transition: opacity 150ms ease;7898}78997900.peach-settings-license-copy:hover {7901  opacity: 0.75;7902}79037904.peach-settings-license-toggle {7905  display: flex;7906  align-items: center;7907  justify-content: center;7908  background: transparent;7909  border: none;7910  cursor: pointer;7911  padding: 4px 6px;7912  border-radius: 4px;7913  color: var(--peach-t2);7914  transition: color 150ms ease;7915}79167917.peach-settings-license-toggle:hover {7918  color: var(--peach-t1);7919}79207921@keyframes peach-panic-pulse {7922  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7923  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7924}79257926[data-motion="reduce"] .peach-panic-final-button {7927  animation: none;7928}79297930/* Vault History — Settings → Vault sub-view */79317932.peach-history-list {7933  border: 1px solid var(--peach-border);7934  border-radius: 8px;7935  overflow: hidden;7936  margin: 8px 0 4px;7937}79387939.peach-history-row {7940  display: flex;7941  align-items: center;7942  justify-content: space-between;7943  padding: 9px 12px;7944  gap: 10px;7945  border-bottom: 1px solid var(--peach-border);7946}79477948.peach-history-row:last-child {7949  border-bottom: none;7950}79517952.peach-history-meta {7953  display: flex;7954  flex-direction: column;7955  gap: 2px;7956  min-width: 0;7957  flex: 1;7958}79597960.peach-history-time {7961  font-size: 0.75rem;7962  font-family: 'IBM Plex Mono', ui-monospace, monospace;7963  color: var(--peach-t0);7964  white-space: nowrap;7965  overflow: hidden;7966  text-overflow: ellipsis;7967}79687969.peach-history-sub {7970  font-size: 0.625rem;7971  color: var(--peach-t2);7972  letter-spacing: 0.06em;7973  text-transform: uppercase;7974  white-space: nowrap;7975  overflow: hidden;7976  text-overflow: ellipsis;7977}79787979.peach-history-btn {7980  flex-shrink: 0;7981  white-space: nowrap;7982  min-width: 56px;7983  text-align: center;7984}79857986.peach-history-btn.is-busy {7987  opacity: 0.65;7988}79897990.peach-history-footer {7991  font-size: 0.625rem;7992  color: var(--peach-t3);7993  letter-spacing: 0.05em;7994  text-align: right;7995  margin: 0;7996  padding: 2px 0 0;7997}79987999/* ── Context menu + swipe-copy flash ─────────────────────── */8000.peach-context-menu-backdrop {8001  position: fixed;8002  inset: 0;8003  background: rgba(0, 0, 0, 0.45);8004  z-index: 100;8005  display: flex;8006  align-items: flex-end;8007  justify-content: center;8008  animation: peach-ctx-fade 140ms ease both;8009}8010.peach-context-menu {8011  width: min(360px, calc(100vw - 24px));8012  margin-bottom: max(env(safe-area-inset-bottom), 12px);8013  background: var(--peach-bg);8014  border: 1px solid var(--peach-t3);8015  border-radius: 14px;8016  padding: 6px;8017  display: flex;8018  flex-direction: column;8019  gap: 2px;8020  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);8021  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;8022}8023@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }8024@keyframes peach-ctx-rise {8025  from { transform: translateY(16px); opacity: 0; }8026  to   { transform: translateY(0);    opacity: 1; }8027}8028.peach-context-menu-item {8029  background: transparent;8030  color: var(--peach-t0);8031  border: 0;8032  border-radius: 10px;8033  padding: 12px 14px;8034  text-align: left;8035  font: inherit;8036  cursor: pointer;8037}8038.peach-context-menu-item:hover,8039.peach-context-menu-item:focus-visible {8040  background: var(--peach-t3);8041}8042.peach-context-menu-item--danger {8043  color: var(--peach-health-bad, #d96868);8044}8045.peach-context-menu-item--cancel {8046  color: var(--peach-t2);8047  margin-top: 4px;8048  border-top: 1px solid var(--peach-t3);8049  border-radius: 0 0 10px 10px;8050}80518052/* Swipe-to-copy flash */8053.peach-entry-row.is-copy-flash {8054  animation: peach-copy-flash 600ms ease both;8055}8056@keyframes peach-copy-flash {8057  0%   { background: transparent; }8058  20%  { background: rgba(217, 153, 51, 0.32); }8059  100% { background: transparent; }8060}80618062html { font-size: 16px; }80638064/* ── Recovery word entry ─────────────────────────────────────────── */8065.peach-lock-recover-link {8066  display: block;8067  width: 100%;8068  margin-top: 12px;8069  background: none;8070  border: none;8071  font-family: "IBM Plex Mono", monospace;8072  font-size: 0.625rem;8073  letter-spacing: 0.06em;8074  color: var(--peach-t2);8075  cursor: pointer;8076  text-align: center;8077  padding: 4px;8078  transition: color 120ms ease;8079}8080.peach-lock-recover-link:hover {8081  color: var(--peach-t0);8082}80838084.lock-screen--recovery {8085  display: flex;8086  flex-direction: column;8087  align-items: stretch;8088  padding: 12px 20px 24px;8089  overflow: hidden;8090}80918092.peach-recovery-nav {8093  display: flex;8094  align-items: center;8095  position: relative;8096  z-index: 1;8097  margin-bottom: 4px;8098}80998100/* Mask runes to the top decorative band only — keep inputs and the8101   bottom CTA button clear. The bottom of the popup is reserved for8102   submit buttons; rendering runes there overlaps the button glyph. */8103.peach-rune-background--recovery {8104  -webkit-mask-image: linear-gradient(8105    to bottom,8106    black 0px, black 85px,8107    transparent 110px,8108    transparent 100%8109  );8110  mask-image: linear-gradient(8111    to bottom,8112    black 0px, black 85px,8113    transparent 110px,8114    transparent 100%8115  );8116}81178118.peach-recovery-header {8119  text-align: center;8120  margin-bottom: 16px;8121  margin-top: 4px;8122}8123.peach-recovery-header .peach-onboarding-headline {8124  font-size: 1.25rem;8125  font-weight: 300;8126  letter-spacing: 0.02em;8127  margin: 0 0 4px;8128}8129.peach-recovery-header .peach-hint {8130  font-family: "IBM Plex Mono", monospace;8131  font-size: 0.625rem;8132  color: var(--peach-t2);8133  letter-spacing: 0.04em;8134  margin: 0;8135}81368137/* 12-word grid: 2 columns × 6 rows */8138.peach-recovery-grid {8139  display: grid;8140  grid-template-columns: repeat(2, 1fr);8141  gap: 12px 20px;8142  width: 100%;8143  margin-bottom: 0;8144}81458146.peach-recovery-word-slot {8147  display: flex;8148  align-items: center;8149  gap: 6px;8150  min-width: 0;8151}81528153.peach-recovery-word-index {8154  font-family: "IBM Plex Mono", monospace;8155  font-size: 0.5rem;8156  color: rgba(255, 255, 255, 0.35);8157  min-width: 14px;8158  flex-shrink: 0;8159  text-align: right;8160  letter-spacing: 0.04em;8161}81628163.peach-recovery-word-input {8164  flex: 1;8165  min-width: 0;8166  background: transparent;8167  border: none;8168  border-bottom: 1px solid rgba(255, 255, 255, 0.22);8169  color: var(--peach-t0);8170  font-family: "IBM Plex Mono", monospace;8171  font-size: 0.6875rem;8172  letter-spacing: 0.06em;8173  padding: 5px 2px 4px;8174  outline: none;8175  text-transform: lowercase;8176  transition: border-color 120ms ease;8177}8178.peach-recovery-word-input::placeholder {8179  color: rgba(255, 255, 255, 0.18);8180}8181.peach-recovery-word-input:focus {8182  border-bottom-color: var(--peach-accent);8183}81848185.peach-recovery-submit {8186  width: 100%;8187  margin-top: auto;8188}81898190.peach-recovery-new-password-form {8191  width: 100%;8192  display: flex;8193  flex-direction: column;8194  gap: 16px;8195  margin-bottom: 8px;8196}8197.peach-recovery-new-password-form .peach-newvault-field {8198  display: flex;8199  flex-direction: column;8200  gap: 4px;8201}82028203/* ── Recovery words display (post-create) ────────────────────────── */8204.lock-screen--recovery-display {8205  display: flex;8206  flex-direction: column;8207  align-items: stretch;8208  padding: 0 20px 20px;8209  min-height: 0;8210  overflow-y: auto;8211}82128213.peach-recovery-words-display {8214  width: 100%;8215  margin-bottom: 16px;8216  border: 1px solid var(--peach-t3);8217  border-radius: 8px;8218  padding: 12px 14px;8219  background: rgba(245, 240, 234, 0.04);8220}82218222.peach-recovery-words-label {8223  font-family: "IBM Plex Mono", monospace;8224  font-size: 0.5rem;8225  letter-spacing: 0.08em;8226  color: var(--peach-t2);8227  text-transform: uppercase;8228  margin-bottom: 10px;8229}82308231.peach-recovery-word-list {8232  list-style: none;8233  margin: 0;8234  padding: 0;8235  display: grid;8236  grid-template-columns: repeat(2, 1fr);8237  gap: 6px 16px;8238}82398240.peach-recovery-word-item {8241  display: flex;8242  align-items: baseline;8243  gap: 5px;8244}82458246.peach-recovery-word-num {8247  font-family: "IBM Plex Mono", monospace;8248  font-size: 0.5rem;8249  color: var(--peach-t2);8250  width: 14px;8251  flex: 0 0 14px;8252  text-align: right;8253  letter-spacing: 0.04em;8254  font-variant-numeric: tabular-nums;8255}82568257.peach-recovery-download-btn {8258  display: block;8259  margin: 10px auto 0;8260  padding: 4px 10px;8261  background: transparent;8262  border: 1px solid var(--peach-border);8263  border-radius: 6px;8264  color: var(--peach-t2);8265  font-family: "IBM Plex Mono", monospace;8266  font-size: 0.5625rem;8267  letter-spacing: 0.06em;8268  text-transform: lowercase;8269  cursor: pointer;8270  transition: border-color 0.15s, color 0.15s;8271}82728273.peach-recovery-download-btn:hover {8274  border-color: var(--peach-accent);8275  color: var(--peach-t0);8276}82778278.peach-recovery-word-text {8279  font-family: "IBM Plex Mono", monospace;8280  font-size: 0.6875rem;8281  letter-spacing: 0.06em;8282  color: var(--peach-t0);8283  text-transform: lowercase;8284}82858286.peach-hint--warning {8287  color: var(--peach-accent);8288  font-style: italic;8289}8290.peach-hint--success {8291  color: var(--peach-t2);8292  font-family: "IBM Plex Mono", monospace;8293  font-size: 0.625rem;8294  letter-spacing: 0.06em;8295}82968297/* Confirmation step */8298.peach-recovery-confirm {8299  width: 100%;8300  flex: 1;8301  display: flex;8302  flex-direction: column;8303}8304.peach-recovery-confirm-label {8305  font-family: "IBM Plex Mono", monospace;8306  font-size: 0.5625rem;8307  letter-spacing: 0.04em;8308  color: var(--peach-t2);8309  text-align: center;8310  margin: 0 0 12px;8311}8312.peach-recovery-confirm-fields {8313  display: flex;8314  flex-direction: column;8315  gap: 14px;8316  margin-bottom: 10px;8317}8318.peach-recovery-confirm-field {8319  display: flex;8320  align-items: center;8321  gap: 8px;8322}8323.peach-recovery-confirm-num {8324  font-family: "IBM Plex Mono", monospace;8325  font-size: 0.5rem;8326  color: var(--peach-t2);8327  min-width: 44px;8328  letter-spacing: 0.04em;8329}8330.peach-recovery-confirm-input {8331  flex: 1;8332  background: transparent;8333  border: none;8334  border-bottom: 1px solid var(--peach-t3);8335  color: var(--peach-t0);8336  font-family: "IBM Plex Mono", monospace;8337  font-size: 0.6875rem;8338  letter-spacing: 0.06em;8339  padding: 4px 2px 3px;8340  outline: none;8341  text-transform: lowercase;8342  transition: border-color 120ms ease;8343}8344.peach-recovery-confirm-input:focus {8345  border-bottom-color: var(--peach-accent);8346}8347.peach-recovery-confirm-input:disabled {8348  opacity: 0.4;8349  cursor: not-allowed;8350}8351.peach-recovery-confirm-btn {8352  width: 100%;8353  margin-top: auto;8354}83558356/* ============================================================8357   Sync info sheet8358   ============================================================ */83598360.peach-sync-info-backdrop {8361  position: fixed;8362  inset: 0;8363  z-index: 200;8364  background: rgba(0, 0, 0, 0.55);8365  display: flex;8366  align-items: flex-end;8367  animation: peach-fade-in 200ms ease forwards;8368}83698370@keyframes peach-fade-in {8371  from { opacity: 0; }8372  to   { opacity: 1; }8373}83748375.peach-sync-info-sheet {8376  width: 100%;8377  background: var(--peach-bg-card, var(--peach-bg));8378  border-top-left-radius: 20px;8379  border-top-right-radius: 20px;8380  padding: 12px 24px 32px;8381  display: flex;8382  flex-direction: column;8383  gap: 20px;8384  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8385}83868387@keyframes peach-sheet-up {8388  from { transform: translateY(100%); }8389  to   { transform: translateY(0); }8390}83918392.peach-sync-info-handle {8393  width: 36px;8394  height: 4px;8395  border-radius: 2px;8396  background: var(--peach-border);8397  margin: 0 auto 4px;8398  flex-shrink: 0;8399}84008401.peach-sync-info-title {8402  font-family: 'Cormorant Garamond', serif;8403  font-style: italic;8404  font-size: 26px;8405  font-weight: 600;8406  color: var(--peach-t0);8407  margin: 0;8408  line-height: 1.2;8409}84108411.peach-sync-info-body {8412  display: flex;8413  flex-direction: column;8414  gap: 14px;8415}84168417.peach-sync-info-point {8418  display: flex;8419  gap: 12px;8420  align-items: flex-start;8421  font-size: 14px;8422  color: var(--peach-t2);8423  line-height: 1.6;8424  margin: 0;8425}84268427.peach-sync-info-icon {8428  color: var(--peach-accent);8429  font-size: 16px;8430  flex-shrink: 0;8431  margin-top: 1px;8432}84338434.peach-sync-info-actions {8435  display: flex;8436  flex-direction: column;8437  gap: 12px;8438  margin-top: 4px;8439}84408441.peach-sync-info-pro-link {8442  background: none;8443  border: none;8444  font-size: 13px;8445  color: var(--peach-t3);8446  cursor: pointer;8447  padding: 0;8448  font-family: inherit;8449  text-align: center;8450  transition: color 150ms ease;8451}84528453.peach-sync-info-pro-link:hover {8454  color: var(--peach-accent);8455}84568457.peach-btn--full {8458  width: 100%;8459}84608461/* ── Sync screen ── */84628463.peach-sync-coming-soon {8464  display: flex;8465  align-items: flex-start;8466  gap: 10px;8467  padding: 12px 14px;8468  background: var(--peach-s1);8469  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8470  border-radius: 10px;8471}8472.peach-sync-coming-soon__icon {8473  flex-shrink: 0;8474  color: var(--peach-accent);8475  margin-top: 1px;8476  line-height: 0;8477}8478.peach-sync-coming-soon__title {8479  font-family: 'Cormorant Garamond', serif;8480  font-weight: 500;8481  font-size: 13px;8482  color: var(--peach-accent);8483  margin: 0 0 5px;8484  line-height: 1.3;8485}8486.peach-sync-coming-soon__body {8487  font-size: 12px;8488  color: var(--peach-t1);8489  line-height: 1.55;8490  margin: 0;8491}84928493.peach-sync-screen {8494  display: flex;8495  flex-direction: column;8496  height: 100%;8497}84988499.peach-sync-content {8500  flex: 1;8501  overflow-y: auto;8502  padding: 24px 20px 40px;8503  display: flex;8504  flex-direction: column;8505  gap: 24px;8506}85078508/* Intro (State A) */8509.peach-sync-headline {8510  font-family: 'Cormorant Garamond', serif;8511  font-style: italic;8512  font-size: 28px;8513  font-weight: 600;8514  color: var(--peach-t0);8515  margin: 0 0 10px;8516  line-height: 1.2;8517}85188519.peach-sync-intro-body {8520  font-size: 14px;8521  color: var(--peach-t1);8522  line-height: 1.6;8523  margin: 0;8524}85258526.peach-sync-pro-note {8527  display: flex;8528  flex-direction: column;8529  gap: 8px;8530  background: var(--peach-t3);8531  border-radius: 10px;8532  padding: 12px 14px;8533}85348535.peach-sync-pro-note-text {8536  font-size: 12px;8537  color: var(--peach-t2);8538  line-height: 1.5;8539  margin: 0;8540}85418542.peach-sync-pro-link {8543  background: none;8544  border: none;8545  font-size: 12px;8546  color: var(--peach-accent);8547  cursor: pointer;8548  padding: 0;8549  font-family: inherit;8550  text-align: left;8551}85528553/* Status (State C) */8554.peach-sync-status {8555  padding: 12px 0;8556  border-bottom: 1px solid var(--peach-border);8557}85588559.peach-sync-status-row {8560  display: flex;8561  align-items: center;8562  gap: 8px;8563}85648565.peach-sync-dot {8566  width: 7px;8567  height: 7px;8568  border-radius: 50%;8569  flex-shrink: 0;8570}85718572.peach-sync-dot--green { background: var(--peach-health-ok); }8573.peach-sync-dot--amber { background: var(--peach-accent); }85748575.peach-sync-status-text {8576  font-family: 'IBM Plex Mono', monospace;8577  font-size: 11px;8578  color: var(--peach-t2);8579}85808581/* Paired devices */8582.peach-sync-section {8583  display: flex;8584  flex-direction: column;8585  gap: 2px;8586}85878588.peach-sync-section-label {8589  font-family: 'IBM Plex Mono', monospace;8590  font-size: 10px;8591  letter-spacing: 0.1em;8592  color: var(--peach-t3);8593  margin: 0 0 10px;8594}85958596.peach-sync-device-row {8597  display: flex;8598  justify-content: space-between;8599  align-items: baseline;8600  padding: 10px 0;8601  border-bottom: 1px solid var(--peach-border);8602  gap: 12px;8603}86048605.peach-sync-device-name {8606  font-size: 14px;8607  color: var(--peach-t1);8608}86098610.peach-sync-device-meta {8611  font-family: 'IBM Plex Mono', monospace;8612  font-size: 11px;8613  color: var(--peach-t3);8614  white-space: nowrap;8615}86168617.peach-sync-hub-note {8618  padding: 14px 16px;8619  border: 1px solid var(--peach-border);8620  border-radius: 10px;8621  display: flex;8622  flex-direction: column;8623  gap: 6px;8624  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8625}86268627.peach-sync-hub-note-title {8628  font-size: 13px;8629  font-weight: 600;8630  color: var(--peach-t0);8631  margin: 0;8632}86338634.peach-sync-hub-note-body {8635  font-size: 12px;8636  color: var(--peach-t2);8637  line-height: 1.6;8638  margin: 0;8639}86408641/* Action buttons */8642.peach-sync-actions {8643  display: flex;8644  gap: 10px;8645  flex-wrap: wrap;8646}86478648/* Upgrade prompt (State B) */8649.peach-sync-upgrade {8650  display: flex;8651  flex-direction: column;8652  gap: 12px;8653  padding: 16px;8654  border: 1px solid var(--peach-border);8655  border-radius: 10px;8656}86578658.peach-sync-upgrade-text {8659  font-size: 13px;8660  color: var(--peach-t2);8661  line-height: 1.6;8662  margin: 0;8663}86648665/* Network note */8666.peach-sync-network-note {8667  font-size: 12px;8668  color: var(--peach-t3);8669  line-height: 1.6;8670  margin: 0;8671}86728673/* Advanced */8674.peach-sync-advanced {8675  margin-top: auto;8676  padding-top: 16px;8677  border-top: 1px solid var(--peach-border);8678}86798680.peach-sync-advanced-toggle {8681  display: flex;8682  align-items: center;8683  gap: 8px;8684  background: none;8685  border: none;8686  font-family: 'IBM Plex Mono', monospace;8687  font-size: 11px;8688  letter-spacing: 0.08em;8689  color: var(--peach-t3);8690  cursor: pointer;8691  padding: 0;8692  text-transform: uppercase;8693}86948695.peach-sync-advanced-chevron {8696  display: inline-block;8697  transition: transform 200ms ease;8698  font-size: 10px;8699}87008701.peach-sync-advanced-chevron.is-open {8702  transform: rotate(90deg);8703}87048705.peach-sync-advanced-content {8706  margin-top: 14px;8707}87088709.peach-sync-advanced-row {8710  display: flex;8711  justify-content: space-between;8712  align-items: center;8713  gap: 16px;8714}87158716.peach-sync-advanced-title {8717  font-size: 14px;8718  color: var(--peach-t1);8719  margin: 0 0 2px;8720}87218722.peach-sync-advanced-subtitle {8723  font-size: 12px;8724  color: var(--peach-t3);8725  margin: 0;8726  line-height: 1.5;8727}87288729/* ── Add Device — Android scan tabs ─────────────────────────────────────── */87308731.peach-pairing-tabs {8732  display: flex;8733  border: 1px solid var(--peach-border);8734  border-radius: 8px;8735  overflow: hidden;8736  margin-bottom: 4px;8737}87388739.peach-pairing-tab {8740  flex: 1;8741  padding: 10px 0;8742  background: none;8743  border: none;8744  font-family: 'IBM Plex Mono', monospace;8745  font-size: 11px;8746  letter-spacing: 0.06em;8747  color: var(--peach-t2);8748  cursor: pointer;8749  transition: background 150ms, color 150ms;8750}87518752.peach-pairing-tab.is-active {8753  background: var(--peach-accent);8754  color: #fff;8755  font-weight: 600;8756}87578758.peach-pairing-tab:not(.is-active):active {8759  background: var(--peach-border);8760}87618762/* Camera view */8763.peach-pairing-camera-container {8764  position: relative;8765  width: 100%;8766  aspect-ratio: 1;8767  border-radius: 12px;8768  overflow: hidden;8769  background: #000;8770  flex-shrink: 0;8771}87728773.peach-pairing-video {8774  width: 100%;8775  height: 100%;8776  object-fit: cover;8777}87788779.peach-pairing-scan-frame {8780  position: absolute;8781  top: 50%;8782  left: 50%;8783  transform: translate(-50%, -50%);8784  width: 60%;8785  aspect-ratio: 1;8786  border: 2px solid var(--peach-accent);8787  border-radius: 8px;8788  pointer-events: none;8789}87908791/* ── Notes Mode ── */87928793/* Overlay that crossfades over the vault */8794.peach-notes-overlay {8795  position: fixed;8796  inset: 0;8797  z-index: 90;8798  opacity: 0;8799  pointer-events: none;8800  animation: peach-mode-in 220ms ease-in forwards;8801}88028803.peach-notes-overlay.is-visible {8804  opacity: 1;8805  pointer-events: auto;8806}88078808@keyframes peach-mode-in {8809  from { opacity: 0; }8810  to   { opacity: 1; }8811}88128813/* Top-level notes surface */8814.peach-notes-mode {8815  position: absolute;8816  inset: 0;8817  background: var(--peach-bg);8818  display: flex;8819  flex-direction: column;8820}88218822/* Rune canvas positioned behind content */8823.peach-note-rune-canvas {8824  position: absolute;8825  inset: 0;8826  width: 100%;8827  height: 100%;8828  pointer-events: none;8829  z-index: 0;8830}88318832/* TOC wrapper */8833.peach-notes-toc-wrapper {8834  position: absolute;8835  inset: 0;8836  z-index: 1;8837  opacity: 1;8838  pointer-events: auto;8839  transition: opacity 200ms ease;8840}88418842.peach-notes-toc-wrapper.is-hidden {8843  opacity: 0;8844  pointer-events: none;8845}88468847/* Editor wrapper */8848.peach-notes-editor-wrapper {8849  position: absolute;8850  inset: 0;8851  z-index: 2;8852  opacity: 0;8853  pointer-events: none;8854  transition: opacity 200ms ease;8855}88568857.peach-notes-editor-wrapper.is-visible {8858  opacity: 1;8859  pointer-events: auto;8860}88618862/* TOC inner */8863.peach-notes-toc {8864  position: relative;8865  display: flex;8866  flex-direction: column;8867  height: 100%;8868  padding-top: env(safe-area-inset-top, 0px);8869  padding-bottom: env(safe-area-inset-bottom, 0px);8870}88718872/* Shared header */8873.peach-notes-header {8874  display: flex;8875  align-items: center;8876  padding: 12px 16px;8877  gap: 12px;8878  flex-shrink: 0;8879  min-height: 52px;8880  position: relative;8881  z-index: 2;8882}88838884.peach-notes-back {8885  font-size: 22px;8886  color: var(--peach-t2);8887  background: none;8888  border: none;8889  padding: 4px;8890  cursor: pointer;8891  line-height: 1;8892  flex-shrink: 0;8893  transition: color 150ms ease;8894  -webkit-tap-highlight-color: transparent;8895}88968897.peach-notes-back:active { color: var(--peach-t0); }88988899.peach-notes-header-title {8900  flex: 1;8901  font-family: 'Cormorant Garamond', serif;8902  font-style: italic;8903  font-size: 22px;8904  color: var(--peach-t0);8905  text-align: center;8906}89078908.peach-notes-header-title.is-breadcrumb {8909  font-family: 'IBM Plex Mono', monospace;8910  font-style: normal;8911  font-size: 11px;8912  color: var(--peach-t3);8913  letter-spacing: 0.08em;8914  text-transform: uppercase;8915  cursor: pointer;8916}89178918.peach-notes-header-actions {8919  display: flex;8920  gap: 8px;8921  flex-shrink: 0;8922}89238924.peach-notes-header-btn {8925  width: 36px;8926  height: 36px;8927  display: flex;8928  align-items: center;8929  justify-content: center;8930  background: none;8931  border: none;8932  color: var(--peach-t2);8933  cursor: pointer;8934  border-radius: 8px;8935  font-size: 16px;8936  transition: color 150ms ease, background 150ms ease;8937  -webkit-tap-highlight-color: transparent;8938}89398940.peach-notes-header-btn:active {8941  background: rgba(255,255,255,0.06);8942  color: var(--peach-t0);8943}89448945/* Inline search bar */8946.peach-notes-search-input {8947  flex: 1;8948  background: none;8949  border: none;8950  outline: none;8951  font-family: 'IBM Plex Mono', monospace;8952  font-size: 13px;8953  color: var(--peach-t0);8954  padding: 4px 0;8955  letter-spacing: 0.02em;8956}89578958.peach-notes-search-input::placeholder {8959  color: var(--peach-t3);8960}89618962/* TOC list */8963.peach-notes-list-container {8964  flex: 1;8965  overflow-y: auto;8966  overflow-x: hidden;8967  scrollbar-width: none;8968  -webkit-overflow-scrolling: touch;8969  overscroll-behavior: contain;8970  position: relative;8971  z-index: 1;8972}89738974.peach-notes-list-container::-webkit-scrollbar { display: none; }89758976/* Note row */8977.peach-note-row {8978  position: relative;8979  display: grid;8980  grid-template-columns: 44px 8px 1fr 8px auto;8981  align-items: center;8982  min-height: 72px;8983  padding: 16px 20px;8984  border-bottom: 0.5px solid var(--peach-border);8985  cursor: pointer;8986  overflow: hidden;8987  touch-action: pan-y;8988  user-select: none;8989  -webkit-user-select: none;8990  -webkit-tap-highlight-color: transparent;8991}89928993.peach-note-row:first-child {8994  border-top: 0.5px solid var(--peach-border);8995}89968997.peach-note-row:active {8998  background: rgba(255,255,255,0.02);8999}90009001.peach-note-numeral {9002  font-family: 'Cormorant Garamond', serif;9003  font-style: italic;9004  font-size: 15px;9005  color: var(--peach-accent);9006  text-align: right;9007  line-height: 1;9008  flex-shrink: 0;9009}90109011.peach-note-title-gap { /* grid spacer */ }90129013.peach-note-title {9014  font-family: 'Cormorant Garamond', serif;9015  font-style: italic;9016  font-size: 18px;9017  color: var(--peach-t0);9018  line-height: 1.3;9019  min-width: 0;9020  overflow-wrap: break-word;9021}90229023.peach-note-title-match {9024  color: var(--peach-accent);9025}90269027.peach-note-date {9028  font-family: 'IBM Plex Mono', monospace;9029  font-size: 11px;9030  color: var(--peach-t2);9031  white-space: nowrap;9032  text-align: right;9033  flex-shrink: 0;9034  grid-column: 5;9035}90369037/* Swipe underlays */9038.peach-note-row-underlay {9039  position: absolute;9040  inset: 0;9041  display: flex;9042  align-items: center;9043  padding: 0 24px;9044  font-family: 'IBM Plex Mono', monospace;9045  font-size: 11px;9046  letter-spacing: 0.1em;9047  pointer-events: none;9048  z-index: 0;9049}90509051.peach-note-row-underlay--delete {9052  background: #8B2020;9053  color: rgba(255,255,255,0.9);9054  justify-content: flex-end;9055}90569057.peach-note-row-underlay--archive {9058  background: var(--peach-accent);9059  color: #0C0A06;9060  justify-content: flex-start;9061}90629063/* Delete confirm strip */9064.peach-note-delete-confirm {9065  position: absolute;9066  inset: 0;9067  background: var(--peach-bg);9068  display: flex;9069  align-items: center;9070  gap: 12px;9071  padding: 0 20px;9072  font-family: 'IBM Plex Mono', monospace;9073  font-size: 11px;9074  color: var(--peach-t1);9075  letter-spacing: 0.04em;9076  animation: peach-delete-confirm-in 150ms ease both;9077  z-index: 10;9078}90799080@keyframes peach-delete-confirm-in {9081  from { opacity: 0; }9082  to   { opacity: 1; }9083}90849085.peach-note-delete-confirm-btn {9086  background: #8B2020;9087  color: rgba(255,255,255,0.9);9088  border: none;9089  border-radius: 6px;9090  padding: 4px 10px;9091  font-family: 'IBM Plex Mono', monospace;9092  font-size: 10px;9093  cursor: pointer;9094  letter-spacing: 0.06em;9095}90969097.peach-note-delete-cancel-btn {9098  background: none;9099  border: none;9100  color: var(--peach-t3);9101  font-family: 'IBM Plex Mono', monospace;9102  font-size: 10px;9103  cursor: pointer;9104  letter-spacing: 0.06em;9105  padding: 4px 6px;9106}91079108/* + New note button */9109.peach-notes-new-btn {9110  font-family: 'IBM Plex Mono', monospace;9111  font-size: 12px;9112  color: var(--peach-t3);9113  text-align: center;9114  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));9115  background: none;9116  border: none;9117  width: 100%;9118  cursor: pointer;9119  letter-spacing: 0.04em;9120  transition: color 150ms ease;9121  -webkit-tap-highlight-color: transparent;9122}91239124.peach-notes-new-btn:active { color: var(--peach-accent); }91259126/* Empty state */9127.peach-notes-empty {9128  display: flex;9129  flex-direction: column;9130  align-items: center;9131  justify-content: center;9132  flex: 1;9133  padding: 48px 32px;9134  gap: 16px;9135}91369137.peach-notes-empty-text {9138  font-family: 'Cormorant Garamond', serif;9139  font-style: italic;9140  font-size: 20px;9141  color: var(--peach-t3);9142  text-align: center;9143  margin: 0;9144  line-height: 1.4;9145  white-space: pre-line;9146}91479148/* ── Editor surface ── */91499150.peach-note-editor-surface {9151  position: absolute;9152  inset: 0;9153  background: var(--peach-bg);9154  display: flex;9155  flex-direction: column;9156  padding-top: env(safe-area-inset-top, 0px);9157}91589159.peach-note-editor-scroll {9160  flex: 1;9161  overflow-y: auto;9162  overflow-x: hidden;9163  scrollbar-width: none;9164  -webkit-overflow-scrolling: touch;9165  padding: 0 24px 120px;9166  position: relative;9167  z-index: 1;9168}91699170.peach-note-editor-scroll::-webkit-scrollbar { display: none; }91719172/* Desktop toolbar (always visible above body) */9173.peach-note-toolbar-desktop-inline {9174  display: flex;9175  align-items: center;9176  gap: 2px;9177  padding: 6px 0 12px;9178  margin-bottom: 4px;9179  border-bottom: 0.5px solid var(--peach-border);9180}91819182/* Title field */9183.peach-note-title-field {9184  font-family: 'Cormorant Garamond', serif;9185  font-style: italic;9186  font-size: 32px;9187  font-weight: 600;9188  color: var(--peach-t0);9189  line-height: 1.2;9190  padding: 8px 0 0;9191  outline: none;9192  min-height: 44px;9193  word-break: break-word;9194  position: relative;9195  z-index: 1;9196}91979198.peach-note-title-field:empty::before {9199  content: attr(data-placeholder);9200  color: var(--peach-t3);9201  pointer-events: none;9202}92039204/* Hairline separator */9205.peach-note-hairline {9206  height: 0.5px;9207  background: var(--peach-border);9208  margin: 12px 0 20px;9209  position: relative;9210  z-index: 1;9211}92129213/* Body field */9214.peach-note-body-field {9215  font-family: 'DM Sans', sans-serif;9216  font-size: 16px;9217  color: var(--peach-t0);9218  line-height: 1.85;9219  padding: 0;9220  outline: none;9221  min-height: 240px;9222  word-break: break-word;9223  position: relative;9224  z-index: 1;9225}92269227.peach-note-body-field:empty::before {9228  content: attr(data-placeholder);9229  color: var(--peach-t3);9230  font-style: italic;9231  pointer-events: none;9232}92339234.peach-note-body-field h2 {9235  font-family: 'Cormorant Garamond', serif;9236  font-style: italic;9237  font-size: 22px;9238  font-weight: 600;9239  color: var(--peach-t0);9240  margin: 20px 0 8px;9241}92429243.peach-note-body-field blockquote {9244  border-left: 2px solid var(--peach-accent);9245  margin: 12px 0;9246  padding-left: 16px;9247  color: var(--peach-t1);9248  font-style: italic;9249}92509251.peach-note-body-field ul,9252.peach-note-body-field ol {9253  padding-left: 20px;9254  margin: 8px 0;9255}92569257.peach-note-body-field li {9258  margin: 4px 0;9259}92609261.peach-note-body-field hr {9262  border: none;9263  border-top: 0.5px solid var(--peach-border);9264  margin: 16px 0;9265}92669267/* Saved indicator */9268.peach-note-saved-indicator {9269  font-family: 'IBM Plex Mono', monospace;9270  font-size: 11px;9271  color: var(--peach-t3);9272  letter-spacing: 0.04em;9273  text-align: right;9274  padding: 6px 24px;9275  flex-shrink: 0;9276  transition: opacity 300ms ease;9277  pointer-events: none;9278  position: relative;9279  z-index: 1;9280}92819282/* Mobile keyboard toolbar */9283.peach-note-toolbar-mobile {9284  display: flex;9285  align-items: center;9286  padding: 8px 16px;9287  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));9288  background: var(--peach-bg);9289  border-top: 0.5px solid var(--peach-border);9290  gap: 4px;9291  flex-shrink: 0;9292  position: relative;9293  z-index: 10;9294}92959296.peach-note-toolbar-btn {9297  min-width: 36px;9298  height: 36px;9299  display: flex;9300  align-items: center;9301  justify-content: center;9302  background: none;9303  border: none;9304  border-radius: 8px;9305  cursor: pointer;9306  font-size: 14px;9307  color: var(--peach-t1);9308  font-family: 'DM Sans', sans-serif;9309  font-weight: 600;9310  transition: background 100ms ease, color 100ms ease;9311  -webkit-tap-highlight-color: transparent;9312}93139314.peach-note-toolbar-btn--italic { font-style: italic; }9315.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }9316.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }93179318.peach-note-toolbar-divider {9319  width: 0.5px;9320  height: 20px;9321  background: var(--peach-border);9322  margin: 0 4px;9323  flex-shrink: 0;9324}93259326.peach-note-toolbar-spacer { flex: 1; }93279328/* Desktop: larger headline in TOC */9329@media (min-width: 400px) {9330  .peach-notes-header-title:not(.is-breadcrumb) {9331    font-size: 32px;9332  }93339334  .peach-note-row {9335    min-height: 64px;9336    padding: 14px 16px;9337  }9338}93399340/* Flying title — shared element during expansion/collapse */93419342/* ─── Light theme overrides ───────────────────────────────────────────────9343   Tokens that cannot be expressed as variable substitutions — hardcoded9344   context-specific values that need separate light-mode rules. */93459346/* Settings section headers: use text-label (#79766F) per restoration brief —9347   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY9348   presence without fighting the light parchment background. */9349.light .peach-settings-sub-label,9350[data-theme="light"] .peach-settings-sub-label,9351.light .peach-settings-nav-label,9352[data-theme="light"] .peach-settings-nav-label {9353  color: #79766F;9354}93559356/* Secondary action buttons (ghost / subtle): filled with input-well surface9357   so they read as recessed against the parchment card background. */9358.light .peach-btn--ghost:not(.peach-icon-btn),9359[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {9360  background: #EEE7DD;9361  border-color: #DDD5CB;9362  color: #1A1208;9363}9364.light .peach-icon-btn,9365[data-theme="light"] .peach-icon-btn {9366  background: transparent;9367  border-color: transparent;9368}9369.light .peach-btn--subtle,9370[data-theme="light"] .peach-btn--subtle {9371  background: #EEE7DD;9372  border-color: #DDD5CB;9373}93749375/* Wide secondary action button on the lock screen — override the9376   hardcoded dark-mode rgba values with warm parchment equivalents. */9377.light .peach-lock-secondary,9378[data-theme="light"] .peach-lock-secondary {9379  background: #EEE7DD;9380  border-color: #DDD5CB;9381  color: #1A1208;9382}9383.light .peach-lock-secondary:hover,9384[data-theme="light"] .peach-lock-secondary:hover {9385  background: #F0E9DF;9386}93879388/* Entry row hover: bg-row lifts the row above the card surface. */9389.light .peach-entry-row:hover,9390[data-theme="light"] .peach-entry-row:hover {9391  background: #F2EBE1;9392}9393.light .peach-entry-row.is-active,9394[data-theme="light"] .peach-entry-row.is-active {9395  background: #F2EBE1;9396}9397.light .peach-entry-row.is-selected,9398[data-theme="light"] .peach-entry-row.is-selected {9399  background: #F5EDE2;9400}94019402/* ──────────────────────────────────────────────────────────────────────────9403   Pair-device flow — bird-stage animation (Phase 1)9404   See src/popup/components/PairingBirds.tsx and the brief §6.2.9405   Three-act animation gated on the [data-phase] attribute of9406   .peach-pair-pair; child layers (birds, sound arcs, flight wave, dot)9407   each react via either pose class or visibility flag.9408   Tokens: accent surfaces use var(--peach-accent); bird illustration9409   colours are baked into the SVG per the brand-peach exception in §3.1.9410   ────────────────────────────────────────────────────────────────────── */94119412.peach-pair-pair {9413  position: absolute;9414  inset: 0;9415  z-index: 3;9416  display: flex;9417  flex-direction: column;9418  padding: 14px 12px 12px;9419  width: 100%;9420  box-sizing: border-box;9421  gap: 0;9422  background:9423    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9424    var(--peach-bg);9425  color: var(--peach-t0);9426  overflow-y: auto;9427  overflow-x: hidden;9428  scrollbar-width: none;9429  isolation: isolate;9430  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9431}9432@keyframes peach-pair-overlay-in {9433  from { opacity: 0; transform: translateY(8px); }9434  to   { opacity: 1; transform: translateY(0); }9435}9436.peach-pair-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9437.peach-pair-pair::before {9438  content: '';9439  position: absolute;9440  inset: 0;9441  border-radius: inherit;9442  pointer-events: none;9443  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9444  z-index: 0;9445}9446.peach-pair-pair > * { position: relative; z-index: 1; }94479448/* Header --------------------------------------------------------------- */9449.peach-pair-head {9450  display: flex; align-items: center; gap: 10px;9451}9452.peach-pair-back {9453  width: 32px; height: 32px;9454  display: inline-flex; align-items: center; justify-content: center;9455  background: transparent;9456  border: none;9457  border-radius: 8px;9458  color: var(--peach-t1);9459  cursor: pointer;9460  transition: color 0.15s ease, box-shadow 0.15s ease;9461}9462.peach-pair-back:hover {9463  color: var(--peach-accent);9464  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9465}9466.peach-pair-title {9467  font-family: var(--font-display, Georgia, serif);9468  font-style: italic;9469  font-size: 24px;9470  font-weight: 500;9471  letter-spacing: 0.005em;9472  color: var(--peach-t0);9473  line-height: 1;9474}9475.peach-pair-head-spacer { flex: 1; }94769477/* Chip row ------------------------------------------------------------- */9478.peach-pair-chip-row {9479  display: flex;9480  align-items: center;9481  justify-content: flex-start;9482  margin-top: 12px;9483}9484.peach-pair-chip {9485  display: inline-flex; align-items: center; gap: 8px;9486  padding: 5px 10px 5px 8px;9487  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9488  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9489  border-radius: 999px;9490  font-family: var(--peach-mono, ui-monospace, monospace);9491  font-size: 11px;9492  letter-spacing: 0.04em;9493  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9494}9495.peach-pair-chip-dot {9496  width: 6px; height: 6px; border-radius: 50%;9497  background: var(--peach-accent);9498  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9499}9500.peach-pair-chip[data-phase="paired"] {9501  background: color-mix(in srgb, #4f9eda 12%, transparent);9502  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9503  color: #76b6e8;9504}9505.peach-pair-chip[data-phase="paired"] .peach-pair-chip-dot {9506  background: #76b6e8;9507  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9508}9509.peach-pair-chip[data-phase="timeout"],9510.peach-pair-chip[data-phase="mic_denied"],9511.peach-pair-chip[data-phase="version_mismatch"],9512.peach-pair-chip[data-phase="handshake_failed"] {9513  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9514  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9515  color: var(--peach-warn, #d29257);9516}9517.peach-pair-chip[data-phase="timeout"] .peach-pair-chip-dot,9518.peach-pair-chip[data-phase="mic_denied"] .peach-pair-chip-dot,9519.peach-pair-chip[data-phase="version_mismatch"] .peach-pair-chip-dot,9520.peach-pair-chip[data-phase="handshake_failed"] .peach-pair-chip-dot {9521  background: var(--peach-warn, #d29257);9522  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9523}95249525/* Bird stage ----------------------------------------------------------- */9526.peach-pair-stage {9527  position: relative;9528  margin: 14px 0 8px;9529  height: 180px;9530  border-radius: 12px;9531  background:9532    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9533    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9534    color-mix(in srgb, var(--peach-bg) 92%, #000);9535  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9536  overflow: hidden;9537  isolation: isolate;9538}9539.peach-pair-stage::after {9540  content: '';9541  position: absolute;9542  left: 12%; right: 12%;9543  bottom: 36px;9544  height: 1px;9545  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9546}95479548.peach-pair-bird-slot {9549  position: absolute;9550  bottom: 8px;9551  width: 100px;9552  height: 110px;9553  display: flex;9554  align-items: flex-end;9555  justify-content: center;9556}9557.peach-pair-bird-slot-desktop { left: 28px; }9558.peach-pair-bird-slot-mobile { right: 28px; }95599560/* Mobile bird hops in from the right when handshake begins */9561.peach-pair-bird-slot-mobile {9562  opacity: 1;9563  transform: translateX(-6px);9564  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9565}9566.peach-pair-stage.act-listening .peach-pair-bird-slot-mobile,9567.peach-pair-stage.act-chirping .peach-pair-bird-slot-mobile,9568.peach-pair-stage.act-idle .peach-pair-bird-slot-mobile {9569  opacity: 0;9570  transform: translateX(60px) rotate(8deg);9571}9572.peach-pair-stage.act-handshake .peach-pair-bird-slot-desktop,9573.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop {9574  transform: translateX(6px);9575  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9576}95779578/* Paired: both birds bob together */9579.peach-pair-stage.act-paired .peach-pair-bird-slot {9580  animation: peach-pair-happy-bob 1.2s ease-in-out infinite;9581}9582.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { animation-delay: 0.2s; }9583.peach-pair-stage.act-paired .peach-pair-bird-slot-desktop { --bb-x: 6px; }9584.peach-pair-stage.act-paired .peach-pair-bird-slot-mobile { --bb-x: -6px; }9585@keyframes peach-pair-happy-bob {9586  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9587  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9588}95899590/* Bird internal -------------------------------------------------------- */9591.peach-pair-bird {9592  width: 108px;9593  height: 108px;9594  transform-origin: 50% 95%;9595}9596.peach-pair-bird svg { width: 100%; height: 100%; overflow: visible; }95979598.peach-pair-bird-body {9599  transform-origin: 50% 80%;9600  animation: peach-pair-bird-bob 2.4s ease-in-out infinite;9601}9602@keyframes peach-pair-bird-bob {9603  0%, 100% { transform: translateY(0) scale(1, 1); }9604  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9605}96069607.peach-pair-bird-eye-group {9608  animation: peach-pair-blink 5.2s steps(1, end) infinite;9609  transform-origin: center;9610  transform-box: fill-box;9611}9612@keyframes peach-pair-blink {9613  0%, 92%, 96%, 100% { transform: scaleY(1); }9614  94%                { transform: scaleY(0.05); }9615}96169617/* Pose: chirping — beak opens, head bobs, aura blooms */9618.peach-pair-bird-pose-chirping .peach-pair-bird-body {9619  animation:9620    peach-pair-bird-bob 2.4s ease-in-out infinite,9621    peach-pair-squeeze 1.7s ease-in-out infinite;9622}9623@keyframes peach-pair-squeeze {9624  0%, 70%, 100% { transform-origin: 50% 85%; }9625  78%           { transform: scale(1.04, 0.96) translateY(1px); }9626  86%           { transform: scale(0.98, 1.02); }9627}9628.peach-pair-bird-pose-chirping .peach-pair-bird-head-group {9629  animation: peach-pair-head-bob 1.7s ease-in-out infinite;9630}9631@keyframes peach-pair-head-bob {9632  0%, 70%, 100% { transform: translateY(0) rotate(0); }9633  78%           { transform: translateY(-3px) rotate(-4deg); }9634  86%           { transform: translateY(-1px) rotate(-2deg); }9635}9636.peach-pair-bird-pose-chirping .peach-pair-bird-beak {9637  animation: peach-pair-beak-open 1.7s ease-in-out infinite;9638}9639@keyframes peach-pair-beak-open {9640  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9641  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9642  86%           { transform: rotate(-6deg); }9643}9644.peach-pair-bird-pose-chirping .peach-pair-bird-aura {9645  animation: peach-pair-aura 1.7s ease-in-out infinite;9646}9647@keyframes peach-pair-aura {9648  0%, 100% { opacity: 0; }9649  50%      { opacity: 0.8; }9650}9651.peach-pair-bird-pose-chirping .peach-pair-bird-tail {9652  animation: peach-pair-tail-twitch 1.7s ease-in-out infinite;9653  transform-origin: 100% 50%;9654}9655@keyframes peach-pair-tail-twitch {9656  0%, 75%, 100% { transform: rotate(0); }9657  82%           { transform: rotate(-3deg) translateX(-1px); }9658}96599660/* Pose: attentive — head tilts toward partner */9661.peach-pair-bird-pose-attentive .peach-pair-bird-head-group {9662  animation: peach-pair-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9663}9664@keyframes peach-pair-head-tilt {9665  0%   { transform: rotate(0) translateY(0); }9666  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9667  100% { transform: rotate(-6deg); }9668}9669.peach-pair-bird-pose-attentive .peach-pair-bird-tail {9670  animation: peach-pair-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9671  transform-origin: 100% 50%;9672}9673@keyframes peach-pair-tail-cock {9674  0%   { transform: rotate(0); }9675  100% { transform: rotate(-4deg); }9676}96779678/* Pose: happy — wing flutter, tuft perk, tail wag */9679.peach-pair-bird-pose-happy .peach-pair-bird-wing {9680  transform-origin: 80% 60%;9681  animation: peach-pair-wing-flutter 0.32s ease-in-out 5;9682}9683@keyframes peach-pair-wing-flutter {9684  0%, 100% { transform: rotate(0) translateY(0); }9685  50%      { transform: rotate(-16deg) translateY(-2px); }9686}9687.peach-pair-bird-pose-happy .peach-pair-bird-tuft {9688  transform-origin: 0% 100%;9689  animation: peach-pair-tuft-perk 0.4s ease-in-out 3;9690}9691@keyframes peach-pair-tuft-perk {9692  0%, 100% { transform: rotate(0); }9693  50%      { transform: rotate(-15deg) translateY(-1px); }9694}9695.peach-pair-bird-pose-happy .peach-pair-bird-tail {9696  transform-origin: 100% 50%;9697  animation: peach-pair-tail-wag 0.5s ease-in-out 4;9698}9699@keyframes peach-pair-tail-wag {9700  0%, 100% { transform: rotate(0); }9701  25%      { transform: rotate(6deg); }9702  75%      { transform: rotate(-6deg); }9703}9704.peach-pair-bird-pose-happy .peach-pair-bird-head-group {9705  animation: peach-pair-head-perk 0.5s ease-out;9706}9707@keyframes peach-pair-head-perk {9708  0%   { transform: translateY(0); }9709  40%  { transform: translateY(-3px) rotate(2deg); }9710  100% { transform: translateY(0); }9711}97129713/* Pose: sad — body droops forward */9714.peach-pair-bird-pose-sad .peach-pair-bird-body {9715  transform: translateY(5px) rotate(-2deg);9716  animation: none;9717}9718.peach-pair-bird-pose-sad .peach-pair-bird-head-group {9719  transform: translateY(4px) rotate(8deg);9720}9721.peach-pair-bird-pose-sad .peach-pair-bird-tuft { transform: rotate(15deg) translateY(2px); }9722.peach-pair-bird-pose-sad .peach-pair-bird-tail { transform: rotate(8deg) translateY(2px); }97239724.peach-pair-bird-pose-hidden { opacity: 0; }97259726/* Sound arcs ----------------------------------------------------------- */9727.peach-pair-arcs {9728  position: absolute;9729  top: 18px;9730  width: 96px;9731  height: 70px;9732  pointer-events: none;9733}9734.peach-pair-arcs-right { right: -60px; }9735.peach-pair-arcs-left  { left: -60px; transform: scaleX(-1); }9736.peach-pair-arc {9737  position: absolute;9738  top: 50%;9739  left: 0;9740  width: 40px;9741  height: 40px;9742  margin-top: -20px;9743  border: 1.2px solid #f4d5a8;9744  border-color: transparent #f4d5a8 transparent transparent;9745  border-radius: 50%;9746  opacity: 0;9747  animation: peach-pair-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9748}9749@keyframes peach-pair-arc-expand {9750  0%   { transform: scale(0.4); opacity: 0; }9751  20%  { opacity: 0.9; }9752  100% { transform: scale(1.6); opacity: 0; }9753}97549755/* Flight wave ---------------------------------------------------------- */9756.peach-pair-flight-track {9757  position: absolute;9758  inset: 32px 36px 38px 36px;9759  pointer-events: none;9760}9761.peach-pair-flight-wave {9762  position: absolute;9763  top: 8px;9764  left: 76px;9765  right: 76px;9766  height: 60px;9767  width: auto;9768  opacity: 0;9769  transition: opacity 0.15s ease;9770  stroke: #f4d5a8;9771  fill: none;9772}9773.peach-pair-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9774.peach-pair-flight-wave.is-visible { opacity: 1; }9775.peach-pair-flight-path,9776.peach-pair-flight-path-2 {9777  stroke-dasharray: 240;9778  stroke-dashoffset: 240;9779  stroke-linecap: round;9780  fill: none;9781}9782.peach-pair-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9783.peach-pair-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9784.peach-pair-flight-wave.is-visible .peach-pair-flight-path {9785  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9786}9787.peach-pair-flight-wave.is-visible .peach-pair-flight-path-2 {9788  animation: peach-pair-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9789}9790@keyframes peach-pair-fly {9791  0%   { stroke-dashoffset: 240; opacity: 0; }9792  20%  { opacity: 1; }9793  100% { stroke-dashoffset: -120; opacity: 0; }9794}97959796/* Connection dot ------------------------------------------------------- */9797.peach-pair-dot {9798  position: absolute;9799  top: 50%; left: 50%;9800  transform: translate(-50%, -50%);9801  width: 40px; height: 40px;9802  opacity: 0;9803  pointer-events: none;9804  transition: opacity 0.3s ease;9805  color: var(--peach-accent);9806}9807.peach-pair-dot.is-visible { opacity: 1; }9808.peach-pair-dot-glow {9809  position: absolute; top: 50%; left: 50%;9810  transform: translate(-50%, -50%);9811  width: 38px; height: 38px;9812  border-radius: 50%;9813  filter: blur(10px);9814  opacity: 0.55;9815  background: var(--peach-accent);9816  animation: peach-pair-dot-bloom 1.4s ease-out;9817}9818.peach-pair-dot-core {9819  position: absolute; top: 50%; left: 50%;9820  transform: translate(-50%, -50%);9821  width: 8px; height: 8px;9822  border-radius: 50%;9823  background: var(--peach-accent);9824  box-shadow: 0 0 12px currentColor;9825  animation: peach-pair-dot-core 1.4s ease-out;9826}9827.peach-pair-dot-ring {9828  position: absolute; top: 50%; left: 50%;9829  width: 60px; height: 60px;9830  transform: translate(-50%, -50%);9831  animation: peach-pair-dot-ring 1.4s linear;9832  stroke: var(--peach-accent);9833}9834@keyframes peach-pair-dot-bloom {9835  0%   { width: 4px; height: 4px; opacity: 0; }9836  35%  { width: 60px; height: 60px; opacity: 0.7; }9837  100% { width: 38px; height: 38px; opacity: 0.55; }9838}9839@keyframes peach-pair-dot-core {9840  0%   { width: 0; height: 0; }9841  35%  { width: 12px; height: 12px; }9842  100% { width: 8px; height: 8px; }9843}9844@keyframes peach-pair-dot-ring {9845  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9846  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9847  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9848}98499850/* Motes — drift upward across the stage */9851.peach-pair-motes {9852  position: absolute;9853  inset: 0;9854  pointer-events: none;9855}9856.peach-pair-mote {9857  position: absolute;9858  width: 2px; height: 2px;9859  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9860  border-radius: 50%;9861  bottom: 32px;9862  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9863  opacity: 0;9864  animation: peach-pair-mote-drift 6s linear infinite;9865  animation-delay: calc(var(--mote-i, 0) * 0.7s);9866}9867@keyframes peach-pair-mote-drift {9868  0%   { transform: translateY(0); opacity: 0; }9869  10%  { opacity: 0.6; }9870  90%  { opacity: 0.1; }9871  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9872}98739874/* Status copy ---------------------------------------------------------- */9875.peach-pair-copy-host {9876  margin: 4px 4px 10px;9877  text-align: center;9878  min-height: 50px;9879}9880.peach-pair-copy {9881  animation: peach-pair-copy-in 0.35s ease both;9882}9883@keyframes peach-pair-copy-in {9884  from { opacity: 0; transform: translateY(4px); }9885  to   { opacity: 1; transform: translateY(0); }9886}9887.peach-pair-headline {9888  font-family: var(--font-display, Georgia, serif);9889  font-style: italic;9890  font-size: 20px;9891  font-weight: 500;9892  line-height: 1.2;9893  letter-spacing: 0.005em;9894  color: var(--peach-t0);9895  margin-bottom: 6px;9896}9897.peach-pair-copy-listening .peach-pair-headline,9898.peach-pair-copy-chirping .peach-pair-headline,9899.peach-pair-copy-idle .peach-pair-headline {9900  font-family: inherit;9901  font-style: normal;9902  font-weight: 500;9903  font-size: 15px;9904  color: var(--peach-t0);9905  letter-spacing: 0;9906}9907.peach-pair-copy-paired .peach-pair-headline {9908  color: var(--peach-t0);9909  font-weight: 600;9910}9911.peach-pair-sub {9912  font-size: 12.5px;9913  line-height: 1.45;9914  color: var(--peach-t1);9915  max-width: 280px;9916  margin: 0 auto;9917  text-wrap: pretty;9918}99199920/* Status action -------------------------------------------------------- */9921.peach-pair-action {9922  margin: 2px 4px 10px;9923  margin-top: auto;9924  display: flex;9925  flex-direction: column;9926  gap: 8px;9927}9928.peach-pair-action-waiting {9929  display: flex;9930  align-items: center;9931  justify-content: space-between;9932  gap: 12px;9933}9934.peach-pair-cancel {9935  min-width: 96px;9936}9937.peach-pair-listening {9938  display: inline-flex; align-items: center; gap: 4px;9939  font-family: var(--peach-mono, ui-monospace, monospace);9940  font-size: 9.5px;9941  text-transform: uppercase;9942  letter-spacing: 0.12em;9943  color: var(--peach-t1);9944  padding: 8px 10px;9945}9946.peach-pair-listen-dot {9947  width: 4px; height: 4px;9948  border-radius: 50%;9949  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9950  animation: peach-pair-listen-pulse 1.2s ease-in-out infinite;9951}9952.peach-pair-listen-dot:nth-child(2) { animation-delay: 0.2s; }9953.peach-pair-listen-dot:nth-child(3) { animation-delay: 0.4s; }9954.peach-pair-listen-label { margin-left: 6px; }9955@keyframes peach-pair-listen-pulse {9956  0%, 100% { opacity: 0.25; transform: scale(0.9); }9957  50%      { opacity: 1;     transform: scale(1.15); }9958}99599960.peach-pair-action-handshake {9961  display: flex;9962  flex-direction: column;9963  align-items: center;9964  gap: 8px;9965  padding: 8px 4px;9966}9967.peach-pair-meter {9968  width: 100%;9969  max-width: 280px;9970  height: 2px;9971  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9972  border-radius: 2px;9973  position: relative;9974  overflow: hidden;9975}9976.peach-pair-meter-bar {9977  position: absolute;9978  top: 0; bottom: 0;9979  width: 30%;9980  left: -30%;9981  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9982  animation: peach-pair-meter-sweep 1.4s ease-in-out infinite;9983}9984@keyframes peach-pair-meter-sweep {9985  0%   { left: -30%; }9986  100% { left: 100%; }9987}9988.peach-pair-meter-label {9989  font-family: var(--peach-mono, ui-monospace, monospace);9990  font-size: 9.5px;9991  text-transform: uppercase;9992  letter-spacing: 0.14em;9993  color: var(--peach-t1);9994}99959996.peach-pair-action-paired {9997  display: flex;9998  align-items: center;9999  gap: 10px;10000}10001.peach-pair-device-confirm {10002  flex: 1;10003  display: inline-flex;10004  align-items: center;10005  gap: 8px;10006  padding: 9px 10px 9px 12px;10007  border-radius: 10px;10008  background: color-mix(in srgb, #76b6e8 12%, transparent);10009  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);10010  font-size: 12.5px;10011  color: var(--peach-t0);10012  min-width: 0;10013}10014.peach-pair-device-confirm-glyph {10015  display: inline-flex;10016  color: #76b6e8;10017}10018.peach-pair-device-confirm-name {10019  flex: 1;10020  overflow: hidden;10021  text-overflow: ellipsis;10022  white-space: nowrap;10023}10024.peach-pair-device-confirm-trust {10025  font-family: var(--peach-mono, ui-monospace, monospace);10026  font-size: 9.5px;10027  text-transform: uppercase;10028  letter-spacing: 0.1em;10029  color: #76b6e8;10030  padding: 2px 6px;10031  border-radius: 4px;10032  background: color-mix(in srgb, #76b6e8 14%, transparent);10033}10034.peach-pair-done {10035  min-width: 80px;10036}10037.peach-pair-retry {10038  align-self: center;10039  display: block;10040  margin: 6px auto 0;10041  min-width: 120px;10042}10043.peach-pair-mic-help {10044  font-size: 12px;10045  color: var(--peach-t1);10046  text-align: center;10047  max-width: 320px;10048  margin: 0 auto;10049}1005010051/* Rest state — bird stage at idle pose, primary CTA + paired list */10052.peach-pair-pair[data-phase="idle"] .peach-pair-stage {10053  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */10054  height: 160px;10055}10056.peach-pair-pair-start {10057  width: 100%;10058  display: inline-flex;10059  align-items: center;10060  justify-content: center;10061  gap: 8px;10062  padding: 11px 14px;10063  border-radius: 10px;10064  background: var(--peach-accent);10065  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);10066  color: #1a0905;10067  font-family: inherit;10068  font-size: 13px;10069  font-weight: 600;10070  letter-spacing: 0.01em;10071  cursor: pointer;10072  transition: filter 0.15s ease, transform 0.1s ease;10073}10074.peach-pair-pair-start:hover { filter: brightness(1.08); }10075.peach-pair-pair-start:active { transform: translateY(1px); }1007610077.peach-pair-paired-section {10078  margin-top: 14px;10079  display: flex;10080  flex-direction: column;10081  gap: 8px;10082}10083.peach-pair-paired-heading {10084  margin: 0;10085  font-family: var(--peach-mono, ui-monospace, monospace);10086  font-size: 10px;10087  font-weight: 500;10088  letter-spacing: 0.14em;10089  text-transform: uppercase;10090  color: var(--peach-t1);10091}1009210093/* Footer --------------------------------------------------------------- */10094.peach-pair-foot {10095  margin: 10px -4px -2px;10096  margin-top: auto;10097}10098.peach-pair-foot-divider {10099  height: 1px;10100  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);10101  margin-bottom: 10px;10102}10103.peach-pair-foot-text {10104  font-size: 11px;10105  line-height: 1.5;10106  color: var(--peach-t1);10107  text-align: center;10108  padding: 0 4px;10109  text-wrap: pretty;10110}1011110112/* Screen-reader-only live region. Kept off the visual flow but read by10113   assistive tech as the pairing phase advances. */10114.peach-sr-only {10115  position: absolute;10116  width: 1px; height: 1px;10117  padding: 0; margin: -1px;10118  overflow: hidden;10119  clip: rect(0, 0, 0, 0);10120  white-space: nowrap;10121  border: 0;10122}1012310124/* Reduced motion — stage simplifies to opacity transitions only */10125@media (prefers-reduced-motion: reduce) {10126  .peach-pair-bird-body,10127  .peach-pair-bird-head-group,10128  .peach-pair-bird-beak,10129  .peach-pair-bird-wing,10130  .peach-pair-bird-tuft,10131  .peach-pair-bird-tail,10132  .peach-pair-bird-eye-group,10133  .peach-pair-bird-aura,10134  .peach-pair-arc,10135  .peach-pair-flight-path,10136  .peach-pair-flight-path-2,10137  .peach-pair-dot-glow,10138  .peach-pair-dot-core,10139  .peach-pair-dot-ring,10140  .peach-pair-mote,10141  .peach-pair-meter-bar,10142  .peach-pair-listen-dot,10143  .peach-pair-bird-slot,10144  .peach-pair-bird-slot-mobile {10145    animation: none !important;10146    transition: opacity 0.2s linear !important;10147  }10148}1014910150/* ─────────────────────────────────────────────────────────────────10151   Settings → Sync surface. Wraps the same bird10152   animation used by the pairing flow with a paired-devices list and10153   the "Pair a device" CTA.10154   ───────────────────────────────────────────────────────────────── */10155.peach-pair-settings {10156  position: absolute;10157  inset: 0;10158  z-index: 3;10159  display: flex;10160  flex-direction: column;10161  gap: 18px;10162  padding: 14px 12px 12px;10163  width: 100%;10164  box-sizing: border-box;10165  overflow-y: auto;10166  overflow-x: hidden;10167  /* Same warm surface as the pairing screen — unifies the two views. */10168  background:10169    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),10170    var(--peach-bg);10171  color: var(--peach-t0);10172  isolation: isolate;10173  /* Hide native scrollbar — content fits 99% of the time and a chunky10174     gutter ruins the surface. */10175  scrollbar-width: none;10176  animation: peach-pair-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;10177}10178.peach-pair-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }10179.peach-pair-settings::before {10180  content: '';10181  position: absolute;10182  inset: 0;10183  pointer-events: none;10184  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);10185  z-index: 0;10186}10187.peach-pair-settings > * { position: relative; z-index: 1; }1018810189.peach-pair-settings--pairing {10190  padding: 0;10191  align-items: stretch;10192  justify-content: stretch;10193  background: none;10194  isolation: auto;10195}10196.peach-pair-settings--pairing::before { display: none; }1019710198.peach-pair-settings-header {10199  display: flex;10200  align-items: center;10201  gap: 10px;10202}10203.peach-pair-settings-title {10204  margin: 0;10205  font-family: var(--font-display, Georgia, serif);10206  font-style: italic;10207  font-size: 24px;10208  font-weight: 500;10209  line-height: 1;10210  color: var(--peach-t0);10211  letter-spacing: 0.005em;10212}10213.peach-pair-settings-section {10214  margin: 6px 0 -4px;10215  font-size: 11px;10216  font-weight: 600;10217  letter-spacing: 0.08em;10218  text-transform: uppercase;10219  color: var(--peach-text-muted);10220}10221.peach-pair-settings-error {10222  font-size: 12px;10223  padding: 8px 10px;10224  border-radius: 8px;10225  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);10226  color: var(--peach-text);10227}10228.peach-pair-settings-footer {10229  margin-top: auto;10230  padding-top: 18px;10231  font-size: 11.5px;10232  line-height: 1.5;10233  color: var(--peach-text-muted);10234  text-align: center;10235}1023610237/* Hero card shown when no devices are paired yet. */10238.peach-pair-hero {10239  display: flex;10240  flex-direction: column;10241  align-items: center;10242  gap: 12px;10243  padding: 20px 12px 8px;10244  text-align: center;10245}10246.peach-pair-hero-svg {10247  display: block;10248  max-width: 100%;10249  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));10250}10251.peach-pair-hero-headline {10252  margin: 0;10253  font-family: var(--font-display, Georgia, serif);10254  font-style: italic;10255  font-size: 20px;10256  font-weight: 500;10257  line-height: 1.2;10258  letter-spacing: 0.005em;10259  color: var(--peach-t0);10260}10261.peach-pair-hero-sub {10262  margin: 0;10263  font-size: 13px;10264  line-height: 1.5;10265  color: var(--peach-t1);10266  max-width: 320px;10267  text-wrap: pretty;10268}1026910270.peach-pair-pair-cta {10271  display: flex;10272  justify-content: center;10273  padding: 4px 0 6px;10274}10275.peach-pair-pair-button {10276  display: inline-flex;10277  align-items: center;10278  gap: 8px;10279  min-width: 220px;10280  justify-content: center;10281}10282.peach-pair-pair-button-icon {10283  flex: 0 0 auto;10284}1028510286/* Paired devices list. Roomy rows that look at home next to the rest10287   of Settings; stale rows get a soft warm-warning border tint. */10288.peach-pair-device-list {10289  list-style: none;10290  margin: 0;10291  padding: 0;10292  display: flex;10293  flex-direction: column;10294  gap: 8px;10295}10296.peach-pair-device-row {10297  display: flex;10298  align-items: center;10299  gap: 12px;10300  padding: 12px;10301  border-radius: 10px;10302  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10303  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);10304}10305.peach-pair-device-row[data-stale="true"] {10306  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);10307}10308.peach-pair-device-icon {10309  width: 32px;10310  height: 32px;10311  display: flex;10312  align-items: center;10313  justify-content: center;10314  border-radius: 8px;10315  color: var(--peach-text);10316  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);10317}10318.peach-pair-device-info {10319  flex: 1;10320  display: flex;10321  flex-direction: column;10322  gap: 2px;10323  min-width: 0;10324}10325.peach-pair-device-name {10326  font-size: 14px;10327  font-weight: 600;10328  color: var(--peach-text);10329  overflow: hidden;10330  text-overflow: ellipsis;10331  white-space: nowrap;10332}10333.peach-pair-device-meta {10334  font-size: 11.5px;10335  color: var(--peach-text-muted);10336  display: flex;10337  flex-wrap: wrap;10338  align-items: center;10339  gap: 8px;10340}10341.peach-pair-device-badge {10342  font-size: 10.5px;10343  font-weight: 500;10344  letter-spacing: 0.02em;10345  padding: 2px 6px;10346  border-radius: 999px;10347  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);10348  color: var(--peach-text);10349}10350.peach-pair-device-stale {10351  font-size: 10.5px;10352  font-weight: 500;10353  color: var(--peach-warn, #d29257);10354}10355.peach-pair-device-remove {10356  flex: 0 0 auto;10357  color: var(--peach-text-muted);10358}10359.peach-pair-device-remove:hover {10360  color: var(--peach-danger, #c25b4a);10361}10362.peach-pair-unpair-confirm {10363  display: flex;10364  gap: 6px;10365  align-items: center;10366}1036710368/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */10369.peach-pair-pro-card {10370  position: relative;10371  margin: 18px 12px;10372  padding: 18px 20px 22px;10373  border-radius: 22px;10374  background:10375    radial-gradient(140% 90% at 50% 0%,10376      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,10377      transparent 60%),10378    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10379  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10380  box-shadow:10381    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10382    0 18px 40px -24px rgba(0, 0, 0, 0.45);10383  display: flex;10384  flex-direction: column;10385  align-items: center;10386  gap: 10px;10387  text-align: center;10388  overflow: hidden;10389}10390.peach-pair-pro-stage {10391  position: relative;10392  width: 220px;10393  height: 140px;10394  display: flex;10395  align-items: flex-end;10396  justify-content: center;10397  margin-bottom: 2px;10398}10399.peach-pair-pro-bird-slot {10400  width: 140px;10401  height: 132px;10402  display: flex;10403  align-items: flex-end;10404  justify-content: center;10405  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10406}10407.peach-pair-pro-bird-slot .peach-pair-bird {10408  width: 100%;10409  height: 100%;10410}10411.peach-pair-pro-bird-slot .peach-pair-bird svg {10412  width: 100%;10413  height: 100%;10414  overflow: visible;10415}10416.peach-pair-pro-headline {10417  margin: 4px 0 0;10418  font-family: var(--font-display, "Cormorant Garamond", serif);10419  font-style: italic;10420  font-size: 19px;10421  font-weight: 500;10422  letter-spacing: 0.01em;10423  color: var(--peach-t0);10424  max-width: 280px;10425  line-height: 1.25;10426}10427.peach-pair-pro-body {10428  margin: 0;10429  font-size: 13px;10430  line-height: 1.55;10431  color: var(--peach-t1);10432  max-width: 300px;10433}10434.peach-pair-pro-cta {10435  margin-top: 4px;10436}10437.peach-pair-pro-foot {10438  margin: 2px 0 0;10439  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10440  font-size: 0.625rem;10441  letter-spacing: 0.08em;10442  text-transform: uppercase;10443  color: var(--peach-t2);10444  opacity: 0.75;10445}1044610447/* Shell border and shadow in light mode: match dark mode's near-invisible10448   border weight so the popup frame looks the same in both themes. */10449.light .peach-shell,10450.light .peach-screen {10451  border-color: rgba(26, 18, 8, 0.07);10452  box-shadow:10453    0 2px 8px rgba(80, 56, 32, 0.08),10454    0 14px 48px rgba(80, 56, 32, 0.10),10455    0 0 0 1px rgba(26, 18, 8, 0.04);10456}1045710458/* HOLE 4: the revoke confirmation carries its own disclosure, so it needs the10459   full row width rather than sitting inline beside the device name. */10460.peach-settings-row:has(> .peach-unpair-confirm) { flex-wrap: wrap; }10461.peach-unpair-confirm {10462  display: flex;10463  flex-direction: column;10464  gap: 8px;10465  width: 100%;10466}10467.peach-unpair-confirm-note {10468  margin: 0;10469  font-size: 0.6875rem;10470  line-height: 1.5;10471  color: var(--peach-t2);10472}