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/* Chirp-sync owns its own surface 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.peach-additional-url-row {652  display: flex;653  align-items: center;654  gap: 6px;655}656.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }657.peach-additional-url-remove {658  background: transparent;659  border: 1px solid var(--peach-t3);660  color: var(--peach-t2);661  width: 22px;662  height: 22px;663  border-radius: 4px;664  cursor: pointer;665  font-size: 0.875rem;666  line-height: 1;667  display: inline-flex;668  align-items: center;669  justify-content: center;670  flex-shrink: 0;671  transition: color 120ms ease, border-color 120ms ease;672}673.peach-additional-url-remove:hover:not(:disabled) {674  color: var(--peach-accent);675  border-color: var(--peach-border-accent);676}677.peach-additional-urls-add { align-self: flex-start; }678679/* Delete row */680.peach-entry-delete-row {681  display: flex;682  align-items: center;683  gap: 8px;684  padding-top: 18px;685  margin-top: 8px;686  border-top: 1px solid var(--peach-t3);687}688.peach-delete-btn {689  font-size: 0.6875rem;690  color: var(--peach-t2);691  padding: 4px 0;692}693.peach-delete-confirm-text {694  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;695  font-size: 0.6875rem;696  font-style: italic;697  color: var(--peach-t2);698  flex-shrink: 0;699}700701/* TOTP band */702.peach-totp-band {703  border-top: 1px solid var(--peach-t3);704  padding: 12px 20px 14px;705  position: relative;706  display: grid;707  grid-template-columns: 1fr auto;708  gap: 10px;709}710.peach-totp-main {711  min-width: 0;712  cursor: pointer;713  user-select: none;714}715.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }716.peach-totp-code-row {717  display: flex;718  align-items: flex-end;719  gap: 10px;720  min-width: 0;721}722.peach-totp-code {723  margin: 2px 0 0;724  font-family: var(--font-display);725  font-style: italic;726  font-weight: 300;727  font-size: 38px; color: var(--peach-accent);728  line-height: 0.95; min-height: 1em;729  min-width: 0;730}731.peach-totp-code-text {732  display: inline-flex;733  overflow: hidden;734  text-overflow: ellipsis;735  white-space: nowrap;736}737.peach-totp-copy-btn {738  margin-bottom: 2px;739  flex-shrink: 0;740  border-color: transparent;741}742.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }743.peach-totp-countdown {744  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;745  font-size: 22px; color: var(--peach-t1);746}747.peach-totp-ring { transform: rotate(-90deg); }748.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }749.peach-totp-ring-progress {750  fill: none; stroke: var(--peach-accent); stroke-width: 2;751  stroke-linecap: round;752  transition: stroke-dashoffset 1s linear, stroke 500ms ease;753}754/* Search bar */755.peach-search-wrap {756  border-top: 1px solid var(--peach-t3);757  background: var(--peach-s1);758  min-height: 54px; position: relative;759  box-shadow: inset 0 6px 18px transparent;760  transition: box-shadow 700ms ease;761}762.peach-search-wrap::before {763  content: "";764  position: absolute;765  left: 0;766  top: 0;767  height: 2px;768  width: var(--peach-totp-progress, 0%);769  background: var(--peach-accent);770  opacity: 0;771  transition: width 1s linear, opacity 180ms ease;772  pointer-events: none;773}774.peach-shell[data-totp-active="true"] .peach-search-wrap::before {775  opacity: 0.9;776}777.peach-shell[data-totp-active="true"] .peach-search-wrap {778  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);779}780781@keyframes peach-totp-code-flare {782  0%   { filter: brightness(1); }783  25%  { filter: brightness(1.3); }784  100% { filter: brightness(1); }785}786.peach-totp-code.is-hot {787  animation: peach-totp-code-flare 3000ms ease-in-out both;788}789.peach-search-bar {790  min-height: 54px;791  display: grid;792  grid-template-columns: auto minmax(0, 1fr) auto;793  align-items: center;794  gap: 8px; padding: 0 9px 0 12px;795}796.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }797.peach-search-input {798  border: 0; background: transparent; color: var(--peach-t0);799  font-family: var(--font-display);800  font-style: italic; font-size: 18px;801  outline: none; width: 100%; min-width: 0; padding: 0;802  caret-color: var(--peach-accent);803}804.peach-search-input::placeholder { color: var(--peach-t2); }805.peach-search-meta {806  display: grid;807  grid-auto-flow: column;808  align-items: center;809  justify-content: end;810  gap: 6px;811  min-width: max-content;812}813.peach-search-counter {814  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;815  font-size: 0.625rem; color: var(--peach-t2);816  display: inline-flex;817  align-items: center;818  line-height: 1;819}820.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }821822/* Buttons */823.peach-btn {824  border: 1px solid transparent; border-radius: 12px;825  background: transparent; color: var(--peach-t0);826  font-family: Inter, system-ui, sans-serif;827  font-size: 0.75rem; letter-spacing: 0.02em; padding: 8px 12px;828  cursor: pointer;829  transition:830    background-color var(--peach-dur-80) var(--peach-curve-arrival),831    color var(--peach-dur-80) var(--peach-curve-arrival),832    border-color var(--peach-dur-150) var(--peach-curve-arrival);833}834.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }835.peach-btn:disabled {836  opacity: 0.45;837  cursor: not-allowed;838}839.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 0.6875rem; }840.peach-btn--md { min-height: 38px; }841.peach-btn--accent {842  background: var(--peach-accent);843  color: rgba(0,0,0,0.92);844  font-weight: 500;845  box-shadow:846    0 1px 0 rgba(255,255,255,0.08) inset,847    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),848    0 3px 16px var(--peach-glow),849    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);850}851.peach-btn--accent:hover:not(:disabled) {852  background: var(--peach-accent);853  filter: brightness(1.10) saturate(1.05);854  box-shadow:855    0 1px 0 rgba(255,255,255,0.10) inset,856    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),857    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),858    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);859}860.peach-btn--ghost:not(.peach-icon-btn) { border-color: var(--peach-t3); color: var(--peach-t1); }861.peach-btn--ghost.peach-icon-btn { color: var(--peach-t1); }862.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }863.peach-icon-btn {864  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;865  display: inline-flex; align-items: center; justify-content: center;866  border-color: transparent;867  transition:868    color var(--peach-dur-80) var(--peach-curve-arrival),869    box-shadow var(--peach-dur-150) var(--peach-curve-arrival),870    background-color var(--peach-dur-80) var(--peach-curve-arrival);871}872.peach-icon-btn:hover:not(:disabled) {873  background: transparent;874  color: var(--peach-accent);875  box-shadow: 0 0 12px color-mix(in srgb, var(--peach-accent) 28%, transparent),876              0 0 4px color-mix(in srgb, var(--peach-accent) 16%, transparent);877}878879.peach-btn:focus-visible {880  outline: none;881  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);882}883884/* Lock button */885.peach-lock-icon { transform-origin: center; }886.peach-lock-btn { color: var(--peach-accent); }887.peach-lock-btn.is-locking .peach-lock-icon {888  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);889}890891/* Biometric unlock button */892.peach-biometric-btn {893  display: flex;894  align-items: center;895  justify-content: center;896  gap: 6px;897  margin-top: 8px;898  width: 100%;899}900901/* Copy button */902.peach-copy-btn {903  position: relative; overflow: hidden;904  color: var(--peach-t2); border-color: var(--peach-t3);905}906.peach-copy-icon {907  display: inline-flex; align-items: center; justify-content: center;908  position: relative; z-index: 1;909}910.peach-copy-icon-svg { display: block; }911.peach-copy-sheen {912  position: absolute; inset: 0;913  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%);914  opacity: 0; transform: scaleX(0.15); transform-origin: left center;915}916.peach-copy-btn.is-copied {917  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;918  box-shadow:919    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),920    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),921    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);922}923.peach-copy-btn.is-copied .peach-copy-icon {924  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;925}926.peach-copy-btn.is-copied .peach-copy-sheen {927  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;928}929.peach-copy-btn.is-retreat {930  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;931}932.peach-copy-btn.is-retreat .peach-copy-sheen {933  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;934}935.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }936.peach-copy-drain-bar {937  display: block; width: 100%; height: 100%;938  background: var(--peach-accent); opacity: 0.7;939  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;940}941942/* Unlock screen elements */943.peach-underline-input {944  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);945  padding: 6px 0; background: transparent; color: var(--peach-t0);946  outline: none;947  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;948  font-size: 0.8125rem;949  caret-color: var(--peach-accent);950}951.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }952.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }953.peach-hint {954  margin: 0;955  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;956  font-size: 0.625rem; color: var(--peach-t2);957}958.peach-unlock-footer {959  margin-top: 4px; display: flex; align-items: center; gap: 7px;960  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;961  font-size: 0.625rem; color: var(--peach-t2);962}963.peach-unlock-footer--lock {964  padding-top: 2px;965}966967/* Breach badge */968.peach-breach-badge {969  display: flex;970  position: relative;971  z-index: 1;972  align-items: center;973  gap: 7px;974  font-size: 0.5625rem;975  color: var(--peach-breach);976  padding: 5px 10px;977  margin-bottom: 4px;978  border-radius: 8px;979  background: rgba(220, 80, 60, 0.07);980  border: 1px solid rgba(220, 80, 60, 0.18);981  letter-spacing: 0.04em;982}983984.peach-password-value.is-breached {985  color: rgba(220, 80, 60, 0.75);986  border-bottom: 1px solid rgba(220, 80, 60, 0.22);987}988989/* ── Overlay views ─────────────────────────────────────────────────── */990.peach-overlay-view {991  position: absolute;992  inset: 0;993  display: flex;994  flex-direction: column;995  background:996    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),997    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),998    var(--peach-bg);999  z-index: 2;1000  overflow: hidden;1001  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1002}10031004.peach-overlay-view:has(.stk-shell) {1005  background: var(--peach-bg);1006}1007@keyframes overlay-in {1008  from { opacity: 0; transform: translateY(8px); }1009  to   { opacity: 1; transform: translateY(0); }1010}1011.peach-overlay-view.ov-enter-up {1012  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1013}1014.peach-overlay-view.ov-exit-up {1015  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1016}1017.peach-overlay-view.ov-enter-right {1018  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1019}1020.peach-overlay-view.ov-exit-right {1021  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1022}10231024@keyframes ov-enter-up {1025  from { opacity: 0; transform: translateY(18px); }1026  to   { opacity: 1; transform: translateY(0); }1027}1028@keyframes ov-exit-up {1029  from { opacity: 1; transform: translateY(0); }1030  to   { opacity: 0; transform: translateY(-12px); }1031}1032@keyframes ov-enter-right {1033  from { opacity: 0; transform: translateX(20px); }1034  to   { opacity: 1; transform: translateX(0); }1035}1036@keyframes ov-exit-right {1037  from { opacity: 1; transform: translateX(0); }1038  to   { opacity: 0; transform: translateX(20px); }1039}10401041/* Overlay shared header */1042.peach-overlay-header {1043  padding: 10px 12px 8px;1044  display: flex;1045  align-items: center;1046  gap: 10px;1047  flex-shrink: 0;1048}1049/* Back button — circular pill matching the settings stack masthead (.stk-back) */1050.peach-overlay-header .peach-btn--ghost.peach-icon-btn {1051  width: 28px;1052  height: 28px;1053  flex: 0 0 28px;1054  border-radius: 999px;1055  border: 1px solid var(--peach-border);1056  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);1057  color: var(--peach-t1);1058  padding: 0;1059}1060.peach-overlay-header .peach-btn--ghost.peach-icon-btn:hover {1061  color: var(--peach-t0);1062  border-color: color-mix(in srgb, var(--peach-accent) 34%, transparent);1063  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1064}1065.peach-overlay-title {1066  font-family: var(--font-display);1067  font-style: italic;1068  font-weight: 400;1069  font-size: 20px;1070  line-height: 1;1071  color: var(--peach-t0);1072  flex: 1;1073  text-align: center;1074}1075/* Balances the 28px back button so the title stays visually centred */1076.peach-overlay-spacer {1077  width: 28px;1078  flex: 0 0 28px;1079}10801081.peach-overlay-card {1082  background: var(--peach-s1);1083  border: 1px solid var(--peach-t3);1084  border-radius: 12px;1085  overflow: hidden;1086  width: 100%;1087}10881089.peach-onboarding-alt-actions {1090  display: flex;1091  flex-direction: column;1092  gap: 4px;1093  padding: 0;1094}10951096.peach-settings-copy {1097  margin: 0 0 10px;1098  font-size: 0.6875rem;1099  line-height: 1.5;1100  color: var(--peach-t2);1101}11021103.peach-settings-copy strong {1104  color: var(--peach-t0);1105}11061107.peach-settings-copy--spacious {1108  margin-bottom: 12px;1109}11101111.peach-settings-copy--result {1112  color: var(--peach-accent);1113  font-size: 0.8125rem;1114  text-align: center;1115  padding: 8px 0;1116}11171118.peach-settings-copy--danger {1119  color: var(--peach-breach);1120}11211122.peach-settings-copy--success {1123  color: var(--peach-accent);1124}11251126.peach-inline-feedback {1127  font-size: 0.6875rem;1128  margin: 10px 0 0;1129}11301131.peach-inline-feedback--ok {1132  color: var(--peach-accent);1133}11341135.peach-inline-feedback--error {1136  color: var(--peach-breach);1137}11381139.peach-inline-feedback--muted {1140  color: var(--peach-t2);1141  font-size: 0.625rem;1142  margin: 4px 0;1143}11441145.peach-inline-feedback--spaced {1146  margin-top: 12px;1147}11481149.peach-settings-actions--row {1150  display: flex;1151  gap: 6px;1152}11531154.peach-settings-actions--end {1155  margin-top: 14px;1156  justify-content: flex-end;1157}11581159.peach-settings-stack {1160  display: flex;1161  flex-direction: column;1162  gap: 6px;1163}11641165.peach-settings-stack--tight {1166  gap: 4px;1167}11681169.peach-settings-stack--spacious {1170  gap: 8px;1171}11721173.peach-settings-input {1174  width: 100%;1175  box-sizing: border-box;1176  padding: 8px 10px;1177  background: rgba(0, 0, 0, 0.22);1178  border: 1px solid transparent;1179  border-radius: 6px;1180  color: var(--peach-t0);1181  font-family: var(--font-ui);1182  font-size: 0.75rem;1183  outline: none;1184  transition: border-color 120ms ease, background 120ms ease;1185}11861187.peach-settings-input:focus {1188  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1189  background: rgba(0, 0, 0, 0.28);1190}11911192.peach-settings-input[type="password"] {1193  font-family: var(--font-mono);1194  letter-spacing: 0.04em;1195}11961197.peach-hidden-file-input {1198  display: none;1199}12001201.peach-checkbox-note {1202  display: flex;1203  align-items: flex-start;1204  gap: 8px;1205  font-size: 0.6875rem;1206  color: var(--peach-t1);1207  cursor: pointer;1208  margin: 12px 0;1209}12101211.peach-checkbox-note input {1212  margin-top: 1px;1213}12141215.peach-danger-notice {1216  background: rgba(220, 80, 60, 0.08);1217  border: 1px solid rgba(220, 80, 60, 0.2);1218  border-radius: 6px;1219  padding: 9px 11px;1220  font-size: 0.6875rem;1221  color: var(--peach-t1);1222  line-height: 1.5;1223}12241225.peach-info-notice {1226  font-size: 0.6875rem;1227  color: var(--peach-t1);1228  line-height: 1.5;1229  background: var(--surface-card);1230  border: 1px solid var(--peach-t3);1231  border-radius: 6px;1232  padding: 8px 10px;1233}12341235.peach-info-notice--warn {1236  border-color: rgba(220, 38, 38, 0.4);1237  background: rgba(220, 38, 38, 0.06);1238  color: rgba(220, 38, 38, 0.92);1239  margin-bottom: 8px;1240}12411242.peach-strength-row {1243  display: flex;1244  align-items: center;1245  gap: 8px;1246  margin-bottom: 10px;1247}12481249.peach-strength-track {1250  flex: 1;1251  height: 4px;1252  background: var(--peach-s2);1253  border-radius: 2px;1254  overflow: hidden;1255}12561257.peach-strength-fill {1258  height: 100%;1259  border-radius: 2px;1260  transition: width 120ms ease, background 120ms ease;1261}12621263/* ── Type selector tabs ── */1264.peach-type-tabs {1265  display: flex;1266  gap: 0;1267  background: var(--peach-t4);1268  border-radius: 8px;1269  padding: 3px;1270}12711272.peach-type-tab {1273  flex: 1;1274  display: flex;1275  align-items: center;1276  justify-content: center;1277  gap: 6px;1278  padding: 6px 10px;1279  border-radius: 6px;1280  border: none;1281  background: transparent;1282  cursor: pointer;1283  font-family: Inter, system-ui, sans-serif;1284  font-size: 0.6875rem;1285  font-weight: 400;1286  letter-spacing: 0.04em;1287  color: var(--peach-t1);1288  transition: background 150ms ease, color 150ms ease;1289}12901291.peach-type-tab.is-active {1292  background: var(--peach-s2);1293  color: var(--peach-t0);1294  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1295}12961297.peach-type-tab:not(.is-active):hover {1298  color: var(--peach-t0);1299}13001301.peach-type-tab svg {1302  opacity: 0.7;1303  flex-shrink: 0;1304}13051306.peach-type-tab.is-active svg {1307  opacity: 1;1308}13091310/* ── List view ───────────────────────────────────────────────────────── */1311.peach-list-top {1312  padding: 0 10px;1313  min-height: 46px;1314  display: flex;1315  align-items: center;1316  gap: 6px;1317  border-bottom: 1px solid var(--peach-t3);1318  flex-shrink: 0;1319  background: var(--peach-s1);1320}13211322.peach-vault-list {1323  flex: 1;1324  overflow-y: auto;1325  scrollbar-width: none;1326}1327.peach-vault-list::-webkit-scrollbar { display: none; }13281329/* Scrollbar — vault list */1330.peach-vault-list {1331  scrollbar-width: thin;1332  scrollbar-color: var(--peach-t3) transparent;1333}13341335.peach-vault-list::-webkit-scrollbar {1336  width: 3px;1337}13381339.peach-vault-list::-webkit-scrollbar-thumb {1340  background: var(--peach-t3);1341  border-radius: 2px;1342}13431344.peach-entry-row {1345  width: 100%;1346  display: flex;1347  align-items: center;1348  gap: 10px;1349  padding: 9px 16px;1350  background: transparent;1351  border: none;1352  border-bottom: 1px solid var(--peach-t3);1353  cursor: pointer;1354  color: inherit;1355  text-align: left;1356  transition: background 80ms ease;1357}1358.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1359.peach-entry-row:last-child { border-bottom: none; }1360.peach-entry-row.is-active {1361  box-shadow: inset 2px 0 0 var(--peach-accent);1362  background: rgba(240,232,216,0.03);1363}1364.peach-entry-row:focus-visible {1365  outline: none;1366  box-shadow: 0 0 0 1px var(--peach-border-accent);1367  background: rgba(240,232,216,0.03);1368}1369.peach-entry-row-icon {1370  width: 26px; height: 26px;1371  border-radius: 7px;1372  border: 1px solid var(--peach-t3);1373  display: flex; align-items: center; justify-content: center;1374  color: var(--peach-t2);1375  flex-shrink: 0;1376}1377.peach-entry-row-icon.is-breach {1378  border-color: rgba(220,80,60,0.3);1379  color: rgba(220,80,60,0.7);1380}13811382/* Title-initials chip used as the favicon fallback for login entries whose1383 * real favicon hasn't been cached by the browser yet (freshly-imported,1384 * never-visited domains). Background colour is hashed from the title so1385 * the same entry always shows the same chip. The chip fits the same1386 * 26×26 row icon slot the favicon would take. */1387.peach-favicon-initials {1388  display: inline-flex;1389  align-items: center;1390  justify-content: center;1391  width: 100%;1392  height: 100%;1393  border-radius: 4px;1394  font-family: "IBM Plex Mono", monospace;1395  font-size: 0.5625rem;1396  font-weight: 600;1397  letter-spacing: 0.04em;1398  color: rgba(240, 232, 216, 0.92);1399  text-transform: uppercase;1400  user-select: none;1401}1402.peach-entry-row-info { flex: 1; min-width: 0; }1403.peach-entry-row-name {1404  display: block;1405  font-family: var(--font-display);1406  font-size: 1.0625rem;1407  font-style: italic;1408  font-weight: 400;1409  color: var(--peach-t0);1410  line-height: 1.2;1411  white-space: nowrap;1412  overflow: hidden;1413  text-overflow: ellipsis;1414}1415.peach-entry-row-meta {1416  display: block;1417  font-family: "IBM Plex Mono", monospace;1418  font-size: 0.5625rem;1419  color: var(--peach-t2);1420  margin-top: 1px;1421  letter-spacing: 0.05em;1422}1423.peach-entry-row-dot {1424  width: 5px; height: 5px;1425  border-radius: 50%;1426  background: rgba(220,80,60,0.7);1427  flex-shrink: 0;1428}1429.peach-new-entry-row {1430  display: flex;1431  align-items: center;1432  justify-content: center;1433  gap: 6px;1434  width: 100%;1435  padding: 11px;1436  background: transparent;1437  border: none;1438  border-top: 1px solid var(--peach-t3);1439  color: var(--peach-t2);1440  font-family: "IBM Plex Mono", monospace;1441  font-size: 0.5625rem;1442  text-transform: uppercase;1443  letter-spacing: 0.14em;1444  cursor: pointer;1445  flex-shrink: 0;1446  transition: color 120ms ease, background 120ms ease;1447}1448.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14491450/* ── Multi-select mode ─────────────────────────────────────────────── */14511452/* Select-mode trigger button in sort bar — same shape as trash btn */1453.peach-sort-select-btn {1454  display: flex;1455  align-items: center;1456  justify-content: center;1457  padding: 3px 5px;1458  background: transparent;1459  border: none;1460  cursor: pointer;1461  color: var(--peach-t2);1462  border-radius: 4px;1463  transition: color 140ms ease, background 140ms ease;1464}1465.peach-sort-select-btn:hover {1466  color: var(--peach-t1);1467  background: var(--peach-t3);1468}14691470/* Sort bar in select mode */1471.peach-select-cancel-btn {1472  background: transparent;1473  border: none;1474  padding: 0 4px;1475  cursor: pointer;1476  font-family: "IBM Plex Mono", monospace;1477  font-size: 0.5625rem;1478  letter-spacing: 0.12em;1479  text-transform: uppercase;1480  color: var(--peach-t2);1481  transition: color 140ms ease;1482  flex-shrink: 0;1483}1484.peach-select-cancel-btn:hover { color: var(--peach-t0); }14851486.peach-select-count-label {1487  flex: 1;1488  text-align: center;1489  font-family: "IBM Plex Mono", monospace;1490  font-size: 0.5625rem;1491  letter-spacing: 0.14em;1492  text-transform: uppercase;1493  color: var(--peach-t1);1494}14951496.peach-select-all-btn {1497  background: transparent;1498  border: none;1499  padding: 0 4px;1500  cursor: pointer;1501  font-family: "IBM Plex Mono", monospace;1502  font-size: 0.5625rem;1503  letter-spacing: 0.12em;1504  text-transform: uppercase;1505  color: var(--peach-t2);1506  transition: color 140ms ease;1507  flex-shrink: 0;1508}1509.peach-select-all-btn:hover { color: var(--peach-accent); }15101511/* List in select mode */1512.peach-vault-list.is-selecting .peach-entry-row {1513  cursor: default;1514}1515.peach-vault-list.is-selecting .peach-entry-row:hover {1516  background: rgba(240,232,216,0.02);1517}1518.peach-vault-list.is-selecting .peach-entry-row.is-selected {1519  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1520}1521.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1522  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1523}15241525/* Select indicator circles in icon slot */1526.peach-entry-row-icon.is-select-icon {1527  color: var(--peach-t2);1528}1529.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1530  color: var(--peach-accent);1531}15321533/* Delete action bar at bottom (replaces new-entry row) */1534.peach-select-action-bar {1535  display: flex;1536  align-items: center;1537  justify-content: center;1538  gap: 7px;1539  width: 100%;1540  padding: 11px;1541  background: transparent;1542  border: none;1543  border-top: 1px solid var(--peach-t3);1544  color: var(--peach-t1);1545  font-family: "IBM Plex Mono", monospace;1546  font-size: 0.5625rem;1547  text-transform: uppercase;1548  letter-spacing: 0.14em;1549  cursor: pointer;1550  flex-shrink: 0;1551  transition: color 120ms ease, background 120ms ease;1552}1553.peach-select-action-bar:not(:disabled):hover {1554  color: var(--peach-t0);1555  background: rgba(220,80,60,0.06);1556}1557.peach-select-action-bar:not(:disabled):hover svg {1558  stroke: rgba(220,80,60,0.8);1559}1560.peach-select-action-bar:disabled,1561.peach-select-action-bar.is-empty {1562  color: var(--peach-t2);1563  cursor: default;1564  opacity: 0.5;1565}1566.peach-search-counter-list {1567  white-space: nowrap;1568  flex-shrink: 0;1569}1570.peach-list-empty {1571  min-height: 180px;1572  display: grid;1573  place-items: center;1574  color: var(--peach-t2);1575  font-family: "IBM Plex Mono", monospace;1576  font-size: 0.6875rem;1577}15781579/* ── Settings view ───────────────────────────────────────────────────── */1580.peach-settings-body {1581  flex: 1;1582  overflow-y: auto;1583  min-height: 0;1584  display: flex;1585  flex-direction: column;1586  padding: 2px 0 10px;1587}1588.peach-settings-group {1589  margin: 4px 10px;1590  padding: 9px 14px 11px;1591  border-radius: 12px;1592  border: 1px solid rgba(255, 255, 255, 0.07);1593  background: rgba(26, 20, 16, 0.60);1594  backdrop-filter: blur(10px) saturate(1.3);1595  -webkit-backdrop-filter: blur(10px) saturate(1.3);1596}15971598.peach-settings-group + .peach-settings-group {1599  margin-top: 6px;1600}16011602@supports not (backdrop-filter: blur(1px)) {1603  .peach-settings-group {1604    background: rgba(26, 20, 16, 0.90);1605    border-color: rgba(255, 255, 255, 0.09);1606    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1607  }1608}16091610.light .peach-settings-group,1611[data-theme="light"] .peach-settings-group {1612  background: rgba(245, 237, 226, 0.70);1613  border-color: rgba(26, 18, 8, 0.08);1614  backdrop-filter: blur(10px) saturate(1.2);1615  -webkit-backdrop-filter: blur(10px) saturate(1.2);1616}16171618@supports not (backdrop-filter: blur(1px)) {1619  .light .peach-settings-group,1620  [data-theme="light"] .peach-settings-group {1621    background: rgba(245, 237, 226, 0.97);1622    border-color: rgba(26, 18, 8, 0.10);1623  }1624}1625.peach-export-intro {1626  padding-bottom: 8px;1627}1628.peach-export-card {1629  display: grid;1630  gap: 10px;1631}1632.peach-rune-canvas {1633  border-radius: 8px;1634  background: rgba(0, 0, 0, 0.22);1635  flex: 1;1636  align-self: center;1637}1638.peach-script-input {1639  font-family: "PeachScript", monospace;1640  font-size: 0.6875rem;1641  line-height: 1.9;1642  letter-spacing: 0.06em;1643  color: var(--peach-t0);1644  background: rgba(0, 0, 0, 0.22);1645  border: none;1646  border-radius: 6px;1647  padding: 12px;1648  width: 100%;1649  min-height: 96px;1650  resize: vertical;1651  word-break: break-all;1652  scrollbar-width: none;1653  -ms-overflow-style: none;1654}16551656.peach-script-input::-webkit-scrollbar { display: none; }1657.peach-csv-warning {1658  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1659  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1660  color: var(--peach-t0);1661  border-radius: 6px;1662  padding: 10px 12px;1663  margin-bottom: 8px;1664  font-size: 0.75rem;1665  line-height: 1.45;1666}1667.peach-export-card--primary {1668  background:1669    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1670}16711672/* Export menu — distribute the three format cards across the popup. */1673.peach-export-menu {1674  display: flex;1675  flex-direction: column;1676  flex: 1;1677  min-height: 0;1678}1679.peach-export-menu .peach-settings-group {1680  flex: 1;1681  display: flex;1682  flex-direction: column;1683  justify-content: center;1684  gap: 10px;1685}16861687/* Result view — the script-string fills the remaining vertical surface. */1688.peach-export-result-group {1689  flex: 1;1690  display: flex;1691  flex-direction: column;1692  min-height: 0;1693  border-bottom: none;1694}1695.peach-export-result-group .peach-export-card {1696  flex: 1;1697  min-height: 0;1698  display: flex;1699  flex-direction: column;1700  gap: 10px;1701}1702.peach-export-result-group .peach-export-card-copy {1703  flex-shrink: 0;1704}1705.peach-export-result-group .peach-settings-label {1706  flex-shrink: 0;1707}1708.peach-export-result-group button {1709  flex-shrink: 0;1710}1711.peach-export-card-head {1712  display: flex;1713  align-items: center;1714  justify-content: space-between;1715  gap: 10px;1716}1717.peach-export-card-copy {1718  margin: 0;1719  font-size: 0.75rem;1720  line-height: 1.55;1721  color: var(--peach-t1);1722}1723.peach-export-note {1724  margin: 0;1725  font-size: 0.625rem;1726  line-height: 1.5;1727  color: var(--peach-t2);1728}1729.peach-export-strength-track {1730  height: 3px;1731  background: var(--peach-border);1732  border-radius: 2px;1733  margin: 4px 0 2px;1734  overflow: hidden;1735}1736.peach-export-strength-fill {1737  height: 100%;1738  border-radius: 2px;1739  transition: width 250ms ease, background 250ms ease;1740}1741.peach-export-strength-warn {1742  margin: 0;1743  font-size: 0.625rem;1744  line-height: 1.5;1745  color: #e84040;1746  font-family: "IBM Plex Mono", monospace;1747}1748.peach-export-strength-hint {1749  margin: 0;1750  font-size: 0.625rem;1751  line-height: 1.5;1752  color: var(--peach-t2);1753  font-family: "IBM Plex Mono", monospace;1754}1755.peach-export-pill {1756  display: inline-flex;1757  align-items: center;1758  padding: 4px 8px;1759  border-radius: 999px;1760  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1761  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1762  color: var(--peach-accent);1763  font-family: "IBM Plex Mono", monospace;1764  font-size: 0.5rem;1765  letter-spacing: 0.12em;1766  text-transform: uppercase;1767  white-space: nowrap;1768}1769.peach-export-pill--danger {1770  border-color: rgba(220,80,60,0.22);1771  background: rgba(220,80,60,0.08);1772  color: var(--peach-breach);1773}1774.peach-settings-label {1775  margin: 0 0 6px;1776  font-family: "IBM Plex Mono", monospace;1777  font-size: 0.5rem;1778  text-transform: uppercase;1779  letter-spacing: 0.18em;1780  color: var(--peach-t2);1781}1782.peach-settings-row {1783  display: flex;1784  align-items: center;1785  justify-content: space-between;1786  gap: 12px;1787  min-height: 34px;1788  padding: 6px 0;1789  font-size: 0.8125rem;1790  color: var(--peach-t1);1791}1792.peach-settings-row--meta { color: var(--peach-t2); font-size: 0.75rem; }1793.peach-settings-value {1794  font-family: "IBM Plex Mono", monospace;1795  font-size: 0.625rem;1796  color: var(--peach-t2);1797}17981799.peach-settings-value--status {1800  display: flex;1801  align-items: center;1802  gap: 6px;1803}18041805.peach-settings-link {1806  font-family: "IBM Plex Mono", monospace;1807  font-size: 0.625rem;1808  color: var(--peach-accent);1809  text-decoration: none;1810  cursor: pointer;1811}1812.peach-settings-link:hover {1813  text-decoration: underline;1814}18151816.peach-settings-row--stack {1817  flex-direction: column;1818  align-items: stretch;1819  gap: 6px;1820}18211822.peach-settings-row--top {1823  align-items: flex-start;1824}18251826.peach-settings-row-main {1827  display: flex;1828  flex-direction: column;1829  gap: 4px;1830  flex: 1;1831}1832.peach-toggle {1833  width: 28px; height: 16px;1834  border-radius: 999px;1835  background: var(--peach-t3);1836  border: 1px solid var(--peach-t3);1837  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1838  flex-shrink: 0;1839  transition: background 200ms ease, border-color 200ms ease;1840  cursor: pointer;1841}1842.peach-toggle.is-on {1843  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1844  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1845}1846.peach-toggle-knob {1847  width: 10px; height: 10px;1848  border-radius: 50%;1849  background: var(--peach-t2);1850  flex-shrink: 0;1851  transform: translateX(0px);1852  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1853}1854.peach-toggle.is-on .peach-toggle-knob {1855  background: var(--peach-accent);1856  transform: translateX(12px);1857}1858.peach-settings-footer {1859  display: flex;1860  align-items: center;1861  gap: 8px;1862  margin-top: auto;1863  padding: 14px 16px 8px;1864  font-family: "IBM Plex Mono", monospace;1865  font-size: 0.5625rem;1866  color: var(--peach-t2);1867}18681869/* ── Settings home navigation ──────────────────────────────────────────── */1870.peach-settings-nav-label {1871  margin: 0 0 2px;1872  padding: 12px 16px 4px;1873  font-family: "IBM Plex Mono", monospace;1874  font-size: 0.5rem;1875  text-transform: uppercase;1876  letter-spacing: 0.18em;1877  color: var(--peach-t2);1878}18791880.peach-settings-cat-row {1881  display: flex;1882  align-items: center;1883  gap: 10px;1884  width: 100%;1885  padding: 9px 16px;1886  background: none;1887  border: none;1888  border-bottom: 1px solid var(--peach-t3);1889  cursor: pointer;1890  text-align: left;1891  color: inherit;1892  transition: background var(--peach-dur-80) ease;1893}1894.peach-settings-cat-row:hover {1895  background: var(--peach-t3);1896}1897.peach-settings-cat-row:last-child {1898  border-bottom: none;1899}19001901.peach-settings-cat-icon {1902  width: 28px;1903  height: 28px;1904  border-radius: 7px;1905  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1906  color: var(--peach-accent);1907  display: flex;1908  align-items: center;1909  justify-content: center;1910  flex-shrink: 0;1911}1912/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1913   Darken the icon stroke to ink and bump the bg tint so the icon reads1914   sharply while the cell still feels accent-tinted. */1915.light .peach-settings-cat-icon {1916  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1917  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1918}19191920.peach-settings-cat-content {1921  flex: 1;1922  display: flex;1923  flex-direction: column;1924  gap: 2px;1925  min-width: 0;1926}19271928.peach-settings-cat-name {1929  font-size: 0.8125rem;1930  font-weight: 450;1931  color: var(--peach-t0);1932  line-height: 1.2;1933}19341935.peach-settings-cat-desc {1936  font-size: 0.625rem;1937  color: var(--peach-t2);1938  line-height: 1.3;1939  white-space: nowrap;1940  overflow: hidden;1941  text-overflow: ellipsis;1942}19431944.peach-settings-cat-chevron {1945  color: var(--peach-t2);1946  flex-shrink: 0;1947  opacity: 0.5;1948}19491950/* ── Settings sub-view section labels ──────────────────────────────────── */1951.peach-settings-sub-label {1952  margin: 12px 0 4px;1953  font-family: "IBM Plex Mono", monospace;1954  font-size: 0.5rem;1955  text-transform: uppercase;1956  letter-spacing: 0.18em;1957  color: var(--peach-t2);1958}1959.peach-settings-sub-label:first-child {1960  margin-top: 4px;1961}19621963/* ── Settings: collapsible Advanced section ─────────────────────────────── */1964.peach-settings-advanced-toggle {1965  display: flex;1966  align-items: center;1967  justify-content: space-between;1968  width: 100%;1969  background: none;1970  border: none;1971  cursor: pointer;1972  padding: 12px 0 4px;1973  margin: 0;1974  color: inherit;1975}1976.peach-settings-advanced-toggle:hover .peach-settings-advanced-chevron {1977  color: var(--peach-t1);1978}1979.peach-settings-advanced-chevron {1980  font-size: 0.5625rem;1981  color: var(--peach-t3);1982  letter-spacing: 0;1983  transition: color 120ms ease;1984}19851986/* ── Feedback form ──────────────────────────────────────────────────────── */1987.peach-feedback-group {1988  flex: 1;1989  display: flex;1990  flex-direction: column;1991  border-bottom: none;1992}19931994.peach-feedback-intro {1995  margin: 4px 0 14px;1996  font-size: 0.75rem;1997  line-height: 1.55;1998  color: var(--peach-t1);1999}20002001.peach-feedback-chips {2002  display: flex;2003  flex-wrap: wrap;2004  gap: 6px;2005  margin-bottom: 14px;2006}20072008.peach-feedback-chip {2009  padding: 4px 10px;2010  border-radius: 999px;2011  border: 1px solid var(--peach-t3);2012  background: none;2013  color: var(--peach-t2);2014  font-size: 0.6875rem;2015  font-family: var(--font-ui);2016  cursor: pointer;2017  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2018    background var(--peach-dur-80) ease;2019}2020.peach-feedback-chip:hover {2021  border-color: var(--peach-t2);2022  color: var(--peach-t1);2023}2024.peach-feedback-chip.is-active {2025  border-color: color-mix(in srgb, var(--peach-accent) 82%, white 18%);2026  background: color-mix(in srgb, var(--peach-accent) 22%, rgba(255, 255, 255, 0.08));2027  color: color-mix(in srgb, var(--peach-accent) 86%, white 14%);2028  box-shadow:2029    0 0 0 1px color-mix(in srgb, var(--peach-accent) 42%, transparent),2030    0 0 14px color-mix(in srgb, var(--peach-accent) 22%, transparent);2031  font-weight: 700;2032}20332034.peach-feedback-textarea {2035  flex: 1;2036  width: 100%;2037  min-height: 120px;2038  box-sizing: border-box;2039  background: rgba(0, 0, 0, 0.22);2040  border: 1px solid transparent;2041  border-radius: 6px;2042  color: var(--peach-t0);2043  font-size: 0.75rem;2044  font-family: var(--font-ui);2045  line-height: 1.5;2046  padding: 8px 10px;2047  resize: none;2048  outline: none;2049  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2050}2051.peach-feedback-textarea:focus {2052  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2053  background: rgba(0, 0, 0, 0.28);2054}2055.peach-feedback-textarea:focus {2056  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2057}2058.peach-feedback-textarea::placeholder {2059  color: var(--peach-t2);2060}20612062.peach-feedback-meta {2063  margin: 6px 0 0;2064  font-size: 0.625rem;2065  color: var(--peach-t2);2066  font-family: "IBM Plex Mono", monospace;2067}20682069.peach-feedback-result {2070  margin: 8px 0 0;2071  font-size: 0.6875rem;2072  font-family: "IBM Plex Mono", monospace;2073}2074.peach-feedback-result--ok { color: var(--peach-sync-ok); }2075.peach-feedback-result--err { color: var(--peach-breach); }20762077.peach-feedback-submit {2078  width: 100%;2079  margin-top: 12px;2080  justify-content: center;2081}20822083.peach-feedback-anon {2084  margin: 8px 0 0;2085  font-size: 0.625rem;2086  color: var(--peach-t2);2087  text-align: center;2088}20892090.peach-feedback-thanks {2091  margin: auto 0;2092  padding: 18px 14px;2093  border: 1px solid color-mix(in srgb, var(--peach-accent) 42%, transparent);2094  border-radius: 8px;2095  background:2096    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 16%, transparent), transparent),2097    rgba(0, 0, 0, 0.18);2098  color: var(--peach-t1);2099  text-align: center;2100}21012102.peach-feedback-thanks p {2103  margin: 0;2104  font-size: 0.75rem;2105  line-height: 1.5;2106}21072108.peach-feedback-thanks-title {2109  color: var(--peach-t0);2110  font-family: "Cormorant Garamond", serif;2111  font-size: 1.375rem !important;2112  line-height: 1.1 !important;2113  margin-bottom: 8px !important;2114}21152116.peach-passkey-badge {2117  margin-left: 8px;2118  font-size: 0.625rem;2119  letter-spacing: 0.06em;2120  text-transform: uppercase;2121  color: var(--peach-t2);2122  font-family: var(--font-ui);2123  vertical-align: middle;2124}21252126.peach-passkey-delete-btn {2127  color: var(--peach-breach);2128  border-color: rgba(229, 85, 85, 0.25);2129}21302131.peach-passkey-delete-confirm {2132  display: flex;2133  align-items: center;2134  gap: 8px;2135  padding: 8px 10px;2136  background: rgba(229, 85, 85, 0.06);2137  border: 1px solid rgba(229, 85, 85, 0.2);2138  border-radius: 6px;2139}21402141.peach-passkey-delete-confirm-copy {2142  flex: 1;2143  font-size: 0.6875rem;2144  color: var(--peach-t1);2145}21462147.peach-passkey-delete-btn--confirm {2148  color: var(--peach-breach);2149  border-color: rgba(229, 85, 85, 0.4);2150}21512152.peach-passkey-activity {2153  flex-direction: column;2154  align-items: flex-start;2155  gap: 4px;2156}21572158.peach-passkey-meta {2159  font-size: 0.6875rem;2160  color: var(--peach-t2);2161}21622163.peach-passkey-actions {2164  position: relative;2165  z-index: 1;2166  margin-top: 14px;2167  display: flex;2168  flex-direction: column;2169  gap: 8px;2170}21712172.peach-passkey-approval {2173  display: flex;2174  flex-direction: column;2175  align-items: center;2176  padding: 16px 20px 14px;2177  gap: 8px;2178  text-align: center;2179}21802181.peach-passkey-approval-icon {2182  width: 36px;2183  height: 36px;2184  border-radius: 10px;2185  background: var(--peach-s2);2186  border: 1px solid var(--peach-t3);2187  display: flex;2188  align-items: center;2189  justify-content: center;2190  flex-shrink: 0;2191  color: var(--peach-accent);2192}21932194.peach-passkey-approval-icon img,2195.peach-passkey-approval-icon svg {2196  width: 22px;2197  height: 22px;2198  border-radius: 5px;2199}22002201.peach-passkey-approval-rp {2202  font-family: var(--font-ui);2203  font-size: 0.75rem;2204  color: var(--peach-t2);2205  letter-spacing: 0.03em;2206}22072208.peach-passkey-approval-action {2209  font-family: var(--font-display);2210  font-style: italic;2211  font-weight: 300;2212  font-size: 18px;2213  color: var(--peach-t0);2214  line-height: 1.1;2215  margin: 1px 0;2216}22172218.peach-passkey-approval-user {2219  font-family: var(--font-mono);2220  font-size: 0.6875rem;2221  color: var(--peach-t1);2222  background: var(--peach-s2);2223  border: 1px solid var(--peach-t3);2224  border-radius: 4px;2225  padding: 3px 8px;2226}22272228.peach-passkey-approval-notice {2229  font-size: 0.625rem;2230  color: var(--peach-t2);2231  line-height: 1.5;2232  max-width: 220px;2233}22342235.peach-passkey-approval-actions {2236  display: flex;2237  gap: 8px;2238  width: 100%;2239  margin-top: 6px;2240}22412242.peach-passkey-approval-actions .peach-btn {2243  flex: 1;2244}22452246/* ── Inline generator drawer ── */2247.peach-generator-drawer {2248  display: grid;2249  grid-template-rows: 0fr;2250  transition: grid-template-rows 320ms var(--peach-curve-arrival);2251  overflow: hidden;2252}2253.peach-generator-drawer.is-open {2254  grid-template-rows: 1fr;2255}2256.peach-generator-drawer-inner {2257  min-height: 0;2258  overflow: hidden;2259}2260.peach-generator-drawer-content {2261  border-top: 1px solid var(--peach-t3);2262  padding: 8px 0 4px;2263  display: flex;2264  flex-direction: column;2265  gap: 8px;2266}22672268/* ── Compact generator (inside entry edit) ── */2269.peach-generator-drawer-content--compact {2270  border-top: 1px solid var(--peach-t3);2271  padding: 8px 0 2px;2272  gap: 7px;2273}2274.peach-pwgen-compact-display-row {2275  display: flex;2276  align-items: center;2277  gap: 6px;2278}2279.peach-pwgen-compact-output {2280  flex: 1;2281  min-width: 0;2282  font-family: "IBM Plex Mono", monospace;2283  font-size: 0.6875rem;2284  font-weight: 400;2285  letter-spacing: 0.04em;2286  color: var(--peach-t0);2287  background: rgba(240, 232, 216, 0.04);2288  border: 1px solid var(--peach-t3);2289  border-radius: 5px;2290  padding: 5px 8px;2291  line-height: 1.5;2292  outline: none;2293  transition: border-color 120ms ease;2294}22952296.peach-pwgen-compact-output:focus {2297  border-color: var(--peach-t1);2298}2299.peach-pwgen-compact-controls {2300  display: flex;2301  align-items: center;2302  gap: 6px;2303}2304.peach-pwgen-compact-slider {2305  flex: 1;2306  min-width: 0;2307  height: 2px !important;2308}2309.peach-pwgen-compact-controls .peach-pwgen-len-num {2310  flex-shrink: 0;2311  min-width: 18px;2312  text-align: right;2313}2314.peach-pwgen-compact-pills {2315  display: flex;2316  gap: 3px;2317  flex-shrink: 0;2318}2319.peach-pwgen-compact-pills .peach-pwgen-pill {2320  padding: 2px 7px;2321  font-size: 0.5rem;2322}2323.peach-pwgen-compact-use {2324  flex-shrink: 0;2325  font-size: 0.625rem !important;2326  padding: 3px 9px !important;2327  min-height: 22px !important;2328  border-radius: 5px !important;2329}23302331/* ── Password edit row (input + eye toggle side-by-side) ── */2332.peach-password-edit-row {2333  display: flex;2334  align-items: center;2335  gap: 6px;2336}2337.peach-password-edit-row .peach-inline-input {2338  flex: 1;2339  min-width: 0;2340}23412342/* ── Generate toggle link ── */2343.peach-generate-toggle-link {2344  display: inline-flex;2345  align-items: center;2346  gap: 5px;2347  background: none;2348  border: none;2349  padding: 0;2350  cursor: pointer;2351  font-family: "IBM Plex Mono", monospace;2352  font-size: 0.625rem;2353  color: var(--peach-t2);2354  letter-spacing: 0.04em;2355  transition: color 120ms ease;2356  align-self: flex-start;2357}2358.peach-generate-toggle-link:hover {2359  color: var(--peach-accent);2360}23612362/* Holds the generate + history toggle links on one row under the editor. */2363.peach-password-edit-links {2364  display: flex;2365  align-items: center;2366  gap: 14px;2367  flex-wrap: wrap;2368}23692370/* ── Past-password history list ── */2371.peach-password-history {2372  display: grid;2373  gap: 4px;2374  margin-top: 2px;2375  max-height: 168px;2376  overflow-y: auto;2377  scrollbar-width: thin;2378}2379.peach-history-row {2380  display: flex;2381  align-items: center;2382  justify-content: space-between;2383  gap: 8px;2384  padding: 5px 7px;2385  border-radius: 7px;2386  background: color-mix(in srgb, var(--peach-accent) 5%, transparent);2387  border: 1px solid color-mix(in srgb, var(--peach-accent) 9%, transparent);2388}2389.peach-history-main {2390  display: flex;2391  flex-direction: column;2392  gap: 1px;2393  min-width: 0;2394  flex: 1;2395}2396.peach-history-pw {2397  font-family: "IBM Plex Mono", monospace;2398  font-size: 0.6875rem;2399  color: var(--peach-t1);2400  white-space: nowrap;2401  overflow: hidden;2402  text-overflow: ellipsis;2403}2404.peach-history-pw .peach-password-mask {2405  letter-spacing: 0.08em;2406  color: var(--peach-t2);2407}2408.peach-history-age {2409  font-family: "IBM Plex Mono", monospace;2410  font-size: 0.5625rem;2411  color: var(--peach-t3, var(--peach-t2));2412  letter-spacing: 0.03em;2413}2414.peach-history-actions {2415  display: flex;2416  align-items: center;2417  gap: 2px;2418  flex-shrink: 0;2419}2420.peach-history-use {2421  font-family: "IBM Plex Mono", monospace;2422  font-size: 0.5625rem;2423  letter-spacing: 0.05em;2424  padding: 3px 7px;2425}2426.peach-history-empty {2427  font-family: "IBM Plex Mono", monospace;2428  font-size: 0.625rem;2429  line-height: 1.45;2430  color: var(--peach-t2);2431  padding: 6px 8px;2432  border-radius: 7px;2433  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);2434  border: 1px solid color-mix(in srgb, var(--peach-accent) 8%, transparent);2435}24362437/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2438.peach-entry-body {2439  flex: 1;2440  overflow-y: auto;2441  overflow-x: hidden;2442  scrollbar-width: none;2443  -ms-overflow-style: none;2444  overscroll-behavior: contain;2445  display: grid;2446  gap: 10px;2447  align-content: start;2448  padding: 10px 20px 14px;2449  min-width: 0;2450  min-height: 0;2451}2452.peach-entry-body::-webkit-scrollbar { display: none; }24532454/* Type-toggle pills + inline note toolbar */2455.peach-new-type-row {2456  display: flex;2457  align-items: center;2458  gap: 6px;2459  margin-bottom: 2px;2460}2461.peach-new-type-btn {2462  background: transparent;2463  border: 1px solid var(--peach-t3);2464  border-radius: 12px;2465  padding: 3px 10px;2466  font-family: "IBM Plex Mono", monospace;2467  font-size: 0.5625rem;2468  letter-spacing: 0.12em;2469  text-transform: uppercase;2470  color: var(--peach-t2);2471  cursor: pointer;2472  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2473}2474.peach-new-type-btn.is-active {2475  color: var(--peach-t0);2476  border-color: var(--peach-accent);2477  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2478}2479.peach-new-type-btn:not(.is-active):hover {2480  color: var(--peach-t1);2481  border-color: var(--peach-t2);2482}24832484/* Editable title */2485.peach-new-title-wrap { margin: 0 0 2px; }2486.peach-new-title-input {2487  background: transparent;2488  border: none;2489  outline: none;2490  width: 100%;2491  color: var(--peach-t0);2492  font-family: var(--font-display);2493  font-style: italic;2494  font-weight: 400;2495  font-size: 40px;2496  line-height: 0.95;2497  caret-color: var(--peach-accent);2498}2499.peach-new-title-input::placeholder { color: var(--peach-t2); }25002501/* Editable domain field */2502.peach-domain-edit-row {2503  display: flex;2504  align-items: center;2505  gap: 6px;2506}25072508.peach-domain-edit-row .peach-domain-value--edit {2509  flex: 1;2510  width: 0;2511}25122513.peach-domain-url-btn {2514  flex-shrink: 0;2515  background: transparent;2516  border: none;2517  cursor: pointer;2518  color: var(--peach-t3);2519  padding: 2px 3px;2520  display: flex;2521  align-items: center;2522  line-height: 0;2523  border-radius: 3px;2524  transition: color 120ms ease;2525}25262527.peach-domain-url-btn:hover {2528  color: var(--peach-accent);2529}25302531.peach-domain-value--edit {2532  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2533  font-size: 0.625rem;2534  font-style: italic;2535  letter-spacing: 0.12em;2536  color: var(--peach-t1);2537  background: transparent;2538  border: none;2539  border-bottom: 1px solid var(--peach-t3);2540  outline: none;2541  width: 100%;2542  padding: 2px 0;2543  caret-color: var(--peach-accent);2544  transition: border-color 140ms ease, color 140ms ease;2545}2546.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2547.peach-domain-value--edit:focus {2548  border-bottom-color: rgba(240, 232, 216, 0.28);2549  color: var(--peach-t0);2550}25512552/* Editable field values (username, password, totp) */2553.peach-field-value--edit {2554  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2555  font-size: 0.8125rem;2556  color: var(--peach-t0);2557  background: transparent;2558  border: none;2559  border-bottom: 1px solid var(--peach-t3);2560  outline: none;2561  flex: 1;2562  min-width: 0;2563  padding: 3px 0;2564  caret-color: var(--peach-accent);2565  transition: border-color 140ms ease, color 140ms ease;2566}2567.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2568.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2569.peach-field-value--edit:focus {2570  border-bottom-color: rgba(240, 232, 216, 0.28);2571  color: var(--peach-t0);2572}25732574/* "+ add optional field" links */2575.peach-entry-add-links {2576  display: flex;2577  gap: 12px;2578  flex-wrap: wrap;2579  margin-top: -2px;2580}2581.peach-add-field-link {2582  background: transparent;2583  border: none;2584  padding: 0;2585  cursor: pointer;2586  font-family: "IBM Plex Mono", monospace;2587  font-size: 0.5625rem;2588  letter-spacing: 0.1em;2589  text-transform: uppercase;2590  color: var(--peach-t2);2591  transition: color 140ms ease;2592}2593.peach-add-field-link:hover { color: var(--peach-accent); }25942595/* ── New entry form (legacy classes) ────────────────────────────────── */2596.peach-new-body {2597  flex: 1;2598  overflow-y: auto;2599  padding: 10px 20px 14px;2600}2601.peach-new-name-input {2602  background: transparent;2603  border: none;2604  outline: none;2605  width: 100%;2606  color: var(--peach-t0);2607  font-family: var(--font-display);2608  font-style: italic;2609  font-weight: 400;2610  font-size: 40px;2611  line-height: 0.95;2612  caret-color: var(--peach-accent);2613}2614.peach-new-name-input::placeholder { color: var(--peach-t2); }2615.peach-new-field-input {2616  background: transparent;2617  border: none;2618  outline: none;2619  flex: 1;2620  min-width: 0;2621  caret-color: var(--peach-accent);2622}2623.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }26242625/* ── Canary card ── */2626.peach-canary-card {2627  border: 1px solid rgba(217, 160, 48, 0.2);2628  background: rgba(217, 160, 48, 0.03);2629  border-radius: 8px;2630  padding: 12px;2631}26322633.peach-canary-settings-header {2634  display: flex;2635  align-items: center;2636  justify-content: space-between;2637  cursor: pointer;2638  user-select: none;2639}26402641.peach-canary-card .peach-label {2642  color: rgba(217, 160, 48, 0.85);2643}26442645.peach-canary-card .peach-new-field-input {2646  border-color: rgba(217, 160, 48, 0.25);2647}26482649.peach-canary-card .peach-new-field-input:focus {2650  border-color: rgba(217, 160, 48, 0.5);2651}26522653.peach-canary-body {2654  margin-top: 12px;2655  display: flex;2656  flex-direction: column;2657  gap: 10px;2658}26592660.peach-canary-explainer {2661  display: flex;2662  gap: 10px;2663  padding: 10px 12px;2664  border-radius: 10px;2665  background: rgba(217, 160, 48, 0.06);2666  border: 1px solid rgba(217, 160, 48, 0.22);2667  margin-bottom: 4px;2668}26692670.peach-canary-explainer-icon {2671  font-size: 1rem;2672  flex-shrink: 0;2673  line-height: 1.2;2674}26752676.peach-canary-explainer-title {2677  font-family: var(--font-ui);2678  font-size: 0.6875rem;2679  font-weight: 500;2680  color: rgba(217, 160, 48, 0.9);2681  margin: 0 0 3px;2682}26832684.peach-canary-explainer-copy {2685  font-family: var(--font-ui);2686  font-size: 0.625rem;2687  color: var(--peach-t2);2688  line-height: 1.55;2689  margin: 0;2690}26912692.peach-canary-hint {2693  font-size: 0.625rem;2694  color: var(--peach-t2);2695  font-family: Inter, system-ui, sans-serif;2696  line-height: 1.5;2697  margin-top: 4px;2698}26992700.peach-canary-actions-row {2701  display: flex;2702  align-items: center;2703  gap: 8px;2704}27052706.peach-canary-test-btn {2707  border-color: rgba(217, 160, 48, 0.3);2708  color: rgba(217, 160, 48, 0.85);2709}27102711.peach-canary-test-result {2712  font-size: 0.625rem;2713  font-family: Inter, system-ui, sans-serif;2714}27152716.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2717.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }27182719.peach-canary-badge {2720  display: flex;2721  position: relative;2722  z-index: 1;2723  align-items: center;2724  gap: 5px;2725  padding: 4px 10px;2726  background: rgba(217, 160, 48, 0.12);2727  border: 1px solid rgba(217, 160, 48, 0.35);2728  border-radius: 6px;2729  margin-bottom: 6px;2730  width: fit-content;2731}27322733.peach-canary-badge-label {2734  font-size: 0.625rem;2735  letter-spacing: 0.06em;2736  color: rgba(217, 160, 48, 0.9);2737  font-family: var(--font-ui);2738  text-transform: uppercase;2739}27402741.peach-canary-badge-icon {2742  font-size: 0.6875rem;2743}27442745.peach-canary-suppress-row {2746  display: flex;2747  align-items: center;2748  gap: 8px;2749  padding: 6px 10px;2750  background: rgba(217, 160, 48, 0.08);2751  border-radius: 6px;2752  margin-bottom: 8px;2753}27542755.peach-canary-suppress-label {2756  font-size: 0.6875rem;2757  color: rgba(217, 160, 48, 0.85);2758  cursor: pointer;2759  font-family: var(--font-ui);2760  letter-spacing: 0.04em;2761}27622763.peach-regen-panel {2764  position: relative;2765  z-index: 1;2766  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2767  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2768  border-radius: 8px;2769  padding: 12px;2770  margin-bottom: 8px;2771}27722773.peach-regen-panel-header {2774  display: flex;2775  align-items: center;2776  justify-content: space-between;2777  margin-bottom: 10px;2778}27792780.peach-regen-panel-title {2781  font-size: 0.6875rem;2782  font-weight: 600;2783  letter-spacing: 0.06em;2784  text-transform: uppercase;2785  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2786}27872788.peach-regen-output {2789  background: rgba(0, 0, 0, 0.2);2790  border-radius: 6px;2791  padding: 10px;2792  margin-bottom: 10px;2793  font-family: var(--font-mono);2794  font-size: 0.8125rem;2795  word-break: break-all;2796  color: var(--peach-t1);2797}27982799.peach-regen-actions {2800  display: flex;2801  gap: 6px;2802}28032804.peach-regen-actions--spaced {2805  margin-bottom: 8px;2806}28072808.peach-regen-action-grow {2809  flex: 1;2810}28112812.peach-regen-copy-btn {2813  padding: 0 8px;2814}28152816.peach-regen-success {2817  position: relative;2818  z-index: 1;2819  background: rgba(40, 180, 80, 0.1);2820  border: 1px solid rgba(40, 180, 80, 0.3);2821  border-radius: 8px;2822  padding: 10px 12px;2823  margin-bottom: 8px;2824  display: flex;2825  align-items: center;2826  gap: 8px;2827  font-size: 0.6875rem;2828  color: rgba(40, 180, 80, 0.9);2829}28302831/* ── Note editor overlay ── */2832.peach-note-editor {2833  position: absolute;2834  inset: 0;2835  z-index: 200;2836  display: flex;2837  flex-direction: column;2838  background:2839    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2840    var(--peach-bg);2841  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2842}28432844.peach-note-editor-header {2845  display: flex;2846  align-items: center;2847  gap: 10px;2848  padding: 14px 16px 10px;2849  border-bottom: 1px solid var(--peach-t3);2850  flex-shrink: 0;2851}28522853.peach-note-editor-back {2854  background: transparent;2855  border: none;2856  cursor: pointer;2857  color: var(--peach-t2);2858  padding: 4px 6px;2859  border-radius: 6px;2860  display: flex;2861  align-items: center;2862  transition: color 120ms ease, background 120ms ease;2863  flex-shrink: 0;2864}2865.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }28662867.peach-note-editor-label {2868  flex: 1;2869  font-family: var(--font-display);2870  font-style: italic;2871  font-size: 0.9375rem;2872  color: var(--peach-t1);2873  letter-spacing: 0.02em;2874}28752876.peach-note-editor-save-btn {2877  background: transparent;2878  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2879  border-radius: 8px;2880  color: var(--peach-accent);2881  font-family: "IBM Plex Mono", monospace;2882  font-size: 0.625rem;2883  letter-spacing: 0.06em;2884  text-transform: uppercase;2885  padding: 3px 10px;2886  cursor: pointer;2887  transition: background 120ms ease, border-color 120ms ease;2888}2889.peach-note-editor-save-btn:hover:not(:disabled) {2890  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2891  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2892}2893.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }28942895.peach-note-toolbar {2896  display: flex;2897  align-items: center;2898  gap: 3px;2899  padding: 6px 14px 5px;2900  border-bottom: 1px solid var(--peach-t3);2901  flex-shrink: 0;2902}29032904.peach-note-tool-btn {2905  background: transparent;2906  border: 1px solid transparent;2907  border-radius: 5px;2908  color: var(--peach-t2);2909  font-family: "IBM Plex Mono", monospace;2910  font-size: 0.625rem;2911  letter-spacing: 0.04em;2912  padding: 2px 8px;2913  cursor: pointer;2914  line-height: 1.6;2915  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2916}2917.peach-note-tool-btn:hover {2918  background: var(--peach-t4);2919  color: var(--peach-t0);2920  border-color: var(--peach-t3);2921}29222923.peach-note-tool-icon {2924  padding: 3px 7px;2925  display: inline-flex;2926  align-items: center;2927  justify-content: center;2928}29292930.peach-note-tool-divider {2931  width: 1px;2932  height: 14px;2933  background: var(--peach-t3);2934  margin: 0 4px;2935  flex-shrink: 0;2936}29372938.peach-note-editor-body {2939  flex: 1;2940  overflow-y: auto;2941  padding: 16px 20px 20px;2942  outline: none;2943  font-family: var(--font-display);2944  font-size: 1rem;2945  line-height: 1.75;2946  color: var(--peach-t0);2947  scrollbar-width: none;2948  word-break: break-word;2949}2950.peach-note-editor-body:empty::before {2951  content: "write your note…";2952  color: var(--peach-t3);2953  font-style: italic;2954  pointer-events: none;2955}29562957/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2958.peach-note-editor-inline {2959  display: flex;2960  flex-direction: column;2961  flex: 1;2962  min-height: 0;2963}2964.peach-note-editor-body--inline {2965  flex: 1;2966  min-height: 0;2967  font-size: 0.9375rem;2968  padding: 10px 20px 14px;2969}29702971/* Full-width toolbar row inside the body (Add.tsx note type).2972   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2973.peach-note-toolbar-body {2974  display: flex;2975  align-items: center;2976  gap: 3px;2977  padding: 5px 20px 4px;2978  margin: 2px -20px 0;2979  border-bottom: 1px solid var(--peach-t3);2980  flex-shrink: 0;2981}29822983/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2984   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2985   and .peach-note-tool-divider button-level styles. */2986.peach-note-toolbar-inline {2987  display: flex;2988  align-items: center;2989  gap: 3px;2990  margin-left: auto;2991  padding-left: 10px;2992  border-left: 1px solid var(--peach-t3);2993  min-height: 22px;2994}29952996/* Entry.tsx toolbar row (no tabs, toolbar only) */2997.peach-entry-note-toolbar-row {2998  display: flex;2999  align-items: center;3000  margin: 4px 0 6px;3001  position: relative;3002  z-index: 1;3003}3004.peach-entry-note-toolbar-row .peach-note-toolbar-inline {3005  border-left: none;3006  padding-left: 0;3007  margin-left: 0;3008}30093010/* Note body — fills available vertical space in Add.tsx and Entry.tsx */3011.peach-note-body {3012  display: flex;3013  flex-direction: column;3014  flex: 1;3015  min-height: 0;3016  margin: 4px 0 0;3017}3018.peach-entry-body--new .peach-note-body {3019  margin: 8px -20px 0;3020}30213022/* Add.tsx body is a grid by default; swap to a flex column when a note is3023   active so the note body can stretch and pin the tags row to the bottom. */3024.peach-entry-body--new:has(.peach-note-body) {3025  display: flex;3026  flex-direction: column;3027}30283029/* Rich content element styles (editor + display) */3030.peach-note-editor-body h2,3031.peach-note-content h2 {3032  font-family: var(--font-display);3033  font-size: 20px;3034  font-weight: 600;3035  font-style: italic;3036  color: var(--peach-t0);3037  margin: 6px 0 2px;3038  line-height: 1.3;3039}3040.peach-note-editor-body ul,3041.peach-note-content ul {3042  padding-left: 18px;3043  margin: 3px 0;3044  list-style: disc;3045}3046.peach-note-editor-body ol,3047.peach-note-content ol {3048  padding-left: 18px;3049  margin: 3px 0;3050  list-style: decimal;3051}3052.peach-note-editor-body li,3053.peach-note-content li { margin: 2px 0; }3054.peach-note-editor-body hr,3055.peach-note-content hr {3056  border: none;3057  border-top: 1px solid var(--peach-t3);3058  margin: 10px 0;3059}30603061/* font size elements from execCommand */3062.peach-note-editor-body font[size="1"],3063.peach-note-content font[size="1"] { font-size: 0.6875rem; line-height: 1.6; }3064.peach-note-editor-body font[size="2"],3065.peach-note-content font[size="2"] { font-size: 0.8125rem; }3066.peach-note-editor-body font[size="3"],3067.peach-note-content font[size="3"] { font-size: 1rem; }3068.peach-note-editor-body font[size="4"],3069.peach-note-content font[size="4"] { font-size: 20px; }3070.peach-note-editor-body font[size="5"],3071.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }30723073/* bold / italic inside the editor and note display */3074.peach-note-editor-body b, .peach-note-editor-body strong,3075.peach-note-content b, .peach-note-content strong { font-weight: 700; }3076.peach-note-editor-body em, .peach-note-editor-body i,3077.peach-note-content em, .peach-note-content i { font-style: italic; }30783079/* note display — rendered HTML, no pre-wrap */3080.peach-note-content {3081  overflow: auto;3082  max-height: 340px;3083  word-break: break-word;3084}30853086/* ── Note textarea ── */3087.peach-note-textarea {3088  width: 100%;3089  min-height: 180px;3090  max-height: 280px;3091  resize: vertical;3092  background: var(--peach-t4);3093  border: 1px solid var(--peach-t3);3094  border-radius: 8px;3095  padding: 10px 12px;3096  font-family: "IBM Plex Mono", monospace;3097  font-size: 0.75rem;3098  line-height: 1.7;3099  color: var(--peach-t1);3100  outline: none;3101  transition: border-color 150ms ease;3102}31033104.peach-note-textarea:focus {3105  border-color: var(--peach-t2);3106}31073108.peach-note-char-count {3109  font-family: "IBM Plex Mono", monospace;3110  font-size: 0.5625rem;3111  color: var(--peach-t3);3112  text-align: right;3113  margin-top: 4px;3114  letter-spacing: 0.1em;3115}31163117/* ── Field input baseline ── */3118.peach-new-field-input {3119  width: 100%;3120  background: transparent;3121  border: none;3122  border-bottom: 1px solid var(--peach-t3);3123  padding: 4px 0;3124  color: var(--peach-t1);3125  font-family: "IBM Plex Mono", monospace;3126  font-size: 0.8125rem;3127  outline: none;3128  transition: border-color 150ms ease;3129}31303131.peach-new-field-input:focus {3132  border-bottom-color: var(--peach-t0);3133  color: var(--peach-t0);3134}31353136.peach-new-name-input {3137  width: 100%;3138  background: transparent;3139  border: none;3140  border-bottom: 1px solid var(--peach-t3);3141  padding: 6px 0;3142  font-family: var(--font-display);3143  font-style: italic;3144  font-size: 28px;3145  color: var(--peach-t0);3146  outline: none;3147  transition: border-color 150ms ease;3148}31493150.peach-new-name-input:focus {3151  border-bottom-color: var(--peach-t1);3152}31533154.peach-new-name-input::placeholder {3155  color: var(--peach-t2);3156  font-style: italic;3157}31583159.peach-new-field-input::placeholder {3160  color: var(--peach-t3);3161}31623163/* ── Demo entrance animation ── */3164#hd-shell {3165  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3166}3167@keyframes hd-shell-enter {3168  from { opacity: 0; transform: scale(0.96) translateY(16px); }3169  to   { opacity: 1; transform: scale(1) translateY(0); }3170}31713172/* ── Keyframes ── */3173@keyframes peach-char-enter {3174  from { opacity: 0; transform: translateY(0.22em); }3175  to   { opacity: 1; transform: translateY(0); }3176}3177@keyframes peach-content-enter {3178  from { opacity: 0.96; transform: translateY(4px); }3179  to   { opacity: 1; transform: translateY(0); }3180}3181@keyframes peach-content-exit {3182  from { opacity: 1; transform: translateY(0); }3183  to   { opacity: 0.92; transform: translateY(-3px); }3184}3185@keyframes peach-screen-enter {3186  from { opacity: 0; transform: translateY(14px); }3187  to   { opacity: 1; transform: translateY(0); }3188}3189@keyframes peach-shell-fade-in {3190  from { opacity: 0; }3191  to   { opacity: 1; }3192}3193@keyframes peach-veil-in {3194  from { opacity: 0; }3195  to   { opacity: 1; }3196}3197@keyframes peach-lock-settle {3198  0%   { transform: scale(0.9); }3199  65%  { transform: scale(1.08); }3200  100% { transform: scale(1); }3201}3202@keyframes peach-copy-confirm {3203  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3204  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); }3205}3206@keyframes peach-copy-retreat {3207  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); }3208  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3209}3210@keyframes peach-copy-flood {3211  from { opacity: 0; transform: scaleX(0.15); }3212  to   { opacity: 1; transform: scaleX(1); }3213}3214@keyframes peach-copy-icon-settle {3215  from  { transform: scale(0.84); }3216  70%   { transform: scale(1.08); }3217  to    { transform: scale(1); }3218}3219@keyframes peach-copy-sheen-retreat {3220  from { opacity: 1; transform: scaleX(1); }3221  to   { opacity: 0; transform: scaleX(0.15); }3222}3223@keyframes peach-copy-drain {3224  from { width: 100%; }3225  to   { width: 0; }3226}3227@keyframes peach-shake {3228  0%, 100% { transform: translateX(0); }3229  20%      { transform: translateX(-6px); }3230  40%      { transform: translateX(6px); }3231  60%      { transform: translateX(-4px); }3232  80%      { transform: translateX(4px); }3233}32343235@keyframes pip-pulse {3236  0% { transform: scale(1); }3237  40% { transform: scale(2.2); }3238  100% { transform: scale(1); }3239}324032413242/* ── Password generator ── */3243.peach-pwgen-body {3244  flex: 1; overflow-y: auto;3245  display: flex; flex-direction: column;3246}3247.peach-policy-badge {3248  display: flex; align-items: center;3249  padding: 6px 20px 0;3250  font-size: 0.625rem; font-family: Inter, sans-serif;3251  color: var(--peach-t2); letter-spacing: 0.04em;3252}3253.peach-pwgen-display {3254  padding: 14px 20px 12px;3255  border-bottom: 1px solid var(--peach-t3);3256  display: flex; align-items: flex-start; gap: 10px;3257}3258.peach-pwgen-display-row {3259  display: flex;3260  align-items: flex-start;3261  gap: 8px;3262  padding-bottom: 8px;3263  border-bottom: 1px solid var(--peach-t3);3264}3265.peach-pwgen-output {3266  flex: 1; min-width: 0; margin: 0;3267  font-family: "IBM Plex Mono", monospace;3268  font-size: 0.8125rem; color: var(--peach-t0);3269  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3270  white-space: normal;3271  padding: 10px 12px;3272  background: var(--peach-t4);3273  border-radius: 6px;3274  min-height: 36px;3275}3276.peach-pwgen-output-display {3277  flex: 1;3278  min-width: 0;3279  margin: 0;3280  font-family: var(--font-display);3281  font-style: italic;3282  font-weight: 300;3283  font-size: 32px;3284  line-height: 1.05;3285  color: var(--peach-t0);3286  word-break: break-all;3287  overflow-wrap: break-word;3288  white-space: normal;3289  letter-spacing: 0.02em;3290}3291.peach-pwgen-display-actions {3292  display: flex;3293  flex-direction: column;3294  gap: 4px;3295  flex-shrink: 0;3296  margin-top: 2px;3297}3298.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3299.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3300.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3301.peach-pwgen-len-num {3302  font-family: "IBM Plex Mono", monospace;3303  font-size: 0.75rem; color: var(--peach-accent);3304}3305.peach-pwgen-len-num--edit {3306  cursor: text;3307  border-bottom: 1px dotted color-mix(in srgb, var(--peach-accent) 50%, transparent);3308}3309.peach-pwgen-len-input {3310  font-family: "IBM Plex Mono", monospace;3311  font-size: 0.75rem;3312  color: var(--peach-accent);3313  background: transparent;3314  border: none;3315  border-bottom: 1px solid var(--peach-accent);3316  outline: none;3317  width: 32px;3318  text-align: right;3319  padding: 0;3320}3321.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3322.peach-pwgen-toggles { display: flex; flex-direction: column; }3323.peach-pwgen-charset-pills {3324  display: flex;3325  gap: 6px;3326  flex-wrap: wrap;3327}3328.peach-pwgen-pill {3329  padding: 4px 11px;3330  border-radius: 999px;3331  border: 1px solid var(--peach-t3);3332  background: transparent;3333  color: var(--peach-t2);3334  font-family: "IBM Plex Mono", monospace;3335  font-size: 0.5625rem;3336  letter-spacing: 0.08em;3337  cursor: pointer;3338  transition: all 150ms ease;3339}3340.peach-pwgen-pill.is-on {3341  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3342  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3343  color: var(--peach-accent);3344}3345.peach-pwgen-pill:not(.is-on):hover {3346  color: var(--peach-t1);3347  border-color: var(--peach-t2);3348}3349.peach-pwgen-use-btn {3350  width: 100%;3351  min-height: 34px;3352  border-radius: 8px;3353  margin-top: 2px;3354}3355.peach-generator-constraint-note {3356  font-family: 'IBM Plex Mono', monospace;3357  font-size: 10px;3358  color: var(--peach-t3);3359  letter-spacing: 0.04em;3360  margin: 0;3361  transition: opacity 200ms ease;3362}3363.peach-pwgen-toggle-row {3364  display: flex; align-items: center; justify-content: space-between;3365  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3366}3367.peach-pwgen-toggle-row:last-child { border-bottom: none; }3368.peach-pwgen-toggle-label { font-size: 0.8125rem; color: var(--peach-t1); }33693370/* Peach popup should not expose native scrollbars on internal panels. */3371.peach-settings-body,3372.peach-new-body,3373.peach-pwgen-body,3374.lock-screen,3375.peach-import-preview {3376  scrollbar-width: none;3377  -ms-overflow-style: none;3378  overscroll-behavior: contain;3379}3380.peach-settings-body::-webkit-scrollbar,3381.peach-new-body::-webkit-scrollbar,3382.peach-pwgen-body::-webkit-scrollbar,3383.lock-screen::-webkit-scrollbar,3384.peach-import-preview::-webkit-scrollbar {3385  width: 0;3386  height: 0;3387  display: none;3388}33893390.lock-screen {3391  height: 100%;3392  min-height: 100%;3393  overflow-y: auto;3394  padding: 18px 18px 16px;3395  gap: 14px;3396  grid-template-rows: auto auto auto 1fr auto;3397  align-content: stretch;3398  position: relative;3399  isolation: isolate;3400}3401.peach-screen.lock-screen--vault-stage {3402  display: flex;3403  flex-direction: column;3404  justify-content: flex-start;3405  gap: 18px;3406  padding: 20px 18px 18px;3407  overflow: hidden;3408}3409.peach-screen.lock-screen--vault-stage .peach-lock-panel {3410  margin-top: 0;3411}3412.lock-screen--onboarding {3413  display: flex;3414  flex-direction: column;3415  gap: 12px;3416  justify-content: flex-start;3417}34183419.lock-screen::before {3420  content: "";3421  position: absolute;3422  inset: 12px 18px auto auto;3423  width: 160px;3424  height: 160px;3425  border-radius: 999px;3426  background:3427    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%);3428  filter: blur(6px);3429  opacity: 0.7;3430  pointer-events: none;3431  z-index: 0;3432}34333434.peach-lock-rune-string {3435  flex: 1;3436  display: flex;3437  align-items: center;3438  justify-content: center;3439  gap: 6px;3440  font-family: PeachScript, monospace;3441  font-size: 0.8125rem;3442  letter-spacing: 0.05em;3443  pointer-events: none;3444  user-select: none;3445  position: relative;3446  z-index: 1;3447}34483449.peach-lock-rune-string span {3450  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3451  text-shadow:3452    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3453    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3454  transition: color 0.9s ease, text-shadow 0.9s ease;3455}34563457.peach-lock-rune-string span.is-glowing {3458  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3459  text-shadow:3460    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3461    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3462}34633464.lock-screen-header {3465  display: flex;3466  align-items: center;3467  justify-content: space-between;3468  position: relative;3469  z-index: 1;3470}34713472.lock-password-input.shake {3473  animation: peach-shake 300ms ease-in-out;3474}34753476.peach-hint-error {3477  color: rgba(220, 80, 60, 0.92);3478}34793480.peach-onboarding-headline {3481  margin: 0;3482  font-family: var(--font-display);3483  font-size: 35px;3484  line-height: 0.88;3485  font-style: italic;3486  font-weight: 400;3487  max-width: 252px;3488}34893490.peach-lock-copy {3491  display: grid;3492  gap: 8px;3493  position: relative;3494  z-index: 1;3495}34963497.peach-lock-copy--onboarding {3498  gap: 10px;3499}35003501.peach-lock-hero {3502  position: relative;3503  z-index: 1;3504  display: grid;3505  gap: 8px;3506  min-height: 0;3507  padding: 4px 2px 0;3508  border: none;3509  border-radius: 0;3510  background: transparent;3511  box-shadow: none;3512}3513.peach-lock-hero-art {3514  position: absolute;3515  right: -8px;3516  top: -6px;3517  width: 120px;3518  height: 120px;3519  display: flex;3520  align-items: center;3521  justify-content: center;3522  pointer-events: none;3523  opacity: 0.12;3524  filter: saturate(0.9);3525}3526.peach-lock-hero-mark {3527  width: 100%;3528  height: 100%;3529}3530/* Peach body stays brand-peach across every accent — we don't want a3531   green or blue peach when sage/sky is selected. Leaf + vein keep the3532   sage tint because a real peach has a sage leaf. In the new brand-kit3533   mark the leaf is path 1 and the vein stroke is path 2; the body and3534   back-lobe (paths 3 + 4) must stay untouched. */3535.peach-lock-hero-mark path:nth-child(1) {3536  fill: rgba(123, 144, 96, 0.88);3537}3538.peach-lock-hero-mark path:nth-child(2) {3539  stroke: rgba(94, 122, 66, 0.95);3540}3541.peach-lock-hero > *:not(.peach-lock-hero-art) {3542  position: relative;3543  z-index: 1;3544}35453546.peach-lock-eyebrow {3547  display: inline-flex;3548  align-items: center;3549  width: fit-content;3550  padding: 4px 9px;3551  border-radius: 999px;3552  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3553  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3554  color: var(--peach-t0);3555  font-family: "IBM Plex Mono", monospace;3556  font-size: 0.5rem;3557  letter-spacing: 0.18em;3558  text-transform: uppercase;3559}35603561.peach-lock-label-row {3562  display: flex;3563  align-items: center;3564  justify-content: space-between;3565  margin-bottom: 0;3566}35673568.peach-lock-reveal-btn {3569  display: inline-flex;3570  align-items: center;3571  gap: 4px;3572  background: none;3573  border: none;3574  cursor: pointer;3575  font-family: "IBM Plex Mono", monospace;3576  font-size: 0.5625rem;3577  letter-spacing: 0.06em;3578  color: var(--peach-t2);3579  padding: 2px 0;3580  transition: color 150ms ease;3581}35823583.peach-lock-reveal-btn:hover {3584  color: var(--peach-t1);3585}35863587.peach-lock-warning {3588  color: rgba(220, 80, 60, 0.85) !important;3589  line-height: 1.5;3590}35913592.peach-onboarding-cards {3593  display: grid;3594  gap: 8px;3595  position: relative;3596  z-index: 1;3597}35983599.peach-lock-panel {3600  position: relative;3601  z-index: 1;3602  display: grid;3603  gap: 9px;3604  padding: 14px 16px 15px;3605  border-radius: 18px;3606  border: 1px solid var(--peach-t3);3607  background:3608    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3609  box-shadow:3610    inset 0 1px 0 rgba(240, 232, 216, 0.04),3611    0 12px 28px rgba(0, 0, 0, 0.12);3612}36133614/* Glass surface — lock panel and settings groups */3615.peach-glass {3616  background: rgba(26, 20, 16, 0.65);3617  border: 1px solid rgba(255, 255, 255, 0.08);3618  border-radius: 12px;3619  backdrop-filter: blur(12px) saturate(1.4);3620  -webkit-backdrop-filter: blur(12px) saturate(1.4);3621}36223623@supports not (backdrop-filter: blur(1px)) {3624  .peach-glass {3625    background: rgba(26, 20, 16, 0.92);3626    border: 1px solid rgba(255, 255, 255, 0.10);3627    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3628  }3629}36303631.light .peach-glass,3632[data-theme="light"] .peach-glass {3633  background: rgba(240, 233, 223, 0.72);3634  border: 1px solid rgba(26, 18, 8, 0.08);3635  backdrop-filter: blur(12px) saturate(1.2);3636  -webkit-backdrop-filter: blur(12px) saturate(1.2);3637}36383639@supports not (backdrop-filter: blur(1px)) {3640  .light .peach-glass,3641  [data-theme="light"] .peach-glass {3642    background: rgba(240, 233, 223, 0.97);3643    border: 1px solid rgba(26, 18, 8, 0.10);3644  }3645}36463647/* Lock panel keeps its own border-radius over the generic glass token */3648.peach-lock-panel.peach-glass {3649  border-radius: 18px;3650  background: rgba(26, 20, 16, 0.65);3651  border: 1px solid rgba(255, 255, 255, 0.08);3652  box-shadow:3653    inset 0 1px 0 rgba(255, 255, 255, 0.05),3654    0 12px 28px rgba(0, 0, 0, 0.3);3655}36563657.light .peach-lock-panel.peach-glass,3658[data-theme="light"] .peach-lock-panel.peach-glass {3659  background: rgba(240, 233, 223, 0.82);3660  border: 1px solid rgba(26, 18, 8, 0.08);3661  box-shadow:3662    inset 0 1px 0 rgba(255, 255, 255, 0.4),3663    0 8px 24px rgba(80, 56, 32, 0.15);3664}36653666@supports not (backdrop-filter: blur(1px)) {3667  .peach-lock-panel.peach-glass {3668    background: rgba(26, 20, 16, 0.92);3669    box-shadow:3670      inset 0 1px 0 rgba(255, 255, 255, 0.05),3671      0 12px 28px rgba(0, 0, 0, 0.4);3672  }3673  .light .peach-lock-panel.peach-glass,3674  [data-theme="light"] .peach-lock-panel.peach-glass {3675    background: rgba(240, 233, 223, 0.98);3676  }3677}36783679.peach-lock-panel--secondary {3680  gap: 12px;3681}36823683.peach-lock-panel-header {3684  display: flex;3685  align-items: baseline;3686  justify-content: space-between;3687  gap: 12px;3688}36893690.peach-lock-option-grid {3691  display: grid;3692  gap: 10px;3693}36943695.peach-lock-option {3696  width: 100%;3697  display: grid;3698  gap: 6px;3699  padding: 14px 15px;3700  border-radius: 16px;3701  border: 1px solid rgba(240, 232, 216, 0.08);3702  background: rgba(240, 232, 216, 0.02);3703  color: var(--peach-t0);3704  text-align: left;3705  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3706}37073708.peach-lock-option:hover {3709  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3710  background: rgba(240, 232, 216, 0.04);3711  transform: translateY(-1px);3712}37133714.peach-lock-option-title {3715  font-size: 0.75rem;3716  color: var(--peach-t0);3717}37183719.peach-lock-option-copy {3720  font-size: 0.6875rem;3721  line-height: 1.55;3722  color: var(--peach-t1);3723}37243725.peach-onboarding-stack {3726  margin-top: 2px;3727}3728.peach-lock-panel-footer {3729  display: grid;3730  gap: 6px;3731  margin-top: 2px;3732  padding-top: 10px;3733  border-top: 1px solid rgba(240, 232, 216, 0.06);3734}37353736/* ── Restore tab view ─────────────────────────────────────────────────────3737   Tab-based restore screen replacing the old three-card picker. */37383739.peach-restore-tabview {3740  overflow: hidden;3741}37423743.peach-restore-tabcard {3744  flex: 1;3745  display: flex;3746  flex-direction: column;3747  gap: 0;3748  padding: 0;3749  overflow: hidden;3750  cursor: default;3751  user-select: none;3752  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;3753}37543755/* ── Tab selector ─────────────────────────────────────────────────────── */37563757.peach-restore-tabs {3758  display: flex;3759  justify-content: space-around;3760  padding: 14px 10px 10px;3761  border-bottom: 1px solid var(--peach-t3);3762  gap: 2px;3763  overflow: hidden;3764  scrollbar-width: none;3765}3766.peach-restore-tabs::-webkit-scrollbar { display: none; }37673768.peach-restore-tab {3769  background: none;3770  border: none;3771  cursor: pointer;3772  padding: 3px 2px;3773  font-family: 'Cormorant Garamond', Georgia, serif;3774  font-style: italic;3775  font-size: 11px;3776  color: var(--peach-t2);3777  transition: color 150ms ease, text-shadow 150ms ease;3778  flex: 1;3779  min-width: 0;3780  text-align: center;3781  white-space: nowrap;3782  overflow: hidden;3783  text-overflow: ellipsis;3784}3785.peach-restore-tab:hover {3786  color: var(--peach-accent);3787  text-shadow:3788    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3789    0 0 18px color-mix(in srgb, var(--peach-accent) 25%, transparent);3790}3791.peach-restore-tab.is-active {3792  color: var(--peach-accent);3793  text-shadow:3794    0 0 10px color-mix(in srgb, var(--peach-accent) 60%, transparent),3795    0 0 22px color-mix(in srgb, var(--peach-accent) 30%, transparent);3796}37973798/* ── Content area ─────────────────────────────────────────────────────── */37993800.peach-restore-content {3801  padding: 16px 16px 14px;3802  display: flex;3803  flex-direction: column;3804  gap: 8px;3805  overflow: hidden;3806  scrollbar-width: none;3807  flex: 1;3808}3809.peach-restore-content::-webkit-scrollbar { display: none; }3810.peach-restore-content > * {3811  overflow: hidden;3812  scrollbar-width: none;3813}3814.peach-restore-content > *::-webkit-scrollbar { display: none; }38153816/* ── Shared tab inner layout ──────────────────────────────────────────── */38173818.peach-rt-symbols,3819.peach-rt-csv,3820.peach-rt-phone,3821.peach-restore-codex {3822  display: flex;3823  flex-direction: column;3824  gap: 8px;3825  overflow: hidden;3826}38273828.peach-restore-codex {3829  min-height: 0;3830  justify-content: center;3831}38323833.peach-restore-codex-title {3834  margin: 0;3835  font-family: var(--font-display);3836  font-size: 1rem;3837  font-style: italic;3838  color: var(--peach-t0);3839}38403841.peach-restore-codex-copy {3842  margin: 0;3843  font-size: 0.75rem;3844  line-height: 1.5;3845  color: var(--peach-t1);3846}38473848.peach-restore-codex-button {3849  width: 100%;3850  justify-content: center;3851}38523853.peach-rt-submit {3854  width: 100%;3855}38563857.peach-rt-error {3858  margin: 0;3859  font-size: 0.6875rem;3860  color: var(--peach-breach);3861  line-height: 1.4;3862}38633864/* ── PeachScript tab ──────────────────────────────────────────────────── */38653866.peach-restore-symbols-textarea {3867  font-family: 'PeachScript', monospace;3868  font-size: 13px;3869  line-height: 1.9;3870  letter-spacing: 0.1em;3871  word-break: break-all;3872  resize: none;3873  width: 100%;3874  min-height: 56px;3875  max-height: 72px;3876  overflow: hidden;3877  scrollbar-width: none;3878  -ms-overflow-style: none;3879  box-sizing: border-box;3880  padding: 6px 8px;3881  border-radius: 8px;3882  border: 1px solid var(--peach-t3);3883  background: rgba(240, 232, 216, 0.03);3884  color: var(--peach-t0);3885}3886.peach-restore-symbols-textarea::-webkit-scrollbar { display: none; }3887.peach-restore-symbols-textarea:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }38883889.peach-restore-symbols-pass {3890  width: 100%;3891  box-sizing: border-box;3892  padding: 7px 10px;3893  border-radius: 8px;3894  border: 1px solid var(--peach-t3);3895  background: rgba(240, 232, 216, 0.03);3896  color: var(--peach-t0);3897  font-size: 0.8125rem;3898}3899.peach-restore-symbols-pass::placeholder { color: var(--peach-t2); }3900.peach-restore-symbols-pass:focus { outline: none; border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent); }39013902.peach-rt-divider {3903  text-align: center;3904  font-size: 0.6875rem;3905  color: var(--peach-t2);3906  font-style: italic;3907}39083909.peach-rt-file-label {3910  width: 100%;3911  justify-content: center;3912}39133914.peach-rt-anim-canvas {3915  width: 100%;3916  height: 180px;3917  border-radius: 10px;3918  overflow: hidden;3919  display: block;3920}39213922/* ── CSV tab ──────────────────────────────────────────────────────────── */39233924.peach-rt-csv-sources {3925  margin: 0;3926  font-size: 0.6875rem;3927  color: var(--peach-t2);3928  line-height: 1.5;3929  text-align: center;3930}39313932.peach-rt-csv-warning {3933  margin: 0;3934  font-family: "IBM Plex Mono", monospace;3935  font-size: 0.5625rem;3936  letter-spacing: 0.12em;3937  color: var(--peach-breach);3938  text-align: center;3939}39403941/* ── From Phone tab ───────────────────────────────────────────────────── */39423943.peach-rt-phone-code {3944  margin: 0;3945  text-align: center;3946  font-family: "IBM Plex Mono", monospace;3947  font-size: 22px;3948  letter-spacing: 0.18em;3949  color: var(--peach-t0);3950}39513952.peach-rt-phone-qr {3953  display: block;3954  width: 96px;3955  height: 96px;3956  margin: 0 auto;3957  border-radius: 6px;3958  image-rendering: pixelated;3959  overflow: hidden;3960}39613962.peach-rt-phone-hint {3963  margin: 0;3964  font-size: 0.6875rem;3965  color: var(--peach-t2);3966  line-height: 1.55;3967  text-align: center;3968}39693970/* ── Intro popup ──────────────────────────────────────────────────────── */39713972.peach-restore-intro-overlay {3973  position: absolute;3974  inset: 0;3975  z-index: 100;3976  display: flex;3977  align-items: center;3978  justify-content: center;3979  padding: 20px;3980  background: rgba(12, 10, 6, 0.7);3981  backdrop-filter: blur(4px);3982  animation: peach-card-in 280ms cubic-bezier(0.16, 1, 0.3, 1) both;3983}39843985.peach-restore-intro-card {3986  width: 100%;3987  display: flex;3988  flex-direction: column;3989  gap: 12px;3990  padding: 22px 20px 20px;3991  border-radius: 16px;3992  border: 1px solid var(--peach-t3);3993  background: linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3994  backdrop-filter: blur(4px);3995  -webkit-backdrop-filter: blur(4px);3996  box-shadow: inset 0 1px 0 rgba(240, 232, 216, 0.06), 0 16px 36px rgba(0, 0, 0, 0.3);3997}39983999.peach-restore-intro-headline {4000  margin: 0;4001  font-family: var(--font-display);4002  font-style: italic;4003  font-size: 20px;4004  font-weight: 400;4005  color: var(--peach-t0);4006}40074008.peach-restore-intro-body {4009  display: flex;4010  flex-direction: column;4011  gap: 8px;4012}4013.peach-restore-intro-body p {4014  margin: 0;4015  font-size: 0.75rem;4016  color: var(--peach-t1);4017  line-height: 1.5;4018}40194020.peach-restore-intro-btn {4021  width: 100%;4022  margin-top: 4px;4023}40244025/* Snapshot restore panel */4026.peach-snapshot-panel {4027  gap: 10px;4028  overflow-y: auto;4029  max-height: 340px;4030}4031.peach-snapshot-list {4032  display: flex;4033  flex-direction: column;4034  gap: 4px;4035}4036.peach-snapshot-row {4037  display: flex;4038  align-items: center;4039  justify-content: space-between;4040  width: 100%;4041  padding: 8px 10px;4042  border-radius: 8px;4043  border: 1px solid rgba(240, 232, 216, 0.07);4044  background: transparent;4045  cursor: pointer;4046  transition: border-color 120ms, background 120ms;4047  text-align: left;4048  gap: 8px;4049}4050.peach-snapshot-row:hover {4051  border-color: rgba(240, 232, 216, 0.14);4052  background: rgba(240, 232, 216, 0.03);4053}4054.peach-snapshot-row.is-selected {4055  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4056  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);4057}4058.peach-snapshot-time {4059  font-size: 11.5px;4060  color: var(--peach-t0);4061  flex: 1;4062}4063.peach-snapshot-count {4064  font-family: "IBM Plex Mono", monospace;4065  font-size: 0.625rem;4066  color: var(--peach-t2);4067  flex-shrink: 0;4068}4069.peach-snapshot-confirm {4070  display: flex;4071  flex-direction: column;4072  gap: 8px;4073  padding-top: 10px;4074  border-top: 1px solid rgba(240, 232, 216, 0.06);4075}4076.peach-snapshot-warning {4077  display: flex;4078  align-items: flex-start;4079  gap: 6px;4080  font-size: 10.5px;4081  color: rgba(220, 80, 60, 0.85);4082  line-height: 1.55;4083}4084.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }4085.peach-snapshot-confirm-row {4086  display: flex;4087  gap: 6px;4088  align-items: center;4089}4090.peach-snapshot-restore-btn {4091  width: 100%;4092}4093.peach-lock-hero--unlock .peach-lock-hero-art {4094  width: 112px;4095  height: 112px;4096  right: 0;4097  top: 2px;4098  opacity: 0.1;4099}41004101.peach-card {4102  border: 1px solid var(--peach-t3);4103  border-radius: 18px;4104  background:4105    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);4106  box-shadow:4107    inset 0 0 0 1px var(--peach-border-accent),4108    inset 0 1px 0 rgba(240, 232, 216, 0.04),4109    0 12px 32px rgba(0, 0, 0, 0.14);4110  overflow: hidden;4111}41124113.peach-card-active {4114  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);4115  box-shadow:4116    inset 0 1px 0 rgba(240, 232, 216, 0.05),4117    0 16px 38px rgba(0, 0, 0, 0.18),4118    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);4119}41204121.peach-card-disabled {4122  opacity: 0.72;4123}41244125.peach-card-header {4126  width: 100%;4127  padding: 13px 16px 11px;4128  background: transparent;4129  color: var(--peach-t0);4130  display: flex;4131  justify-content: space-between;4132  align-items: center;4133  text-align: left;4134  font-size: 0.75rem;4135}41364137.peach-card-body {4138  padding: 0 16px 16px;4139  display: grid;4140  gap: 9px;4141}41424143.peach-card-tag {4144  color: var(--peach-t2);4145  font-family: "IBM Plex Mono", monospace;4146  font-size: 0.5625rem;4147  letter-spacing: 0.12em;4148  text-transform: uppercase;4149}41504151.peach-empty-copy {4152  display: grid;4153  gap: 6px;4154  color: var(--peach-t1);4155  font-size: 0.8125rem;4156}41574158.peach-lock-submit {4159  width: 100%;4160  box-shadow:4161    0 1px 0 rgba(255,255,255,0.10) inset,4162    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),4163    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),4164    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);4165}41664167.peach-lock-secondary {4168  width: 100%;4169  border-color: var(--peach-t3);4170  background: rgba(240, 232, 216, 0.02);4171}41724173.peach-lock-secondary:hover {4174  background: rgba(240, 232, 216, 0.04);4175}41764177.peach-lock-note {4178  max-width: none;4179  line-height: 1.55;4180  margin: 0;4181}41824183.peach-overlay-action {4184  font-size: 0.625rem;4185  padding: 4px 8px;4186  letter-spacing: 0.06em;4187  min-width: 44px;4188  text-align: center;4189}41904191.peach-inline-action {4192  flex-shrink: 0;4193  font-size: 0.5625rem;4194  letter-spacing: 0.1em;4195  text-transform: uppercase;4196  padding: 4px 7px;4197}4198.peach-password-toggle-btn {4199  display: inline-flex;4200  align-items: center;4201  justify-content: center;4202  min-width: 30px;4203  min-height: 26px;4204  padding: 0 7px;4205  border: 1px solid var(--peach-t3);4206  border-radius: 999px;4207  background: rgba(240, 232, 216, 0.04);4208  color: var(--peach-t2);4209  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;4210}4211.peach-password-toggle-btn:hover {4212  border-color: var(--peach-t2);4213  color: var(--peach-t0);4214  background: rgba(240, 232, 216, 0.06);4215}42164217.peach-new-textarea {4218  width: 100%;4219  min-height: 88px;4220  resize: vertical;4221  border: 0;4222  outline: none;4223  background: transparent;4224  color: var(--peach-t1);4225  font-family: "IBM Plex Mono", monospace;4226  font-size: 0.75rem;4227  line-height: 1.65;4228  caret-color: var(--peach-accent);4229}42304231.peach-new-textarea::placeholder {4232  color: var(--peach-t2);4233  opacity: 0.7;4234}42354236.peach-settings-actions {4237  display: grid;4238  gap: 8px;4239}42404241.peach-sync-section-label {4242  font-size: 0.6875rem;4243  color: var(--peach-t2);4244  text-transform: uppercase;4245  letter-spacing: 0.05em;4246}42474248.peach-sync-network-note {4249  margin: 0 0 6px;4250  font-size: 0.75rem;4251  color: var(--peach-t2);4252  line-height: 1.4;4253}42544255.peach-settings-row--tappable {4256  background: none;4257  border: none;4258  width: 100%;4259  text-align: left;4260  cursor: pointer;4261  color: var(--peach-t1);4262  font-size: 0.8125rem;4263}4264.peach-settings-row--tappable:hover {4265  color: var(--peach-t0);4266}42674268.peach-sync-pro-hint {4269  display: flex;4270  flex-direction: column;4271  align-items: flex-start;4272  gap: 8px;4273  padding: 12px 0 4px;4274}42754276.peach-sync-device-row {4277  display: flex;4278  justify-content: space-between;4279  align-items: center;4280  padding: 6px 0;4281  border-bottom: 1px solid var(--peach-t3);4282}42834284.peach-sync-device-info {4285  display: flex;4286  flex-direction: column;4287  gap: 2px;4288}42894290.peach-sync-device-name {4291  font-size: 0.8125rem;4292  color: var(--peach-t0);4293}42944295.peach-sync-device-meta {4296  font-size: 0.6875rem;4297  color: var(--peach-t2);4298}42994300.peach-sync-status-dot {4301  display: inline-block;4302  width: 8px;4303  height: 8px;4304  border-radius: 50%;4305  vertical-align: middle;4306}43074308.peach-sync-remove-btn {4309  color: var(--peach-breach);4310}43114312.peach-sync-advanced-row {4313  display: flex;4314  justify-content: space-between;4315  align-items: center;4316  padding: 6px 0;4317  gap: 12px;4318}43194320.peach-sync-advanced-info {4321  display: flex;4322  flex-direction: column;4323  gap: 2px;4324  flex: 1;4325}43264327.peach-sync-advanced-name {4328  font-size: 0.8125rem;4329  color: var(--peach-t0);4330}43314332.peach-sync-reset-confirm {4333  display: flex;4334  flex-direction: column;4335  gap: 8px;4336  padding: 10px;4337  border: 1px solid var(--peach-breach);4338  border-radius: 10px;4339  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4340}43414342.peach-sync-reset-confirm-headline {4343  font-size: 0.8125rem;4344  font-weight: 600;4345  color: var(--peach-t0);4346  margin: 0;4347}43484349.peach-sync-reset-confirm-body {4350  font-size: 0.75rem;4351  color: var(--peach-t1);4352  margin: 0;4353  line-height: 1.4;4354}43554356.peach-btn--danger {4357  background: var(--peach-breach);4358  color: #fff;4359  border-color: var(--peach-breach);4360}4361.peach-btn--danger:hover:not(:disabled) {4362  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4363}4364.peach-btn--danger:disabled {4365  opacity: 0.55;4366  cursor: not-allowed;4367}43684369.peach-sync-hero-icon {4370  color: var(--peach-t1);4371  opacity: 0.85;4372}43734374.peach-import-preview {4375  margin-bottom: 12px;4376  max-height: 152px;4377  overflow-y: auto;4378  border: 1px solid var(--peach-t3);4379  border-radius: 10px;4380  padding: 8px 10px;4381  display: grid;4382  gap: 8px;4383  background: rgba(240, 232, 216, 0.02);4384}43854386.peach-import-preview-row {4387  display: flex;4388  justify-content: space-between;4389  gap: 10px;4390  font-size: 0.6875rem;4391  color: var(--peach-t1);4392}43934394.peach-import-preview-title {4395  color: var(--peach-t0);4396  flex: 1;4397  min-width: 0;4398  overflow: hidden;4399  text-overflow: ellipsis;4400  white-space: nowrap;4401}44024403.peach-import-preview-meta {4404  color: var(--peach-t2);4405  flex-shrink: 0;4406  max-width: 42%;4407  overflow: hidden;4408  text-overflow: ellipsis;4409  white-space: nowrap;4410}44114412.peach-import-preview-more {4413  color: var(--peach-t2);4414  font-size: 0.625rem;4415}44164417.peach-restore-copy {4418  margin: 0;4419  color: var(--peach-t1);4420  font-size: 0.6875rem;4421  line-height: 1.6;4422}44234424.peach-restore-warning {4425  padding: 10px 12px;4426  border-radius: 12px;4427  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4428  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4429  color: var(--peach-t0);4430  font-size: 0.6875rem;4431  line-height: 1.55;4432}44334434.peach-provider-chips {4435  display: flex;4436  flex-wrap: wrap;4437  gap: 6px;4438}44394440.peach-provider-chip {4441  display: inline-flex;4442  align-items: center;4443  padding: 5px 8px;4444  border-radius: 999px;4445  border: 1px solid var(--peach-t3);4446  background: rgba(240, 232, 216, 0.02);4447  color: var(--peach-t1);4448  font-family: "IBM Plex Mono", monospace;4449  font-size: 0.5rem;4450  letter-spacing: 0.08em;4451  text-transform: uppercase;4452}44534454.peach-restore-file,4455.peach-restore-input {4456  width: 100%;4457  border-radius: 10px;4458  border: 1px solid var(--peach-t3);4459  background: var(--peach-s2);4460  color: var(--peach-t0);4461  font-size: 0.75rem;4462}44634464.peach-restore-file {4465  padding: 9px 10px;4466}44674468.peach-restore-file::file-selector-button {4469  margin-right: 10px;4470  padding: 7px 10px;4471  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4472  border-radius: 999px;4473  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4474  color: var(--peach-t0);4475  font-size: 0.625rem;4476  letter-spacing: 0.08em;4477  text-transform: uppercase;4478  cursor: pointer;4479}44804481.peach-restore-input {4482  padding: 10px 12px;4483}44844485.peach-auth-grid {4486  display: grid;4487  gap: 10px;4488}44894490.peach-import-summary {4491  color: var(--peach-t1);4492  font-size: 0.75rem;4493  line-height: 1.6;4494  margin-bottom: 12px;4495}44964497.peach-restore-error {4498  color: rgba(220, 80, 60, 0.95);4499  font-size: 0.75rem;4500  line-height: 1.55;4501}45024503.peach-passkey-card {4504  max-width: 400px;4505  margin: auto 16px;4506  align-self: center;4507  width: calc(100% - 32px);4508}45094510/* Center the approval card vertically inside the overlay-view (which sets4511 * flex-direction: column without justify-content). Without this, the card4512 * sits at the top with a tall empty band below — looks unfinished on the4513 * 320px popup. */4514.peach-overlay-view:has(.peach-passkey-card) {4515  justify-content: center;4516}45174518.peach-pro-badge {4519  padding: 2px 6px;4520  border-radius: 999px;4521  font-family: var(--font-ui);4522  font-size: 0.625rem;4523  letter-spacing: 0.08em;4524  text-transform: uppercase;4525  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4526  color: var(--peach-accent);4527}45284529/* ── Shortcuts rebind table ─────────────────────────────────── */4530.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4531.peach-shortcut-row {4532  display: flex;4533  align-items: center;4534  gap: 10px;4535  padding: 6px 0;4536}4537.peach-shortcut-row-label {4538  flex: 1;4539  font-size: 0.75rem;4540  color: var(--peach-t0);4541}4542.peach-shortcut-chip {4543  min-width: 64px;4544  padding: 4px 10px;4545  border-radius: 6px;4546  border: 1px solid var(--peach-t3);4547  background: var(--peach-input-bg, var(--surface-card));4548  color: var(--peach-t0);4549  font-family: var(--font-mono);4550  font-size: 0.6875rem;4551  letter-spacing: 0.04em;4552  cursor: pointer;4553  text-align: center;4554  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4555}4556.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4557.peach-shortcut-chip.is-custom {4558  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4559  color: var(--peach-accent);4560}4561.peach-shortcut-chip.is-capturing {4562  border-color: var(--peach-accent);4563  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4564  color: var(--peach-accent);4565  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4566}4567@keyframes peach-shortcut-capture-pulse {4568  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4569  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4570}4571.peach-shortcut-reset {4572  background: transparent;4573  border: none;4574  cursor: pointer;4575  color: var(--peach-t2);4576  padding: 4px 6px;4577  border-radius: 5px;4578  font-size: 0.875rem;4579  line-height: 1;4580  transition: color 120ms ease, background 120ms ease;4581}4582.peach-shortcut-reset:hover {4583  color: var(--peach-t0);4584  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4585}4586.peach-shortcuts-conflict {4587  margin: 4px 0 0;4588  padding: 8px 10px;4589  border-radius: 7px;4590  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4591  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4592  font-family: var(--font-mono);4593  font-size: 0.6875rem;4594  color: var(--peach-t0);4595}45964597/* ── Help dialog overlay (? to open) ────────────────────────── */4598.peach-shortcuts-help-backdrop {4599  position: fixed;4600  inset: 0;4601  background: rgba(0, 0, 0, 0.55);4602  backdrop-filter: blur(2px);4603  display: flex;4604  align-items: center;4605  justify-content: center;4606  z-index: 1000;4607  animation: peach-help-fade-in 140ms ease forwards;4608}4609@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4610.peach-shortcuts-help-card {4611  width: min(320px, 92vw);4612  max-height: 80vh;4613  overflow-y: auto;4614  border-radius: 14px;4615  border: 1px solid var(--peach-t3);4616  background: var(--peach-bg);4617  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4618  padding: 16px 18px 18px;4619  display: flex;4620  flex-direction: column;4621  gap: 12px;4622}4623.peach-shortcuts-help-head {4624  display: flex; align-items: center; justify-content: space-between;4625}4626.peach-shortcuts-help-head h3 {4627  margin: 0;4628  font-family: var(--font-display);4629  font-style: italic;4630  font-weight: 400;4631  font-size: 22px;4632  color: var(--peach-t0);4633}4634.peach-shortcuts-help-close {4635  background: transparent;4636  border: none;4637  color: var(--peach-t2);4638  cursor: pointer;4639  font-size: 0.875rem;4640  padding: 4px 8px;4641  border-radius: 5px;4642}4643.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4644.peach-shortcuts-help-body ul {4645  list-style: none; padding: 0; margin: 4px 0 12px;4646  display: grid; gap: 8px;4647}4648.peach-shortcuts-help-body li {4649  display: flex; align-items: center; justify-content: space-between; gap: 12px;4650  font-size: 0.75rem; color: var(--peach-t0);4651}4652.peach-shortcuts-help-body kbd {4653  font-family: var(--font-mono);4654  font-size: 0.6875rem;4655  padding: 3px 8px;4656  border-radius: 6px;4657  background: var(--surface-card);4658  border: 1px solid var(--peach-t3);4659  color: var(--peach-accent);4660  letter-spacing: 0.04em;4661}46624663/* ── Pro promo on Account screen ────────────────────────────── */4664.peach-pro-promo {4665  position: relative;4666  border-radius: 14px;4667  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4668  background:4669    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4670    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4671    var(--surface-card);4672  overflow: hidden;4673  margin-bottom: 14px;4674}4675.peach-pro-promo-glow {4676  position: absolute;4677  inset: -40% -20% auto auto;4678  width: 220px; height: 220px;4679  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4680  pointer-events: none;4681  filter: blur(8px);4682}4683.peach-pro-promo-inner {4684  position: relative;4685  padding: 18px 18px 16px;4686}4687.peach-pro-promo-title {4688  font-family: var(--font-display);4689  font-style: italic;4690  font-weight: 400;4691  font-size: 28px;4692  line-height: 1;4693  letter-spacing: -0.005em;4694  color: var(--peach-t0);4695  margin: 0 0 4px;4696}4697.peach-pro-promo-tagline {4698  font-family: var(--font-mono);4699  font-size: 0.625rem;4700  letter-spacing: 0.06em;4701  color: var(--peach-t2);4702  margin: 0 0 14px;4703}4704.peach-pro-promo-list {4705  list-style: none;4706  margin: 0 0 16px;4707  padding: 0;4708  display: grid;4709  gap: 9px;4710}4711.peach-pro-promo-list li {4712  display: flex;4713  align-items: flex-start;4714  gap: 9px;4715  font-size: 0.75rem;4716  color: var(--peach-t1);4717  line-height: 1.4;4718}4719.peach-pro-promo-list svg {4720  width: 14px;4721  height: 14px;4722  flex-shrink: 0;4723  color: var(--peach-accent);4724  margin-top: 2px;4725}4726.peach-pro-promo-list span {4727  color: var(--peach-t0);4728}4729.peach-pro-promo-cta {4730  width: 100%;4731  background: var(--peach-accent);4732  color: #fff;4733  border: none;4734  padding: 9px 12px;4735  border-radius: 9px;4736  font-size: 0.75rem;4737  font-weight: 500;4738  font-family: var(--font-ui);4739  letter-spacing: 0.02em;4740  text-decoration: none;4741  display: inline-flex;4742  align-items: center;4743  justify-content: center;4744  cursor: pointer;4745  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4746  box-shadow: 0 2px 16px var(--peach-glow);4747}4748.peach-pro-promo-cta:hover {4749  filter: brightness(1.07);4750  box-shadow: 0 4px 24px var(--peach-glow);4751  transform: translateY(-1px);4752}4753.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }47544755.peach-pro-or-divider {4756  display: flex;4757  align-items: center;4758  gap: 10px;4759  margin: 4px 0 12px;4760  font-family: var(--font-mono);4761  font-size: 0.625rem;4762  letter-spacing: 0.06em;4763  color: var(--peach-t2);4764  text-transform: uppercase;4765}4766.peach-pro-or-divider::before,4767.peach-pro-or-divider::after {4768  content: "";4769  flex: 1;4770  height: 1px;4771  background: var(--peach-t3);4772}47734774.peach-loading {4775  position: absolute;4776  inset: 0;4777  display: flex;4778  align-items: center;4779  justify-content: center;4780  background: var(--bg);4781  animation: peach-loading-pulse 1.2s ease-in-out infinite;4782}47834784@keyframes peach-loading-pulse {4785  0%, 100% { opacity: 0.6; }4786  50% { opacity: 1; }4787}47884789/* ── Health Dashboard ─────────────────────────────────────────────────── */4790.peach-health-body {4791  flex: 1;4792  overflow-y: auto;4793  display: flex;4794  flex-direction: column;4795  /* Hide the platform scrollbar — every other scrollable surface in the4796   * popup hides it; the Health view was the one outlier and it ruined the4797   * polish. Behavior unchanged, just no rail rendered. */4798  scrollbar-width: none;4799  -ms-overflow-style: none;4800}4801.peach-health-body::-webkit-scrollbar { display: none; }48024803/* Loading screen for the Vault Health view. The advanced report computation4804 * can run for a few seconds on a large vault — without a clear loading4805 * screen the surface looked broken (the entry view bleeds through the4806 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4807.peach-health-loading-screen {4808  flex: 1;4809  display: flex;4810  flex-direction: column;4811  align-items: center;4812  justify-content: center;4813  gap: 14px;4814  padding: 32px 28px;4815  text-align: center;4816}48174818.peach-health-loading-glyph {4819  width: 48px;4820  height: 48px;4821  display: flex;4822  align-items: center;4823  justify-content: center;4824  border-radius: 14px;4825  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4826  color: var(--peach-accent);4827}48284829.peach-health-loading-title {4830  margin: 0;4831  font-family: var(--font-display);4832  font-style: italic;4833  font-weight: 300;4834  font-size: 19px;4835  line-height: 1.2;4836  color: var(--peach-t0);4837}48384839.peach-health-loading-copy {4840  margin: 0;4841  max-width: 240px;4842  font-size: 0.75rem;4843  line-height: 1.55;4844  color: var(--peach-t2);4845}48464847.peach-health-loading-track {4848  width: 200px;4849  height: 3px;4850  margin-top: 6px;4851  border-radius: 999px;4852  background: rgba(240, 232, 216, 0.06);4853  overflow: hidden;4854}48554856.peach-health-loading-fill {4857  width: 40%;4858  height: 100%;4859  border-radius: inherit;4860  background: linear-gradient(4861    90deg,4862    transparent 0%,4863    var(--peach-accent) 50%,4864    transparent 100%4865  );4866  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4867}48684869@keyframes peach-health-loading-sweep {4870  0%   { transform: translateX(-100%); }4871  100% { transform: translateX(350%); }4872}48734874[data-motion="reduce"] .peach-health-loading-fill,4875[data-motion="reduce"] .peach-health-loading-glyph svg path {4876  animation: none;4877}48784879.peach-health-summary {4880  padding: 10px 16px 6px;4881  font-family: "IBM Plex Mono", monospace;4882  font-size: 0.6875rem;4883}4884.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4885.peach-health-summary-ok { color: var(--peach-t2); }48864887.peach-health-check-row {4888  padding: 0 16px 10px;4889}4890.peach-health-check-btn {4891  width: 100%;4892  display: flex;4893  align-items: center;4894  justify-content: center;4895}48964897.peach-health-sections {4898  flex: 1;4899  display: flex;4900  flex-direction: column;4901}49024903.peach-health-section {4904  border-bottom: 1px solid var(--peach-t3);4905}49064907.peach-health-section-header {4908  width: 100%;4909  display: flex;4910  align-items: center;4911  justify-content: space-between;4912  padding: 9px 16px;4913  background: transparent;4914  cursor: pointer;4915  color: var(--peach-t0);4916}49174918.peach-health-section-title-row {4919  display: flex;4920  align-items: center;4921  gap: 8px;4922}49234924.peach-health-count-badge {4925  display: inline-flex;4926  align-items: center;4927  justify-content: center;4928  min-width: 20px;4929  height: 18px;4930  padding: 0 5px;4931  border-radius: 999px;4932  background: rgba(220,80,60,0.15);4933  border: 1px solid rgba(220,80,60,0.25);4934  font-family: "IBM Plex Mono", monospace;4935  font-size: 0.5625rem;4936  color: rgba(220,80,60,0.9);4937}49384939.peach-health-section-title {4940  font-family: "IBM Plex Mono", monospace;4941  font-size: 0.6875rem;4942  text-transform: uppercase;4943  letter-spacing: 0.1em;4944  color: var(--peach-t1);4945}49464947.peach-health-chevron {4948  color: var(--peach-t2);4949  transition: transform 200ms ease;4950  flex-shrink: 0;4951}4952.peach-health-chevron.is-expanded {4953  transform: rotate(180deg);4954}49554956.peach-health-section-body {4957  padding: 0 16px 10px;4958  display: flex;4959  flex-direction: column;4960  gap: 4px;4961}49624963.peach-health-row {4964  display: flex;4965  align-items: flex-start;4966  justify-content: space-between;4967  gap: 8px;4968  padding: 6px 8px;4969  border-radius: 8px;4970  background: rgba(240,232,216,0.02);4971}49724973.peach-health-row-info {4974  flex: 1;4975  min-width: 0;4976  display: flex;4977  flex-direction: column;4978  gap: 2px;4979}49804981.peach-health-row-name {4982  font-family: var(--font-display);4983  font-size: 0.9375rem;4984  font-style: italic;4985  font-weight: 400;4986  color: var(--peach-t0);4987  white-space: nowrap;4988  overflow: hidden;4989  text-overflow: ellipsis;4990}49914992.peach-health-row-meta {4993  font-family: "IBM Plex Mono", monospace;4994  font-size: 0.5625rem;4995  color: var(--peach-t2);4996  letter-spacing: 0.05em;4997}49984999.peach-health-fix-btn {5000  font-size: 0.5625rem;5001  letter-spacing: 0.08em;5002  text-transform: uppercase;5003  padding: 4px 7px;5004  flex-shrink: 0;5005  display: flex;5006  align-items: center;5007}50085009.peach-health-empty {5010  font-family: "IBM Plex Mono", monospace;5011  font-size: 0.625rem;5012  color: var(--peach-t2);5013  padding: 6px 0;5014}50155016.peach-health-loading {5017  font-family: "IBM Plex Mono", monospace;5018  font-size: 0.625rem;5019  color: var(--peach-t2);5020  padding: 6px 0;5021  display: flex;5022  align-items: center;5023  gap: 6px;5024}50255026.peach-health-loading::before {5027  content: "";5028  width: 10px;5029  height: 10px;5030  border: 1.5px solid var(--peach-t3);5031  border-top-color: var(--peach-accent);5032  border-radius: 50%;5033  animation: peach-spin 600ms linear infinite;5034}50355036@keyframes peach-spin {5037  to { transform: rotate(360deg); }5038}50395040.peach-spinner {5041  width: 32px;5042  height: 32px;5043  border: 2px solid var(--peach-s2);5044  border-top-color: var(--peach-accent);5045  border-radius: 50%;5046  margin: 0 auto 16px;5047  animation: peach-spin 0.8s linear infinite;5048}50495050.peach-progress-screen {5051  text-align: center;5052  padding: 32px 16px;5053}50545055.peach-progress-screen-title {5056  font-size: 0.8125rem;5057  color: var(--peach-t0);5058  margin-bottom: 16px;5059}50605061.peach-progress-screen-stage {5062  font-size: 0.6875rem;5063  color: var(--peach-t2);5064  min-height: 14px;5065}50665067.peach-progress-screen-note {5068  font-size: 0.625rem;5069  color: var(--peach-t2);5070  margin-top: 8px;5071}50725073.peach-pairing-body {5074  flex: 1;5075  overflow-y: auto;5076  display: flex;5077  flex-direction: column;5078}50795080.peach-pairing-content {5081  flex: 1;5082  display: flex;5083  flex-direction: column;5084  align-items: center;5085  justify-content: center;5086  gap: 14px;5087  padding: 28px 20px;5088  text-align: center;5089}50905091.peach-pairing-code-screen {5092  gap: 18px;5093}50945095.peach-pairing-headline {5096  font-family: var(--font-display);5097  font-style: italic;5098  font-weight: 300;5099  font-size: 28px;5100  color: var(--peach-t0);5101  margin: 0;5102  line-height: 1;5103}51045105.peach-pairing-subline {5106  font-size: 0.75rem;5107  color: var(--peach-t2);5108  max-width: 220px;5109  line-height: 1.5;5110  margin: 0;5111}51125113.peach-pairing-subline--center {5114  text-align: center;5115}51165117/* 6-digit pairing code — both display (.peach-pairing-code) and entry5118   (.peach-pairing-code-input) share IBM Plex Mono / 36px / wide tracking5119   so the two modes feel like the same surface. */5120.peach-pairing-code {5121  font-family: "IBM Plex Mono", monospace;5122  font-size: 36px;5123  letter-spacing: 0.25em;5124  color: var(--peach-t0);5125  text-align: center;5126  padding: 24px 0;5127  text-shadow:5128    0 0 24px color-mix(in srgb, var(--peach-accent) 22%, transparent),5129    0 0 48px color-mix(in srgb, var(--peach-accent) 12%, transparent);5130  background: transparent;5131  border: 0;5132  cursor: default;5133  user-select: text;5134}51355136.peach-pairing-code--loading,5137.peach-pairing-code--expired {5138  font-size: 18px;5139  letter-spacing: 0.04em;5140  color: var(--peach-t2);5141  cursor: pointer;5142  text-shadow: none;5143}51445145.peach-pairing-qr-container {5146  display: flex;5147  flex-direction: column;5148  align-items: center;5149  gap: 10px;5150}51515152.peach-pairing-qr {5153  width: 240px;5154  height: 240px;5155  display: block;5156}51575158.peach-pairing-instruction {5159  font-size: 0.75rem;5160  color: var(--peach-t2);5161  text-align: center;5162  line-height: 1.5;5163  margin: 0;5164  max-width: 220px;5165}51665167.peach-pairing-expiry {5168  font-family: "IBM Plex Mono", monospace;5169  font-size: 13px;5170  letter-spacing: 0.06em;5171  color: var(--peach-t2);5172  margin: 0;5173}51745175.peach-pairing-regen {5176  font-size: 0.75rem;5177  color: var(--peach-accent);5178  background: transparent;5179  border: 0;5180  cursor: pointer;5181  padding: 4px 0;5182  text-decoration: underline;5183  text-underline-offset: 2px;5184}51855186.peach-pairing-code-input {5187  font-family: "IBM Plex Mono", monospace;5188  font-size: 36px;5189  letter-spacing: 0.25em;5190  color: var(--peach-t0);5191  background: transparent;5192  border: 0;5193  border-bottom: 1px solid var(--peach-t3);5194  outline: none;5195  text-align: center;5196  padding: 18px 0;5197  width: 220px;5198  caret-color: var(--peach-accent);5199  transition: border-color 160ms ease;5200}52015202.peach-pairing-code-input::placeholder {5203  color: var(--peach-t3);5204}52055206.peach-pairing-code-input:focus {5207  border-bottom-color: var(--peach-accent);5208}52095210.peach-pairing-toggle {5211  background: transparent;5212  border: 0;5213  color: var(--peach-t2);5214  font-size: 0.75rem;5215  padding: 8px 4px;5216  cursor: pointer;5217  transition: color 120ms ease;5218}52195220.peach-pairing-toggle:hover:not(:disabled) {5221  color: var(--peach-t1);5222}52235224.peach-pairing-toggle:disabled {5225  opacity: 0.5;5226  cursor: default;5227}52285229.peach-pairing-hint {5230  font-size: 0.6875rem;5231  color: var(--peach-t2);5232  margin: 0;5233  text-align: center;5234}52355236.peach-pairing-status {5237  display: flex;5238  align-items: center;5239  gap: 8px;5240  margin: 0;5241  font-size: 0.75rem;5242  color: var(--peach-t1);5243}52445245.peach-pairing-error {5246  margin: 0;5247  font-size: 0.6875rem;5248  color: var(--peach-breach);5249}52505251.peach-pairing-error--muted {5252  color: var(--peach-t2);5253}52545255.peach-pairing-spinner {5256  width: 12px;5257  height: 12px;5258  border: 1.5px solid var(--peach-t3);5259  border-top-color: var(--peach-accent);5260  border-radius: 50%;5261  animation: peach-spin 0.8s linear infinite;5262}52635264.peach-pairing-success-icon,5265.peach-pairing-error-icon,5266.peach-pairing-hero {5267  display: inline-flex;5268  align-items: center;5269  justify-content: center;5270}52715272/* Tag chips */5273.peach-tag-chip {5274  display: inline-flex;5275  align-items: center;5276  gap: 4px;5277  padding: 3px 8px;5278  border-radius: 999px;5279  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);5280  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5281  color: var(--peach-t0);5282  font-family: "IBM Plex Mono", monospace;5283  font-size: 0.625rem;5284  letter-spacing: 0.04em;5285}52865287.peach-tag-chip-remove {5288  background: transparent;5289  border: none;5290  color: inherit;5291  opacity: 0.6;5292  cursor: pointer;5293  padding: 0;5294  font-size: 0.75rem;5295  line-height: 1;5296}52975298.peach-tag-chip-remove:hover {5299  opacity: 1;5300}53015302/* Tag input */5303.peach-tag-input-wrap {5304  border-bottom: 1px solid var(--peach-t3);5305}53065307.peach-tag-suggestions {5308  display: flex;5309  flex-wrap: wrap;5310  gap: 4px;5311  padding: 6px 0;5312}53135314.peach-tag-suggestion {5315  padding: 2px 8px;5316  border-radius: 999px;5317  border: 1px solid var(--peach-t3);5318  background: var(--peach-s2);5319  color: var(--peach-t1);5320  font-family: "IBM Plex Mono", monospace;5321  font-size: 0.625rem;5322  cursor: pointer;5323  transition: border-color 80ms ease, background 80ms ease;5324}53255326.peach-tag-suggestion:hover {5327  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5328  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5329}53305331/* Identity suggestions — shown below username/email inputs in new-entry form */5332@keyframes peach-suggest-in {5333  from { opacity: 0; transform: translateY(-4px); }5334  to   { opacity: 1; transform: none; }5335}53365337.peach-identity-suggestions {5338  display: flex;5339  flex-direction: column;5340  gap: 1px;5341  margin-top: 4px;5342  animation: peach-suggest-in 180ms cubic-bezier(0.16, 1, 0.3, 1) both;5343}53445345.peach-identity-filter-row {5346  display: flex;5347  align-items: center;5348  gap: 4px;5349  padding: 2px 0 5px;5350}53515352.peach-identity-collapse-btn {5353  margin-left: auto;5354  background: transparent;5355  border: none;5356  cursor: pointer;5357  color: var(--peach-t3);5358  padding: 2px 4px;5359  display: flex;5360  align-items: center;5361  line-height: 0;5362  border-radius: 3px;5363  transition: color 100ms ease, transform 220ms cubic-bezier(0.16, 1, 0.3, 1);5364}53655366.peach-identity-collapse-btn:hover {5367  color: var(--peach-t1);5368}53695370.peach-identity-collapse-btn.is-collapsed {5371  transform: rotate(-90deg);5372}53735374.peach-identity-rows {5375  display: grid;5376  grid-template-rows: 1fr;5377  transition: grid-template-rows 220ms cubic-bezier(0.16, 1, 0.3, 1);5378}53795380.peach-identity-rows.is-collapsed {5381  grid-template-rows: 0fr;5382}53835384.peach-identity-rows-inner {5385  overflow-y: auto;5386  min-height: 0;5387  max-height: 148px;5388  scrollbar-width: thin;5389  scrollbar-color: var(--peach-t3) transparent;5390  mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5391  -webkit-mask-image: linear-gradient(to bottom, black calc(100% - 18px), transparent 100%);5392}53935394.peach-identity-rows-inner::-webkit-scrollbar {5395  width: 4px;5396}53975398.peach-identity-rows-inner::-webkit-scrollbar-track {5399  background: transparent;5400}54015402.peach-identity-rows-inner::-webkit-scrollbar-thumb {5403  background: var(--peach-t3);5404  border-radius: 2px;5405}54065407.peach-identity-filter-pill {5408  padding: 2px 7px;5409  border-radius: 999px;5410  border: 1px solid var(--peach-t3);5411  background: transparent;5412  color: var(--peach-t2);5413  font-family: "IBM Plex Mono", monospace;5414  font-size: 0.6rem;5415  cursor: pointer;5416  transition: border-color 80ms, background 80ms, color 80ms;5417}54185419.peach-identity-filter-pill.is-on {5420  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5421  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5422  color: var(--peach-accent);5423}54245425.peach-identity-suggestion {5426  display: flex;5427  align-items: center;5428  gap: 6px;5429  width: 100%;5430  padding: 4px 6px;5431  border-radius: 5px;5432  border: none;5433  background: transparent;5434  cursor: pointer;5435  text-align: left;5436  transition: background 80ms ease;5437}54385439.peach-identity-suggestion:hover,5440.peach-identity-suggestion:focus {5441  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5442  outline: none;5443}54445445.peach-identity-suggestion-value {5446  font-family: "IBM Plex Mono", monospace;5447  font-size: 0.7rem;5448  color: var(--peach-t1);5449  overflow: hidden;5450  text-overflow: ellipsis;5451  white-space: nowrap;5452  flex: 1;5453  min-width: 0;5454}54555456.peach-identity-suggestion-type {5457  font-family: "IBM Plex Mono", monospace;5458  font-size: 0.55rem;5459  font-weight: 600;5460  flex-shrink: 0;5461  padding: 1px 4px;5462  border-radius: 3px;5463}54645465.peach-identity-suggestion-type--email {5466  color: color-mix(in srgb, var(--peach-accent) 70%, transparent);5467  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5468}54695470.peach-identity-suggestion-type--username {5471  color: color-mix(in srgb, var(--peach-t1) 60%, transparent);5472  background: color-mix(in srgb, var(--peach-t3) 40%, transparent);5473}54745475.peach-identity-suggestion-meta {5476  font-family: "IBM Plex Mono", monospace;5477  font-size: 0.6rem;5478  color: var(--peach-t3);5479  flex-shrink: 0;5480}54815482/* Tag filter strip */5483.peach-tag-filter-strip {5484  border-bottom: 1px solid var(--peach-t3);5485  flex-shrink: 0;5486}54875488.peach-tag-filter-chip {5489  display: inline-flex;5490  align-items: center;5491  padding: 4px 10px;5492  border-radius: 999px;5493  border: 1px solid var(--peach-t3);5494  background: transparent;5495  color: var(--peach-t2);5496  font-family: "IBM Plex Mono", monospace;5497  font-size: 0.5625rem;5498  letter-spacing: 0.06em;5499  text-transform: uppercase;5500  cursor: pointer;5501  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5502  white-space: nowrap;5503}55045505.peach-tag-filter-chip:hover {5506  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5507  color: var(--peach-t1);5508}55095510.peach-tag-filter-chip.is-selected {5511  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5512  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5513  color: var(--peach-t0);5514}55155516/* ─────────────────────────────────────────────────────────────────────────5517   v1.4.12 additions5518   ─────────────────────────────────────────────────────────────────────── */55195520/* Sort bar */5521.peach-sort-bar {5522  display: flex;5523  align-items: center;5524  gap: 4px;5525  padding: 5px 12px;5526  border-bottom: 1px solid var(--peach-t3);5527  flex-shrink: 0;5528  overflow-x: auto;5529  scrollbar-width: none;5530}55315532.peach-sort-btn {5533  padding: 2px 9px;5534  border-radius: 999px;5535  border: 1px solid transparent;5536  background: transparent;5537  color: var(--peach-t2);5538  font-family: "IBM Plex Mono", monospace;5539  font-size: 0.5625rem;5540  letter-spacing: 0.07em;5541  text-transform: uppercase;5542  cursor: pointer;5543  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5544  white-space: nowrap;5545}55465547.peach-sort-btn:hover {5548  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5549  color: var(--peach-t1);5550}55515552.peach-sort-btn.is-active {5553  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5554  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5555  color: var(--peach-t0);5556}55575558.peach-sort-scope-btn {5559  padding-inline: 8px;5560  font-size: 0.53125rem;5561  letter-spacing: 0.05em;5562}55635564.peach-sort-domain-hint {5565  margin-left: auto;5566  font-family: "IBM Plex Mono", monospace;5567  font-size: 0.5625rem;5568  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5569  white-space: nowrap;5570  overflow: hidden;5571  text-overflow: ellipsis;5572  max-width: 110px;5573}55745575/* Tab-match badge on entry rows */5576.peach-tab-match-badge {5577  display: inline-block;5578  width: 6px;5579  height: 6px;5580  border-radius: 50%;5581  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5582  margin-left: 5px;5583  vertical-align: middle;5584  flex-shrink: 0;5585  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5586}55875588.peach-entry-row.is-tab-match {5589  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5590  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5591}55925593.peach-entry-row.is-tab-match:hover {5594  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5595}55965597/* Entry list stagger entrance */5598@keyframes peach-entry-fadein {5599  from { opacity: 0; transform: translateY(4px); }5600  to   { opacity: 1; transform: translateY(0); }5601}56025603.peach-vault-list .peach-entry-row {5604  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5605}56065607/* Button press micro-interaction */5608.peach-btn:active {5609  transform: scale(0.95);5610  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5611}56125613.peach-sort-btn:active,5614.peach-tag-filter-chip:active {5615  transform: scale(0.93);5616  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5617}56185619/* Password strength bar (Lock view + shared) */5620.peach-password-strength {5621  display: flex;5622  align-items: center;5623  gap: 8px;5624  margin-top: 6px;5625}56265627.peach-strength-bar {5628  flex: 1;5629  height: 3px;5630  border-radius: 2px;5631  background: var(--peach-t3);5632  overflow: hidden;5633}56345635.peach-strength-fill {5636  height: 100%;5637  border-radius: 2px;5638  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5639              background 300ms ease;5640}56415642.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5643.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5644.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5645.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }56465647.peach-strength-label {5648  font-family: "IBM Plex Mono", monospace;5649  font-style: italic;5650  font-size: 0.5625rem;5651  font-weight: 300;5652  letter-spacing: 0.06em;5653  color: var(--peach-t2);5654  min-width: 36px;5655  text-align: right;5656}56575658.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5659.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5660.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5661.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }56625663/* Duress form */5664.peach-duress-status {5665  padding: 2px 8px;5666  border-radius: 999px;5667  border: 1px solid var(--peach-t3);5668  font-family: "IBM Plex Mono", monospace;5669  font-size: 0.5625rem;5670  letter-spacing: 0.07em;5671  text-transform: uppercase;5672  color: var(--peach-t2);5673  flex-shrink: 0;5674}56755676.peach-duress-status.is-active {5677  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5678  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5679  color: var(--peach-t0);5680}56815682.peach-duress-form {5683  padding: 8px 0 4px;5684  display: flex;5685  flex-direction: column;5686  gap: 6px;5687}56885689.peach-duress-form .peach-label {5690  margin-top: 4px;5691}56925693.peach-duress-actions {5694  display: flex;5695  gap: 6px;5696  align-items: center;5697  margin-top: 4px;5698}56995700.peach-duress-actions .peach-btn:first-child {5701  margin-right: auto;5702}57035704/* Improved overlay spring entrance */5705.peach-overlay-view.ov-enter-up {5706  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5707}57085709@keyframes ov-enter-up-spring {5710  from { opacity: 0; transform: translateY(16px) scale(0.98); }5711  to   { opacity: 1; transform: translateY(0) scale(1); }5712}57135714.peach-overlay-view.ov-enter-right {5715  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5716}57175718@keyframes ov-enter-right-spring {5719  from { opacity: 0; transform: translateX(18px) scale(0.98); }5720  to   { opacity: 1; transform: translateX(0) scale(1); }5721}57225723/* ── Onboarding-mode restore screens (file import) ── */5724/* Used when MainImportView renders during onboarding (no vault yet).5725   Animates like a lock-screen transition. */5726.peach-lock-view {5727  position: absolute;5728  inset: 0;5729  display: flex;5730  flex-direction: column;5731  background:5732    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5733    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5734    var(--peach-bg);5735  z-index: 2;5736  overflow: hidden;5737  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5738}57395740.peach-lock-view-header {5741  display: flex;5742  align-items: center;5743  justify-content: space-between;5744  padding: 16px 18px 12px;5745  flex-shrink: 0;5746}57475748/* ───────── Settings: auto-lock select ───────── */5749.peach-settings-select {5750  font-family: "IBM Plex Mono", monospace;5751  font-size: 0.6875rem;5752  background: transparent;5753  border: 1px solid var(--peach-t3);5754  border-radius: 4px;5755  color: var(--peach-t1);5756  padding: 3px 6px;5757  cursor: pointer;5758  outline: none;5759}5760.peach-settings-select:focus {5761  border-color: var(--peach-accent);5762}57635764/* ───────── Duress status pill (new polished) ───────── */5765.peach-duress-status-pill {5766  font-family: "IBM Plex Mono", monospace;5767  font-size: 0.5625rem;5768  text-transform: uppercase;5769  letter-spacing: 0.12em;5770  padding: 2px 8px;5771  border-radius: 12px;5772  background: var(--peach-t3);5773  color: var(--peach-t2);5774  flex-shrink: 0;5775}5776.peach-duress-status-pill.is-active {5777  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5778  color: var(--peach-accent);5779}57805781/* ───────── Entry advanced disclosure (canary) ───────── */5782.peach-entry-advanced {5783  margin-top: 12px;5784  border-top: 1px solid var(--peach-t3);5785  padding-top: 10px;5786  position: relative;5787  z-index: 1;5788}5789.peach-entry-advanced-toggle {5790  display: flex;5791  align-items: center;5792  justify-content: space-between;5793  width: 100%;5794  background: transparent;5795  border: none;5796  cursor: pointer;5797  padding: 0;5798  color: var(--peach-t2);5799}5800.peach-canary-section {5801  margin-top: 10px;5802  display: grid;5803  gap: 6px;5804}58055806/* ───────── Import: merge/replace radio choices ───────── */5807.peach-import-choice {5808  display: flex;5809  align-items: flex-start;5810  gap: 10px;5811  padding: 8px 10px;5812  border: 1px solid var(--peach-t3);5813  border-radius: 10px;5814  cursor: pointer;5815  margin-bottom: 6px;5816  transition: border-color 120ms ease, background 120ms ease;5817}5818.peach-import-choice:hover {5819  border-color: var(--peach-accent);5820}5821.peach-import-choice input[type="radio"] {5822  margin-top: 3px;5823  accent-color: var(--peach-accent);5824  flex-shrink: 0;5825}5826.peach-import-choice-main {5827  display: flex;5828  flex-direction: column;5829  gap: 2px;5830  min-width: 0;5831}5832.peach-import-choice-label {5833  font-size: 0.75rem;5834  color: var(--peach-t0);5835}5836.peach-import-choice-sub {5837  font-size: 0.6875rem;5838  color: var(--peach-t2);5839  line-height: 1.5;5840}58415842/* ───────── Export: success confirmation strip ───────── */5843.peach-export-success {5844  display: flex;5845  align-items: flex-start;5846  gap: 10px;5847  padding: 12px;5848  border-radius: 12px;5849  border: 1px solid rgba(150, 175, 110, 0.3);5850  background: rgba(150, 175, 110, 0.08);5851  color: var(--peach-t0);5852  font-size: 0.75rem;5853  line-height: 1.55;5854}5855.peach-export-success-check {5856  color: rgba(150, 175, 110, 0.9);5857  font-size: 0.875rem;5858  flex-shrink: 0;5859}58605861/* ── Trash view ──────────────────────────────────────────────────────── */5862.peach-trash-entry-row {5863  display: flex;5864  align-items: center;5865  justify-content: space-between;5866  gap: 8px;5867  padding: 8px 0;5868  border-bottom: 1px solid var(--peach-border);5869}5870.peach-trash-entry-info {5871  flex: 1;5872  min-width: 0;5873  display: flex;5874  flex-direction: column;5875  gap: 2px;5876}5877.peach-trash-entry-title {5878  font-size: 0.8125rem;5879  color: var(--peach-t0);5880  overflow: hidden;5881  text-overflow: ellipsis;5882  white-space: nowrap;5883}5884.peach-trash-entry-meta {5885  font-family: var(--font-mono);5886  font-size: 0.5625rem;5887  color: var(--peach-t2);5888  letter-spacing: 0.04em;5889}5890.peach-trash-entry-actions {5891  display: flex;5892  align-items: center;5893  gap: 4px;5894  flex-shrink: 0;5895}5896.peach-trash-delete-btn {5897  background: transparent;5898  border: 0;5899  color: var(--peach-t3);5900  font-size: 1rem;5901  line-height: 1;5902  cursor: pointer;5903  padding: 2px 5px;5904  transition: color 0.15s;5905}5906.peach-trash-delete-btn:hover { color: var(--peach-breach); }5907.peach-trash-list {5908  overflow-y: auto;5909}5910.peach-trash-footer {5911  display: flex;5912  align-items: center;5913  gap: 8px;5914  padding: 8px 0 0;5915  border-top: 1px solid var(--peach-border);5916  margin-top: 4px;5917}5918.peach-trash-purge-all {5919  background: transparent;5920  border: 0;5921  color: var(--peach-t3);5922  font-size: 0.625rem;5923  cursor: pointer;5924  padding: 4px 0;5925  letter-spacing: 0.03em;5926  transition: color 0.2s;5927}5928.peach-trash-purge-all:hover { color: var(--peach-breach); }5929.peach-trash-purge-confirm-label {5930  font-size: 0.625rem;5931  color: var(--peach-t1);5932  flex: 1;5933}59345935/* ── Settings shortcuts grid ─────────────────────────────────────────── */5936.peach-shortcuts-grid {5937  display: grid;5938  grid-template-columns: auto 1fr;5939  gap: 6px 12px;5940  align-items: center;5941  padding: 4px 0;5942}5943.peach-shortcut-key {5944  font-family: var(--font-mono);5945  font-size: 0.625rem;5946  color: var(--peach-t0);5947  background: var(--peach-t3);5948  border-radius: 4px;5949  padding: 2px 6px;5950  white-space: nowrap;5951  text-align: center;5952}5953.peach-shortcut-desc {5954  font-size: 0.6875rem;5955  color: var(--peach-t1);5956}59575958/* ── Sort bar trash button ───────────────────────────────────────────── */5959.peach-sort-trash-btn {5960  display: flex;5961  align-items: center;5962  justify-content: center;5963  padding: 3px 5px;5964  background: transparent;5965  border: none;5966  cursor: pointer;5967  color: var(--peach-t2);5968  border-radius: 4px;5969  transition: color 140ms ease, background 140ms ease;5970}5971.peach-sort-trash-btn:hover {5972  color: var(--peach-t1);5973  background: var(--peach-t3);5974}5975.peach-sort-trash-btn.is-active {5976  color: var(--peach-accent);5977}59785979/* Accent color picker */5980.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5981.peach-accent-picker {5982  display: flex;5983  flex-wrap: wrap;5984  gap: 7px;5985  padding: 2px 0;5986}5987.peach-accent-swatch {5988  width: 22px;5989  height: 22px;5990  border-radius: 50%;5991  border: 2px solid transparent;5992  cursor: pointer;5993  padding: 0;5994  transition: transform 100ms;5995  outline-offset: 2px;5996}5997.peach-accent-swatch:hover { transform: scale(1.15); }5998.peach-accent-swatch.is-active {5999  border-color: var(--peach-t0);6000  transform: scale(1.1);6001}60026003.peach-pill-group {6004  display: flex;6005  gap: 6px;6006}6007.peach-pill-group .peach-btn.is-active {6008  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);6009  border-color: var(--peach-accent);6010  color: var(--peach-t0);6011}60126013/* ── Card entry styles ───────────────────────────────────────── */6014.peach-card-number {6015  font-family: var(--peach-mono);6016  letter-spacing: 0.08em;6017}60186019.peach-card-network-badge {6020  font-size: 0.625rem;6021  padding: 1px 5px;6022  border-radius: 4px;6023  border: 0.5px solid var(--peach-border);6024  color: var(--peach-text-dim);6025  margin-left: 6px;6026  vertical-align: middle;6027}60286029.peach-card-expiry-row {6030  display: flex;6031  align-items: center;6032  gap: 8px;6033}60346035.peach-card-expiry-sep {6036  color: var(--peach-text-dim);6037}60386039/* ── Pro tier — upgrade screen ──────────────────────────────── */6040.peach-pro-mark {6041  font-size: 0.5625rem;6042  color: var(--peach-accent);6043  margin-left: 6px;6044  vertical-align: super;6045  opacity: 0.7;6046}60476048.peach-pro-mini-badge {6049  display: block;6050  font-size: 0.625rem;6051  font-style: italic;6052  color: var(--peach-accent);6053  letter-spacing: 0.04em;6054  margin-top: -2px;6055  padding-left: 2px;6056  opacity: 0.85;6057  text-align: center;6058}60596060.peach-wordmark-stack {6061  display: inline-flex;6062  flex-direction: column;6063  align-items: center;6064}60656066/* ── Pro tier — upgrade page ─────────────────────────────────── */6067/* ── Pro upgrade — redesigned editorial layout ─────────────────── */60686069.peach-pro-upgrade {6070  display: flex;6071  flex-direction: column;6072  align-items: stretch;6073  gap: 10px;6074  padding: 2px 2px 12px;6075}60766077.peach-pro-eyebrow {6078  margin: 0;6079  font-family: var(--font-ui);6080  font-size: 0.625rem;6081  font-weight: 500;6082  letter-spacing: 0.12em;6083  color: var(--peach-accent);6084}60856086.peach-pro-headline {6087  margin: 0;6088  font-family: var(--font-display, "Cormorant Garamond", serif);6089  font-size: 30px;6090  font-weight: 700;6091  font-style: normal;6092  line-height: 1.05;6093  color: var(--peach-t0);6094  letter-spacing: -0.01em;6095}6096.peach-pro-headline em {6097  font-style: italic;6098  font-weight: 400;6099  color: var(--peach-accent);6100}61016102.peach-pro-subtitle {6103  margin: 0;6104  font-size: 0.6875rem;6105  line-height: 1.5;6106  color: var(--peach-t1);6107}61086109/* Group header for the Pro feature grid (e.g. "ADVANCED SECURITY"). */6110.peach-pro-section-label {6111  margin: 6px 0 0;6112  font-family: var(--font-ui);6113  font-size: 0.5625rem;6114  font-weight: 500;6115  letter-spacing: 0.12em;6116  text-transform: uppercase;6117  color: var(--peach-t2);6118}61196120/* 2-column numbered feature grid */6121.peach-pro-grid {6122  display: grid;6123  grid-template-columns: 1fr 1fr;6124  border-top: 1px solid var(--peach-border);6125  border-left: 1px solid var(--peach-border);6126}61276128.peach-pro-grid-item {6129  display: flex;6130  flex-direction: column;6131  gap: 2px;6132  padding: 8px 9px;6133  border-right: 1px solid var(--peach-border);6134  border-bottom: 1px solid var(--peach-border);6135}61366137.peach-pro-grid-item--wide {6138  grid-column: 1 / -1;6139}61406141.peach-pro-grid-num {6142  font-family: var(--font-mono);6143  font-size: 0.5625rem;6144  color: var(--peach-accent);6145  letter-spacing: 0.06em;6146  opacity: 0.85;6147}61486149.peach-pro-grid-name {6150  font-size: 0.8125rem;6151  font-weight: 500;6152  color: var(--peach-t0);6153  line-height: 1.2;6154}61556156.peach-pro-grid-desc {6157  font-size: 0.625rem;6158  color: var(--peach-t1);6159  line-height: 1.4;6160}61616162.peach-pro-grid-item.is-highlighted .peach-pro-grid-num {6163  animation: peach-pulse-accent 600ms ease-out forwards;6164}61656166@keyframes peach-pulse-accent {6167  0%   { opacity: 1; transform: scale(1.2); }6168  100% { opacity: 0.85; transform: scale(1); }6169}61706171/* Actions */6172.peach-pro-upgrade-actions {6173  display: flex;6174  flex-direction: column;6175  align-items: stretch;6176  gap: 10px;6177}61786179.peach-pro-pricing {6180  margin: 0;6181  font-size: 1rem;6182  font-weight: 600;6183  color: var(--peach-t0);6184  letter-spacing: 0.01em;6185}6186.peach-pro-pricing-sub {6187  font-size: 0.75rem;6188  font-weight: 400;6189  color: var(--peach-t1);6190  letter-spacing: 0.02em;6191}61926193.peach-pro-upgrade-cta {6194  display: flex;6195  align-items: center;6196  justify-content: center;6197  text-decoration: none;6198  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);6199  border: 1px solid var(--peach-accent);6200  border-radius: 10px;6201  color: var(--peach-accent);6202  font-family: var(--font-ui);6203  font-size: 0.8125rem;6204  font-weight: 600;6205  letter-spacing: 0.06em;6206  padding: 11px 16px;6207  transition: background 0.15s ease, color 0.15s ease;6208}6209.peach-pro-upgrade-cta:hover {6210  background: color-mix(in srgb, var(--peach-accent) 28%, transparent);6211}62126213.peach-pro-key-divider {6214  display: flex;6215  align-items: center;6216  gap: 8px;6217  color: var(--peach-t2);6218  font-size: 0.5625rem;6219  letter-spacing: 0.1em;6220}6221.peach-pro-key-divider::before,6222.peach-pro-key-divider::after {6223  content: "";6224  flex: 1;6225  height: 1px;6226  background: var(--peach-border);6227}62286229/* Inline key entry row */6230.peach-pro-key-inline {6231  display: flex;6232  align-items: center;6233  background: color-mix(in srgb, var(--peach-t0) 4%, transparent);6234  border: 1px solid var(--peach-border);6235  border-radius: 8px;6236  overflow: hidden;6237}6238.peach-pro-key-inline-input {6239  flex: 1;6240  background: transparent;6241  border: none;6242  outline: none;6243  color: var(--peach-t1);6244  font-family: var(--font-mono);6245  font-size: 0.625rem;6246  letter-spacing: 0.06em;6247  padding: 9px 10px;6248}6249.peach-pro-key-inline-input::placeholder {6250  color: var(--peach-t2);6251}6252.peach-pro-key-apply {6253  background: transparent;6254  border: none;6255  border-left: 1px solid var(--peach-border);6256  color: var(--peach-t2);6257  font-family: var(--font-ui);6258  font-size: 0.5625rem;6259  font-weight: 600;6260  letter-spacing: 0.08em;6261  padding: 9px 10px;6262  cursor: pointer;6263  transition: color 0.15s ease;6264  flex-shrink: 0;6265}6266.peach-pro-key-apply:not(:disabled):hover {6267  color: var(--peach-accent);6268}6269.peach-pro-key-apply:disabled {6270  opacity: 0.35;6271  cursor: not-allowed;6272}62736274/* ── Pro tier — key ceremony ─────────────────────────────────── */6275.peach-pro-key-ceremony {6276  display: flex;6277  flex-direction: column;6278  align-items: center;6279  gap: 12px;6280  padding: 20px 4px 16px;6281}62826283.peach-pro-key-ceremony .peach-lock-rune-string {6284  font-size: 1rem;6285  gap: 12px;6286  flex: 0;6287  justify-content: center;6288}62896290.peach-pro-key-ceremony-label {6291  margin: 0;6292  font-size: 0.6875rem;6293  color: var(--peach-t2);6294  font-style: italic;6295  letter-spacing: 0.04em;6296}62976298.peach-pro-key-input {6299  font-family: var(--font-mono, monospace);6300  letter-spacing: 0.06em;6301  text-align: center;6302  width: 100%;6303  box-sizing: border-box;6304}63056306.peach-pro-key-error {6307  margin: 0;6308  font-size: 0.75rem;6309  text-align: center;6310  color: var(--peach-breach, #e55);6311  padding: 0;6312}63136314.peach-pro-key-activate {6315  width: 100%;6316  text-align: center;6317  box-sizing: border-box;6318  padding: 10px 20px;6319  font-size: 0.8125rem;6320}63216322.peach-pro-key-cancel {6323  background: transparent;6324  border: 0;6325  color: var(--peach-t2);6326  font-size: 0.6875rem;6327  cursor: pointer;6328  padding: 2px 8px;6329  transition: color 0.2s;6330}63316332.peach-pro-key-cancel:hover { color: var(--peach-accent); }63336334/* ── Pro tier — active state ─────────────────────────────────── */6335.peach-pro-active {6336  display: flex;6337  flex-direction: column;6338  align-items: center;6339  gap: 0;6340  padding: 8px 4px 16px;6341  min-height: 280px;6342}63436344.peach-pro-active-hero {6345  display: flex;6346  flex-direction: column;6347  align-items: center;6348  gap: 6px;6349  padding: 20px 0 8px;6350}63516352.peach-pro-active-mark-wrap {6353  display: flex;6354  align-items: center;6355  justify-content: center;6356  margin-bottom: 4px;6357}63586359.peach-pro-active-mark {6360  width: 60px;6361  height: 60px;6362}63636364.peach-pro-active-title {6365  font-family: var(--font-display, var(--font-ui));6366  font-size: 26px;6367  margin: 0;6368  color: var(--peach-t0);6369  letter-spacing: 0.01em;6370}63716372.peach-pro-active-since {6373  margin: 0;6374  font-size: 0.6875rem;6375  color: var(--peach-t2);6376  font-style: italic;6377}63786379.peach-pro-active-features {6380  display: flex;6381  flex-direction: column;6382  gap: 8px;6383  width: 100%;6384  padding: 14px 8px 0;6385  border-top: 1px solid var(--peach-border);6386  flex: 1;6387}63886389.peach-pro-active-feature {6390  display: flex;6391  align-items: center;6392  gap: 9px;6393}63946395.peach-pro-active-feature-mark {6396  color: var(--peach-accent);6397  font-size: 0.625rem;6398  opacity: 0.65;6399  flex-shrink: 0;6400}64016402.peach-pro-active-feature-name {6403  font-size: 0.75rem;6404  color: var(--peach-t1);6405}64066407.peach-pro-deactivate {6408  align-self: center;6409  background: transparent;6410  border: 0;6411  color: var(--peach-t3);6412  font-size: 0.625rem;6413  cursor: pointer;6414  padding: 8px 0 0;6415  margin-top: 16px;6416  letter-spacing: 0.03em;6417  transition: color 0.2s;6418}64196420.peach-pro-deactivate:hover { color: var(--peach-t2); }64216422.peach-pro-deactivate:disabled {6423  opacity: 0.5;6424  cursor: default;6425}64266427/* ── Pro card activation sparkles & thank-you ── */6428button.peach-pro-active-mark-wrap {6429  background: transparent;6430  border: 0;6431  padding: 0;6432  cursor: pointer;6433  position: relative;6434  overflow: visible;6435}64366437.peach-pro-sparks {6438  position: absolute;6439  inset: 0;6440  pointer-events: none;6441  overflow: visible;6442}64436444.peach-pro-spark {6445  position: absolute;6446  top: 50%;6447  left: 50%;6448  font-size: 9px;6449  line-height: 1;6450  opacity: 0;6451  transform: translate(-50%, -50%);6452  animation: peach-pro-spark-fly 1.4s ease-out var(--spark-delay, 0ms) both;6453}64546455@keyframes peach-pro-spark-fly {6456  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }6457  25%  { opacity: 1; }6458  100% {6459    opacity: 0;6460    transform: translate(6461      calc(-50% + var(--spark-x, 0px)),6462      calc(-50% + var(--spark-y, -40px))6463    ) scale(0.8);6464  }6465}64666467.peach-pro-thankyou-text {6468  margin: 4px 0 0;6469  font-size: 0.6875rem;6470  font-style: italic;6471  color: currentColor;6472  opacity: 0;6473  animation: peach-pro-thankyou-flash 2.5s ease both;6474}64756476@keyframes peach-pro-thankyou-flash {6477  0%   { opacity: 0; transform: translateY(4px); }6478  15%  { opacity: 0.75; transform: translateY(0); }6479  75%  { opacity: 0.75; }6480  100% { opacity: 0; }6481}64826483/* ── Pro advanced health remediation queue ──────────────────── */6484.peach-health-pro-queue {6485  display: flex;6486  flex-direction: column;6487  gap: 10px;6488  padding: 12px;6489  margin: 0 0 12px;6490  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6491  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6492  border-radius: 10px;6493}64946495.peach-health-pro-queue-head {6496  display: flex;6497  justify-content: space-between;6498  align-items: baseline;6499}65006501.peach-health-pro-queue-title {6502  font-size: 0.75rem;6503  font-weight: 500;6504  letter-spacing: 0.04em;6505  text-transform: uppercase;6506  color: var(--peach-accent);6507}65086509.peach-health-pro-queue-score {6510  font-size: 0.6875rem;6511  color: var(--peach-t2);6512}65136514.peach-health-pro-row {6515  display: flex;6516  gap: 10px;6517  align-items: center;6518  padding: 8px 0;6519  border-top: 1px solid var(--peach-border);6520}65216522.peach-health-pro-row-info {6523  flex: 1;6524  display: flex;6525  flex-direction: column;6526  gap: 4px;6527  min-width: 0;6528}65296530.peach-health-pro-action {6531  flex: 0 0 auto;6532  padding: 4px 8px;6533  font-size: 0.5625rem;6534  letter-spacing: 0.08em;6535  text-transform: uppercase;6536}65376538.peach-health-pro-row-name {6539  font-size: 0.8125rem;6540  color: var(--peach-t0);6541  overflow: hidden;6542  text-overflow: ellipsis;6543  white-space: nowrap;6544}65456546.peach-health-pro-row-meta {6547  font-size: 0.6875rem;6548  color: var(--peach-t2);6549}65506551.peach-health-pro-bar {6552  height: 2px;6553  background: var(--peach-border);6554  border-radius: 2px;6555  overflow: hidden;6556  margin-top: 2px;6557}65586559.peach-health-pro-bar-fill {6560  height: 100%;6561  background: var(--peach-accent);6562  transition: width 200ms ease-out;6563}65646565/* ── Pro activation celebration ── */6566@keyframes peach-pro-bloom {6567  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6568  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6569                 drop-shadow(0 0 48px var(--peach-glow)); }6570  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6571}65726573@keyframes peach-pro-wordmark-in {6574  from { opacity: 0; transform: translateY(4px); }6575  to   { opacity: 1; transform: translateY(0); }6576}65776578@keyframes peach-pro-fade-out {6579  from { opacity: 1; }6580  to   { opacity: 0; }6581}65826583.peach-pro-celebration {6584  background:6585    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6586    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6587    var(--peach-bg);6588  border: 1px solid var(--peach-t3);6589  box-shadow:6590    0 2px 8px rgba(0,0,0,0.55),6591    0 14px 48px rgba(0,0,0,0.7),6592    0 0 0 1px rgba(240,232,216,0.04);6593  overflow: hidden;6594  width: 320px;6595  height: 520px;6596  display: flex;6597  flex-direction: column;6598  align-items: center;6599  justify-content: center;6600  gap: 8px;6601  padding: 32px 24px;6602  text-align: center;6603}66046605.peach-pro-celebration.is-leaving {6606  animation: peach-pro-fade-out 400ms ease forwards;6607}66086609.peach-pro-bloom-target {6610  display: flex;6611  align-items: center;6612  justify-content: center;6613  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6614  margin-bottom: 12px;6615}66166617.peach-pro-bloom-icon {6618  width: 48px;6619  height: 48px;6620}66216622.peach-pro-wordmark {6623  font-family: var(--font-display);6624  font-size: 22px;6625  font-style: italic;6626  font-weight: 400;6627  color: var(--peach-accent);6628  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6629}66306631.peach-pro-thankyou {6632  font-size: 0.75rem;6633  font-style: italic;6634  color: var(--peach-t2);6635  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6636}663766386639/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6640.peach-pro-notice-banner {6641  display: flex;6642  align-items: center;6643  gap: 8px;6644  padding: 7px 12px;6645  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6646  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6647  font-size: 0.6875rem;6648  color: var(--peach-t2);6649  font-family: "IBM Plex Mono", monospace;6650  flex-shrink: 0;6651}66526653.peach-pro-notice-link {6654  background: none;6655  border: none;6656  padding: 0;6657  cursor: pointer;6658  font-size: 0.6875rem;6659  color: var(--peach-accent);6660  font-family: "IBM Plex Mono", monospace;6661  margin-left: auto;6662  white-space: nowrap;6663}66646665.peach-pro-notice-close {6666  background: none;6667  border: none;6668  padding: 0 0 0 4px;6669  cursor: pointer;6670  font-size: 0.625rem;6671  color: var(--peach-t3);6672  line-height: 1;6673}66746675/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6676   Renders over whatever view is showing. 60-second expiry; the popup ticks6677   the countdown each second and clears the banner when it hits zero. */6678.peach-pair-request-banner {6679  display: flex;6680  flex-direction: column;6681  gap: 8px;6682  padding: 10px 12px;6683  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6684  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6685  font-family: "IBM Plex Mono", monospace;6686  flex-shrink: 0;6687}66886689.peach-pair-toast {6690  padding: 8px 12px;6691  font-family: "IBM Plex Mono", monospace;6692  font-size: 0.75rem;6693  color: var(--peach-t1);6694  background: color-mix(in srgb, var(--peach-accent) 10%, var(--peach-bg-card));6695  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);6696  flex-shrink: 0;6697  text-align: center;6698}66996700.peach-pair-toast strong {6701  color: var(--peach-t0);6702  font-weight: 500;6703}67046705.peach-pair-request-header {6706  display: flex;6707  align-items: center;6708  gap: 8px;6709  font-size: 0.75rem;6710  color: var(--peach-t1);6711}67126713.peach-pair-request-mark {6714  font-size: 0.875rem;6715  display: inline-flex;6716  align-items: center;6717}67186719.peach-pair-request-icon {6720  width: 1em;6721  height: 1em;6722}67236724.peach-pair-request-title {6725  font-weight: 600;6726  color: var(--peach-t0);6727}67286729.peach-pair-request-countdown {6730  margin-left: auto;6731  font-variant-numeric: tabular-nums;6732  color: var(--peach-t2);6733  font-size: 0.6875rem;6734}67356736.peach-pair-request-body {6737  margin: 0;6738  font-size: 0.75rem;6739  color: var(--peach-t1);6740  line-height: 1.4;6741}67426743.peach-pair-request-body strong {6744  color: var(--peach-t0);6745  font-weight: 600;6746}67476748.peach-pair-request-actions {6749  display: flex;6750  gap: 8px;6751  justify-content: flex-end;6752}67536754/* ─── First-run onboarding ──────────────────────────────────────────────6755   Three-card welcome shown once before vault creation. The PeachScript6756   rune background drifts behind everything at very low opacity — it's6757   atmosphere, not focus. The cards themselves use the same panel6758   language as the rest of the popup so the transition into NewVault is6759   continuous, not a jarring switch of visual register. */67606761.peach-onboarding {6762  position: relative;6763  display: flex;6764  flex-direction: column;6765  width: 100%;6766  height: 100%;6767  padding: 16px 16px 18px;6768  box-sizing: border-box;6769  overflow: hidden;6770  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6771}67726773.peach-onboarding.is-completing {6774  animation: peach-onboard-exit 200ms ease-out forwards;6775}67766777.peach-rune-background {6778  position: absolute;6779  inset: 0;6780  width: 100%;6781  height: 100%;6782  pointer-events: none;6783  z-index: 0;6784  transition: opacity 500ms ease-out;6785}67866787.peach-onboarding.is-completing .peach-rune-background {6788  opacity: 0;6789}67906791.peach-onboarding-header {6792  position: relative;6793  z-index: 1;6794  display: flex;6795  align-items: center;6796  margin-bottom: 14px;6797}67986799.peach-onboarding-card {6800  position: relative;6801  z-index: 1;6802  flex: 1;6803  display: flex;6804  flex-direction: column;6805  gap: 10px;6806  padding: 22px 20px;6807  border-radius: 16px;6808  border: 1px solid var(--peach-t3);6809  background:6810    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6811  backdrop-filter: blur(3px);6812  -webkit-backdrop-filter: blur(3px);6813  box-shadow:6814    inset 0 1px 0 rgba(240, 232, 216, 0.04),6815    0 12px 28px rgba(0, 0, 0, 0.12);6816  cursor: pointer;6817  user-select: none;6818  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6819}68206821.peach-onboarding-card.is-exiting {6822  animation: peach-card-out 120ms ease-in forwards;6823  pointer-events: none;6824}68256826.peach-onboarding-card-headline {6827  margin: 0;6828  font-family: var(--font-display);6829  font-style: italic;6830  font-weight: 400;6831  font-size: 22px;6832  line-height: 1.05;6833  color: var(--peach-t0);6834  white-space: pre-line;6835}68366837.peach-onboarding-divider {6838  margin: 4px 0 6px;6839  border: 0;6840  border-top: 1px solid var(--peach-t3);6841  width: 100%;6842}68436844.peach-onboarding-body {6845  margin: 0;6846  font-size: 0.8125rem;6847  line-height: 1.6;6848  color: var(--peach-t1);6849}68506851.peach-onboarding-warning {6852  display: flex;6853  align-items: flex-start;6854  gap: 8px;6855  margin: 6px 0 0;6856  padding-top: 8px;6857  border-top: 1px dashed var(--peach-t3);6858  font-size: 0.8125rem;6859  line-height: 1.5;6860  color: var(--peach-t1);6861}68626863.peach-onboarding-warning-icon {6864  color: var(--peach-accent);6865  font-size: 0.8125rem;6866  line-height: 1.5;6867  flex: 0 0 auto;6868}68696870.peach-onboarding-nav {6871  position: relative;6872  z-index: 1;6873  display: flex;6874  align-items: center;6875  justify-content: space-between;6876  margin-top: 12px;6877  padding: 0 4px;6878}68796880.peach-onboarding-dots {6881  display: flex;6882  align-items: center;6883  gap: 6px;6884}68856886.peach-onboarding-dot {6887  width: 6px;6888  height: 6px;6889  border-radius: 50%;6890  background: var(--peach-t2);6891  transition: width 200ms ease, height 200ms ease, background 200ms ease;6892}68936894.peach-onboarding-dot.is-active {6895  width: 8px;6896  height: 8px;6897  background: var(--peach-accent);6898}68996900.peach-onboarding-next {6901  background: none;6902  border: none;6903  padding: 4px 0;6904  cursor: pointer;6905  font-family: "IBM Plex Mono", monospace;6906  font-size: 0.6875rem;6907  letter-spacing: 0.04em;6908  color: var(--peach-t1);6909  transition: color 150ms ease;6910}69116912.peach-onboarding-next:hover {6913  color: var(--peach-t0);6914}69156916.peach-onboarding-next:disabled {6917  opacity: 0.5;6918  cursor: default;6919}69206921.peach-onboarding-back {6922  background: none;6923  border: none;6924  padding: 4px 0;6925  cursor: pointer;6926  font-family: "IBM Plex Mono", monospace;6927  font-size: 0.6875rem;6928  letter-spacing: 0.04em;6929  color: var(--peach-t2);6930  transition: color 150ms ease;6931}69326933.peach-onboarding-back:hover {6934  color: var(--peach-t0);6935}69366937.peach-onboarding-back:disabled {6938  opacity: 0.5;6939  cursor: default;6940}69416942/* Reserve back-button width on the first card so the dots stay centred */6943.peach-onboarding-back-spacer {6944  width: 44px;6945}69466947.peach-onboarding-mobile-card-buttons {6948  display: flex;6949  flex-direction: column;6950  gap: 8px;6951  margin-top: 16px;6952}69536954@keyframes peach-onboard-enter {6955  from { opacity: 0; transform: translateY(20px); }6956  to   { opacity: 1; transform: translateY(0); }6957}69586959@keyframes peach-onboard-exit {6960  from { opacity: 1; }6961  to   { opacity: 0; }6962}69636964@keyframes peach-card-in {6965  from { opacity: 0; transform: translateX(12px); }6966  to   { opacity: 1; transform: translateX(0); }6967}69686969@keyframes peach-card-out {6970  from { opacity: 1; transform: translateX(0); }6971  to   { opacity: 0; transform: translateX(-12px); }6972}69736974/* ─── New vault screen — matched to onboarding card language ─────────── */69756976.peach-newvault {6977  position: relative;6978  display: flex;6979  flex-direction: column;6980  gap: 12px;6981  padding: 16px 16px 18px;6982  overflow: hidden;6983}69846985/* Suppress the warm-blob ambient art inherited from .lock-screen — the6986   new vault card now carries the visual weight. */6987.peach-newvault::before {6988  content: none;6989}69906991.peach-newvault-header {6992  position: relative;6993  z-index: 2;6994  display: flex;6995  align-items: center;6996  gap: 10px;6997  margin-bottom: 2px;6998}69997000.peach-newvault-back {7001  display: inline-flex;7002  align-items: center;7003  gap: 4px;7004  background: transparent;7005  border: none;7006  color: var(--peach-t2);7007  font-family: "IBM Plex Mono", monospace;7008  font-size: 0.625rem;7009  letter-spacing: 0.06em;7010  cursor: pointer;7011  padding: 4px 6px;7012  border-radius: 6px;7013  transition: color 120ms ease, background 120ms ease;7014}70157016.peach-newvault-back:hover {7017  color: var(--peach-t0);7018  background: rgba(240, 232, 216, 0.04);7019}70207021.peach-newvault-mark {7022  position: absolute;7023  right: -12px;7024  top: 6px;7025  width: 110px;7026  height: 110px;7027  pointer-events: none;7028  opacity: 0.10;7029  filter: saturate(0.9);7030  z-index: 0;7031}7032.peach-newvault-mark-art {7033  width: 100%;7034  height: 100%;7035}7036.peach-newvault-mark-art path:nth-child(1) {7037  fill: rgba(123, 144, 96, 0.88);7038}7039.peach-newvault-mark-art path:nth-child(2) {7040  stroke: rgba(94, 122, 66, 0.95);7041}70427043.peach-newvault-card {7044  position: relative;7045  z-index: 1;7046  display: flex;7047  flex-direction: column;7048  gap: 12px;7049  padding: 22px 20px 18px;7050  border-radius: 16px;7051  border: 1px solid var(--peach-t3);7052  background:7053    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));7054  backdrop-filter: blur(3px);7055  -webkit-backdrop-filter: blur(3px);7056  box-shadow:7057    inset 0 1px 0 rgba(240, 232, 216, 0.04),7058    0 12px 28px rgba(0, 0, 0, 0.12);7059  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;7060}70617062.peach-newvault-headline {7063  margin: 0;7064  font-family: var(--font-display);7065  font-style: italic;7066  font-weight: 400;7067  font-size: 24px;7068  line-height: 1.05;7069  color: var(--peach-t0);7070  white-space: pre-line;7071}70727073.peach-newvault-divider {7074  margin: 2px 0 4px;7075  border: 0;7076  border-top: 1px solid var(--peach-t3);7077  width: 100%;7078}70797080.peach-newvault-field {7081  display: flex;7082  flex-direction: column;7083  gap: 4px;7084}70857086.peach-newvault-label-row {7087  display: flex;7088  align-items: center;7089  justify-content: space-between;7090}70917092/* Monospace input scaled to the card. Replaces the 22px unlock-input7093   so the placeholder no longer overflows and the field reads as part7094   of the same surface as the body copy. */7095.peach-newvault-input {7096  font-size: 0.875rem;7097  letter-spacing: 0.18em;7098  padding: 8px 0;7099}7100.peach-newvault-input::placeholder {7101  letter-spacing: 0.18em;7102  color: var(--peach-t2);7103}71047105.peach-newvault-hint {7106  margin: 2px 0 0;7107  font-family: "IBM Plex Mono", monospace;7108  font-size: 0.625rem;7109  color: var(--peach-t2);7110  letter-spacing: 0.04em;7111}71127113.peach-newvault-submit {7114  margin-top: 4px;7115}71167117.peach-newvault-warning {7118  display: flex;7119  align-items: flex-start;7120  gap: 8px;7121  margin: 4px 0 0;7122  padding-top: 10px;7123  border-top: 1px dashed var(--peach-t3);7124  font-size: 0.75rem;7125  line-height: 1.5;7126  color: var(--peach-t1);7127}71287129.peach-newvault-warning-icon {7130  color: var(--peach-accent);7131  font-size: 0.8125rem;7132  line-height: 1.4;7133  flex: 0 0 auto;7134}71357136.peach-newvault-footer {7137  position: relative;7138  z-index: 1;7139  display: flex;7140  flex-direction: column;7141  gap: 4px;7142  padding: 4px 4px 0;7143}71447145/* Settings body — warm accent gradient gives the glass something to blur against */7146.peach-settings-body {7147  background:7148    radial-gradient(7149      ellipse at 30% 20%,7150      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,7151      transparent 60%7152    );7153}71547155/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */7156/* ── Danger cards (Replace + Destroy) ────────────────────────────────────7157 * Two severity levels: "warn" for actions that are dangerous-but-recoverable7158 * (replacing the vault from a backup file) and "hazard" for actions that7159 * are absolutely irreversible (Panic). Both use the same card scaffold so7160 * they read as a pair, but the colour family signals the severity at a7161 * glance — yellow for caution, red for don't.7162 */7163.peach-danger-card {7164  --danger-tint: 235, 158, 52; /* amber */7165  display: flex;7166  flex-direction: column;7167  gap: 8px;7168  padding: 14px;7169  margin-top: 10px;7170  border-radius: 12px;7171  border: 1px solid rgba(var(--danger-tint), 0.32);7172  background:7173    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),7174    rgba(var(--danger-tint), 0.04);7175  box-shadow:7176    inset 0 1px 0 rgba(var(--danger-tint), 0.08),7177    0 0 24px rgba(var(--danger-tint), 0.04);7178  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;7179}71807181.peach-danger-card:hover {7182  border-color: rgba(var(--danger-tint), 0.55);7183  box-shadow:7184    inset 0 1px 0 rgba(var(--danger-tint), 0.12),7185    0 0 36px rgba(var(--danger-tint), 0.10);7186}71877188.peach-danger-card--hazard {7189  --danger-tint: 220, 38, 38; /* red */7190}71917192.peach-danger-card-head {7193  display: flex;7194  align-items: center;7195  gap: 10px;7196}71977198.peach-danger-card-glyph {7199  width: 28px;7200  height: 28px;7201  flex-shrink: 0;7202  display: flex;7203  align-items: center;7204  justify-content: center;7205  border-radius: 8px;7206  background: rgba(var(--danger-tint), 0.12);7207  color: rgba(var(--danger-tint), 0.95);7208  font-size: 1rem;7209  line-height: 1;7210}72117212.peach-danger-card-title {7213  margin: 0;7214  font-size: 0.8125rem;7215  font-weight: 600;7216  color: rgba(var(--danger-tint), 0.92);7217  letter-spacing: 0.01em;7218}72197220.peach-danger-card-copy {7221  margin: 0;7222  font-size: 0.6875rem;7223  line-height: 1.5;7224  color: var(--peach-t2);7225}72267227.peach-danger-card-button {7228  width: 100%;7229  padding: 9px;7230  margin-top: 4px;7231  background: transparent;7232  border: 1px solid rgba(var(--danger-tint), 0.45);7233  border-radius: 8px;7234  color: rgba(var(--danger-tint), 0.9);7235  font-size: 0.75rem;7236  font-weight: 500;7237  letter-spacing: 0.02em;7238  cursor: pointer;7239  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7240}72417242.peach-danger-card-button:hover {7243  background: rgba(var(--danger-tint), 0.10);7244  border-color: rgba(var(--danger-tint), 0.75);7245  color: rgb(var(--danger-tint));7246}72477248/* ── Panic flow (three-step destruction) ───────────────────────────────── */7249.peach-panic {7250  display: flex;7251  flex-direction: column;7252  flex: 1;7253  min-height: 0;7254  padding: 28px 20px 20px;7255  gap: 18px;7256  overflow-y: auto;7257  scrollbar-width: none;7258  -ms-overflow-style: none;7259}72607261.peach-panic::-webkit-scrollbar { display: none; }72627263.peach-panic-step2 {7264  background: rgba(220, 38, 38, 0.04);7265}72667267.peach-panic-step3 {7268  position: relative;7269  background: #0f0505;7270  color: #ffffff;7271  overflow: hidden;7272}72737274.peach-panic-rune-bg {7275  position: absolute;7276  inset: 0;7277  opacity: 0.22;7278  pointer-events: none;7279  overflow: hidden;7280}72817282.peach-panic-rune-bg canvas {7283  width: 100% !important;7284  height: 100% !important;7285}72867287.peach-panic-icon {7288  font-size: 32px;7289  color: rgb(220, 38, 38);7290  line-height: 1;7291}72927293.peach-panic-title {7294  margin: 0;7295  font-size: 18px;7296  font-weight: 500;7297  color: var(--peach-t1);7298}72997300.peach-panic-title--severe {7301  font-size: 20px;7302  font-weight: 700;7303  color: rgb(220, 38, 38);7304}73057306.peach-panic-body {7307  margin: 0;7308  font-size: 0.8125rem;7309  line-height: 1.55;7310  color: var(--peach-t2);7311}73127313.peach-panic-body--severe {7314  color: rgba(220, 38, 38, 0.85);7315}73167317.peach-panic-body--final {7318  font-size: 1rem;7319  font-weight: 700;7320  color: rgb(255, 80, 80);7321  line-height: 1.4;7322}73237324.peach-panic-body--final-intro {7325  font-size: 1rem;7326  color: #ffffff;7327  font-weight: 400;7328}73297330.peach-panic-divider {7331  height: 1px;7332  background: rgba(255, 255, 255, 0.08);7333  margin: 4px 0;7334}73357336.peach-panic-confirm-input {7337  width: 100%;7338  padding: 10px 12px;7339  background: rgba(255, 255, 255, 0.02);7340  border: 1px solid rgba(220, 38, 38, 0.4);7341  border-radius: 8px;7342  color: var(--peach-t1);7343  font-family: "IBM Plex Mono", monospace;7344  font-size: 0.875rem;7345  letter-spacing: 0.12em;7346  text-transform: uppercase;7347}73487349.peach-panic-confirm-input:focus {7350  outline: none;7351  border-color: rgb(220, 38, 38);7352}73537354.peach-panic-confirm-input--match {7355  border-color: rgb(220, 38, 38);7356  color: rgb(220, 38, 38);7357}73587359.peach-panic-confirm-label {7360  font-size: 0.6875rem;7361  color: var(--peach-t2);7362  margin: 0 0 -8px;7363  letter-spacing: 0.06em;7364}73657366.peach-panic-actions {7367  display: flex;7368  flex-direction: column;7369  gap: 10px;7370  margin-top: auto;7371}73727373.peach-panic-button {7374  width: 100%;7375  padding: 12px;7376  border-radius: 8px;7377  font-size: 0.8125rem;7378  cursor: pointer;7379  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;7380}73817382.peach-panic-button--primary {7383  background: var(--peach-accent);7384  border: 1px solid var(--peach-accent);7385  color: #ffffff;7386  font-weight: 600;7387}73887389.peach-panic-button--primary:hover {7390  background: color-mix(in srgb, var(--peach-accent) 88%, white);7391}73927393.peach-panic-button--danger {7394  background: rgb(220, 38, 38);7395  border: 1px solid rgb(220, 38, 38);7396  color: #ffffff;7397  font-weight: 600;7398}73997400.peach-panic-button--danger:disabled {7401  opacity: 0.35;7402  cursor: not-allowed;7403}74047405.peach-panic-button--ghost {7406  background: transparent;7407  border: 1px solid rgba(255, 255, 255, 0.18);7408  color: var(--peach-t2);7409}74107411.peach-panic-button--ghost:hover {7412  border-color: rgba(255, 255, 255, 0.32);7413  color: var(--peach-t1);7414}74157416.peach-panic-link {7417  background: transparent;7418  border: none;7419  padding: 4px 0;7420  color: rgba(220, 38, 38, 0.65);7421  font-size: 0.75rem;7422  cursor: pointer;7423  text-align: left;7424  text-decoration: underline;7425  text-underline-offset: 3px;7426}74277428.peach-panic-link:hover {7429  color: rgb(220, 38, 38);7430}74317432.peach-panic-bar {7433  background: rgb(220, 38, 38);7434  padding: 16px 20px;7435  margin: -28px -20px 0;7436  text-align: center;7437  font-size: 0.8125rem;7438  font-weight: 700;7439  letter-spacing: 0.12em;7440  color: #ffffff;7441}74427443.peach-panic-final-button {7444  width: 100%;7445  padding: 14px;7446  background: rgb(220, 38, 38);7447  border: none;7448  border-radius: 8px;7449  color: #ffffff;7450  font-size: 0.875rem;7451  font-weight: 700;7452  letter-spacing: 0.08em;7453  text-transform: uppercase;7454  cursor: pointer;7455  animation: peach-panic-pulse 2s ease-in-out infinite;7456}74577458.peach-settings-license {7459  margin-top: 10px;7460  padding-top: 10px;7461  border-top: 1px solid var(--peach-t3);7462}74637464.peach-settings-label {7465  font-size: 0.625rem;7466  letter-spacing: 0.08em;7467  color: var(--peach-t3);7468  display: block;7469  margin-bottom: 6px;7470}74717472.peach-settings-license-row {7473  display: flex;7474  align-items: center;7475  justify-content: space-between;7476  gap: 8px;7477}74787479.peach-settings-license-key {7480  font-family: 'IBM Plex Mono', monospace;7481  font-size: 0.75rem;7482  color: var(--peach-t0);7483  letter-spacing: 0.04em;7484  word-break: break-all;7485  flex: 1;7486  min-width: 0;7487}74887489.peach-settings-license-key--masked {7490  font-family: 'IBM Plex Mono', monospace;7491  font-size: 0.6rem;7492  color: var(--peach-t1);7493  letter-spacing: 0.18em;7494  user-select: none;7495}74967497.peach-settings-license-actions {7498  display: flex;7499  align-items: center;7500  gap: 2px;7501  flex-shrink: 0;7502}75037504.peach-settings-license-copy {7505  font-size: 0.6875rem;7506  color: var(--peach-accent);7507  background: transparent;7508  border: none;7509  cursor: pointer;7510  padding: 4px 8px;7511  border-radius: 4px;7512  flex-shrink: 0;7513  transition: opacity 150ms ease;7514}75157516.peach-settings-license-copy:hover {7517  opacity: 0.75;7518}75197520.peach-settings-license-toggle {7521  display: flex;7522  align-items: center;7523  justify-content: center;7524  background: transparent;7525  border: none;7526  cursor: pointer;7527  padding: 4px 6px;7528  border-radius: 4px;7529  color: var(--peach-t2);7530  transition: color 150ms ease;7531}75327533.peach-settings-license-toggle:hover {7534  color: var(--peach-t1);7535}75367537@keyframes peach-panic-pulse {7538  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }7539  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }7540}75417542[data-motion="reduce"] .peach-panic-final-button {7543  animation: none;7544}75457546/* Vault History — Settings → Vault sub-view */75477548.peach-history-list {7549  border: 1px solid var(--peach-border);7550  border-radius: 8px;7551  overflow: hidden;7552  margin: 8px 0 4px;7553}75547555.peach-history-row {7556  display: flex;7557  align-items: center;7558  justify-content: space-between;7559  padding: 9px 12px;7560  gap: 10px;7561  border-bottom: 1px solid var(--peach-border);7562}75637564.peach-history-row:last-child {7565  border-bottom: none;7566}75677568.peach-history-meta {7569  display: flex;7570  flex-direction: column;7571  gap: 2px;7572  min-width: 0;7573  flex: 1;7574}75757576.peach-history-time {7577  font-size: 0.75rem;7578  font-family: 'IBM Plex Mono', ui-monospace, monospace;7579  color: var(--peach-t0);7580  white-space: nowrap;7581  overflow: hidden;7582  text-overflow: ellipsis;7583}75847585.peach-history-sub {7586  font-size: 0.625rem;7587  color: var(--peach-t2);7588  letter-spacing: 0.06em;7589  text-transform: uppercase;7590  white-space: nowrap;7591  overflow: hidden;7592  text-overflow: ellipsis;7593}75947595.peach-history-btn {7596  flex-shrink: 0;7597  white-space: nowrap;7598  min-width: 56px;7599  text-align: center;7600}76017602.peach-history-btn.is-busy {7603  opacity: 0.65;7604}76057606.peach-history-footer {7607  font-size: 0.625rem;7608  color: var(--peach-t3);7609  letter-spacing: 0.05em;7610  text-align: right;7611  margin: 0;7612  padding: 2px 0 0;7613}76147615/* ── Context menu + swipe-copy flash ─────────────────────── */7616.peach-context-menu-backdrop {7617  position: fixed;7618  inset: 0;7619  background: rgba(0, 0, 0, 0.45);7620  z-index: 100;7621  display: flex;7622  align-items: flex-end;7623  justify-content: center;7624  animation: peach-ctx-fade 140ms ease both;7625}7626.peach-context-menu {7627  width: min(360px, calc(100vw - 24px));7628  margin-bottom: max(env(safe-area-inset-bottom), 12px);7629  background: var(--peach-bg);7630  border: 1px solid var(--peach-t3);7631  border-radius: 14px;7632  padding: 6px;7633  display: flex;7634  flex-direction: column;7635  gap: 2px;7636  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.55);7637  animation: peach-ctx-rise 200ms cubic-bezier(0.16, 1, 0.3, 1) both;7638}7639@keyframes peach-ctx-fade { from { opacity: 0; } to { opacity: 1; } }7640@keyframes peach-ctx-rise {7641  from { transform: translateY(16px); opacity: 0; }7642  to   { transform: translateY(0);    opacity: 1; }7643}7644.peach-context-menu-item {7645  background: transparent;7646  color: var(--peach-t0);7647  border: 0;7648  border-radius: 10px;7649  padding: 12px 14px;7650  text-align: left;7651  font: inherit;7652  cursor: pointer;7653}7654.peach-context-menu-item:hover,7655.peach-context-menu-item:focus-visible {7656  background: var(--peach-t3);7657}7658.peach-context-menu-item--danger {7659  color: var(--peach-health-bad, #d96868);7660}7661.peach-context-menu-item--cancel {7662  color: var(--peach-t2);7663  margin-top: 4px;7664  border-top: 1px solid var(--peach-t3);7665  border-radius: 0 0 10px 10px;7666}76677668/* Swipe-to-copy flash */7669.peach-entry-row.is-copy-flash {7670  animation: peach-copy-flash 600ms ease both;7671}7672@keyframes peach-copy-flash {7673  0%   { background: transparent; }7674  20%  { background: rgba(217, 153, 51, 0.32); }7675  100% { background: transparent; }7676}76777678html { font-size: 16px; }76797680/* ── Recovery word entry ─────────────────────────────────────────── */7681.peach-lock-recover-link {7682  display: block;7683  width: 100%;7684  margin-top: 12px;7685  background: none;7686  border: none;7687  font-family: "IBM Plex Mono", monospace;7688  font-size: 0.625rem;7689  letter-spacing: 0.06em;7690  color: var(--peach-t2);7691  cursor: pointer;7692  text-align: center;7693  padding: 4px;7694  transition: color 120ms ease;7695}7696.peach-lock-recover-link:hover {7697  color: var(--peach-t0);7698}76997700.lock-screen--recovery {7701  display: flex;7702  flex-direction: column;7703  align-items: stretch;7704  padding: 12px 20px 24px;7705  overflow: hidden;7706}77077708.peach-recovery-nav {7709  display: flex;7710  align-items: center;7711  position: relative;7712  z-index: 1;7713  margin-bottom: 4px;7714}77157716/* Mask runes to the top decorative band only — keep inputs and the7717   bottom CTA button clear. The bottom of the popup is reserved for7718   submit buttons; rendering runes there overlaps the button glyph. */7719.peach-rune-background--recovery {7720  -webkit-mask-image: linear-gradient(7721    to bottom,7722    black 0px, black 85px,7723    transparent 110px,7724    transparent 100%7725  );7726  mask-image: linear-gradient(7727    to bottom,7728    black 0px, black 85px,7729    transparent 110px,7730    transparent 100%7731  );7732}77337734.peach-recovery-header {7735  text-align: center;7736  margin-bottom: 16px;7737  margin-top: 4px;7738}7739.peach-recovery-header .peach-onboarding-headline {7740  font-size: 1.25rem;7741  font-weight: 300;7742  letter-spacing: 0.02em;7743  margin: 0 0 4px;7744}7745.peach-recovery-header .peach-hint {7746  font-family: "IBM Plex Mono", monospace;7747  font-size: 0.625rem;7748  color: var(--peach-t2);7749  letter-spacing: 0.04em;7750  margin: 0;7751}77527753/* 12-word grid: 2 columns × 6 rows */7754.peach-recovery-grid {7755  display: grid;7756  grid-template-columns: repeat(2, 1fr);7757  gap: 12px 20px;7758  width: 100%;7759  margin-bottom: 0;7760}77617762.peach-recovery-word-slot {7763  display: flex;7764  align-items: center;7765  gap: 6px;7766  min-width: 0;7767}77687769.peach-recovery-word-index {7770  font-family: "IBM Plex Mono", monospace;7771  font-size: 0.5rem;7772  color: rgba(255, 255, 255, 0.35);7773  min-width: 14px;7774  flex-shrink: 0;7775  text-align: right;7776  letter-spacing: 0.04em;7777}77787779.peach-recovery-word-input {7780  flex: 1;7781  min-width: 0;7782  background: transparent;7783  border: none;7784  border-bottom: 1px solid rgba(255, 255, 255, 0.22);7785  color: var(--peach-t0);7786  font-family: "IBM Plex Mono", monospace;7787  font-size: 0.6875rem;7788  letter-spacing: 0.06em;7789  padding: 5px 2px 4px;7790  outline: none;7791  text-transform: lowercase;7792  transition: border-color 120ms ease;7793}7794.peach-recovery-word-input::placeholder {7795  color: rgba(255, 255, 255, 0.18);7796}7797.peach-recovery-word-input:focus {7798  border-bottom-color: var(--peach-accent);7799}78007801.peach-recovery-submit {7802  width: 100%;7803  margin-top: auto;7804}78057806.peach-recovery-new-password-form {7807  width: 100%;7808  display: flex;7809  flex-direction: column;7810  gap: 16px;7811  margin-bottom: 8px;7812}7813.peach-recovery-new-password-form .peach-newvault-field {7814  display: flex;7815  flex-direction: column;7816  gap: 4px;7817}78187819/* ── Recovery words display (post-create) ────────────────────────── */7820.lock-screen--recovery-display {7821  display: flex;7822  flex-direction: column;7823  align-items: stretch;7824  padding: 0 20px 20px;7825  min-height: 0;7826  overflow-y: auto;7827}78287829.peach-recovery-words-display {7830  width: 100%;7831  margin-bottom: 16px;7832  border: 1px solid var(--peach-t3);7833  border-radius: 8px;7834  padding: 12px 14px;7835  background: rgba(245, 240, 234, 0.04);7836}78377838.peach-recovery-words-label {7839  font-family: "IBM Plex Mono", monospace;7840  font-size: 0.5rem;7841  letter-spacing: 0.08em;7842  color: var(--peach-t2);7843  text-transform: uppercase;7844  margin-bottom: 10px;7845}78467847.peach-recovery-word-list {7848  list-style: none;7849  margin: 0;7850  padding: 0;7851  display: grid;7852  grid-template-columns: repeat(2, 1fr);7853  gap: 6px 16px;7854}78557856.peach-recovery-word-item {7857  display: flex;7858  align-items: baseline;7859  gap: 5px;7860}78617862.peach-recovery-word-num {7863  font-family: "IBM Plex Mono", monospace;7864  font-size: 0.5rem;7865  color: var(--peach-t2);7866  width: 14px;7867  flex: 0 0 14px;7868  text-align: right;7869  letter-spacing: 0.04em;7870  font-variant-numeric: tabular-nums;7871}78727873.peach-recovery-download-btn {7874  display: block;7875  margin: 10px auto 0;7876  padding: 4px 10px;7877  background: transparent;7878  border: 1px solid var(--peach-border);7879  border-radius: 6px;7880  color: var(--peach-t2);7881  font-family: "IBM Plex Mono", monospace;7882  font-size: 0.5625rem;7883  letter-spacing: 0.06em;7884  text-transform: lowercase;7885  cursor: pointer;7886  transition: border-color 0.15s, color 0.15s;7887}78887889.peach-recovery-download-btn:hover {7890  border-color: var(--peach-accent);7891  color: var(--peach-t0);7892}78937894.peach-recovery-word-text {7895  font-family: "IBM Plex Mono", monospace;7896  font-size: 0.6875rem;7897  letter-spacing: 0.06em;7898  color: var(--peach-t0);7899  text-transform: lowercase;7900}79017902.peach-hint--warning {7903  color: var(--peach-accent);7904  font-style: italic;7905}7906.peach-hint--success {7907  color: var(--peach-t2);7908  font-family: "IBM Plex Mono", monospace;7909  font-size: 0.625rem;7910  letter-spacing: 0.06em;7911}79127913/* Confirmation step */7914.peach-recovery-confirm {7915  width: 100%;7916  flex: 1;7917  display: flex;7918  flex-direction: column;7919}7920.peach-recovery-confirm-label {7921  font-family: "IBM Plex Mono", monospace;7922  font-size: 0.5625rem;7923  letter-spacing: 0.04em;7924  color: var(--peach-t2);7925  text-align: center;7926  margin: 0 0 12px;7927}7928.peach-recovery-confirm-fields {7929  display: flex;7930  flex-direction: column;7931  gap: 14px;7932  margin-bottom: 10px;7933}7934.peach-recovery-confirm-field {7935  display: flex;7936  align-items: center;7937  gap: 8px;7938}7939.peach-recovery-confirm-num {7940  font-family: "IBM Plex Mono", monospace;7941  font-size: 0.5rem;7942  color: var(--peach-t2);7943  min-width: 44px;7944  letter-spacing: 0.04em;7945}7946.peach-recovery-confirm-input {7947  flex: 1;7948  background: transparent;7949  border: none;7950  border-bottom: 1px solid var(--peach-t3);7951  color: var(--peach-t0);7952  font-family: "IBM Plex Mono", monospace;7953  font-size: 0.6875rem;7954  letter-spacing: 0.06em;7955  padding: 4px 2px 3px;7956  outline: none;7957  text-transform: lowercase;7958  transition: border-color 120ms ease;7959}7960.peach-recovery-confirm-input:focus {7961  border-bottom-color: var(--peach-accent);7962}7963.peach-recovery-confirm-input:disabled {7964  opacity: 0.4;7965  cursor: not-allowed;7966}7967.peach-recovery-confirm-btn {7968  width: 100%;7969  margin-top: auto;7970}79717972/* ============================================================7973   Sync info sheet7974   ============================================================ */79757976.peach-sync-info-backdrop {7977  position: fixed;7978  inset: 0;7979  z-index: 200;7980  background: rgba(0, 0, 0, 0.55);7981  display: flex;7982  align-items: flex-end;7983  animation: peach-fade-in 200ms ease forwards;7984}79857986@keyframes peach-fade-in {7987  from { opacity: 0; }7988  to   { opacity: 1; }7989}79907991.peach-sync-info-sheet {7992  width: 100%;7993  background: var(--peach-bg-card, var(--peach-bg));7994  border-top-left-radius: 20px;7995  border-top-right-radius: 20px;7996  padding: 12px 24px 32px;7997  display: flex;7998  flex-direction: column;7999  gap: 20px;8000  animation: peach-sheet-up 280ms cubic-bezier(0, 0, 0, 1) forwards;8001}80028003@keyframes peach-sheet-up {8004  from { transform: translateY(100%); }8005  to   { transform: translateY(0); }8006}80078008.peach-sync-info-handle {8009  width: 36px;8010  height: 4px;8011  border-radius: 2px;8012  background: var(--peach-border);8013  margin: 0 auto 4px;8014  flex-shrink: 0;8015}80168017.peach-sync-info-title {8018  font-family: 'Cormorant Garamond', serif;8019  font-style: italic;8020  font-size: 26px;8021  font-weight: 600;8022  color: var(--peach-t0);8023  margin: 0;8024  line-height: 1.2;8025}80268027.peach-sync-info-body {8028  display: flex;8029  flex-direction: column;8030  gap: 14px;8031}80328033.peach-sync-info-point {8034  display: flex;8035  gap: 12px;8036  align-items: flex-start;8037  font-size: 14px;8038  color: var(--peach-t2);8039  line-height: 1.6;8040  margin: 0;8041}80428043.peach-sync-info-icon {8044  color: var(--peach-accent);8045  font-size: 16px;8046  flex-shrink: 0;8047  margin-top: 1px;8048}80498050.peach-sync-info-actions {8051  display: flex;8052  flex-direction: column;8053  gap: 12px;8054  margin-top: 4px;8055}80568057.peach-sync-info-pro-link {8058  background: none;8059  border: none;8060  font-size: 13px;8061  color: var(--peach-t3);8062  cursor: pointer;8063  padding: 0;8064  font-family: inherit;8065  text-align: center;8066  transition: color 150ms ease;8067}80688069.peach-sync-info-pro-link:hover {8070  color: var(--peach-accent);8071}80728073.peach-btn--full {8074  width: 100%;8075}80768077/* ── Sync screen ── */80788079.peach-sync-coming-soon {8080  display: flex;8081  align-items: flex-start;8082  gap: 10px;8083  padding: 12px 14px;8084  background: var(--peach-s1);8085  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);8086  border-radius: 10px;8087}8088.peach-sync-coming-soon__icon {8089  flex-shrink: 0;8090  color: var(--peach-accent);8091  margin-top: 1px;8092  line-height: 0;8093}8094.peach-sync-coming-soon__title {8095  font-family: 'Cormorant Garamond', serif;8096  font-weight: 500;8097  font-size: 13px;8098  color: var(--peach-accent);8099  margin: 0 0 5px;8100  line-height: 1.3;8101}8102.peach-sync-coming-soon__body {8103  font-size: 12px;8104  color: var(--peach-t1);8105  line-height: 1.55;8106  margin: 0;8107}81088109.peach-sync-screen {8110  display: flex;8111  flex-direction: column;8112  height: 100%;8113}81148115.peach-sync-content {8116  flex: 1;8117  overflow-y: auto;8118  padding: 24px 20px 40px;8119  display: flex;8120  flex-direction: column;8121  gap: 24px;8122}81238124/* Intro (State A) */8125.peach-sync-headline {8126  font-family: 'Cormorant Garamond', serif;8127  font-style: italic;8128  font-size: 28px;8129  font-weight: 600;8130  color: var(--peach-t0);8131  margin: 0 0 10px;8132  line-height: 1.2;8133}81348135.peach-sync-intro-body {8136  font-size: 14px;8137  color: var(--peach-t1);8138  line-height: 1.6;8139  margin: 0;8140}81418142.peach-sync-pro-note {8143  display: flex;8144  flex-direction: column;8145  gap: 8px;8146  background: var(--peach-t3);8147  border-radius: 10px;8148  padding: 12px 14px;8149}81508151.peach-sync-pro-note-text {8152  font-size: 12px;8153  color: var(--peach-t2);8154  line-height: 1.5;8155  margin: 0;8156}81578158.peach-sync-pro-link {8159  background: none;8160  border: none;8161  font-size: 12px;8162  color: var(--peach-accent);8163  cursor: pointer;8164  padding: 0;8165  font-family: inherit;8166  text-align: left;8167}81688169/* Status (State C) */8170.peach-sync-status {8171  padding: 12px 0;8172  border-bottom: 1px solid var(--peach-border);8173}81748175.peach-sync-status-row {8176  display: flex;8177  align-items: center;8178  gap: 8px;8179}81808181.peach-sync-dot {8182  width: 7px;8183  height: 7px;8184  border-radius: 50%;8185  flex-shrink: 0;8186}81878188.peach-sync-dot--green { background: var(--peach-health-ok); }8189.peach-sync-dot--amber { background: var(--peach-accent); }81908191.peach-sync-status-text {8192  font-family: 'IBM Plex Mono', monospace;8193  font-size: 11px;8194  color: var(--peach-t2);8195}81968197/* Paired devices */8198.peach-sync-section {8199  display: flex;8200  flex-direction: column;8201  gap: 2px;8202}82038204.peach-sync-section-label {8205  font-family: 'IBM Plex Mono', monospace;8206  font-size: 10px;8207  letter-spacing: 0.1em;8208  color: var(--peach-t3);8209  margin: 0 0 10px;8210}82118212.peach-sync-device-row {8213  display: flex;8214  justify-content: space-between;8215  align-items: baseline;8216  padding: 10px 0;8217  border-bottom: 1px solid var(--peach-border);8218  gap: 12px;8219}82208221.peach-sync-device-name {8222  font-size: 14px;8223  color: var(--peach-t1);8224}82258226.peach-sync-device-meta {8227  font-family: 'IBM Plex Mono', monospace;8228  font-size: 11px;8229  color: var(--peach-t3);8230  white-space: nowrap;8231}82328233.peach-sync-hub-note {8234  padding: 14px 16px;8235  border: 1px solid var(--peach-border);8236  border-radius: 10px;8237  display: flex;8238  flex-direction: column;8239  gap: 6px;8240  background: rgba(var(--peach-accent-rgb, 201, 137, 58), 0.04);8241}82428243.peach-sync-hub-note-title {8244  font-size: 13px;8245  font-weight: 600;8246  color: var(--peach-t0);8247  margin: 0;8248}82498250.peach-sync-hub-note-body {8251  font-size: 12px;8252  color: var(--peach-t2);8253  line-height: 1.6;8254  margin: 0;8255}82568257/* Action buttons */8258.peach-sync-actions {8259  display: flex;8260  gap: 10px;8261  flex-wrap: wrap;8262}82638264/* Upgrade prompt (State B) */8265.peach-sync-upgrade {8266  display: flex;8267  flex-direction: column;8268  gap: 12px;8269  padding: 16px;8270  border: 1px solid var(--peach-border);8271  border-radius: 10px;8272}82738274.peach-sync-upgrade-text {8275  font-size: 13px;8276  color: var(--peach-t2);8277  line-height: 1.6;8278  margin: 0;8279}82808281/* Network note */8282.peach-sync-network-note {8283  font-size: 12px;8284  color: var(--peach-t3);8285  line-height: 1.6;8286  margin: 0;8287}82888289/* Advanced */8290.peach-sync-advanced {8291  margin-top: auto;8292  padding-top: 16px;8293  border-top: 1px solid var(--peach-border);8294}82958296.peach-sync-advanced-toggle {8297  display: flex;8298  align-items: center;8299  gap: 8px;8300  background: none;8301  border: none;8302  font-family: 'IBM Plex Mono', monospace;8303  font-size: 11px;8304  letter-spacing: 0.08em;8305  color: var(--peach-t3);8306  cursor: pointer;8307  padding: 0;8308  text-transform: uppercase;8309}83108311.peach-sync-advanced-chevron {8312  display: inline-block;8313  transition: transform 200ms ease;8314  font-size: 10px;8315}83168317.peach-sync-advanced-chevron.is-open {8318  transform: rotate(90deg);8319}83208321.peach-sync-advanced-content {8322  margin-top: 14px;8323}83248325.peach-sync-advanced-row {8326  display: flex;8327  justify-content: space-between;8328  align-items: center;8329  gap: 16px;8330}83318332.peach-sync-advanced-title {8333  font-size: 14px;8334  color: var(--peach-t1);8335  margin: 0 0 2px;8336}83378338.peach-sync-advanced-subtitle {8339  font-size: 12px;8340  color: var(--peach-t3);8341  margin: 0;8342  line-height: 1.5;8343}83448345/* ── Add Device — Android scan tabs ─────────────────────────────────────── */83468347.peach-pairing-tabs {8348  display: flex;8349  border: 1px solid var(--peach-border);8350  border-radius: 8px;8351  overflow: hidden;8352  margin-bottom: 4px;8353}83548355.peach-pairing-tab {8356  flex: 1;8357  padding: 10px 0;8358  background: none;8359  border: none;8360  font-family: 'IBM Plex Mono', monospace;8361  font-size: 11px;8362  letter-spacing: 0.06em;8363  color: var(--peach-t2);8364  cursor: pointer;8365  transition: background 150ms, color 150ms;8366}83678368.peach-pairing-tab.is-active {8369  background: var(--peach-accent);8370  color: #fff;8371  font-weight: 600;8372}83738374.peach-pairing-tab:not(.is-active):active {8375  background: var(--peach-border);8376}83778378/* Camera view */8379.peach-pairing-camera-container {8380  position: relative;8381  width: 100%;8382  aspect-ratio: 1;8383  border-radius: 12px;8384  overflow: hidden;8385  background: #000;8386  flex-shrink: 0;8387}83888389.peach-pairing-video {8390  width: 100%;8391  height: 100%;8392  object-fit: cover;8393}83948395.peach-pairing-scan-frame {8396  position: absolute;8397  top: 50%;8398  left: 50%;8399  transform: translate(-50%, -50%);8400  width: 60%;8401  aspect-ratio: 1;8402  border: 2px solid var(--peach-accent);8403  border-radius: 8px;8404  pointer-events: none;8405}84068407/* ── Notes Mode ── */84088409/* Overlay that crossfades over the vault */8410.peach-notes-overlay {8411  position: fixed;8412  inset: 0;8413  z-index: 90;8414  opacity: 0;8415  pointer-events: none;8416  animation: peach-mode-in 220ms ease-in forwards;8417}84188419.peach-notes-overlay.is-visible {8420  opacity: 1;8421  pointer-events: auto;8422}84238424@keyframes peach-mode-in {8425  from { opacity: 0; }8426  to   { opacity: 1; }8427}84288429/* Top-level notes surface */8430.peach-notes-mode {8431  position: absolute;8432  inset: 0;8433  background: var(--peach-bg);8434  display: flex;8435  flex-direction: column;8436}84378438/* Rune canvas positioned behind content */8439.peach-note-rune-canvas {8440  position: absolute;8441  inset: 0;8442  width: 100%;8443  height: 100%;8444  pointer-events: none;8445  z-index: 0;8446}84478448/* TOC wrapper */8449.peach-notes-toc-wrapper {8450  position: absolute;8451  inset: 0;8452  z-index: 1;8453  opacity: 1;8454  pointer-events: auto;8455  transition: opacity 200ms ease;8456}84578458.peach-notes-toc-wrapper.is-hidden {8459  opacity: 0;8460  pointer-events: none;8461}84628463/* Editor wrapper */8464.peach-notes-editor-wrapper {8465  position: absolute;8466  inset: 0;8467  z-index: 2;8468  opacity: 0;8469  pointer-events: none;8470  transition: opacity 200ms ease;8471}84728473.peach-notes-editor-wrapper.is-visible {8474  opacity: 1;8475  pointer-events: auto;8476}84778478/* TOC inner */8479.peach-notes-toc {8480  position: relative;8481  display: flex;8482  flex-direction: column;8483  height: 100%;8484  padding-top: env(safe-area-inset-top, 0px);8485  padding-bottom: env(safe-area-inset-bottom, 0px);8486}84878488/* Shared header */8489.peach-notes-header {8490  display: flex;8491  align-items: center;8492  padding: 12px 16px;8493  gap: 12px;8494  flex-shrink: 0;8495  min-height: 52px;8496  position: relative;8497  z-index: 2;8498}84998500.peach-notes-back {8501  font-size: 22px;8502  color: var(--peach-t2);8503  background: none;8504  border: none;8505  padding: 4px;8506  cursor: pointer;8507  line-height: 1;8508  flex-shrink: 0;8509  transition: color 150ms ease;8510  -webkit-tap-highlight-color: transparent;8511}85128513.peach-notes-back:active { color: var(--peach-t0); }85148515.peach-notes-header-title {8516  flex: 1;8517  font-family: 'Cormorant Garamond', serif;8518  font-style: italic;8519  font-size: 22px;8520  color: var(--peach-t0);8521  text-align: center;8522}85238524.peach-notes-header-title.is-breadcrumb {8525  font-family: 'IBM Plex Mono', monospace;8526  font-style: normal;8527  font-size: 11px;8528  color: var(--peach-t3);8529  letter-spacing: 0.08em;8530  text-transform: uppercase;8531  cursor: pointer;8532}85338534.peach-notes-header-actions {8535  display: flex;8536  gap: 8px;8537  flex-shrink: 0;8538}85398540.peach-notes-header-btn {8541  width: 36px;8542  height: 36px;8543  display: flex;8544  align-items: center;8545  justify-content: center;8546  background: none;8547  border: none;8548  color: var(--peach-t2);8549  cursor: pointer;8550  border-radius: 8px;8551  font-size: 16px;8552  transition: color 150ms ease, background 150ms ease;8553  -webkit-tap-highlight-color: transparent;8554}85558556.peach-notes-header-btn:active {8557  background: rgba(255,255,255,0.06);8558  color: var(--peach-t0);8559}85608561/* Inline search bar */8562.peach-notes-search-input {8563  flex: 1;8564  background: none;8565  border: none;8566  outline: none;8567  font-family: 'IBM Plex Mono', monospace;8568  font-size: 13px;8569  color: var(--peach-t0);8570  padding: 4px 0;8571  letter-spacing: 0.02em;8572}85738574.peach-notes-search-input::placeholder {8575  color: var(--peach-t3);8576}85778578/* TOC list */8579.peach-notes-list-container {8580  flex: 1;8581  overflow-y: auto;8582  overflow-x: hidden;8583  scrollbar-width: none;8584  -webkit-overflow-scrolling: touch;8585  overscroll-behavior: contain;8586  position: relative;8587  z-index: 1;8588}85898590.peach-notes-list-container::-webkit-scrollbar { display: none; }85918592/* Note row */8593.peach-note-row {8594  position: relative;8595  display: grid;8596  grid-template-columns: 44px 8px 1fr 8px auto;8597  align-items: center;8598  min-height: 72px;8599  padding: 16px 20px;8600  border-bottom: 0.5px solid var(--peach-border);8601  cursor: pointer;8602  overflow: hidden;8603  touch-action: pan-y;8604  user-select: none;8605  -webkit-user-select: none;8606  -webkit-tap-highlight-color: transparent;8607}86088609.peach-note-row:first-child {8610  border-top: 0.5px solid var(--peach-border);8611}86128613.peach-note-row:active {8614  background: rgba(255,255,255,0.02);8615}86168617.peach-note-numeral {8618  font-family: 'Cormorant Garamond', serif;8619  font-style: italic;8620  font-size: 15px;8621  color: var(--peach-accent);8622  text-align: right;8623  line-height: 1;8624  flex-shrink: 0;8625}86268627.peach-note-title-gap { /* grid spacer */ }86288629.peach-note-title {8630  font-family: 'Cormorant Garamond', serif;8631  font-style: italic;8632  font-size: 18px;8633  color: var(--peach-t0);8634  line-height: 1.3;8635  min-width: 0;8636  overflow-wrap: break-word;8637}86388639.peach-note-title-match {8640  color: var(--peach-accent);8641}86428643.peach-note-date {8644  font-family: 'IBM Plex Mono', monospace;8645  font-size: 11px;8646  color: var(--peach-t2);8647  white-space: nowrap;8648  text-align: right;8649  flex-shrink: 0;8650  grid-column: 5;8651}86528653/* Swipe underlays */8654.peach-note-row-underlay {8655  position: absolute;8656  inset: 0;8657  display: flex;8658  align-items: center;8659  padding: 0 24px;8660  font-family: 'IBM Plex Mono', monospace;8661  font-size: 11px;8662  letter-spacing: 0.1em;8663  pointer-events: none;8664  z-index: 0;8665}86668667.peach-note-row-underlay--delete {8668  background: #8B2020;8669  color: rgba(255,255,255,0.9);8670  justify-content: flex-end;8671}86728673.peach-note-row-underlay--archive {8674  background: var(--peach-accent);8675  color: #0C0A06;8676  justify-content: flex-start;8677}86788679/* Delete confirm strip */8680.peach-note-delete-confirm {8681  position: absolute;8682  inset: 0;8683  background: var(--peach-bg);8684  display: flex;8685  align-items: center;8686  gap: 12px;8687  padding: 0 20px;8688  font-family: 'IBM Plex Mono', monospace;8689  font-size: 11px;8690  color: var(--peach-t1);8691  letter-spacing: 0.04em;8692  animation: peach-delete-confirm-in 150ms ease both;8693  z-index: 10;8694}86958696@keyframes peach-delete-confirm-in {8697  from { opacity: 0; }8698  to   { opacity: 1; }8699}87008701.peach-note-delete-confirm-btn {8702  background: #8B2020;8703  color: rgba(255,255,255,0.9);8704  border: none;8705  border-radius: 6px;8706  padding: 4px 10px;8707  font-family: 'IBM Plex Mono', monospace;8708  font-size: 10px;8709  cursor: pointer;8710  letter-spacing: 0.06em;8711}87128713.peach-note-delete-cancel-btn {8714  background: none;8715  border: none;8716  color: var(--peach-t3);8717  font-family: 'IBM Plex Mono', monospace;8718  font-size: 10px;8719  cursor: pointer;8720  letter-spacing: 0.06em;8721  padding: 4px 6px;8722}87238724/* + New note button */8725.peach-notes-new-btn {8726  font-family: 'IBM Plex Mono', monospace;8727  font-size: 12px;8728  color: var(--peach-t3);8729  text-align: center;8730  padding: 28px 20px calc(28px + env(safe-area-inset-bottom, 0px));8731  background: none;8732  border: none;8733  width: 100%;8734  cursor: pointer;8735  letter-spacing: 0.04em;8736  transition: color 150ms ease;8737  -webkit-tap-highlight-color: transparent;8738}87398740.peach-notes-new-btn:active { color: var(--peach-accent); }87418742/* Empty state */8743.peach-notes-empty {8744  display: flex;8745  flex-direction: column;8746  align-items: center;8747  justify-content: center;8748  flex: 1;8749  padding: 48px 32px;8750  gap: 16px;8751}87528753.peach-notes-empty-text {8754  font-family: 'Cormorant Garamond', serif;8755  font-style: italic;8756  font-size: 20px;8757  color: var(--peach-t3);8758  text-align: center;8759  margin: 0;8760  line-height: 1.4;8761  white-space: pre-line;8762}87638764/* ── Editor surface ── */87658766.peach-note-editor-surface {8767  position: absolute;8768  inset: 0;8769  background: var(--peach-bg);8770  display: flex;8771  flex-direction: column;8772  padding-top: env(safe-area-inset-top, 0px);8773}87748775.peach-note-editor-scroll {8776  flex: 1;8777  overflow-y: auto;8778  overflow-x: hidden;8779  scrollbar-width: none;8780  -webkit-overflow-scrolling: touch;8781  padding: 0 24px 120px;8782  position: relative;8783  z-index: 1;8784}87858786.peach-note-editor-scroll::-webkit-scrollbar { display: none; }87878788/* Desktop toolbar (always visible above body) */8789.peach-note-toolbar-desktop-inline {8790  display: flex;8791  align-items: center;8792  gap: 2px;8793  padding: 6px 0 12px;8794  margin-bottom: 4px;8795  border-bottom: 0.5px solid var(--peach-border);8796}87978798/* Title field */8799.peach-note-title-field {8800  font-family: 'Cormorant Garamond', serif;8801  font-style: italic;8802  font-size: 32px;8803  font-weight: 600;8804  color: var(--peach-t0);8805  line-height: 1.2;8806  padding: 8px 0 0;8807  outline: none;8808  min-height: 44px;8809  word-break: break-word;8810  position: relative;8811  z-index: 1;8812}88138814.peach-note-title-field:empty::before {8815  content: attr(data-placeholder);8816  color: var(--peach-t3);8817  pointer-events: none;8818}88198820/* Hairline separator */8821.peach-note-hairline {8822  height: 0.5px;8823  background: var(--peach-border);8824  margin: 12px 0 20px;8825  position: relative;8826  z-index: 1;8827}88288829/* Body field */8830.peach-note-body-field {8831  font-family: 'DM Sans', sans-serif;8832  font-size: 16px;8833  color: var(--peach-t0);8834  line-height: 1.85;8835  padding: 0;8836  outline: none;8837  min-height: 240px;8838  word-break: break-word;8839  position: relative;8840  z-index: 1;8841}88428843.peach-note-body-field:empty::before {8844  content: attr(data-placeholder);8845  color: var(--peach-t3);8846  font-style: italic;8847  pointer-events: none;8848}88498850.peach-note-body-field h2 {8851  font-family: 'Cormorant Garamond', serif;8852  font-style: italic;8853  font-size: 22px;8854  font-weight: 600;8855  color: var(--peach-t0);8856  margin: 20px 0 8px;8857}88588859.peach-note-body-field blockquote {8860  border-left: 2px solid var(--peach-accent);8861  margin: 12px 0;8862  padding-left: 16px;8863  color: var(--peach-t1);8864  font-style: italic;8865}88668867.peach-note-body-field ul,8868.peach-note-body-field ol {8869  padding-left: 20px;8870  margin: 8px 0;8871}88728873.peach-note-body-field li {8874  margin: 4px 0;8875}88768877.peach-note-body-field hr {8878  border: none;8879  border-top: 0.5px solid var(--peach-border);8880  margin: 16px 0;8881}88828883/* Saved indicator */8884.peach-note-saved-indicator {8885  font-family: 'IBM Plex Mono', monospace;8886  font-size: 11px;8887  color: var(--peach-t3);8888  letter-spacing: 0.04em;8889  text-align: right;8890  padding: 6px 24px;8891  flex-shrink: 0;8892  transition: opacity 300ms ease;8893  pointer-events: none;8894  position: relative;8895  z-index: 1;8896}88978898/* Mobile keyboard toolbar */8899.peach-note-toolbar-mobile {8900  display: flex;8901  align-items: center;8902  padding: 8px 16px;8903  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));8904  background: var(--peach-bg);8905  border-top: 0.5px solid var(--peach-border);8906  gap: 4px;8907  flex-shrink: 0;8908  position: relative;8909  z-index: 10;8910}89118912.peach-note-toolbar-btn {8913  min-width: 36px;8914  height: 36px;8915  display: flex;8916  align-items: center;8917  justify-content: center;8918  background: none;8919  border: none;8920  border-radius: 8px;8921  cursor: pointer;8922  font-size: 14px;8923  color: var(--peach-t1);8924  font-family: 'DM Sans', sans-serif;8925  font-weight: 600;8926  transition: background 100ms ease, color 100ms ease;8927  -webkit-tap-highlight-color: transparent;8928}89298930.peach-note-toolbar-btn--italic { font-style: italic; }8931.peach-note-toolbar-btn.is-active { color: var(--peach-accent); }8932.peach-note-toolbar-btn:active { background: rgba(255,255,255,0.08); }89338934.peach-note-toolbar-divider {8935  width: 0.5px;8936  height: 20px;8937  background: var(--peach-border);8938  margin: 0 4px;8939  flex-shrink: 0;8940}89418942.peach-note-toolbar-spacer { flex: 1; }89438944/* Desktop: larger headline in TOC */8945@media (min-width: 400px) {8946  .peach-notes-header-title:not(.is-breadcrumb) {8947    font-size: 32px;8948  }89498950  .peach-note-row {8951    min-height: 64px;8952    padding: 14px 16px;8953  }8954}89558956/* Flying title — shared element during expansion/collapse */89578958/* ─── Light theme overrides ───────────────────────────────────────────────8959   Tokens that cannot be expressed as variable substitutions — hardcoded8960   context-specific values that need separate light-mode rules. */89618962/* Settings section headers: use text-label (#79766F) per restoration brief —8963   muted gray-warm gives ENTRIES / MAINTENANCE / DATA / VAULT HISTORY8964   presence without fighting the light parchment background. */8965.light .peach-settings-sub-label,8966[data-theme="light"] .peach-settings-sub-label,8967.light .peach-settings-nav-label,8968[data-theme="light"] .peach-settings-nav-label {8969  color: #79766F;8970}89718972/* Secondary action buttons (ghost / subtle): filled with input-well surface8973   so they read as recessed against the parchment card background. */8974.light .peach-btn--ghost:not(.peach-icon-btn),8975[data-theme="light"] .peach-btn--ghost:not(.peach-icon-btn) {8976  background: #EEE7DD;8977  border-color: #DDD5CB;8978  color: #1A1208;8979}8980.light .peach-icon-btn,8981[data-theme="light"] .peach-icon-btn {8982  background: transparent;8983  border-color: transparent;8984}8985.light .peach-btn--subtle,8986[data-theme="light"] .peach-btn--subtle {8987  background: #EEE7DD;8988  border-color: #DDD5CB;8989}89908991/* Wide secondary action button on the lock screen — override the8992   hardcoded dark-mode rgba values with warm parchment equivalents. */8993.light .peach-lock-secondary,8994[data-theme="light"] .peach-lock-secondary {8995  background: #EEE7DD;8996  border-color: #DDD5CB;8997  color: #1A1208;8998}8999.light .peach-lock-secondary:hover,9000[data-theme="light"] .peach-lock-secondary:hover {9001  background: #F0E9DF;9002}90039004/* Entry row hover: bg-row lifts the row above the card surface. */9005.light .peach-entry-row:hover,9006[data-theme="light"] .peach-entry-row:hover {9007  background: #F2EBE1;9008}9009.light .peach-entry-row.is-active,9010[data-theme="light"] .peach-entry-row.is-active {9011  background: #F2EBE1;9012}9013.light .peach-entry-row.is-selected,9014[data-theme="light"] .peach-entry-row.is-selected {9015  background: #F5EDE2;9016}90179018/* ──────────────────────────────────────────────────────────────────────────9019   Chirp pairing flow — bird-stage animation (Phase 1)9020   See src/popup/components/ChirpPairingFlow.tsx and the brief §6.2.9021   Three-act animation gated on the [data-phase] attribute of9022   .peach-chirp-pair; child layers (birds, chirp arcs, flight wave, dot)9023   each react via either pose class or visibility flag.9024   Tokens: accent surfaces use var(--peach-accent); bird illustration9025   colours are baked into the SVG per the brand-peach exception in §3.1.9026   ────────────────────────────────────────────────────────────────────── */90279028.peach-chirp-pair {9029  position: absolute;9030  inset: 0;9031  z-index: 3;9032  display: flex;9033  flex-direction: column;9034  padding: 14px 12px 12px;9035  width: 100%;9036  box-sizing: border-box;9037  gap: 0;9038  background:9039    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9040    var(--peach-bg);9041  color: var(--peach-t0);9042  overflow-y: auto;9043  overflow-x: hidden;9044  scrollbar-width: none;9045  isolation: isolate;9046  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9047}9048@keyframes peach-chirp-overlay-in {9049  from { opacity: 0; transform: translateY(8px); }9050  to   { opacity: 1; transform: translateY(0); }9051}9052.peach-chirp-pair::-webkit-scrollbar { width: 0; height: 0; display: none; }9053.peach-chirp-pair::before {9054  content: '';9055  position: absolute;9056  inset: 0;9057  border-radius: inherit;9058  pointer-events: none;9059  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9060  z-index: 0;9061}9062.peach-chirp-pair > * { position: relative; z-index: 1; }90639064/* Header --------------------------------------------------------------- */9065.peach-chirp-head {9066  display: flex; align-items: center; gap: 10px;9067}9068.peach-chirp-back {9069  width: 32px; height: 32px;9070  display: inline-flex; align-items: center; justify-content: center;9071  background: transparent;9072  border: none;9073  border-radius: 8px;9074  color: var(--peach-t1);9075  cursor: pointer;9076  transition: color 0.15s ease, box-shadow 0.15s ease;9077}9078.peach-chirp-back:hover {9079  color: var(--peach-accent);9080  box-shadow: 0 0 10px color-mix(in srgb, var(--peach-accent) 24%, transparent);9081}9082.peach-chirp-title {9083  font-family: var(--font-display, Georgia, serif);9084  font-style: italic;9085  font-size: 24px;9086  font-weight: 500;9087  letter-spacing: 0.005em;9088  color: var(--peach-t0);9089  line-height: 1;9090}9091.peach-chirp-head-spacer { flex: 1; }90929093/* Chip row ------------------------------------------------------------- */9094.peach-chirp-chip-row {9095  display: flex;9096  align-items: center;9097  justify-content: flex-start;9098  margin-top: 12px;9099}9100.peach-chirp-chip {9101  display: inline-flex; align-items: center; gap: 8px;9102  padding: 5px 10px 5px 8px;9103  background: color-mix(in srgb, var(--peach-accent) 16%, transparent);9104  border: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);9105  border-radius: 999px;9106  font-family: var(--peach-mono, ui-monospace, monospace);9107  font-size: 11px;9108  letter-spacing: 0.04em;9109  color: color-mix(in srgb, var(--peach-accent) 70%, var(--peach-t0));9110}9111.peach-chirp-chip-dot {9112  width: 6px; height: 6px; border-radius: 50%;9113  background: var(--peach-accent);9114  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-accent) 50%, transparent);9115}9116.peach-chirp-chip[data-phase="paired"] {9117  background: color-mix(in srgb, #4f9eda 12%, transparent);9118  border-color: color-mix(in srgb, #4f9eda 28%, transparent);9119  color: #76b6e8;9120}9121.peach-chirp-chip[data-phase="paired"] .peach-chirp-chip-dot {9122  background: #76b6e8;9123  box-shadow: 0 0 6px rgba(118, 182, 232, 0.55);9124}9125.peach-chirp-chip[data-phase="timeout"],9126.peach-chirp-chip[data-phase="mic_denied"],9127.peach-chirp-chip[data-phase="version_mismatch"],9128.peach-chirp-chip[data-phase="handshake_failed"] {9129  background: color-mix(in srgb, var(--peach-warn, #d29257) 14%, transparent);9130  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 28%, transparent);9131  color: var(--peach-warn, #d29257);9132}9133.peach-chirp-chip[data-phase="timeout"] .peach-chirp-chip-dot,9134.peach-chirp-chip[data-phase="mic_denied"] .peach-chirp-chip-dot,9135.peach-chirp-chip[data-phase="version_mismatch"] .peach-chirp-chip-dot,9136.peach-chirp-chip[data-phase="handshake_failed"] .peach-chirp-chip-dot {9137  background: var(--peach-warn, #d29257);9138  box-shadow: 0 0 6px color-mix(in srgb, var(--peach-warn, #d29257) 55%, transparent);9139}91409141/* Bird stage ----------------------------------------------------------- */9142.peach-chirp-stage {9143  position: relative;9144  margin: 14px 0 8px;9145  height: 180px;9146  border-radius: 12px;9147  background:9148    radial-gradient(ellipse 70% 60% at 50% 30%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9149    radial-gradient(ellipse 90% 100% at 50% 100%, color-mix(in srgb, #d8748a 14%, transparent), transparent 70%),9150    color-mix(in srgb, var(--peach-bg) 92%, #000);9151  border: 1px solid color-mix(in srgb, var(--peach-t0) 8%, transparent);9152  overflow: hidden;9153  isolation: isolate;9154}9155.peach-chirp-stage::after {9156  content: '';9157  position: absolute;9158  left: 12%; right: 12%;9159  bottom: 36px;9160  height: 1px;9161  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 14%, transparent), transparent);9162}91639164.peach-chirp-bird-slot {9165  position: absolute;9166  bottom: 8px;9167  width: 100px;9168  height: 110px;9169  display: flex;9170  align-items: flex-end;9171  justify-content: center;9172}9173.peach-chirp-bird-slot-desktop { left: 28px; }9174.peach-chirp-bird-slot-mobile { right: 28px; }91759176/* Mobile bird hops in from the right when handshake begins */9177.peach-chirp-bird-slot-mobile {9178  opacity: 1;9179  transform: translateX(-6px);9180  transition: opacity 0.4s ease, transform 0.65s cubic-bezier(.5, 1.7, .4, 1);9181}9182.peach-chirp-stage.act-listening .peach-chirp-bird-slot-mobile,9183.peach-chirp-stage.act-chirping .peach-chirp-bird-slot-mobile,9184.peach-chirp-stage.act-idle .peach-chirp-bird-slot-mobile {9185  opacity: 0;9186  transform: translateX(60px) rotate(8deg);9187}9188.peach-chirp-stage.act-handshake .peach-chirp-bird-slot-desktop,9189.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop {9190  transform: translateX(6px);9191  transition: transform 0.5s cubic-bezier(.4, 1.4, .4, 1);9192}91939194/* Paired: both birds bob together */9195.peach-chirp-stage.act-paired .peach-chirp-bird-slot {9196  animation: peach-chirp-happy-bob 1.2s ease-in-out infinite;9197}9198.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { animation-delay: 0.2s; }9199.peach-chirp-stage.act-paired .peach-chirp-bird-slot-desktop { --bb-x: 6px; }9200.peach-chirp-stage.act-paired .peach-chirp-bird-slot-mobile { --bb-x: -6px; }9201@keyframes peach-chirp-happy-bob {9202  0%, 100% { transform: translateX(var(--bb-x, 0)) translateY(0); }9203  50%      { transform: translateX(var(--bb-x, 0)) translateY(-3px); }9204}92059206/* Bird internal -------------------------------------------------------- */9207.peach-chirp-bird {9208  width: 108px;9209  height: 108px;9210  transform-origin: 50% 95%;9211}9212.peach-chirp-bird svg { width: 100%; height: 100%; overflow: visible; }92139214.peach-chirp-bird-body {9215  transform-origin: 50% 80%;9216  animation: peach-chirp-bird-bob 2.4s ease-in-out infinite;9217}9218@keyframes peach-chirp-bird-bob {9219  0%, 100% { transform: translateY(0) scale(1, 1); }9220  50%      { transform: translateY(-1.5px) scale(1.01, 0.99); }9221}92229223.peach-chirp-bird-eye-group {9224  animation: peach-chirp-blink 5.2s steps(1, end) infinite;9225  transform-origin: center;9226  transform-box: fill-box;9227}9228@keyframes peach-chirp-blink {9229  0%, 92%, 96%, 100% { transform: scaleY(1); }9230  94%                { transform: scaleY(0.05); }9231}92329233/* Pose: chirping — beak opens, head bobs, aura blooms */9234.peach-chirp-bird-pose-chirping .peach-chirp-bird-body {9235  animation:9236    peach-chirp-bird-bob 2.4s ease-in-out infinite,9237    peach-chirp-squeeze 1.7s ease-in-out infinite;9238}9239@keyframes peach-chirp-squeeze {9240  0%, 70%, 100% { transform-origin: 50% 85%; }9241  78%           { transform: scale(1.04, 0.96) translateY(1px); }9242  86%           { transform: scale(0.98, 1.02); }9243}9244.peach-chirp-bird-pose-chirping .peach-chirp-bird-head-group {9245  animation: peach-chirp-head-bob 1.7s ease-in-out infinite;9246}9247@keyframes peach-chirp-head-bob {9248  0%, 70%, 100% { transform: translateY(0) rotate(0); }9249  78%           { transform: translateY(-3px) rotate(-4deg); }9250  86%           { transform: translateY(-1px) rotate(-2deg); }9251}9252.peach-chirp-bird-pose-chirping .peach-chirp-bird-beak {9253  animation: peach-chirp-beak-open 1.7s ease-in-out infinite;9254}9255@keyframes peach-chirp-beak-open {9256  0%, 70%, 100% { transform: rotate(0) scaleX(1); }9257  78%           { transform: rotate(-14deg) scaleX(1.05) translateY(-1px); }9258  86%           { transform: rotate(-6deg); }9259}9260.peach-chirp-bird-pose-chirping .peach-chirp-bird-aura {9261  animation: peach-chirp-aura 1.7s ease-in-out infinite;9262}9263@keyframes peach-chirp-aura {9264  0%, 100% { opacity: 0; }9265  50%      { opacity: 0.8; }9266}9267.peach-chirp-bird-pose-chirping .peach-chirp-bird-tail {9268  animation: peach-chirp-tail-twitch 1.7s ease-in-out infinite;9269  transform-origin: 100% 50%;9270}9271@keyframes peach-chirp-tail-twitch {9272  0%, 75%, 100% { transform: rotate(0); }9273  82%           { transform: rotate(-3deg) translateX(-1px); }9274}92759276/* Pose: attentive — head tilts toward partner */9277.peach-chirp-bird-pose-attentive .peach-chirp-bird-head-group {9278  animation: peach-chirp-head-tilt 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9279}9280@keyframes peach-chirp-head-tilt {9281  0%   { transform: rotate(0) translateY(0); }9282  60%  { transform: rotate(-10deg) translateY(-1px) translateX(2px); }9283  100% { transform: rotate(-6deg); }9284}9285.peach-chirp-bird-pose-attentive .peach-chirp-bird-tail {9286  animation: peach-chirp-tail-cock 0.6s cubic-bezier(.4, 1.6, .5, 1) both;9287  transform-origin: 100% 50%;9288}9289@keyframes peach-chirp-tail-cock {9290  0%   { transform: rotate(0); }9291  100% { transform: rotate(-4deg); }9292}92939294/* Pose: happy — wing flutter, tuft perk, tail wag */9295.peach-chirp-bird-pose-happy .peach-chirp-bird-wing {9296  transform-origin: 80% 60%;9297  animation: peach-chirp-wing-flutter 0.32s ease-in-out 5;9298}9299@keyframes peach-chirp-wing-flutter {9300  0%, 100% { transform: rotate(0) translateY(0); }9301  50%      { transform: rotate(-16deg) translateY(-2px); }9302}9303.peach-chirp-bird-pose-happy .peach-chirp-bird-tuft {9304  transform-origin: 0% 100%;9305  animation: peach-chirp-tuft-perk 0.4s ease-in-out 3;9306}9307@keyframes peach-chirp-tuft-perk {9308  0%, 100% { transform: rotate(0); }9309  50%      { transform: rotate(-15deg) translateY(-1px); }9310}9311.peach-chirp-bird-pose-happy .peach-chirp-bird-tail {9312  transform-origin: 100% 50%;9313  animation: peach-chirp-tail-wag 0.5s ease-in-out 4;9314}9315@keyframes peach-chirp-tail-wag {9316  0%, 100% { transform: rotate(0); }9317  25%      { transform: rotate(6deg); }9318  75%      { transform: rotate(-6deg); }9319}9320.peach-chirp-bird-pose-happy .peach-chirp-bird-head-group {9321  animation: peach-chirp-head-perk 0.5s ease-out;9322}9323@keyframes peach-chirp-head-perk {9324  0%   { transform: translateY(0); }9325  40%  { transform: translateY(-3px) rotate(2deg); }9326  100% { transform: translateY(0); }9327}93289329/* Pose: sad — body droops forward */9330.peach-chirp-bird-pose-sad .peach-chirp-bird-body {9331  transform: translateY(5px) rotate(-2deg);9332  animation: none;9333}9334.peach-chirp-bird-pose-sad .peach-chirp-bird-head-group {9335  transform: translateY(4px) rotate(8deg);9336}9337.peach-chirp-bird-pose-sad .peach-chirp-bird-tuft { transform: rotate(15deg) translateY(2px); }9338.peach-chirp-bird-pose-sad .peach-chirp-bird-tail { transform: rotate(8deg) translateY(2px); }93399340.peach-chirp-bird-pose-hidden { opacity: 0; }93419342/* Chirp arcs ----------------------------------------------------------- */9343.peach-chirp-arcs {9344  position: absolute;9345  top: 18px;9346  width: 96px;9347  height: 70px;9348  pointer-events: none;9349}9350.peach-chirp-arcs-right { right: -60px; }9351.peach-chirp-arcs-left  { left: -60px; transform: scaleX(-1); }9352.peach-chirp-arc {9353  position: absolute;9354  top: 50%;9355  left: 0;9356  width: 40px;9357  height: 40px;9358  margin-top: -20px;9359  border: 1.2px solid #f4d5a8;9360  border-color: transparent #f4d5a8 transparent transparent;9361  border-radius: 50%;9362  opacity: 0;9363  animation: peach-chirp-arc-expand 1.7s cubic-bezier(.2, .6, .2, 1) infinite;9364}9365@keyframes peach-chirp-arc-expand {9366  0%   { transform: scale(0.4); opacity: 0; }9367  20%  { opacity: 0.9; }9368  100% { transform: scale(1.6); opacity: 0; }9369}93709371/* Flight wave ---------------------------------------------------------- */9372.peach-chirp-flight-track {9373  position: absolute;9374  inset: 32px 36px 38px 36px;9375  pointer-events: none;9376}9377.peach-chirp-flight-wave {9378  position: absolute;9379  top: 8px;9380  left: 76px;9381  right: 76px;9382  height: 60px;9383  width: auto;9384  opacity: 0;9385  transition: opacity 0.15s ease;9386  stroke: #f4d5a8;9387  fill: none;9388}9389.peach-chirp-flight-wave[data-from="mobile"] { transform: scaleX(-1); }9390.peach-chirp-flight-wave.is-visible { opacity: 1; }9391.peach-chirp-flight-path,9392.peach-chirp-flight-path-2 {9393  stroke-dasharray: 240;9394  stroke-dashoffset: 240;9395  stroke-linecap: round;9396  fill: none;9397}9398.peach-chirp-flight-path   { stroke-width: 1.6; stroke: #f4d5a8; }9399.peach-chirp-flight-path-2 { stroke-width: 1; stroke: #f4d5a8; opacity: 0.55; }9400.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path {9401  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) forwards;9402}9403.peach-chirp-flight-wave.is-visible .peach-chirp-flight-path-2 {9404  animation: peach-chirp-fly 700ms cubic-bezier(.2,.6,.2,1) 80ms forwards;9405}9406@keyframes peach-chirp-fly {9407  0%   { stroke-dashoffset: 240; opacity: 0; }9408  20%  { opacity: 1; }9409  100% { stroke-dashoffset: -120; opacity: 0; }9410}94119412/* Connection dot ------------------------------------------------------- */9413.peach-chirp-dot {9414  position: absolute;9415  top: 50%; left: 50%;9416  transform: translate(-50%, -50%);9417  width: 40px; height: 40px;9418  opacity: 0;9419  pointer-events: none;9420  transition: opacity 0.3s ease;9421  color: var(--peach-accent);9422}9423.peach-chirp-dot.is-visible { opacity: 1; }9424.peach-chirp-dot-glow {9425  position: absolute; top: 50%; left: 50%;9426  transform: translate(-50%, -50%);9427  width: 38px; height: 38px;9428  border-radius: 50%;9429  filter: blur(10px);9430  opacity: 0.55;9431  background: var(--peach-accent);9432  animation: peach-chirp-dot-bloom 1.4s ease-out;9433}9434.peach-chirp-dot-core {9435  position: absolute; top: 50%; left: 50%;9436  transform: translate(-50%, -50%);9437  width: 8px; height: 8px;9438  border-radius: 50%;9439  background: var(--peach-accent);9440  box-shadow: 0 0 12px currentColor;9441  animation: peach-chirp-dot-core 1.4s ease-out;9442}9443.peach-chirp-dot-ring {9444  position: absolute; top: 50%; left: 50%;9445  width: 60px; height: 60px;9446  transform: translate(-50%, -50%);9447  animation: peach-chirp-dot-ring 1.4s linear;9448  stroke: var(--peach-accent);9449}9450@keyframes peach-chirp-dot-bloom {9451  0%   { width: 4px; height: 4px; opacity: 0; }9452  35%  { width: 60px; height: 60px; opacity: 0.7; }9453  100% { width: 38px; height: 38px; opacity: 0.55; }9454}9455@keyframes peach-chirp-dot-core {9456  0%   { width: 0; height: 0; }9457  35%  { width: 12px; height: 12px; }9458  100% { width: 8px; height: 8px; }9459}9460@keyframes peach-chirp-dot-ring {9461  0%   { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }9462  35%  { transform: translate(-50%, -50%) scale(1.0); opacity: 0.6; }9463  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }9464}94659466/* Motes — drift upward across the stage */9467.peach-chirp-motes {9468  position: absolute;9469  inset: 0;9470  pointer-events: none;9471}9472.peach-chirp-mote {9473  position: absolute;9474  width: 2px; height: 2px;9475  background: color-mix(in srgb, var(--peach-text) 35%, transparent);9476  border-radius: 50%;9477  bottom: 32px;9478  left: calc(50% + (var(--mote-i, 0) - 4) * 24px);9479  opacity: 0;9480  animation: peach-chirp-mote-drift 6s linear infinite;9481  animation-delay: calc(var(--mote-i, 0) * 0.7s);9482}9483@keyframes peach-chirp-mote-drift {9484  0%   { transform: translateY(0); opacity: 0; }9485  10%  { opacity: 0.6; }9486  90%  { opacity: 0.1; }9487  100% { transform: translateY(-120px) translateX(8px); opacity: 0; }9488}94899490/* Status copy ---------------------------------------------------------- */9491.peach-chirp-copy-host {9492  margin: 4px 4px 10px;9493  text-align: center;9494  min-height: 50px;9495}9496.peach-chirp-copy {9497  animation: peach-chirp-copy-in 0.35s ease both;9498}9499@keyframes peach-chirp-copy-in {9500  from { opacity: 0; transform: translateY(4px); }9501  to   { opacity: 1; transform: translateY(0); }9502}9503.peach-chirp-headline {9504  font-family: var(--font-display, Georgia, serif);9505  font-style: italic;9506  font-size: 20px;9507  font-weight: 500;9508  line-height: 1.2;9509  letter-spacing: 0.005em;9510  color: var(--peach-t0);9511  margin-bottom: 6px;9512}9513.peach-chirp-copy-listening .peach-chirp-headline,9514.peach-chirp-copy-chirping .peach-chirp-headline,9515.peach-chirp-copy-idle .peach-chirp-headline {9516  font-family: inherit;9517  font-style: normal;9518  font-weight: 500;9519  font-size: 15px;9520  color: var(--peach-t0);9521  letter-spacing: 0;9522}9523.peach-chirp-copy-paired .peach-chirp-headline {9524  color: var(--peach-t0);9525  font-weight: 600;9526}9527.peach-chirp-sub {9528  font-size: 12.5px;9529  line-height: 1.45;9530  color: var(--peach-t1);9531  max-width: 280px;9532  margin: 0 auto;9533  text-wrap: pretty;9534}95359536/* Status action -------------------------------------------------------- */9537.peach-chirp-action {9538  margin: 2px 4px 10px;9539  margin-top: auto;9540  display: flex;9541  flex-direction: column;9542  gap: 8px;9543}9544.peach-chirp-mic-notice {9545  margin: 0;9546  font-size: 0.625rem;9547  color: var(--peach-t2);9548  line-height: 1.4;9549}9550.peach-chirp-action-waiting {9551  display: flex;9552  align-items: center;9553  justify-content: space-between;9554  gap: 12px;9555}9556.peach-chirp-cancel {9557  min-width: 96px;9558}9559.peach-chirp-listening {9560  display: inline-flex; align-items: center; gap: 4px;9561  font-family: var(--peach-mono, ui-monospace, monospace);9562  font-size: 9.5px;9563  text-transform: uppercase;9564  letter-spacing: 0.12em;9565  color: var(--peach-t1);9566  padding: 8px 10px;9567}9568.peach-chirp-listen-dot {9569  width: 4px; height: 4px;9570  border-radius: 50%;9571  background: color-mix(in srgb, var(--peach-accent) 55%, transparent);9572  animation: peach-chirp-listen-pulse 1.2s ease-in-out infinite;9573}9574.peach-chirp-listen-dot:nth-child(2) { animation-delay: 0.2s; }9575.peach-chirp-listen-dot:nth-child(3) { animation-delay: 0.4s; }9576.peach-chirp-listen-label { margin-left: 6px; }9577@keyframes peach-chirp-listen-pulse {9578  0%, 100% { opacity: 0.25; transform: scale(0.9); }9579  50%      { opacity: 1;     transform: scale(1.15); }9580}95819582.peach-chirp-action-handshake {9583  display: flex;9584  flex-direction: column;9585  align-items: center;9586  gap: 8px;9587  padding: 8px 4px;9588}9589.peach-chirp-meter {9590  width: 100%;9591  max-width: 280px;9592  height: 2px;9593  background: color-mix(in srgb, var(--peach-t0) 10%, transparent);9594  border-radius: 2px;9595  position: relative;9596  overflow: hidden;9597}9598.peach-chirp-meter-bar {9599  position: absolute;9600  top: 0; bottom: 0;9601  width: 30%;9602  left: -30%;9603  background: linear-gradient(90deg, transparent, var(--peach-accent), transparent);9604  animation: peach-chirp-meter-sweep 1.4s ease-in-out infinite;9605}9606@keyframes peach-chirp-meter-sweep {9607  0%   { left: -30%; }9608  100% { left: 100%; }9609}9610.peach-chirp-meter-label {9611  font-family: var(--peach-mono, ui-monospace, monospace);9612  font-size: 9.5px;9613  text-transform: uppercase;9614  letter-spacing: 0.14em;9615  color: var(--peach-t1);9616}96179618.peach-chirp-action-paired {9619  display: flex;9620  align-items: center;9621  gap: 10px;9622}9623.peach-chirp-device-confirm {9624  flex: 1;9625  display: inline-flex;9626  align-items: center;9627  gap: 8px;9628  padding: 9px 10px 9px 12px;9629  border-radius: 10px;9630  background: color-mix(in srgb, #76b6e8 12%, transparent);9631  border: 1px solid color-mix(in srgb, #76b6e8 30%, transparent);9632  font-size: 12.5px;9633  color: var(--peach-t0);9634  min-width: 0;9635}9636.peach-chirp-device-confirm-glyph {9637  display: inline-flex;9638  color: #76b6e8;9639}9640.peach-chirp-device-confirm-name {9641  flex: 1;9642  overflow: hidden;9643  text-overflow: ellipsis;9644  white-space: nowrap;9645}9646.peach-chirp-device-confirm-trust {9647  font-family: var(--peach-mono, ui-monospace, monospace);9648  font-size: 9.5px;9649  text-transform: uppercase;9650  letter-spacing: 0.1em;9651  color: #76b6e8;9652  padding: 2px 6px;9653  border-radius: 4px;9654  background: color-mix(in srgb, #76b6e8 14%, transparent);9655}9656.peach-chirp-done {9657  min-width: 80px;9658}9659.peach-chirp-retry {9660  align-self: center;9661  display: block;9662  margin: 6px auto 0;9663  min-width: 120px;9664}9665.peach-chirp-mic-help {9666  font-size: 12px;9667  color: var(--peach-t1);9668  text-align: center;9669  max-width: 320px;9670  margin: 0 auto;9671}96729673/* Rest state — bird stage at idle pose, primary CTA + paired list */9674.peach-chirp-pair[data-phase="idle"] .peach-chirp-stage {9675  /* Slightly shorter stage when at rest — no flight wave or motes to fill it */9676  height: 160px;9677}9678.peach-chirp-pair-start {9679  width: 100%;9680  display: inline-flex;9681  align-items: center;9682  justify-content: center;9683  gap: 8px;9684  padding: 11px 14px;9685  border-radius: 10px;9686  background: var(--peach-accent);9687  border: 1px solid color-mix(in srgb, var(--peach-accent) 80%, #000);9688  color: #1a0905;9689  font-family: inherit;9690  font-size: 13px;9691  font-weight: 600;9692  letter-spacing: 0.01em;9693  cursor: pointer;9694  transition: filter 0.15s ease, transform 0.1s ease;9695}9696.peach-chirp-pair-start:hover { filter: brightness(1.08); }9697.peach-chirp-pair-start:active { transform: translateY(1px); }96989699.peach-chirp-paired-section {9700  margin-top: 14px;9701  display: flex;9702  flex-direction: column;9703  gap: 8px;9704}9705.peach-chirp-paired-heading {9706  margin: 0;9707  font-family: var(--peach-mono, ui-monospace, monospace);9708  font-size: 10px;9709  font-weight: 500;9710  letter-spacing: 0.14em;9711  text-transform: uppercase;9712  color: var(--peach-t1);9713}97149715/* Footer --------------------------------------------------------------- */9716.peach-chirp-foot {9717  margin: 10px -4px -2px;9718  margin-top: auto;9719}9720.peach-chirp-foot-divider {9721  height: 1px;9722  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--peach-t0) 18%, transparent), transparent);9723  margin-bottom: 10px;9724}9725.peach-chirp-foot-text {9726  font-size: 11px;9727  line-height: 1.5;9728  color: var(--peach-t1);9729  text-align: center;9730  padding: 0 4px;9731  text-wrap: pretty;9732}97339734/* Screen-reader-only live region. Kept off the visual flow but read by9735   assistive tech as the pairing phase advances. */9736.peach-sr-only {9737  position: absolute;9738  width: 1px; height: 1px;9739  padding: 0; margin: -1px;9740  overflow: hidden;9741  clip: rect(0, 0, 0, 0);9742  white-space: nowrap;9743  border: 0;9744}97459746/* Reduced motion — stage simplifies to opacity transitions only */9747@media (prefers-reduced-motion: reduce) {9748  .peach-chirp-bird-body,9749  .peach-chirp-bird-head-group,9750  .peach-chirp-bird-beak,9751  .peach-chirp-bird-wing,9752  .peach-chirp-bird-tuft,9753  .peach-chirp-bird-tail,9754  .peach-chirp-bird-eye-group,9755  .peach-chirp-bird-aura,9756  .peach-chirp-arc,9757  .peach-chirp-flight-path,9758  .peach-chirp-flight-path-2,9759  .peach-chirp-dot-glow,9760  .peach-chirp-dot-core,9761  .peach-chirp-dot-ring,9762  .peach-chirp-mote,9763  .peach-chirp-meter-bar,9764  .peach-chirp-listen-dot,9765  .peach-chirp-bird-slot,9766  .peach-chirp-bird-slot-mobile {9767    animation: none !important;9768    transition: opacity 0.2s linear !important;9769  }9770}97719772/* ─────────────────────────────────────────────────────────────────9773   Settings → Sync surface (v3 ChirpSync). Wraps the same bird9774   animation used by the pairing flow with a paired-devices list and9775   the "Pair a device" CTA.9776   ───────────────────────────────────────────────────────────────── */9777.peach-chirp-settings {9778  position: absolute;9779  inset: 0;9780  z-index: 3;9781  display: flex;9782  flex-direction: column;9783  gap: 18px;9784  padding: 14px 12px 12px;9785  width: 100%;9786  box-sizing: border-box;9787  overflow-y: auto;9788  overflow-x: hidden;9789  /* Same warm Chirp surface as the pairing screen — unifies the two views. */9790  background:9791    radial-gradient(ellipse 70% 50% at 30% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent), transparent 70%),9792    var(--peach-bg);9793  color: var(--peach-t0);9794  isolation: isolate;9795  /* Hide native scrollbar — content fits 99% of the time and a chunky9796     gutter ruins the surface. */9797  scrollbar-width: none;9798  animation: peach-chirp-overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;9799}9800.peach-chirp-settings::-webkit-scrollbar { width: 0; height: 0; display: none; }9801.peach-chirp-settings::before {9802  content: '';9803  position: absolute;9804  inset: 0;9805  pointer-events: none;9806  background: radial-gradient(ellipse 90% 30% at 50% 0%, color-mix(in srgb, var(--peach-accent) 6%, transparent), transparent 70%);9807  z-index: 0;9808}9809.peach-chirp-settings > * { position: relative; z-index: 1; }98109811.peach-chirp-settings--pairing {9812  padding: 0;9813  align-items: stretch;9814  justify-content: stretch;9815  background: none;9816  isolation: auto;9817}9818.peach-chirp-settings--pairing::before { display: none; }98199820.peach-chirp-settings-header {9821  display: flex;9822  align-items: center;9823  gap: 10px;9824}9825.peach-chirp-settings-title {9826  margin: 0;9827  font-family: var(--font-display, Georgia, serif);9828  font-style: italic;9829  font-size: 24px;9830  font-weight: 500;9831  line-height: 1;9832  color: var(--peach-t0);9833  letter-spacing: 0.005em;9834}9835.peach-chirp-settings-section {9836  margin: 6px 0 -4px;9837  font-size: 11px;9838  font-weight: 600;9839  letter-spacing: 0.08em;9840  text-transform: uppercase;9841  color: var(--peach-text-muted);9842}9843.peach-chirp-settings-error {9844  font-size: 12px;9845  padding: 8px 10px;9846  border-radius: 8px;9847  background: color-mix(in srgb, var(--peach-danger, #c25b4a) 18%, transparent);9848  color: var(--peach-text);9849}9850.peach-chirp-settings-footer {9851  margin-top: auto;9852  padding-top: 18px;9853  font-size: 11.5px;9854  line-height: 1.5;9855  color: var(--peach-text-muted);9856  text-align: center;9857}98589859/* Hero card shown when no devices are paired yet. */9860.peach-chirp-hero {9861  display: flex;9862  flex-direction: column;9863  align-items: center;9864  gap: 12px;9865  padding: 20px 12px 8px;9866  text-align: center;9867}9868.peach-chirp-hero-svg {9869  display: block;9870  max-width: 100%;9871  filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--peach-accent) 25%, transparent));9872}9873.peach-chirp-hero-headline {9874  margin: 0;9875  font-family: var(--font-display, Georgia, serif);9876  font-style: italic;9877  font-size: 20px;9878  font-weight: 500;9879  line-height: 1.2;9880  letter-spacing: 0.005em;9881  color: var(--peach-t0);9882}9883.peach-chirp-hero-sub {9884  margin: 0;9885  font-size: 13px;9886  line-height: 1.5;9887  color: var(--peach-t1);9888  max-width: 320px;9889  text-wrap: pretty;9890}98919892.peach-chirp-pair-cta {9893  display: flex;9894  justify-content: center;9895  padding: 4px 0 6px;9896}9897.peach-chirp-pair-button {9898  display: inline-flex;9899  align-items: center;9900  gap: 8px;9901  min-width: 220px;9902  justify-content: center;9903}9904.peach-chirp-pair-button-icon {9905  flex: 0 0 auto;9906}99079908/* Paired devices list. Roomy rows that look at home next to the rest9909   of Settings; stale rows get a soft warm-warning border tint. */9910.peach-chirp-device-list {9911  list-style: none;9912  margin: 0;9913  padding: 0;9914  display: flex;9915  flex-direction: column;9916  gap: 8px;9917}9918.peach-chirp-device-row {9919  display: flex;9920  align-items: center;9921  gap: 12px;9922  padding: 12px;9923  border-radius: 10px;9924  background: color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);9925  border: 1px solid color-mix(in srgb, var(--peach-accent) 12%, transparent);9926}9927.peach-chirp-device-row[data-stale="true"] {9928  border-color: color-mix(in srgb, var(--peach-warn, #d29257) 36%, transparent);9929}9930.peach-chirp-device-icon {9931  width: 32px;9932  height: 32px;9933  display: flex;9934  align-items: center;9935  justify-content: center;9936  border-radius: 8px;9937  color: var(--peach-text);9938  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);9939}9940.peach-chirp-device-info {9941  flex: 1;9942  display: flex;9943  flex-direction: column;9944  gap: 2px;9945  min-width: 0;9946}9947.peach-chirp-device-name {9948  font-size: 14px;9949  font-weight: 600;9950  color: var(--peach-text);9951  overflow: hidden;9952  text-overflow: ellipsis;9953  white-space: nowrap;9954}9955.peach-chirp-device-meta {9956  font-size: 11.5px;9957  color: var(--peach-text-muted);9958  display: flex;9959  flex-wrap: wrap;9960  align-items: center;9961  gap: 8px;9962}9963.peach-chirp-device-badge {9964  font-size: 10.5px;9965  font-weight: 500;9966  letter-spacing: 0.02em;9967  padding: 2px 6px;9968  border-radius: 999px;9969  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);9970  color: var(--peach-text);9971}9972.peach-chirp-device-stale {9973  font-size: 10.5px;9974  font-weight: 500;9975  color: var(--peach-warn, #d29257);9976}9977.peach-chirp-device-remove {9978  flex: 0 0 auto;9979  color: var(--peach-text-muted);9980}9981.peach-chirp-device-remove:hover {9982  color: var(--peach-danger, #c25b4a);9983}9984.peach-chirp-unpair-confirm {9985  display: flex;9986  gap: 6px;9987  align-items: center;9988}99899990/* Pro-gate card — soft upsell with the mobile bird perched, chirping. */9991.peach-chirp-pro-card {9992  position: relative;9993  margin: 18px 12px;9994  padding: 18px 20px 22px;9995  border-radius: 22px;9996  background:9997    radial-gradient(140% 90% at 50% 0%,9998      color-mix(in srgb, var(--peach-accent) 18%, transparent) 0%,9999      transparent 60%),10000    color-mix(in srgb, var(--peach-bg-elevated, var(--peach-bg)) 88%, var(--peach-accent) 12%);10001  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);10002  box-shadow:10003    0 1px 0 color-mix(in srgb, var(--peach-accent) 8%, transparent) inset,10004    0 18px 40px -24px rgba(0, 0, 0, 0.45);10005  display: flex;10006  flex-direction: column;10007  align-items: center;10008  gap: 10px;10009  text-align: center;10010  overflow: hidden;10011}10012.peach-chirp-pro-stage {10013  position: relative;10014  width: 220px;10015  height: 140px;10016  display: flex;10017  align-items: flex-end;10018  justify-content: center;10019  margin-bottom: 2px;10020}10021.peach-chirp-pro-bird-slot {10022  width: 140px;10023  height: 132px;10024  display: flex;10025  align-items: flex-end;10026  justify-content: center;10027  filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.35));10028}10029.peach-chirp-pro-bird-slot .peach-chirp-bird {10030  width: 100%;10031  height: 100%;10032}10033.peach-chirp-pro-bird-slot .peach-chirp-bird svg {10034  width: 100%;10035  height: 100%;10036  overflow: visible;10037}10038.peach-chirp-pro-chirp {10039  position: absolute;10040  top: 14px;10041  right: 8px;10042  width: 96px;10043  height: 80px;10044  color: var(--peach-accent);10045  animation: peach-chirp-pulse 2.6s ease-in-out infinite;10046  transform-origin: 0% 50%;10047  pointer-events: none;10048}10049@keyframes peach-chirp-pulse {10050  0%, 100% { opacity: 0.35; transform: translateX(0) scale(0.92); }10051  45%      { opacity: 1;    transform: translateX(2px) scale(1); }10052  70%      { opacity: 0.6;  transform: translateX(4px) scale(1.04); }10053}10054@media (prefers-reduced-motion: reduce) {10055  .peach-chirp-pro-chirp { animation: none; opacity: 0.7; }10056}10057.peach-chirp-pro-headline {10058  margin: 4px 0 0;10059  font-family: var(--font-display, "Cormorant Garamond", serif);10060  font-style: italic;10061  font-size: 19px;10062  font-weight: 500;10063  letter-spacing: 0.01em;10064  color: var(--peach-t0);10065  max-width: 280px;10066  line-height: 1.25;10067}10068.peach-chirp-pro-body {10069  margin: 0;10070  font-size: 13px;10071  line-height: 1.55;10072  color: var(--peach-t1);10073  max-width: 300px;10074}10075.peach-chirp-pro-cta {10076  margin-top: 4px;10077}10078.peach-chirp-pro-foot {10079  margin: 2px 0 0;10080  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;10081  font-size: 0.625rem;10082  letter-spacing: 0.08em;10083  text-transform: uppercase;10084  color: var(--peach-t2);10085  opacity: 0.75;10086}1008710088/* Shell border and shadow in light mode: match dark mode's near-invisible10089   border weight so the popup frame looks the same in both themes. */10090.light .peach-shell,10091.light .peach-screen {10092  border-color: rgba(26, 18, 8, 0.07);10093  box-shadow:10094    0 2px 8px rgba(80, 56, 32, 0.08),10095    0 14px 48px rgba(80, 56, 32, 0.10),10096    0 0 0 1px rgba(26, 18, 8, 0.04);10097}