popup.css

1html,2body,3#app,4#pre-lock,5.popup-root {6  width: 320px;7  min-height: 520px;8  height: 520px;9  margin: 0;10}1112.peach-mobile-root,13body.peach-mobile,14.peach-mobile #app,15.peach-mobile #pre-lock,16.peach-mobile .popup-root {17  width: 100vw;18  min-height: 100dvh;19  height: 100dvh;20  margin: 0;21}2223body {24  overflow: hidden;25  background: var(--bg);26  color: var(--t0);27  font-family: var(--font-ui);28  font-weight: 300;29  position: relative;30}3132body.peach-mobile {33  min-height: 100dvh;34  height: 100dvh;35  overflow: hidden;36  transition: padding-bottom 180ms ease;37}3839* {40  box-sizing: border-box;41}4243button,44input,45textarea,46select {47  font: inherit;48}4950button {51  border: 0;52}5354#pre-lock {55  position: absolute;56  inset: 0;57  z-index: 10;58}5960#pre-lock[hidden] {61  display: none;62}6364.popup-root {65  position: relative;66  overflow: hidden;67}6869body.peach-mobile .popup-root {70  padding:71    env(safe-area-inset-top)72    env(safe-area-inset-right)73    env(safe-area-inset-bottom)74    env(safe-area-inset-left);75  overflow: hidden;76}7778.peach-theme {79  color: var(--peach-t0);80  font-family: var(--font-ui);81  font-weight: 300;82  box-sizing: border-box;83  text-align: left;84}85.peach-theme, .peach-theme * { box-sizing: inherit; }8687.peach-brand-mark {88  width: 14px;89  height: 14px;90  flex-shrink: 0;91}9293.peach-status-pip.is-hidden {94  display: none;95}9697.peach-status-pip.unlocked {98  background: var(--peach-health-ok);99  box-shadow: 0 0 6px rgba(100, 210, 100, 0.6);100}101102.peach-status-pip.pulse {103  animation: pip-pulse 400ms var(--peach-curve-settle) both;104}105106/* Shell */107.peach-shell, .peach-screen {108  background:109    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),110    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),111    var(--peach-bg);112  border: 1px solid var(--peach-t3);113  box-shadow:114    0 2px 8px rgba(0,0,0,0.55),115    0 14px 48px rgba(0,0,0,0.7),116    0 0 0 1px rgba(240,232,216,0.04);117  overflow: hidden;118}119.peach-shell {120  display: grid;121  grid-template-rows: auto 1fr;122  min-height: 520px;123  position: relative;124  isolation: isolate;125}126127.peach-shell[data-surface="extension"] {128  width: min(320px, 100vw);129  border-radius: 0;130  height: 520px;131  max-height: 520px;132  overflow: hidden;133}134135body.peach-mobile .peach-shell[data-surface="extension"],136body.peach-mobile .peach-screen {137  width: 100%;138  height: 100%;139  max-height: none;140  min-height: 100%;141  border: 0;142  box-shadow: none;143}144145body.peach-mobile .peach-shell[data-surface="extension"] {146  grid-template-rows: auto minmax(0, 1fr);147}148149body.peach-mobile .peach-stage,150body.peach-mobile .peach-overlay-view,151body.peach-mobile .peach-settings-content {152  overscroll-behavior: contain;153}154155/* ── Lock screen – full-window lock/create stage ── */156.lock-screen--vault-stage {157  display: flex;158  flex-direction: column;159  gap: 18px;160  padding: 20px 18px 18px;161  justify-content: flex-start;162}163.lock-screen--vault-stage .peach-lock-panel {164  margin-top: auto;165}166.peach-lock-headline--unlock {167  max-width: 220px;168}169.peach-lock-hero--unlock {170  padding-top: 14px;171}172.peach-lock-panel--unlock {173  gap: 10px;174}175176.peach-lock-restore-link {177  background: transparent;178  border: none;179  cursor: pointer;180  font-family: var(--font-mono);181  font-size: 10px;182  letter-spacing: 0.08em;183  color: var(--t1);184  padding: 5px 0;185  text-align: left;186  transition: color 150ms ease;187}188189.peach-lock-restore-link:hover {190  color: var(--t0);191}192.peach-shell[data-surface="extension"] .peach-stage {193  min-height: 250px;194}195196/* Screen (unlock) */197.peach-screen {198  width: min(320px, 100vw);199  min-height: 100%;200  height: 100%;201  border-radius: 0;202  padding: 16px 20px 18px;203  display: grid;204  gap: 14px;205}206.peach-screen[data-motion-phase="enter"] {207  animation: peach-screen-enter var(--peach-dur-600) var(--peach-curve-arrival) both;208}209.peach-screen-header { min-height: 20px; }210211/* Wordmark */212.peach-wordmark {213  margin: 0;214  font-family: var(--font-display);215  font-size: 15px;216  font-style: italic;217  letter-spacing: 0.03em;218  color: var(--peach-t0);219  display: inline-flex;220  min-height: 1em;221}222223/* Motion text / char animation */224.peach-motion-text { display: inline-flex; min-height: 1em; }225.peach-motion-char {226  display: inline-block;227  white-space: pre;228  opacity: 0;229  transform: translateY(0.22em);230  animation: peach-char-enter var(--peach-motion-duration, 380ms) var(--peach-curve-arrival) forwards;231  animation-delay: calc(var(--peach-char-index, 0) * 20ms);232}233234/* Chrome */235.peach-chrome {236  position: relative;237  z-index: 10;238  padding: 16px 20px 0;239  display: flex;240  justify-content: space-between;241  align-items: center;242  /* z-index:10 keeps the header icons above `.peach-loading` (Suspense243     fallback) per §15 regression guard. Without pointer-events:none, the244     empty header strip also sits above `.peach-overlay-view` (z-index:2)245     and swallows clicks meant for an overlay's back button / top search. */246  pointer-events: none;247}248.peach-chrome .peach-btn { pointer-events: auto; }249.peach-chrome.is-hidden-for-overlay,250.peach-search-wrap.is-hidden-for-overlay {251  opacity: 0;252  visibility: hidden;253  pointer-events: none;254}255.peach-wordmark-wrap { display: flex; align-items: center; gap: 5px; }256.peach-status-pip {257  width: 5px;258  height: 5px;259  border-radius: 50%;260  background: var(--peach-t3);261  display: inline-flex;262  flex-shrink: 0;263  transition: background 400ms ease, box-shadow 400ms ease;264}265.peach-chrome-actions { display: flex; gap: 6px; }266267/* Shell body */268.peach-shell-body {269  position: relative;270  display: grid;271  grid-template-rows: 1fr auto;272  min-height: 0;273  min-width: 0;274  width: 100%;275  overflow: hidden;276  height: 100%;277}278.peach-shell-veil {279  position: absolute; inset: 0;280  background: #000; opacity: 0;281  pointer-events: none; z-index: 1;282}283.peach-shell[data-motion-phase="enter"] .peach-shell-body {284  animation: peach-shell-fade-in var(--peach-dur-600) var(--peach-curve-arrival) both;285}286.peach-shell[data-motion-phase="exit"] .peach-shell-veil {287  animation: peach-veil-in 300ms var(--peach-curve-departure) forwards;288}289290/* Content frame */291.peach-content-frame {292  display: grid;293  grid-template-rows: 1fr auto;294  grid-template-columns: minmax(0, 1fr);295  align-content: start;296  min-height: 0;297  min-width: 0;298  overflow: hidden;299  transition: opacity 80ms ease, transform 80ms ease;300}301.peach-content-frame.navigating {302  opacity: 0.93;303  transform: translateX(2px);304}305.peach-content-frame[data-content-phase="enter"] {306  animation: peach-content-enter 135ms ease-out both;307}308.peach-content-frame[data-content-phase="exit"] {309  animation: peach-content-exit 95ms ease-in forwards;310}311.peach-content-frame[data-content-phase="idle"] { opacity: 1; transform: none; }312313/* Stage */314.peach-stage {315  padding: 10px 20px 12px;316  display: grid;317  gap: 12px;318  align-content: start;319  min-width: 0;320  min-height: 0;321  max-width: 100%;322  overflow-y: auto;323  overflow-x: hidden;324  scrollbar-width: none;325  -ms-overflow-style: none;326  overscroll-behavior: contain;327}328.peach-stage::-webkit-scrollbar { display: none; }329330/* Entry name */331.peach-entry-name-wrap { position: relative; overflow: hidden; max-width: 100%; }332.peach-entry-header {333  position: relative;334  z-index: 1;335  display: flex;336  align-items: flex-start;337  gap: 6px;338  min-width: 0;339}340.peach-entry-header-name {341  flex: 1;342  min-width: 0;343}344.peach-entry-name {345  margin: 0;346  padding-bottom: 0.12em;347  font-family: var(--font-display);348  font-style: italic; font-weight: 400;349  font-size: 44px; line-height: 0.95;350  color: var(--peach-t0);351  display: -webkit-box;352  -webkit-line-clamp: 2;353  -webkit-box-orient: vertical;354  overflow: hidden;355  text-wrap: balance;356}357.peach-entry-name--lg { font-size: 40px; }358.peach-entry-name--xl { font-size: 34px; line-height: 0.98; }359.peach-entry-name--xxl { font-size: 30px; line-height: 1.02; }360.peach-entry-name-text { display: block; overflow: hidden; max-width: 100%; overflow-wrap: anywhere; padding-bottom: 0.12em; }361362/* Trash icon in entry header */363.peach-entry-trash-btn {364  flex-shrink: 0;365  padding: 4px;366  margin-top: 4px;367  background: transparent;368  border: none;369  cursor: pointer;370  color: var(--peach-t2);371  border-radius: 4px;372  transition: color 140ms ease, background 140ms ease;373  display: flex;374  align-items: center;375  justify-content: center;376}377.peach-entry-trash-btn:hover {378  color: var(--peach-t1);379  background: var(--peach-t3);380}381.peach-entry-trash-confirm {382  display: flex;383  align-items: center;384  gap: 6px;385  flex-shrink: 0;386  margin-top: 6px;387  flex-wrap: nowrap;388}389.peach-entry-trash-confirm-label {390  font-family: var(--font-mono);391  font-size: 9px;392  letter-spacing: 0.1em;393  color: var(--peach-t2);394  white-space: nowrap;395}396.peach-entry-name-button {397  padding: 0;398  background: transparent;399  text-align: left;400  cursor: pointer;401  max-width: 100%;402  overflow: hidden;403  display: block;404}405.peach-entry-name-char {406  display: inline-block;407  white-space: pre;408  opacity: 0;409  transform: translateY(0.22em);410  animation: peach-char-enter 380ms var(--peach-curve-arrival) forwards;411  animation-delay: calc(var(--char-index, 0) * 20ms);412}413414/* Domain */415.peach-domain { border-top: 1px solid var(--peach-t3); padding-top: 9px; }416.peach-domain-row {417  width: 100%; border: 0; background: transparent; color: inherit;418  padding: 0; display: flex; justify-content: space-between; align-items: baseline;419  cursor: default;420}421.peach-domain-value {422  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;423  font-size: 10px; font-style: italic;424  letter-spacing: 0.12em; color: var(--peach-t1);425}426427/* Fields */428.peach-fields { display: grid; gap: 10px; }429.peach-field-card { display: grid; gap: 7px; }430.peach-label {431  font-family: Inter, system-ui, sans-serif;432  text-transform: uppercase; letter-spacing: 0.2em;433  font-size: 8px; color: var(--peach-t2);434}435.peach-field-value-row {436  display: flex; justify-content: space-between;437  align-items: center; gap: 8px;438  min-width: 0;439}440.peach-field-value {441  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;442  font-size: 13px; color: var(--peach-t1);443  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;444  flex: 1;445  min-width: 0;446}447.peach-password-value {448  display: inline-flex;449  align-items: center;450  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;451  font-size: 16px; letter-spacing: 0.3em; color: var(--peach-t0);452  overflow: hidden;453  text-overflow: ellipsis;454  white-space: nowrap;455  flex: 1;456  min-width: 0;457  max-width: 100%;458}459.peach-password-value.is-revealed {460  font-size: 14px;461  letter-spacing: 0.08em;462}463.peach-password-text,464.peach-password-mask {465  display: block;466  width: 100%;467  overflow: hidden;468  white-space: nowrap;469  /* Render as uniform mid-line bullets, not baseline periods */470  font-family: Inter, system-ui, sans-serif;471  font-size: 10px;472  letter-spacing: 3px;473  user-select: none;474}475.peach-field-actions { display: flex; gap: 4px; align-items: center; }476.peach-password-strength { display: flex; align-items: center; gap: 8px; }477.peach-strength-bar { display: flex; gap: 3px; }478.peach-strength-seg { width: 28px; height: 4px; border-radius: 2px; background: #eee; }479.peach-strength-label {480  font-family: "IBM Plex Mono", monospace;481  font-style: italic;482  font-size: 9px;483  font-weight: 300;484  min-width: 36px;485  text-align: right;486  color: var(--peach-t2);487  letter-spacing: 0.06em;488}489490.peach-strength-hairline {491  display: flex;492  align-items: center;493  gap: 10px;494  margin-top: -2px;495}496497.peach-strength-hairline-track {498  flex: 1;499  height: 3px;500  border-radius: 2px;501  background: var(--peach-s2);502  overflow: hidden;503}504505.peach-strength-hairline-fill {506  height: 100%;507  border-radius: 2px;508  transition: width 400ms cubic-bezier(0.16, 1, 0.3, 1),509    background 400ms ease;510}511512/* Note content (display) */513.peach-note-content {514  border-top: 1px solid var(--peach-t3);515  padding-top: 10px;516  font-family: var(--font-display);517  font-size: 15px;518  line-height: 1.75;519  color: var(--peach-t1);520}521522/* ── Inline editing ─────────────────────────────────────────────────── */523524/* Clickable display values */525.peach-inline-clickable {526  cursor: text;527  border-radius: 3px;528  transition: background 150ms ease;529}530.peach-inline-clickable:hover {531  background: rgba(240, 232, 216, 0.05);532}533534/* Subtle "edit" hint that appears on hover */535.peach-inline-edit-hint {536  font-family: Inter, system-ui, sans-serif;537  font-size: 9px;538  text-transform: uppercase;539  letter-spacing: 0.14em;540  color: var(--peach-t2);541  opacity: 0;542  transition: opacity 120ms ease;543  pointer-events: none;544  margin-left: 6px;545  flex-shrink: 0;546}547.peach-domain-row:hover .peach-inline-edit-hint {548  opacity: 1;549}550551/* Title editing */552.peach-inline-title-wrap {553  display: flex;554  flex-direction: column;555  gap: 6px;556}557.peach-inline-title-input {558  font-family: var(--font-display);559  font-style: italic;560  font-weight: 400;561  font-size: 40px;562  line-height: 0.95;563  color: var(--peach-t0);564  background: transparent;565  border: none;566  border-bottom: 1px solid var(--peach-accent);567  outline: none;568  width: 100%;569  padding: 2px 0;570}571572/* Generic inline field */573.peach-inline-field-wrap {574  display: flex;575  flex-direction: column;576  gap: 6px;577}578.peach-inline-input {579  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;580  font-size: 13px;581  color: var(--peach-t0);582  background: transparent;583  border: none;584  border-bottom: 1px solid var(--peach-accent);585  outline: none;586  width: 100%;587  padding: 3px 0;588}589.peach-inline-textarea {590  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;591  font-size: 11px;592  line-height: 1.7;593  color: var(--peach-t0);594  background: rgba(240, 232, 216, 0.04);595  border: 1px solid var(--peach-accent);596  border-radius: 4px;597  outline: none;598  width: 100%;599  padding: 8px;600  resize: vertical;601  min-height: 80px;602}603604/* Save / cancel row */605.peach-inline-actions {606  display: flex;607  gap: 6px;608  align-items: center;609}610.peach-inline-save-btn,611.peach-inline-cancel-btn {612  display: inline-flex;613  align-items: center;614  justify-content: center;615  width: 26px;616  height: 26px;617  border-radius: 4px;618  border: none;619  cursor: pointer;620  transition: background 140ms ease, opacity 140ms ease;621  flex-shrink: 0;622}623.peach-inline-save-btn {624  background: rgba(var(--ac-r, 217), var(--ac-g, 104), var(--ac-b, 48), 0.18);625  color: var(--peach-accent);626}627.peach-inline-save-btn:hover:not(:disabled) {628  background: rgba(var(--ac-r, 217), var(--ac-g, 104), var(--ac-b, 48), 0.30);629}630.peach-inline-cancel-btn {631  background: rgba(240, 232, 216, 0.06);632  color: var(--peach-t2);633}634.peach-inline-cancel-btn:hover:not(:disabled) {635  background: rgba(240, 232, 216, 0.12);636  color: var(--peach-t1);637}638.peach-inline-save-btn:disabled,639.peach-inline-cancel-btn:disabled {640  opacity: 0.4;641  cursor: not-allowed;642}643644/* Inline password generator wrapper */645.peach-inline-generator-wrap {646  margin-top: 10px;647  padding-top: 10px;648  border-top: 1px solid var(--peach-t3);649  display: flex;650  flex-direction: column;651  gap: 8px;652}653.peach-inline-generator-cancel {654  align-self: flex-start;655  font-size: 11px;656  color: var(--peach-t2);657}658659/* "is-editing" card state */660.peach-field-card.is-editing {661  background: rgba(240, 232, 216, 0.02);662  border-radius: 6px;663  padding: 8px;664  margin: -8px;665}666667/* Inline tag editor on Entry detail view */668.peach-inline-tag-editor {669  display: flex;670  flex-direction: column;671  gap: 6px;672}673674/* Quiet inline "+ add X" link in the entry detail body */675.peach-entry-add-link {676  justify-self: start;677  margin-top: 8px;678}679680/* Additional URLs editor revealed by clicking the URL field */681.peach-additional-urls {682  display: flex;683  flex-direction: column;684  gap: 6px;685  margin-top: 8px;686}687.peach-additional-urls-label {688  font-size: 9px;689  letter-spacing: 0.1em;690  text-transform: uppercase;691  color: var(--peach-t2);692  margin-bottom: 2px;693}694.peach-additional-url-row {695  display: flex;696  align-items: center;697  gap: 6px;698}699.peach-additional-url-row .peach-inline-input { flex: 1; min-width: 0; }700.peach-additional-url-remove {701  background: transparent;702  border: 1px solid var(--peach-t3);703  color: var(--peach-t2);704  width: 22px;705  height: 22px;706  border-radius: 4px;707  cursor: pointer;708  font-size: 14px;709  line-height: 1;710  display: inline-flex;711  align-items: center;712  justify-content: center;713  flex-shrink: 0;714  transition: color 120ms ease, border-color 120ms ease;715}716.peach-additional-url-remove:hover:not(:disabled) {717  color: var(--peach-accent);718  border-color: var(--peach-border-accent);719}720.peach-additional-urls-add { align-self: flex-start; }721722/* Delete row */723.peach-entry-delete-row {724  display: flex;725  align-items: center;726  gap: 8px;727  padding-top: 18px;728  margin-top: 8px;729  border-top: 1px solid var(--peach-t3);730}731.peach-delete-btn {732  font-size: 11px;733  color: var(--peach-t2);734  padding: 4px 0;735}736.peach-delete-confirm-text {737  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;738  font-size: 11px;739  font-style: italic;740  color: var(--peach-t2);741  flex-shrink: 0;742}743744/* TOTP band */745.peach-totp-band {746  border-top: 1px solid var(--peach-t3);747  padding: 12px 20px 14px;748  position: relative;749  display: grid;750  grid-template-columns: 1fr auto;751  gap: 10px;752}753.peach-totp-main {754  min-width: 0;755  cursor: pointer;756  user-select: none;757}758.peach-totp-code.is-copied { opacity: 0.55; transition: opacity 140ms ease; }759.peach-totp-code-row {760  display: flex;761  align-items: flex-end;762  gap: 10px;763  min-width: 0;764}765.peach-totp-code {766  margin: 2px 0 0;767  font-family: var(--font-display);768  font-style: italic;769  font-weight: 300;770  font-size: 38px; color: var(--peach-accent);771  line-height: 0.95; min-height: 1em;772  min-width: 0;773}774.peach-totp-code-text {775  display: inline-flex;776  overflow: hidden;777  text-overflow: ellipsis;778  white-space: nowrap;779}780.peach-totp-copy-btn {781  margin-bottom: 2px;782  flex-shrink: 0;783  border-color: transparent;784}785.peach-totp-meta { display: grid; justify-items: end; align-content: start; gap: 4px; }786.peach-totp-countdown {787  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;788  font-size: 22px; color: var(--peach-t1);789}790.peach-totp-ring { transform: rotate(-90deg); }791.peach-totp-ring-track { fill: none; stroke: var(--peach-t3); stroke-width: 2; }792.peach-totp-ring-progress {793  fill: none; stroke: var(--peach-accent); stroke-width: 2;794  stroke-linecap: round;795  transition: stroke-dashoffset 1s linear, stroke 500ms ease;796}797/* Search bar */798.peach-search-wrap {799  border-top: 1px solid var(--peach-t3);800  background: var(--peach-s1);801  min-height: 54px; position: relative;802  box-shadow: inset 0 6px 18px transparent;803  transition: box-shadow 700ms ease;804}805.peach-search-wrap::before {806  content: "";807  position: absolute;808  left: 0;809  top: 0;810  height: 2px;811  width: var(--peach-totp-progress, 0%);812  background: var(--peach-accent);813  opacity: 0;814  transition: width 1s linear, opacity 180ms ease;815  pointer-events: none;816}817.peach-shell[data-totp-active="true"] .peach-search-wrap::before {818  opacity: 0.9;819}820.peach-shell[data-totp-active="true"] .peach-search-wrap {821  box-shadow: inset 0 6px 18px rgba(180, 140, 110, 0.07);822}823824@keyframes peach-totp-code-flare {825  0%   { filter: brightness(1); }826  25%  { filter: brightness(1.3); }827  100% { filter: brightness(1); }828}829.peach-totp-code.is-hot {830  animation: peach-totp-code-flare 3000ms ease-in-out both;831}832.peach-search-bar {833  min-height: 54px;834  display: grid;835  grid-template-columns: auto minmax(0, 1fr) auto;836  align-items: center;837  gap: 8px; padding: 0 9px 0 12px;838}839.peach-search-icon { color: var(--peach-t2); display: inline-flex; align-items: center; }840.peach-search-input {841  border: 0; background: transparent; color: var(--peach-t0);842  font-family: var(--font-display);843  font-style: italic; font-size: 18px;844  outline: none; width: 100%; min-width: 0; padding: 0;845  caret-color: var(--peach-accent);846}847.peach-search-input::placeholder { color: var(--peach-t2); }848.peach-search-meta {849  display: grid;850  grid-auto-flow: column;851  align-items: center;852  justify-content: end;853  gap: 6px;854  min-width: max-content;855}856.peach-search-counter {857  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;858  font-size: 10px; color: var(--peach-t2);859  display: inline-flex;860  align-items: center;861  line-height: 1;862}863.peach-divider { width: 1px; height: 12px; background: var(--peach-t3); display: inline-block; flex-shrink: 0; }864865/* Buttons */866.peach-btn {867  border: 1px solid transparent; border-radius: 12px;868  background: transparent; color: var(--peach-t0);869  font-family: Inter, system-ui, sans-serif;870  font-size: 12px; letter-spacing: 0.02em; padding: 8px 12px;871  cursor: pointer;872  transition:873    background-color var(--peach-dur-80) var(--peach-curve-arrival),874    color var(--peach-dur-80) var(--peach-curve-arrival),875    border-color var(--peach-dur-150) var(--peach-curve-arrival);876}877.peach-btn:hover:not(:disabled) { background: var(--peach-s2); }878.peach-btn:disabled {879  opacity: 0.45;880  cursor: not-allowed;881}882.peach-btn--sm { min-height: 32px; padding: 6px 9px; font-size: 11px; }883.peach-btn--md { min-height: 38px; }884.peach-btn--accent {885  background: var(--peach-accent);886  color: rgba(0,0,0,0.78);887  box-shadow:888    0 1px 0 rgba(255,255,255,0.08) inset,889    0 0 0 1px color-mix(in srgb, var(--peach-accent) 21%, transparent),890    0 3px 16px var(--peach-glow),891    0 0 24px color-mix(in srgb, var(--peach-accent) 10%, transparent);892}893.peach-btn--accent:hover:not(:disabled) {894  background: var(--peach-accent);895  filter: brightness(1.10) saturate(1.05);896  box-shadow:897    0 1px 0 rgba(255,255,255,0.10) inset,898    0 0 0 1px color-mix(in srgb, var(--peach-accent) 25%, transparent),899    0 4px 20px color-mix(in srgb, var(--peach-accent) 21%, transparent),900    0 0 30px color-mix(in srgb, var(--peach-accent) 14%, transparent);901}902.peach-btn--ghost { border-color: var(--peach-t3); color: var(--peach-t1); }903.peach-btn--subtle { color: var(--peach-t2); border-color: var(--peach-t3); }904.peach-icon-btn {905  min-width: 32px; min-height: 32px; border-radius: 8px; padding: 6px;906  display: inline-flex; align-items: center; justify-content: center;907}908909.peach-btn:focus-visible {910  outline: none;911  box-shadow: 0 0 0 2px var(--peach-bg), 0 0 0 4px color-mix(in srgb, var(--peach-accent) 50%, transparent);912}913914/* Lock button */915.peach-lock-icon { transform-origin: center; }916.peach-lock-btn.is-locking { color: var(--peach-accent); }917.peach-lock-btn.is-locking .peach-lock-icon {918  animation: peach-lock-settle var(--peach-dur-600) var(--peach-curve-arrival);919}920921/* Biometric unlock button */922.peach-biometric-btn {923  display: flex;924  align-items: center;925  justify-content: center;926  gap: 6px;927  margin-top: 8px;928  width: 100%;929}930931/* Copy button */932.peach-copy-btn {933  position: relative; overflow: hidden;934  color: var(--peach-t2); border-color: var(--peach-t3);935}936.peach-copy-icon {937  display: inline-flex; align-items: center; justify-content: center;938  position: relative; z-index: 1;939}940.peach-copy-icon-svg { display: block; }941.peach-copy-sheen {942  position: absolute; inset: 0;943  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%);944  opacity: 0; transform: scaleX(0.15); transform-origin: left center;945}946.peach-copy-btn.is-copied {947  animation: peach-copy-confirm var(--peach-dur-150) var(--peach-curve-settle) forwards;948  box-shadow:949    0 0 0 1px color-mix(in srgb, var(--peach-accent) 22%, transparent),950    0 0 18px color-mix(in srgb, var(--peach-accent) 20%, transparent),951    inset 0 0 20px color-mix(in srgb, var(--peach-accent) 12%, transparent);952}953.peach-copy-btn.is-copied .peach-copy-icon {954  animation: peach-copy-icon-settle var(--peach-dur-150) var(--peach-curve-settle) both;955}956.peach-copy-btn.is-copied .peach-copy-sheen {957  animation: peach-copy-flood var(--peach-dur-150) var(--peach-curve-settle) forwards;958}959.peach-copy-btn.is-retreat {960  animation: peach-copy-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;961}962.peach-copy-btn.is-retreat .peach-copy-sheen {963  animation: peach-copy-sheen-retreat var(--peach-dur-150) var(--peach-curve-departure) forwards;964}965.peach-copy-drain { position: absolute; left: 0; right: 0; bottom: 0; height: 1px; overflow: hidden; }966.peach-copy-drain-bar {967  display: block; width: 100%; height: 100%;968  background: var(--peach-accent); opacity: 0.7;969  animation: peach-copy-drain var(--peach-copy-clear, 1.8s) linear forwards;970}971972/* Unlock screen elements */973.peach-unlock-headline {974  margin: 2px 0 0;975  font-family: var(--font-display);976  font-size: 52px; line-height: 0.95;977  font-style: italic; font-weight: 400;978}979.peach-subline {980  margin: 0;981  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;982  font-size: 10px; color: var(--peach-t2); font-style: italic;983}984.peach-subline--lock {985  max-width: 248px;986  line-height: 1.5;987}988.peach-underline-input {989  width: 100%; border: 0; border-bottom: 1px solid var(--peach-t3);990  padding: 6px 0; background: transparent; color: var(--peach-t0);991  outline: none;992  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;993  font-size: 13px;994  caret-color: var(--peach-accent);995}996.peach-unlock-input { font-size: 22px; letter-spacing: 0.24em; }997.peach-unlock-input::placeholder { letter-spacing: 0.04em; color: var(--peach-t2); }998.peach-hint {999  margin: 0;1000  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1001  font-size: 10px; color: var(--peach-t2);1002}1003.peach-unlock-footer {1004  margin-top: 4px; display: flex; align-items: center; gap: 7px;1005  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;1006  font-size: 10px; color: var(--peach-t2);1007}1008.peach-unlock-footer--lock {1009  padding-top: 2px;1010}10111012/* Breach badge */1013.peach-breach-badge {1014  display: flex;1015  position: relative;1016  z-index: 1;1017  align-items: center;1018  gap: 7px;1019  font-size: 9px;1020  color: var(--peach-breach);1021  padding: 5px 10px;1022  margin-bottom: 4px;1023  border-radius: 8px;1024  background: rgba(220, 80, 60, 0.07);1025  border: 1px solid rgba(220, 80, 60, 0.18);1026  letter-spacing: 0.04em;1027}10281029.peach-breach-action {1030  margin-left: auto;1031  font-size: 10px;1032  padding: 3px 8px;1033}10341035.peach-password-value.is-breached {1036  color: rgba(220, 80, 60, 0.75);1037  border-bottom: 1px solid rgba(220, 80, 60, 0.22);1038}10391040/* ── Overlay views ─────────────────────────────────────────────────── */1041.peach-overlay-view {1042  position: absolute;1043  inset: 0;1044  display: flex;1045  flex-direction: column;1046  background:1047    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),1048    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),1049    var(--peach-bg);1050  z-index: 2;1051  overflow: hidden;1052  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;1053}1054@keyframes overlay-in {1055  from { opacity: 0; transform: translateY(8px); }1056  to   { opacity: 1; transform: translateY(0); }1057}1058.peach-overlay-view.ov-enter-up {1059  animation: ov-enter-up 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1060}1061.peach-overlay-view.ov-exit-up {1062  animation: ov-exit-up 200ms cubic-bezier(0.4, 0, 1, 1) both;1063}1064.peach-overlay-view.ov-enter-right {1065  animation: ov-enter-right 280ms cubic-bezier(0.16, 1, 0.3, 1) both;1066}1067.peach-overlay-view.ov-exit-right {1068  animation: ov-exit-right 200ms cubic-bezier(0.4, 0, 1, 1) both;1069}10701071@keyframes ov-enter-up {1072  from { opacity: 0; transform: translateY(18px); }1073  to   { opacity: 1; transform: translateY(0); }1074}1075@keyframes ov-exit-up {1076  from { opacity: 1; transform: translateY(0); }1077  to   { opacity: 0; transform: translateY(-12px); }1078}1079@keyframes ov-enter-right {1080  from { opacity: 0; transform: translateX(20px); }1081  to   { opacity: 1; transform: translateX(0); }1082}1083@keyframes ov-exit-right {1084  from { opacity: 1; transform: translateX(0); }1085  to   { opacity: 0; transform: translateX(20px); }1086}10871088/* Overlay shared header */1089.peach-overlay-header {1090  padding: 10px 12px;1091  display: flex;1092  align-items: center;1093  gap: 8px;1094  border-bottom: 1px solid var(--peach-t3);1095  flex-shrink: 0;1096}1097.peach-overlay-title {1098  font-family: "IBM Plex Mono", monospace;1099  font-size: 9px;1100  text-transform: uppercase;1101  letter-spacing: 0.18em;1102  color: var(--peach-t2);1103  flex: 1;1104  text-align: center;1105}11061107.peach-overlay-card {1108  background: var(--peach-s1);1109  border: 1px solid var(--peach-t3);1110  border-radius: 12px;1111  overflow: hidden;1112  width: 100%;1113}11141115.peach-onboarding-alt-actions {1116  display: flex;1117  flex-direction: column;1118  gap: 4px;1119  padding: 0;1120}11211122.peach-settings-copy {1123  margin: 0 0 10px;1124  font-size: 11px;1125  line-height: 1.5;1126  color: var(--peach-t2);1127}11281129.peach-settings-copy strong {1130  color: var(--peach-t0);1131}11321133.peach-settings-copy--spacious {1134  margin-bottom: 12px;1135}11361137.peach-settings-copy--result {1138  color: var(--peach-accent);1139  font-size: 13px;1140  text-align: center;1141  padding: 8px 0;1142}11431144.peach-settings-copy--danger {1145  color: var(--peach-breach);1146}11471148.peach-settings-copy--success {1149  color: var(--peach-accent);1150}11511152.peach-inline-feedback {1153  font-size: 11px;1154  margin: 10px 0 0;1155}11561157.peach-inline-feedback--ok {1158  color: var(--peach-accent);1159}11601161.peach-inline-feedback--error {1162  color: var(--peach-breach);1163}11641165.peach-inline-feedback--muted {1166  color: var(--peach-t2);1167  font-size: 10px;1168  margin: 4px 0;1169}11701171.peach-inline-feedback--spaced {1172  margin-top: 12px;1173}11741175.peach-settings-actions--row {1176  display: flex;1177  gap: 6px;1178}11791180.peach-settings-actions--end {1181  margin-top: 14px;1182  justify-content: flex-end;1183}11841185.peach-settings-stack {1186  display: flex;1187  flex-direction: column;1188  gap: 6px;1189}11901191.peach-settings-stack--tight {1192  gap: 4px;1193}11941195.peach-settings-stack--spacious {1196  gap: 8px;1197}11981199.peach-settings-input {1200  width: 100%;1201  box-sizing: border-box;1202  padding: 8px 10px;1203  background: rgba(0, 0, 0, 0.22);1204  border: 1px solid transparent;1205  border-radius: 6px;1206  color: var(--peach-t0);1207  font-family: var(--font-ui);1208  font-size: 12px;1209  outline: none;1210  transition: border-color 120ms ease, background 120ms ease;1211}12121213.peach-settings-input:focus {1214  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);1215  background: rgba(0, 0, 0, 0.28);1216}12171218.peach-settings-input[type="password"] {1219  font-family: var(--font-mono);1220  letter-spacing: 0.04em;1221}12221223.peach-hidden-file-input {1224  display: none;1225}12261227.peach-checkbox-note {1228  display: flex;1229  align-items: flex-start;1230  gap: 8px;1231  font-size: 11px;1232  color: var(--peach-t1);1233  cursor: pointer;1234  margin: 12px 0;1235}12361237.peach-checkbox-note input {1238  margin-top: 1px;1239}12401241.peach-danger-notice {1242  background: rgba(220, 80, 60, 0.08);1243  border: 1px solid rgba(220, 80, 60, 0.2);1244  border-radius: 6px;1245  padding: 9px 11px;1246  font-size: 11px;1247  color: var(--peach-t1);1248  line-height: 1.5;1249}12501251.peach-info-notice {1252  font-size: 11px;1253  color: var(--peach-t1);1254  line-height: 1.5;1255  background: var(--surface-card);1256  border: 1px solid var(--peach-t3);1257  border-radius: 6px;1258  padding: 8px 10px;1259}12601261.peach-info-notice--warn {1262  border-color: rgba(220, 38, 38, 0.4);1263  background: rgba(220, 38, 38, 0.06);1264  color: rgba(220, 38, 38, 0.92);1265  margin-bottom: 8px;1266}12671268.peach-strength-row {1269  display: flex;1270  align-items: center;1271  gap: 8px;1272  margin-bottom: 10px;1273}12741275.peach-strength-track {1276  flex: 1;1277  height: 4px;1278  background: var(--peach-s2);1279  border-radius: 2px;1280  overflow: hidden;1281}12821283.peach-strength-fill {1284  height: 100%;1285  border-radius: 2px;1286  transition: width 120ms ease, background 120ms ease;1287}12881289/* ── Type selector tabs ── */1290.peach-type-tabs {1291  display: flex;1292  gap: 0;1293  background: var(--peach-t4);1294  border-radius: 8px;1295  padding: 3px;1296}12971298.peach-type-tab {1299  flex: 1;1300  display: flex;1301  align-items: center;1302  justify-content: center;1303  gap: 6px;1304  padding: 6px 10px;1305  border-radius: 6px;1306  border: none;1307  background: transparent;1308  cursor: pointer;1309  font-family: Inter, system-ui, sans-serif;1310  font-size: 11px;1311  font-weight: 400;1312  letter-spacing: 0.04em;1313  color: var(--peach-t1);1314  transition: background 150ms ease, color 150ms ease;1315}13161317.peach-type-tab.is-active {1318  background: var(--peach-s2);1319  color: var(--peach-t0);1320  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);1321}13221323.peach-type-tab:not(.is-active):hover {1324  color: var(--peach-t0);1325}13261327.peach-type-tab svg {1328  opacity: 0.7;1329  flex-shrink: 0;1330}13311332.peach-type-tab.is-active svg {1333  opacity: 1;1334}13351336/* ── List view ───────────────────────────────────────────────────────── */1337.peach-list-top {1338  padding: 0 10px;1339  min-height: 46px;1340  display: flex;1341  align-items: center;1342  gap: 6px;1343  border-bottom: 1px solid var(--peach-t3);1344  flex-shrink: 0;1345  background: var(--peach-s1);1346}1347.peach-vault-list {1348  flex: 1;1349  overflow-y: auto;1350  scrollbar-width: none;1351}1352.peach-vault-list::-webkit-scrollbar { display: none; }13531354/* Scrollbar — vault list */1355.peach-vault-list {1356  scrollbar-width: thin;1357  scrollbar-color: var(--peach-t3) transparent;1358}13591360.peach-vault-list::-webkit-scrollbar {1361  width: 3px;1362}13631364.peach-vault-list::-webkit-scrollbar-thumb {1365  background: var(--peach-t3);1366  border-radius: 2px;1367}13681369.peach-entry-row {1370  width: 100%;1371  display: flex;1372  align-items: center;1373  gap: 10px;1374  padding: 9px 16px;1375  background: transparent;1376  border: none;1377  border-bottom: 1px solid var(--peach-t3);1378  cursor: pointer;1379  color: inherit;1380  text-align: left;1381  transition: background 80ms ease;1382}1383.peach-entry-row:hover { background: rgba(240,232,216,0.03); }1384.peach-entry-row:last-child { border-bottom: none; }1385.peach-entry-row.is-active {1386  box-shadow: inset 2px 0 0 var(--peach-accent);1387  background: rgba(240,232,216,0.03);1388}1389.peach-entry-row:focus-visible {1390  outline: none;1391  box-shadow: 0 0 0 1px var(--peach-border-accent);1392  background: rgba(240,232,216,0.03);1393}1394.peach-entry-row-icon {1395  width: 26px; height: 26px;1396  border-radius: 7px;1397  border: 1px solid var(--peach-t3);1398  display: flex; align-items: center; justify-content: center;1399  color: var(--peach-t2);1400  flex-shrink: 0;1401}1402.peach-entry-row-icon.is-breach {1403  border-color: rgba(220,80,60,0.3);1404  color: rgba(220,80,60,0.7);1405}14061407/* Title-initials chip used as the favicon fallback for login entries whose1408 * real favicon hasn't been cached by the browser yet (freshly-imported,1409 * never-visited domains). Background colour is hashed from the title so1410 * the same entry always shows the same chip. The chip fits the same1411 * 26×26 row icon slot the favicon would take. */1412.peach-favicon-initials {1413  display: inline-flex;1414  align-items: center;1415  justify-content: center;1416  width: 100%;1417  height: 100%;1418  border-radius: 4px;1419  font-family: "IBM Plex Mono", monospace;1420  font-size: 9px;1421  font-weight: 600;1422  letter-spacing: 0.04em;1423  color: rgba(240, 232, 216, 0.92);1424  text-transform: uppercase;1425  user-select: none;1426}1427.peach-entry-row-info { flex: 1; min-width: 0; }1428.peach-entry-row-name {1429  display: block;1430  font-family: var(--font-display);1431  font-size: 17px;1432  font-style: italic;1433  font-weight: 400;1434  color: var(--peach-t0);1435  line-height: 1.2;1436  white-space: nowrap;1437  overflow: hidden;1438  text-overflow: ellipsis;1439}1440.peach-entry-row-meta {1441  display: block;1442  font-family: "IBM Plex Mono", monospace;1443  font-size: 9px;1444  color: var(--peach-t2);1445  margin-top: 1px;1446  letter-spacing: 0.05em;1447}1448.peach-entry-row-dot {1449  width: 5px; height: 5px;1450  border-radius: 50%;1451  background: rgba(220,80,60,0.7);1452  flex-shrink: 0;1453}1454.peach-new-entry-row {1455  display: flex;1456  align-items: center;1457  justify-content: center;1458  gap: 6px;1459  width: 100%;1460  padding: 11px;1461  background: transparent;1462  border: none;1463  border-top: 1px solid var(--peach-t3);1464  color: var(--peach-t2);1465  font-family: "IBM Plex Mono", monospace;1466  font-size: 9px;1467  text-transform: uppercase;1468  letter-spacing: 0.14em;1469  cursor: pointer;1470  flex-shrink: 0;1471  transition: color 120ms ease, background 120ms ease;1472}1473.peach-new-entry-row:hover { color: var(--peach-t0); background: rgba(240,232,216,0.02); }14741475/* ── Multi-select mode ─────────────────────────────────────────────── */14761477/* Select-mode trigger button in sort bar — same shape as trash btn */1478.peach-sort-select-btn {1479  display: flex;1480  align-items: center;1481  justify-content: center;1482  padding: 3px 5px;1483  background: transparent;1484  border: none;1485  cursor: pointer;1486  color: var(--peach-t2);1487  border-radius: 4px;1488  transition: color 140ms ease, background 140ms ease;1489}1490.peach-sort-select-btn:hover {1491  color: var(--peach-t1);1492  background: var(--peach-t3);1493}14941495/* Sort bar in select mode */1496.peach-select-cancel-btn {1497  background: transparent;1498  border: none;1499  padding: 0 4px;1500  cursor: pointer;1501  font-family: "IBM Plex Mono", monospace;1502  font-size: 9px;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-cancel-btn:hover { color: var(--peach-t0); }15101511.peach-select-count-label {1512  flex: 1;1513  text-align: center;1514  font-family: "IBM Plex Mono", monospace;1515  font-size: 9px;1516  letter-spacing: 0.14em;1517  text-transform: uppercase;1518  color: var(--peach-t1);1519}15201521.peach-select-all-btn {1522  background: transparent;1523  border: none;1524  padding: 0 4px;1525  cursor: pointer;1526  font-family: "IBM Plex Mono", monospace;1527  font-size: 9px;1528  letter-spacing: 0.12em;1529  text-transform: uppercase;1530  color: var(--peach-t2);1531  transition: color 140ms ease;1532  flex-shrink: 0;1533}1534.peach-select-all-btn:hover { color: var(--peach-accent); }15351536/* List in select mode */1537.peach-vault-list.is-selecting .peach-entry-row {1538  cursor: default;1539}1540.peach-vault-list.is-selecting .peach-entry-row:hover {1541  background: rgba(240,232,216,0.02);1542}1543.peach-vault-list.is-selecting .peach-entry-row.is-selected {1544  background: color-mix(in srgb, var(--peach-accent) 6%, transparent);1545}1546.peach-vault-list.is-selecting .peach-entry-row.is-selected:hover {1547  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1548}15491550/* Select indicator circles in icon slot */1551.peach-entry-row-icon.is-select-icon {1552  color: var(--peach-t2);1553}1554.peach-entry-row.is-selected .peach-entry-row-icon.is-select-icon {1555  color: var(--peach-accent);1556}15571558/* Delete action bar at bottom (replaces new-entry row) */1559.peach-select-action-bar {1560  display: flex;1561  align-items: center;1562  justify-content: center;1563  gap: 7px;1564  width: 100%;1565  padding: 11px;1566  background: transparent;1567  border: none;1568  border-top: 1px solid var(--peach-t3);1569  color: var(--peach-t1);1570  font-family: "IBM Plex Mono", monospace;1571  font-size: 9px;1572  text-transform: uppercase;1573  letter-spacing: 0.14em;1574  cursor: pointer;1575  flex-shrink: 0;1576  transition: color 120ms ease, background 120ms ease;1577}1578.peach-select-action-bar:not(:disabled):hover {1579  color: var(--peach-t0);1580  background: rgba(220,80,60,0.06);1581}1582.peach-select-action-bar:not(:disabled):hover svg {1583  stroke: rgba(220,80,60,0.8);1584}1585.peach-select-action-bar:disabled,1586.peach-select-action-bar.is-empty {1587  color: var(--peach-t2);1588  cursor: default;1589  opacity: 0.5;1590}1591.peach-search-counter-list {1592  white-space: nowrap;1593  flex-shrink: 0;1594}1595.peach-list-empty {1596  min-height: 180px;1597  display: grid;1598  place-items: center;1599  color: var(--peach-t2);1600  font-family: "IBM Plex Mono", monospace;1601  font-size: 11px;1602}16031604/* ── Settings view ───────────────────────────────────────────────────── */1605.peach-settings-body {1606  flex: 1;1607  overflow-y: auto;1608  min-height: 0;1609  display: flex;1610  flex-direction: column;1611  padding: 2px 0 10px;1612}1613.peach-settings-group {1614  margin: 4px 10px;1615  padding: 9px 14px 11px;1616  border-radius: 12px;1617  border: 1px solid rgba(255, 255, 255, 0.07);1618  background: rgba(26, 20, 16, 0.60);1619  backdrop-filter: blur(10px) saturate(1.3);1620  -webkit-backdrop-filter: blur(10px) saturate(1.3);1621}16221623.peach-settings-group + .peach-settings-group {1624  margin-top: 6px;1625}16261627@supports not (backdrop-filter: blur(1px)) {1628  .peach-settings-group {1629    background: rgba(26, 20, 16, 0.90);1630    border-color: rgba(255, 255, 255, 0.09);1631    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 4px 20px rgba(0, 0, 0, 0.35);1632  }1633}16341635.light .peach-settings-group,1636[data-theme="light"] .peach-settings-group {1637  background: rgba(253, 248, 244, 0.68);1638  border-color: rgba(0, 0, 0, 0.07);1639  backdrop-filter: blur(10px) saturate(1.2);1640  -webkit-backdrop-filter: blur(10px) saturate(1.2);1641}16421643@supports not (backdrop-filter: blur(1px)) {1644  .light .peach-settings-group,1645  [data-theme="light"] .peach-settings-group {1646    background: rgba(253, 248, 244, 0.95);1647    border-color: rgba(0, 0, 0, 0.09);1648  }1649}1650.peach-export-intro {1651  padding-bottom: 8px;1652}1653.peach-export-card {1654  display: grid;1655  gap: 10px;1656}1657.peach-rune-canvas {1658  border-radius: 8px;1659  background: rgba(0, 0, 0, 0.22);1660  flex: 1;1661  align-self: center;1662}1663.peach-script-input {1664  font-family: "PeachScript", monospace;1665  font-size: 11px;1666  line-height: 1.9;1667  letter-spacing: 0.06em;1668  color: var(--peach-t0);1669  background: rgba(0, 0, 0, 0.22);1670  border: none;1671  border-radius: 6px;1672  padding: 12px;1673  width: 100%;1674  min-height: 96px;1675  resize: vertical;1676  word-break: break-all;1677  scrollbar-width: none;1678  -ms-overflow-style: none;1679}16801681.peach-script-input::-webkit-scrollbar { display: none; }1682.peach-qr-canvas-wrap {1683  display: flex;1684  justify-content: center;1685  padding: 12px 0 6px;1686}1687.peach-qr-canvas-wrap canvas {1688  display: block;1689  background: #ffffff;1690  border-radius: 6px;1691  max-width: 100%;1692  height: auto;1693}1694.peach-csv-warning {1695  background: color-mix(in srgb, var(--peach-breach) 14%, transparent);1696  border: 1px solid color-mix(in srgb, var(--peach-breach) 40%, transparent);1697  color: var(--peach-t0);1698  border-radius: 6px;1699  padding: 10px 12px;1700  margin-bottom: 8px;1701  font-size: 12px;1702  line-height: 1.45;1703}1704.peach-export-card--primary {1705  background:1706    linear-gradient(180deg, color-mix(in srgb, var(--peach-accent) 8%, transparent), color-mix(in srgb, var(--peach-accent) 2%, transparent));1707}17081709/* Export menu — distribute the three format cards across the popup. */1710.peach-export-menu {1711  display: flex;1712  flex-direction: column;1713  flex: 1;1714  min-height: 0;1715}1716.peach-export-menu .peach-settings-group {1717  flex: 1;1718  display: flex;1719  flex-direction: column;1720  justify-content: center;1721  gap: 10px;1722}17231724/* Result view — the script-string fills the remaining vertical surface. */1725.peach-export-result-group {1726  flex: 1;1727  display: flex;1728  flex-direction: column;1729  min-height: 0;1730  border-bottom: none;1731}1732.peach-export-result-group .peach-export-card {1733  flex: 1;1734  min-height: 0;1735  display: flex;1736  flex-direction: column;1737  gap: 10px;1738}1739.peach-export-result-group .peach-export-card-copy {1740  flex-shrink: 0;1741}1742.peach-export-result-group .peach-settings-label {1743  flex-shrink: 0;1744}1745.peach-export-result-group button {1746  flex-shrink: 0;1747}1748.peach-export-card-head {1749  display: flex;1750  align-items: center;1751  justify-content: space-between;1752  gap: 10px;1753}1754.peach-export-card-copy {1755  margin: 0;1756  font-size: 12px;1757  line-height: 1.55;1758  color: var(--peach-t1);1759}1760.peach-export-note {1761  margin: 0;1762  font-size: 10px;1763  line-height: 1.5;1764  color: var(--peach-t2);1765}1766.peach-export-pill {1767  display: inline-flex;1768  align-items: center;1769  padding: 4px 8px;1770  border-radius: 999px;1771  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);1772  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);1773  color: var(--peach-accent);1774  font-family: "IBM Plex Mono", monospace;1775  font-size: 8px;1776  letter-spacing: 0.12em;1777  text-transform: uppercase;1778  white-space: nowrap;1779}1780.peach-export-pill--danger {1781  border-color: rgba(220,80,60,0.22);1782  background: rgba(220,80,60,0.08);1783  color: var(--peach-breach);1784}1785.peach-export-password-stack {1786  gap: 8px;1787}1788.peach-settings-label {1789  margin: 0 0 6px;1790  font-family: "IBM Plex Mono", monospace;1791  font-size: 8px;1792  text-transform: uppercase;1793  letter-spacing: 0.18em;1794  color: var(--peach-t2);1795}1796.peach-settings-row {1797  display: flex;1798  align-items: center;1799  justify-content: space-between;1800  gap: 12px;1801  min-height: 34px;1802  padding: 6px 0;1803  font-size: 13px;1804  color: var(--peach-t1);1805}1806.peach-settings-row--meta { color: var(--peach-t2); font-size: 12px; }1807.peach-settings-value {1808  font-family: "IBM Plex Mono", monospace;1809  font-size: 10px;1810  color: var(--peach-t2);1811}18121813.peach-settings-value--status {1814  display: flex;1815  align-items: center;1816  gap: 6px;1817}18181819.peach-settings-link {1820  font-family: "IBM Plex Mono", monospace;1821  font-size: 10px;1822  color: var(--peach-accent);1823  text-decoration: none;1824  cursor: pointer;1825}1826.peach-settings-link:hover {1827  text-decoration: underline;1828}18291830.peach-settings-row--stack {1831  flex-direction: column;1832  align-items: stretch;1833  gap: 6px;1834}18351836.peach-settings-row--top {1837  align-items: flex-start;1838}18391840.peach-settings-row-main {1841  display: flex;1842  flex-direction: column;1843  gap: 4px;1844  flex: 1;1845}1846.peach-toggle {1847  width: 28px; height: 16px;1848  border-radius: 999px;1849  background: var(--peach-t3);1850  border: 1px solid var(--peach-t3);1851  display: flex; align-items: center; justify-content: flex-start; padding: 2px;1852  flex-shrink: 0;1853  transition: background 200ms ease, border-color 200ms ease;1854  cursor: pointer;1855}1856.peach-toggle.is-on {1857  background: color-mix(in srgb, var(--peach-accent) 22%, transparent);1858  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);1859}1860.peach-toggle-knob {1861  width: 10px; height: 10px;1862  border-radius: 50%;1863  background: var(--peach-t2);1864  flex-shrink: 0;1865  transform: translateX(0px);1866  transition: background 200ms ease, transform 200ms var(--peach-curve-settle);1867}1868.peach-toggle.is-on .peach-toggle-knob {1869  background: var(--peach-accent);1870  transform: translateX(12px);1871}1872.peach-settings-footer {1873  display: flex;1874  align-items: center;1875  gap: 8px;1876  margin-top: auto;1877  padding: 14px 16px 8px;1878  font-family: "IBM Plex Mono", monospace;1879  font-size: 9px;1880  color: var(--peach-t2);1881}18821883/* ── Settings home navigation ──────────────────────────────────────────── */1884.peach-settings-nav-label {1885  margin: 0 0 2px;1886  padding: 12px 16px 4px;1887  font-family: "IBM Plex Mono", monospace;1888  font-size: 8px;1889  text-transform: uppercase;1890  letter-spacing: 0.18em;1891  color: var(--peach-t2);1892}18931894.peach-settings-cat-row {1895  display: flex;1896  align-items: center;1897  gap: 10px;1898  width: 100%;1899  padding: 9px 16px;1900  background: none;1901  border: none;1902  border-bottom: 1px solid var(--peach-t3);1903  cursor: pointer;1904  text-align: left;1905  color: inherit;1906  transition: background var(--peach-dur-80) ease;1907}1908.peach-settings-cat-row:hover {1909  background: var(--peach-t3);1910}1911.peach-settings-cat-row:last-child {1912  border-bottom: none;1913}19141915.peach-settings-cat-icon {1916  width: 28px;1917  height: 28px;1918  border-radius: 7px;1919  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);1920  color: var(--peach-accent);1921  display: flex;1922  align-items: center;1923  justify-content: center;1924  flex-shrink: 0;1925}1926/* Light theme: peach-on-cream is too low-contrast — both colors are warm.1927   Darken the icon stroke to ink and bump the bg tint so the icon reads1928   sharply while the cell still feels accent-tinted. */1929.light .peach-settings-cat-icon {1930  background: color-mix(in srgb, var(--peach-accent) 18%, transparent);1931  color: color-mix(in srgb, var(--peach-accent) 50%, var(--peach-t0));1932}19331934.peach-settings-cat-content {1935  flex: 1;1936  display: flex;1937  flex-direction: column;1938  gap: 2px;1939  min-width: 0;1940}19411942.peach-settings-cat-name {1943  font-size: 13px;1944  font-weight: 450;1945  color: var(--peach-t0);1946  line-height: 1.2;1947}19481949.peach-settings-cat-desc {1950  font-size: 10px;1951  color: var(--peach-t2);1952  line-height: 1.3;1953  white-space: nowrap;1954  overflow: hidden;1955  text-overflow: ellipsis;1956}19571958.peach-settings-cat-chevron {1959  color: var(--peach-t2);1960  flex-shrink: 0;1961  opacity: 0.5;1962}19631964/* ── Settings sub-view section labels ──────────────────────────────────── */1965.peach-settings-sub-label {1966  margin: 12px 0 4px;1967  font-family: "IBM Plex Mono", monospace;1968  font-size: 8px;1969  text-transform: uppercase;1970  letter-spacing: 0.18em;1971  color: var(--peach-t2);1972}1973.peach-settings-sub-label:first-child {1974  margin-top: 4px;1975}19761977/* ── Feedback form ──────────────────────────────────────────────────────── */1978.peach-feedback-group {1979  flex: 1;1980  display: flex;1981  flex-direction: column;1982  border-bottom: none;1983}19841985.peach-feedback-intro {1986  margin: 4px 0 14px;1987  font-size: 12px;1988  line-height: 1.55;1989  color: var(--peach-t1);1990}19911992.peach-feedback-chips {1993  display: flex;1994  flex-wrap: wrap;1995  gap: 6px;1996  margin-bottom: 14px;1997}19981999.peach-feedback-chip {2000  padding: 4px 10px;2001  border-radius: 999px;2002  border: 1px solid var(--peach-t3);2003  background: none;2004  color: var(--peach-t2);2005  font-size: 11px;2006  font-family: var(--font-ui);2007  cursor: pointer;2008  transition: border-color var(--peach-dur-80) ease, color var(--peach-dur-80) ease,2009    background var(--peach-dur-80) ease;2010}2011.peach-feedback-chip:hover {2012  border-color: var(--peach-t2);2013  color: var(--peach-t1);2014}2015.peach-feedback-chip.is-active {2016  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);2017  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2018  color: var(--peach-accent);2019}20202021.peach-feedback-textarea {2022  flex: 1;2023  width: 100%;2024  min-height: 120px;2025  box-sizing: border-box;2026  background: rgba(0, 0, 0, 0.22);2027  border: 1px solid transparent;2028  border-radius: 6px;2029  color: var(--peach-t0);2030  font-size: 12px;2031  font-family: var(--font-ui);2032  line-height: 1.5;2033  padding: 8px 10px;2034  resize: none;2035  outline: none;2036  transition: border-color var(--peach-dur-150) ease, background var(--peach-dur-150) ease;2037}2038.peach-feedback-textarea:focus {2039  border-color: color-mix(in srgb, var(--peach-accent) 55%, transparent);2040  background: rgba(0, 0, 0, 0.28);2041}2042.peach-feedback-textarea:focus {2043  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);2044}2045.peach-feedback-textarea::placeholder {2046  color: var(--peach-t2);2047}20482049.peach-feedback-meta {2050  margin: 6px 0 0;2051  font-size: 10px;2052  color: var(--peach-t2);2053  font-family: "IBM Plex Mono", monospace;2054}20552056.peach-feedback-result {2057  margin: 8px 0 0;2058  font-size: 11px;2059  font-family: "IBM Plex Mono", monospace;2060}2061.peach-feedback-result--ok { color: var(--peach-sync-ok); }2062.peach-feedback-result--err { color: var(--peach-breach); }20632064.peach-feedback-submit {2065  width: 100%;2066  margin-top: 12px;2067  justify-content: center;2068}20692070.peach-feedback-anon {2071  margin: 8px 0 0;2072  font-size: 10px;2073  color: var(--peach-t2);2074  text-align: center;2075}20762077.peach-passkey-badge {2078  margin-left: 8px;2079  font-size: 10px;2080  letter-spacing: 0.06em;2081  text-transform: uppercase;2082  color: var(--peach-t2);2083  font-family: var(--font-ui);2084  vertical-align: middle;2085}20862087.peach-passkey-delete-btn {2088  color: var(--peach-breach);2089  border-color: rgba(229, 85, 85, 0.25);2090}20912092.peach-passkey-delete-confirm {2093  display: flex;2094  align-items: center;2095  gap: 8px;2096  padding: 8px 10px;2097  background: rgba(229, 85, 85, 0.06);2098  border: 1px solid rgba(229, 85, 85, 0.2);2099  border-radius: 6px;2100}21012102.peach-passkey-delete-confirm-copy {2103  flex: 1;2104  font-size: 11px;2105  color: var(--peach-t1);2106}21072108.peach-passkey-delete-btn--confirm {2109  color: var(--peach-breach);2110  border-color: rgba(229, 85, 85, 0.4);2111}21122113.peach-passkey-activity {2114  flex-direction: column;2115  align-items: flex-start;2116  gap: 4px;2117}21182119.peach-passkey-meta {2120  font-size: 11px;2121  color: var(--peach-t2);2122}21232124.peach-passkey-actions {2125  position: relative;2126  z-index: 1;2127  margin-top: 14px;2128  display: flex;2129  flex-direction: column;2130  gap: 8px;2131}21322133.peach-passkey-approval {2134  display: flex;2135  flex-direction: column;2136  align-items: center;2137  padding: 22px 20px 18px;2138  gap: 10px;2139  text-align: center;2140}21412142.peach-passkey-approval-icon {2143  width: 46px;2144  height: 46px;2145  border-radius: 12px;2146  background: var(--peach-s2);2147  border: 1px solid var(--peach-t3);2148  display: flex;2149  align-items: center;2150  justify-content: center;2151  flex-shrink: 0;2152  color: var(--peach-accent);2153}21542155.peach-passkey-approval-icon img,2156.peach-passkey-approval-icon svg {2157  width: 28px;2158  height: 28px;2159  border-radius: 6px;2160}21612162.peach-passkey-approval-rp {2163  font-family: var(--font-ui);2164  font-size: 12px;2165  color: var(--peach-t2);2166  letter-spacing: 0.03em;2167}21682169.peach-passkey-approval-action {2170  font-family: var(--font-display);2171  font-style: italic;2172  font-weight: 300;2173  font-size: 22px;2174  color: var(--peach-t0);2175  line-height: 1.1;2176  margin: 2px 0;2177}21782179.peach-passkey-approval-user {2180  font-family: var(--font-mono);2181  font-size: 11px;2182  color: var(--peach-t1);2183  background: var(--peach-s2);2184  border: 1px solid var(--peach-t3);2185  border-radius: 4px;2186  padding: 3px 8px;2187}21882189.peach-passkey-approval-notice {2190  font-size: 10px;2191  color: var(--peach-t2);2192  line-height: 1.5;2193  max-width: 220px;2194}21952196.peach-passkey-approval-actions {2197  display: flex;2198  gap: 8px;2199  width: 100%;2200  margin-top: 6px;2201}22022203.peach-passkey-approval-actions .peach-btn {2204  flex: 1;2205}22062207/* ── Inline generator drawer ── */2208.peach-generator-drawer {2209  display: grid;2210  grid-template-rows: 0fr;2211  transition: grid-template-rows 320ms var(--peach-curve-arrival);2212  overflow: hidden;2213}2214.peach-generator-drawer.is-open {2215  grid-template-rows: 1fr;2216}2217.peach-generator-drawer-inner {2218  min-height: 0;2219  overflow: hidden;2220}2221.peach-generator-drawer-content {2222  border-top: 1px solid var(--peach-t3);2223  padding: 8px 0 4px;2224  display: flex;2225  flex-direction: column;2226  gap: 8px;2227}22282229/* ── Compact generator (inside entry edit) ── */2230.peach-generator-drawer-content--compact {2231  border-top: 1px solid var(--peach-t3);2232  padding: 8px 0 2px;2233  gap: 7px;2234}2235.peach-pwgen-compact-display-row {2236  display: flex;2237  align-items: center;2238  gap: 6px;2239}2240.peach-pwgen-compact-output {2241  flex: 1;2242  min-width: 0;2243  font-family: "IBM Plex Mono", monospace;2244  font-size: 11px;2245  font-weight: 400;2246  letter-spacing: 0.04em;2247  color: var(--peach-t0);2248  background: rgba(240, 232, 216, 0.04);2249  border: 1px solid var(--peach-t3);2250  border-radius: 5px;2251  padding: 5px 8px;2252  word-break: break-all;2253  line-height: 1.5;2254}2255.peach-pwgen-compact-controls {2256  display: flex;2257  align-items: center;2258  gap: 6px;2259}2260.peach-pwgen-compact-slider {2261  flex: 1;2262  min-width: 0;2263  height: 2px !important;2264}2265.peach-pwgen-compact-controls .peach-pwgen-len-num {2266  flex-shrink: 0;2267  min-width: 18px;2268  text-align: right;2269}2270.peach-pwgen-compact-pills {2271  display: flex;2272  gap: 3px;2273  flex-shrink: 0;2274}2275.peach-pwgen-compact-pills .peach-pwgen-pill {2276  padding: 2px 7px;2277  font-size: 8px;2278}2279.peach-pwgen-compact-use {2280  flex-shrink: 0;2281  font-size: 10px !important;2282  padding: 3px 9px !important;2283  min-height: 22px !important;2284  border-radius: 5px !important;2285}22862287/* ── Password edit row (input + eye toggle side-by-side) ── */2288.peach-password-edit-row {2289  display: flex;2290  align-items: center;2291  gap: 6px;2292}2293.peach-password-edit-row .peach-inline-input {2294  flex: 1;2295  min-width: 0;2296}22972298/* ── Generate toggle link ── */2299.peach-generate-toggle-link {2300  display: inline-flex;2301  align-items: center;2302  gap: 5px;2303  background: none;2304  border: none;2305  padding: 0;2306  cursor: pointer;2307  font-family: "IBM Plex Mono", monospace;2308  font-size: 10px;2309  color: var(--peach-t2);2310  letter-spacing: 0.04em;2311  transition: color 120ms ease;2312  align-self: flex-start;2313}2314.peach-generate-toggle-link:hover {2315  color: var(--peach-accent);2316}23172318/* ── New entry body (Add.tsx — mirrors .peach-stage) ─────────────────── */2319.peach-entry-body {2320  flex: 1;2321  overflow-y: auto;2322  overflow-x: hidden;2323  scrollbar-width: none;2324  -ms-overflow-style: none;2325  overscroll-behavior: contain;2326  display: grid;2327  gap: 10px;2328  align-content: start;2329  padding: 10px 20px 14px;2330  min-width: 0;2331  min-height: 0;2332}2333.peach-entry-body::-webkit-scrollbar { display: none; }23342335/* Type-toggle pills + inline note toolbar */2336.peach-new-type-row {2337  display: flex;2338  align-items: center;2339  gap: 6px;2340  margin-bottom: 2px;2341}2342.peach-new-type-btn {2343  background: transparent;2344  border: 1px solid var(--peach-t3);2345  border-radius: 12px;2346  padding: 3px 10px;2347  font-family: "IBM Plex Mono", monospace;2348  font-size: 9px;2349  letter-spacing: 0.12em;2350  text-transform: uppercase;2351  color: var(--peach-t2);2352  cursor: pointer;2353  transition: color 140ms ease, border-color 140ms ease, background 140ms ease;2354}2355.peach-new-type-btn.is-active {2356  color: var(--peach-t0);2357  border-color: var(--peach-accent);2358  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2359}2360.peach-new-type-btn:not(.is-active):hover {2361  color: var(--peach-t1);2362  border-color: var(--peach-t2);2363}23642365/* Editable title */2366.peach-new-title-wrap { margin: 0 0 2px; }2367.peach-new-title-input {2368  background: transparent;2369  border: none;2370  outline: none;2371  width: 100%;2372  color: var(--peach-t0);2373  font-family: var(--font-display);2374  font-style: italic;2375  font-weight: 400;2376  font-size: 40px;2377  line-height: 0.95;2378  caret-color: var(--peach-accent);2379}2380.peach-new-title-input::placeholder { color: var(--peach-t2); }23812382/* Editable domain field */2383.peach-domain-value--edit {2384  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2385  font-size: 10px;2386  font-style: italic;2387  letter-spacing: 0.12em;2388  color: var(--peach-t1);2389  background: transparent;2390  border: none;2391  border-bottom: 1px solid var(--peach-t3);2392  outline: none;2393  width: 100%;2394  padding: 2px 0;2395  caret-color: var(--peach-accent);2396  transition: border-color 140ms ease, color 140ms ease;2397}2398.peach-domain-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2399.peach-domain-value--edit:focus {2400  border-bottom-color: rgba(240, 232, 216, 0.28);2401  color: var(--peach-t0);2402}24032404/* Editable field values (username, password, totp) */2405.peach-field-value--edit {2406  font-family: "IBM Plex Mono", "SFMono-Regular", Menlo, monospace;2407  font-size: 13px;2408  color: var(--peach-t0);2409  background: transparent;2410  border: none;2411  border-bottom: 1px solid var(--peach-t3);2412  outline: none;2413  flex: 1;2414  min-width: 0;2415  padding: 3px 0;2416  caret-color: var(--peach-accent);2417  transition: border-color 140ms ease, color 140ms ease;2418}2419.peach-field-value--edit::placeholder { color: var(--peach-t2); opacity: 0.6; }2420.peach-field-value--edit[type="password"] { letter-spacing: 0.12em; }2421.peach-field-value--edit:focus {2422  border-bottom-color: rgba(240, 232, 216, 0.28);2423  color: var(--peach-t0);2424}24252426/* "+ add optional field" links */2427.peach-entry-add-links {2428  display: flex;2429  gap: 12px;2430  flex-wrap: wrap;2431  margin-top: -2px;2432}2433.peach-add-field-link {2434  background: transparent;2435  border: none;2436  padding: 0;2437  cursor: pointer;2438  font-family: "IBM Plex Mono", monospace;2439  font-size: 9px;2440  letter-spacing: 0.1em;2441  text-transform: uppercase;2442  color: var(--peach-t2);2443  transition: color 140ms ease;2444}2445.peach-add-field-link:hover { color: var(--peach-accent); }24462447/* ── New entry form (legacy classes) ────────────────────────────────── */2448.peach-new-body {2449  flex: 1;2450  overflow-y: auto;2451  padding: 10px 20px 14px;2452}2453.peach-new-name-input {2454  background: transparent;2455  border: none;2456  outline: none;2457  width: 100%;2458  color: var(--peach-t0);2459  font-family: var(--font-display);2460  font-style: italic;2461  font-weight: 400;2462  font-size: 40px;2463  line-height: 0.95;2464  caret-color: var(--peach-accent);2465}2466.peach-new-name-input::placeholder { color: var(--peach-t2); }2467.peach-new-field-input {2468  background: transparent;2469  border: none;2470  outline: none;2471  flex: 1;2472  min-width: 0;2473  caret-color: var(--peach-accent);2474}2475.peach-new-field-input::placeholder { color: var(--peach-t2); opacity: 0.7; }24762477/* ── Canary card ── */2478.peach-canary-card {2479  border: 1px solid rgba(217, 160, 48, 0.2);2480  background: rgba(217, 160, 48, 0.03);2481  border-radius: 8px;2482  padding: 12px;2483}24842485.peach-canary-settings-header {2486  display: flex;2487  align-items: center;2488  justify-content: space-between;2489  cursor: pointer;2490  user-select: none;2491}24922493.peach-canary-card .peach-label {2494  color: rgba(217, 160, 48, 0.85);2495}24962497.peach-canary-card .peach-new-field-input {2498  border-color: rgba(217, 160, 48, 0.25);2499}25002501.peach-canary-card .peach-new-field-input:focus {2502  border-color: rgba(217, 160, 48, 0.5);2503}25042505.peach-canary-body {2506  margin-top: 12px;2507  display: flex;2508  flex-direction: column;2509  gap: 10px;2510}25112512.peach-canary-explainer {2513  display: flex;2514  gap: 10px;2515  padding: 10px 12px;2516  border-radius: 10px;2517  background: rgba(217, 160, 48, 0.06);2518  border: 1px solid rgba(217, 160, 48, 0.22);2519  margin-bottom: 4px;2520}25212522.peach-canary-explainer-icon {2523  font-size: 16px;2524  flex-shrink: 0;2525  line-height: 1.2;2526}25272528.peach-canary-explainer-title {2529  font-family: var(--font-ui);2530  font-size: 11px;2531  font-weight: 500;2532  color: rgba(217, 160, 48, 0.9);2533  margin: 0 0 3px;2534}25352536.peach-canary-explainer-copy {2537  font-family: var(--font-ui);2538  font-size: 10px;2539  color: var(--peach-t2);2540  line-height: 1.55;2541  margin: 0;2542}25432544.peach-canary-hint {2545  font-size: 10px;2546  color: var(--peach-t2);2547  font-family: Inter, system-ui, sans-serif;2548  line-height: 1.5;2549  margin-top: 4px;2550}25512552.peach-canary-actions-row {2553  display: flex;2554  align-items: center;2555  gap: 8px;2556}25572558.peach-canary-test-btn {2559  border-color: rgba(217, 160, 48, 0.3);2560  color: rgba(217, 160, 48, 0.85);2561}25622563.peach-canary-test-result {2564  font-size: 10px;2565  font-family: Inter, system-ui, sans-serif;2566}25672568.peach-canary-test-result.ok { color: rgba(100, 210, 100, 0.9); }2569.peach-canary-test-result.err { color: rgba(220, 80, 60, 0.9); }25702571.peach-canary-badge {2572  display: flex;2573  position: relative;2574  z-index: 1;2575  align-items: center;2576  gap: 5px;2577  padding: 4px 10px;2578  background: rgba(217, 160, 48, 0.12);2579  border: 1px solid rgba(217, 160, 48, 0.35);2580  border-radius: 6px;2581  margin-bottom: 6px;2582  width: fit-content;2583}25842585.peach-canary-badge-label {2586  font-size: 10px;2587  letter-spacing: 0.06em;2588  color: rgba(217, 160, 48, 0.9);2589  font-family: var(--font-ui);2590  text-transform: uppercase;2591}25922593.peach-canary-badge-icon {2594  font-size: 11px;2595}25962597.peach-canary-suppress-row {2598  display: flex;2599  align-items: center;2600  gap: 8px;2601  padding: 6px 10px;2602  background: rgba(217, 160, 48, 0.08);2603  border-radius: 6px;2604  margin-bottom: 8px;2605}26062607.peach-canary-suppress-label {2608  font-size: 11px;2609  color: rgba(217, 160, 48, 0.85);2610  cursor: pointer;2611  font-family: var(--font-ui);2612  letter-spacing: 0.04em;2613}26142615.peach-regen-panel {2616  position: relative;2617  z-index: 1;2618  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);2619  border: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);2620  border-radius: 8px;2621  padding: 12px;2622  margin-bottom: 8px;2623}26242625.peach-regen-panel-header {2626  display: flex;2627  align-items: center;2628  justify-content: space-between;2629  margin-bottom: 10px;2630}26312632.peach-regen-panel-title {2633  font-size: 11px;2634  font-weight: 600;2635  letter-spacing: 0.06em;2636  text-transform: uppercase;2637  color: color-mix(in srgb, var(--peach-accent) 90%, transparent);2638}26392640.peach-regen-output {2641  background: rgba(0, 0, 0, 0.2);2642  border-radius: 6px;2643  padding: 10px;2644  margin-bottom: 10px;2645  font-family: var(--font-mono);2646  font-size: 13px;2647  word-break: break-all;2648  color: var(--peach-t1);2649}26502651.peach-regen-actions {2652  display: flex;2653  gap: 6px;2654}26552656.peach-regen-actions--spaced {2657  margin-bottom: 8px;2658}26592660.peach-regen-action-grow {2661  flex: 1;2662}26632664.peach-regen-copy-btn {2665  padding: 0 8px;2666}26672668.peach-regen-success {2669  position: relative;2670  z-index: 1;2671  background: rgba(40, 180, 80, 0.1);2672  border: 1px solid rgba(40, 180, 80, 0.3);2673  border-radius: 8px;2674  padding: 10px 12px;2675  margin-bottom: 8px;2676  display: flex;2677  align-items: center;2678  gap: 8px;2679  font-size: 11px;2680  color: rgba(40, 180, 80, 0.9);2681}26822683/* ── Note editor overlay ── */2684.peach-note-editor {2685  position: absolute;2686  inset: 0;2687  z-index: 200;2688  display: flex;2689  flex-direction: column;2690  background:2691    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 7%, transparent) 0%, transparent 65%),2692    var(--peach-bg);2693  animation: overlay-in 180ms cubic-bezier(0.4, 0, 0.2, 1) both;2694}26952696.peach-note-editor-header {2697  display: flex;2698  align-items: center;2699  gap: 10px;2700  padding: 14px 16px 10px;2701  border-bottom: 1px solid var(--peach-t3);2702  flex-shrink: 0;2703}27042705.peach-note-editor-back {2706  background: transparent;2707  border: none;2708  cursor: pointer;2709  color: var(--peach-t2);2710  padding: 4px 6px;2711  border-radius: 6px;2712  display: flex;2713  align-items: center;2714  transition: color 120ms ease, background 120ms ease;2715  flex-shrink: 0;2716}2717.peach-note-editor-back:hover { color: var(--peach-t0); background: var(--peach-t4); }27182719.peach-note-editor-label {2720  flex: 1;2721  font-family: var(--font-display);2722  font-style: italic;2723  font-size: 15px;2724  color: var(--peach-t1);2725  letter-spacing: 0.02em;2726}27272728.peach-note-editor-save-btn {2729  background: transparent;2730  border: 1px solid color-mix(in srgb, var(--peach-accent) 40%, transparent);2731  border-radius: 8px;2732  color: var(--peach-accent);2733  font-family: "IBM Plex Mono", monospace;2734  font-size: 10px;2735  letter-spacing: 0.06em;2736  text-transform: uppercase;2737  padding: 3px 10px;2738  cursor: pointer;2739  transition: background 120ms ease, border-color 120ms ease;2740}2741.peach-note-editor-save-btn:hover:not(:disabled) {2742  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);2743  border-color: color-mix(in srgb, var(--peach-accent) 65%, transparent);2744}2745.peach-note-editor-save-btn:disabled { opacity: 0.4; cursor: not-allowed; }27462747.peach-note-toolbar {2748  display: flex;2749  align-items: center;2750  gap: 3px;2751  padding: 6px 14px 5px;2752  border-bottom: 1px solid var(--peach-t3);2753  flex-shrink: 0;2754}27552756.peach-note-tool-btn {2757  background: transparent;2758  border: 1px solid transparent;2759  border-radius: 5px;2760  color: var(--peach-t2);2761  font-family: "IBM Plex Mono", monospace;2762  font-size: 10px;2763  letter-spacing: 0.04em;2764  padding: 2px 8px;2765  cursor: pointer;2766  line-height: 1.6;2767  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;2768}2769.peach-note-tool-btn:hover {2770  background: var(--peach-t4);2771  color: var(--peach-t0);2772  border-color: var(--peach-t3);2773}27742775.peach-note-tool-icon {2776  padding: 3px 7px;2777  display: inline-flex;2778  align-items: center;2779  justify-content: center;2780}27812782.peach-note-tool-divider {2783  width: 1px;2784  height: 14px;2785  background: var(--peach-t3);2786  margin: 0 4px;2787  flex-shrink: 0;2788}27892790.peach-note-editor-body {2791  flex: 1;2792  overflow-y: auto;2793  padding: 16px 20px 20px;2794  outline: none;2795  font-family: var(--font-display);2796  font-size: 16px;2797  line-height: 1.75;2798  color: var(--peach-t0);2799  scrollbar-width: none;2800  word-break: break-word;2801}2802.peach-note-editor-body:empty::before {2803  content: "write your note…";2804  color: var(--peach-t3);2805  font-style: italic;2806  pointer-events: none;2807}28082809/* Inline variant (Add.tsx, Entry.tsx note) — toolbar hoisted to parent row */2810.peach-note-editor-inline {2811  display: flex;2812  flex-direction: column;2813  flex: 1;2814  min-height: 0;2815}2816.peach-note-editor-body--inline {2817  flex: 1;2818  min-height: 0;2819  font-size: 15px;2820  padding: 10px 20px 14px;2821}28222823/* Full-width toolbar row inside the body (Add.tsx note type).2824   Negative horizontal margins cancel body padding so the border spans edge-to-edge. */2825.peach-note-toolbar-body {2826  display: flex;2827  align-items: center;2828  gap: 3px;2829  padding: 5px 20px 4px;2830  margin: 2px -20px 0;2831  border-bottom: 1px solid var(--peach-t3);2832  flex-shrink: 0;2833}28342835/* Right-aligned inline toolbar sitting inside .peach-new-type-row (Add.tsx)2836   or .peach-entry-note-toolbar-row (Entry.tsx). Reuses .peach-note-tool-btn2837   and .peach-note-tool-divider button-level styles. */2838.peach-note-toolbar-inline {2839  display: flex;2840  align-items: center;2841  gap: 3px;2842  margin-left: auto;2843  padding-left: 10px;2844  border-left: 1px solid var(--peach-t3);2845  min-height: 22px;2846}28472848/* Entry.tsx toolbar row (no tabs, toolbar only) */2849.peach-entry-note-toolbar-row {2850  display: flex;2851  align-items: center;2852  margin: 4px 0 6px;2853  position: relative;2854  z-index: 1;2855}2856.peach-entry-note-toolbar-row .peach-note-toolbar-inline {2857  border-left: none;2858  padding-left: 0;2859  margin-left: 0;2860}28612862/* Note body — fills available vertical space in Add.tsx and Entry.tsx */2863.peach-note-body {2864  display: flex;2865  flex-direction: column;2866  flex: 1;2867  min-height: 0;2868  margin: 4px 0 0;2869}2870.peach-entry-body--new .peach-note-body {2871  margin: 8px -20px 0;2872}28732874/* Add.tsx body is a grid by default; swap to a flex column when a note is2875   active so the note body can stretch and pin the tags row to the bottom. */2876.peach-entry-body--new:has(.peach-note-body) {2877  display: flex;2878  flex-direction: column;2879}28802881/* Rich content element styles (editor + display) */2882.peach-note-editor-body h2,2883.peach-note-content h2 {2884  font-family: var(--font-display);2885  font-size: 20px;2886  font-weight: 600;2887  font-style: italic;2888  color: var(--peach-t0);2889  margin: 6px 0 2px;2890  line-height: 1.3;2891}2892.peach-note-editor-body ul,2893.peach-note-content ul {2894  padding-left: 18px;2895  margin: 3px 0;2896  list-style: disc;2897}2898.peach-note-editor-body ol,2899.peach-note-content ol {2900  padding-left: 18px;2901  margin: 3px 0;2902  list-style: decimal;2903}2904.peach-note-editor-body li,2905.peach-note-content li { margin: 2px 0; }2906.peach-note-editor-body hr,2907.peach-note-content hr {2908  border: none;2909  border-top: 1px solid var(--peach-t3);2910  margin: 10px 0;2911}29122913/* font size elements from execCommand */2914.peach-note-editor-body font[size="1"],2915.peach-note-content font[size="1"] { font-size: 11px; line-height: 1.6; }2916.peach-note-editor-body font[size="2"],2917.peach-note-content font[size="2"] { font-size: 13px; }2918.peach-note-editor-body font[size="3"],2919.peach-note-content font[size="3"] { font-size: 16px; }2920.peach-note-editor-body font[size="4"],2921.peach-note-content font[size="4"] { font-size: 20px; }2922.peach-note-editor-body font[size="5"],2923.peach-note-content font[size="5"] { font-size: 26px; line-height: 1.4; }29242925/* bold / italic inside the editor and note display */2926.peach-note-editor-body b, .peach-note-editor-body strong,2927.peach-note-content b, .peach-note-content strong { font-weight: 700; }2928.peach-note-editor-body em, .peach-note-editor-body i,2929.peach-note-content em, .peach-note-content i { font-style: italic; }29302931/* note display — rendered HTML, no pre-wrap */2932.peach-note-content {2933  overflow: auto;2934  max-height: 340px;2935  word-break: break-word;2936}29372938/* ── Note textarea ── */2939.peach-note-textarea {2940  width: 100%;2941  min-height: 180px;2942  max-height: 280px;2943  resize: vertical;2944  background: var(--peach-t4);2945  border: 1px solid var(--peach-t3);2946  border-radius: 8px;2947  padding: 10px 12px;2948  font-family: "IBM Plex Mono", monospace;2949  font-size: 12px;2950  line-height: 1.7;2951  color: var(--peach-t1);2952  outline: none;2953  transition: border-color 150ms ease;2954}29552956.peach-note-textarea:focus {2957  border-color: var(--peach-t2);2958}29592960.peach-note-char-count {2961  font-family: "IBM Plex Mono", monospace;2962  font-size: 9px;2963  color: var(--peach-t3);2964  text-align: right;2965  margin-top: 4px;2966  letter-spacing: 0.1em;2967}29682969/* ── Field input baseline ── */2970.peach-new-field-input {2971  width: 100%;2972  background: transparent;2973  border: none;2974  border-bottom: 1px solid var(--peach-t3);2975  padding: 4px 0;2976  color: var(--peach-t1);2977  font-family: "IBM Plex Mono", monospace;2978  font-size: 13px;2979  outline: none;2980  transition: border-color 150ms ease;2981}29822983.peach-new-field-input:focus {2984  border-bottom-color: var(--peach-t0);2985  color: var(--peach-t0);2986}29872988.peach-new-name-input {2989  width: 100%;2990  background: transparent;2991  border: none;2992  border-bottom: 1px solid var(--peach-t3);2993  padding: 6px 0;2994  font-family: var(--font-display);2995  font-style: italic;2996  font-size: 28px;2997  color: var(--peach-t0);2998  outline: none;2999  transition: border-color 150ms ease;3000}30013002.peach-new-name-input:focus {3003  border-bottom-color: var(--peach-t1);3004}30053006.peach-new-name-input::placeholder {3007  color: var(--peach-t2);3008  font-style: italic;3009}30103011.peach-new-field-input::placeholder {3012  color: var(--peach-t3);3013}30143015/* ── Demo entrance animation ── */3016#hd-shell {3017  animation: hd-shell-enter 700ms cubic-bezier(0.34, 1.56, 0.64, 1) 200ms both;3018}3019@keyframes hd-shell-enter {3020  from { opacity: 0; transform: scale(0.96) translateY(16px); }3021  to   { opacity: 1; transform: scale(1) translateY(0); }3022}30233024/* ── Keyframes ── */3025@keyframes peach-char-enter {3026  from { opacity: 0; transform: translateY(0.22em); }3027  to   { opacity: 1; transform: translateY(0); }3028}3029@keyframes peach-content-enter {3030  from { opacity: 0.96; transform: translateY(4px); }3031  to   { opacity: 1; transform: translateY(0); }3032}3033@keyframes peach-content-exit {3034  from { opacity: 1; transform: translateY(0); }3035  to   { opacity: 0.92; transform: translateY(-3px); }3036}3037@keyframes peach-screen-enter {3038  from { opacity: 0; transform: translateY(14px); }3039  to   { opacity: 1; transform: translateY(0); }3040}3041@keyframes peach-shell-fade-in {3042  from { opacity: 0; }3043  to   { opacity: 1; }3044}3045@keyframes peach-veil-in {3046  from { opacity: 0; }3047  to   { opacity: 1; }3048}3049@keyframes peach-lock-settle {3050  0%   { transform: scale(0.9); }3051  65%  { transform: scale(1.08); }3052  100% { transform: scale(1); }3053}3054@keyframes peach-copy-confirm {3055  from { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3056  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); }3057}3058@keyframes peach-copy-retreat {3059  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); }3060  to   { color: var(--peach-t2); border-color: var(--peach-t3); background-color: transparent; box-shadow: none; }3061}3062@keyframes peach-copy-flood {3063  from { opacity: 0; transform: scaleX(0.15); }3064  to   { opacity: 1; transform: scaleX(1); }3065}3066@keyframes peach-copy-icon-settle {3067  from  { transform: scale(0.84); }3068  70%   { transform: scale(1.08); }3069  to    { transform: scale(1); }3070}3071@keyframes peach-copy-sheen-retreat {3072  from { opacity: 1; transform: scaleX(1); }3073  to   { opacity: 0; transform: scaleX(0.15); }3074}3075@keyframes peach-copy-drain {3076  from { width: 100%; }3077  to   { width: 0; }3078}3079@keyframes peach-shake {3080  0%, 100% { transform: translateX(0); }3081  20%      { transform: translateX(-6px); }3082  40%      { transform: translateX(6px); }3083  60%      { transform: translateX(-4px); }3084  80%      { transform: translateX(4px); }3085}30863087@keyframes pip-pulse {3088  0% { transform: scale(1); }3089  40% { transform: scale(2.2); }3090  100% { transform: scale(1); }3091}309230933094/* ── Password generator ── */3095.peach-pwgen-body {3096  flex: 1; overflow-y: auto;3097  display: flex; flex-direction: column;3098}3099.peach-policy-badge {3100  display: flex; align-items: center;3101  padding: 6px 20px 0;3102  font-size: 10px; font-family: Inter, sans-serif;3103  color: var(--peach-t2); letter-spacing: 0.04em;3104}3105.peach-pwgen-display {3106  padding: 14px 20px 12px;3107  border-bottom: 1px solid var(--peach-t3);3108  display: flex; align-items: flex-start; gap: 10px;3109}3110.peach-pwgen-display-row {3111  display: flex;3112  align-items: flex-start;3113  gap: 8px;3114  padding-bottom: 8px;3115  border-bottom: 1px solid var(--peach-t3);3116}3117.peach-pwgen-output {3118  flex: 1; min-width: 0; margin: 0;3119  font-family: "IBM Plex Mono", monospace;3120  font-size: 13px; color: var(--peach-t0);3121  line-height: 1.6; word-break: break-all; overflow-wrap: break-word;3122  white-space: normal;3123  padding: 10px 12px;3124  background: var(--peach-t4);3125  border-radius: 6px;3126  min-height: 36px;3127}3128.peach-pwgen-output-display {3129  flex: 1;3130  min-width: 0;3131  margin: 0;3132  font-family: var(--font-display);3133  font-style: italic;3134  font-weight: 300;3135  font-size: 32px;3136  line-height: 1.05;3137  color: var(--peach-t0);3138  word-break: break-all;3139  overflow-wrap: break-word;3140  white-space: normal;3141  letter-spacing: 0.02em;3142}3143.peach-pwgen-display-actions {3144  display: flex;3145  flex-direction: column;3146  gap: 4px;3147  flex-shrink: 0;3148  margin-top: 2px;3149}3150.peach-pwgen-settings { padding: 12px 20px 14px; display: flex; flex-direction: column; gap: 14px; }3151.peach-pwgen-length-row { display: flex; flex-direction: column; gap: 6px; }3152.peach-pwgen-length-labels { display: flex; justify-content: space-between; align-items: center; }3153.peach-pwgen-len-num {3154  font-family: "IBM Plex Mono", monospace;3155  font-size: 12px; color: var(--peach-accent);3156}3157.peach-pwgen-slider { width: 100%; accent-color: var(--peach-accent); cursor: pointer; height: 2px; }3158.peach-pwgen-toggles { display: flex; flex-direction: column; }3159.peach-pwgen-charset-pills {3160  display: flex;3161  gap: 6px;3162  flex-wrap: wrap;3163}3164.peach-pwgen-pill {3165  padding: 4px 11px;3166  border-radius: 999px;3167  border: 1px solid var(--peach-t3);3168  background: transparent;3169  color: var(--peach-t2);3170  font-family: "IBM Plex Mono", monospace;3171  font-size: 9px;3172  letter-spacing: 0.08em;3173  cursor: pointer;3174  transition: all 150ms ease;3175}3176.peach-pwgen-pill.is-on {3177  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3178  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3179  color: var(--peach-accent);3180}3181.peach-pwgen-pill:not(.is-on):hover {3182  color: var(--peach-t1);3183  border-color: var(--peach-t2);3184}3185.peach-pwgen-use-btn {3186  width: 100%;3187  min-height: 34px;3188  border-radius: 8px;3189  margin-top: 2px;3190}3191.peach-pwgen-toggle-row {3192  display: flex; align-items: center; justify-content: space-between;3193  padding: 6px 0; border-bottom: 1px solid var(--peach-t3);3194}3195.peach-pwgen-toggle-row:last-child { border-bottom: none; }3196.peach-pwgen-toggle-label { font-size: 13px; color: var(--peach-t1); }31973198.peach-screen-prelock {3199  z-index: 10;3200}32013202.prelock-form {3203  display: grid;3204  gap: 12px;3205}32063207/* Peach popup should not expose native scrollbars on internal panels. */3208.peach-settings-body,3209.peach-new-body,3210.peach-pwgen-body,3211.lock-screen,3212.peach-import-preview {3213  scrollbar-width: none;3214  -ms-overflow-style: none;3215  overscroll-behavior: contain;3216}3217.peach-settings-body::-webkit-scrollbar,3218.peach-new-body::-webkit-scrollbar,3219.peach-pwgen-body::-webkit-scrollbar,3220.lock-screen::-webkit-scrollbar,3221.peach-import-preview::-webkit-scrollbar {3222  width: 0;3223  height: 0;3224  display: none;3225}32263227.lock-screen {3228  height: 100%;3229  min-height: 100%;3230  overflow-y: auto;3231  padding: 18px 18px 16px;3232  gap: 14px;3233  grid-template-rows: auto auto auto 1fr auto;3234  align-content: stretch;3235  position: relative;3236  isolation: isolate;3237}3238.peach-screen.lock-screen--vault-stage {3239  display: flex;3240  flex-direction: column;3241  justify-content: flex-start;3242  gap: 18px;3243  padding: 20px 18px 18px;3244  overflow: hidden;3245}3246.peach-screen.lock-screen--vault-stage .peach-lock-panel {3247  margin-top: 0;3248}3249.lock-screen--onboarding {3250  display: flex;3251  flex-direction: column;3252  gap: 12px;3253  justify-content: flex-start;3254}32553256.lock-screen::before {3257  content: "";3258  position: absolute;3259  inset: 12px 18px auto auto;3260  width: 160px;3261  height: 160px;3262  border-radius: 999px;3263  background:3264    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%);3265  filter: blur(6px);3266  opacity: 0.7;3267  pointer-events: none;3268  z-index: 0;3269}32703271.peach-lock-rune-string {3272  flex: 1;3273  display: flex;3274  align-items: center;3275  justify-content: center;3276  gap: 6px;3277  font-family: PeachScript, monospace;3278  font-size: 13px;3279  letter-spacing: 0.05em;3280  pointer-events: none;3281  user-select: none;3282  position: relative;3283  z-index: 1;3284}32853286.peach-lock-rune-string span {3287  color: color-mix(in srgb, var(--peach-t0) 12%, transparent);3288  text-shadow:3289    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent),3290    0 0 0 color-mix(in srgb, var(--peach-accent) 0%, transparent);3291  transition: color 0.9s ease, text-shadow 0.9s ease;3292}32933294.peach-lock-rune-string span.is-glowing {3295  color: color-mix(in srgb, var(--peach-accent) 65%, transparent);3296  text-shadow:3297    0 0 8px color-mix(in srgb, var(--peach-accent) 50%, transparent),3298    0 0 20px color-mix(in srgb, var(--peach-accent) 22%, transparent);3299}33003301.lock-screen-header {3302  display: flex;3303  align-items: center;3304  justify-content: space-between;3305  position: relative;3306  z-index: 1;3307}33083309.lock-password-input.shake {3310  animation: peach-shake 300ms ease-in-out;3311}33123313.peach-hint-error {3314  color: rgba(220, 80, 60, 0.92);3315}33163317.peach-onboarding-headline {3318  margin: 0;3319  font-family: var(--font-display);3320  font-size: 35px;3321  line-height: 0.88;3322  font-style: italic;3323  font-weight: 400;3324  max-width: 252px;3325}33263327.peach-lock-copy {3328  display: grid;3329  gap: 8px;3330  position: relative;3331  z-index: 1;3332}33333334.peach-lock-copy--onboarding {3335  gap: 10px;3336}33373338.peach-lock-hero {3339  position: relative;3340  z-index: 1;3341  display: grid;3342  gap: 8px;3343  min-height: 0;3344  padding: 4px 2px 0;3345  border: none;3346  border-radius: 0;3347  background: transparent;3348  box-shadow: none;3349}3350.peach-lock-hero-art {3351  position: absolute;3352  right: -8px;3353  top: -6px;3354  width: 120px;3355  height: 120px;3356  display: flex;3357  align-items: center;3358  justify-content: center;3359  pointer-events: none;3360  opacity: 0.12;3361  filter: saturate(0.9);3362}3363.peach-lock-hero-mark {3364  width: 100%;3365  height: 100%;3366}3367/* Peach body stays brand-peach across every accent — we don't want a3368   green or blue peach when sage/sky is selected. Leaf + stem keep the3369   sage tint because a real peach has a sage leaf. */3370.peach-lock-hero-mark path:nth-child(2),3371.peach-lock-hero-mark path:nth-child(3) {3372  stroke: rgba(123, 144, 96, 0.88);3373  fill: rgba(123, 144, 96, 0.88);3374}3375.peach-lock-hero > *:not(.peach-lock-hero-art) {3376  position: relative;3377  z-index: 1;3378}33793380.peach-lock-eyebrow {3381  display: inline-flex;3382  align-items: center;3383  width: fit-content;3384  padding: 4px 9px;3385  border-radius: 999px;3386  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);3387  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);3388  color: var(--peach-t0);3389  font-family: "IBM Plex Mono", monospace;3390  font-size: 8px;3391  letter-spacing: 0.18em;3392  text-transform: uppercase;3393}33943395.peach-lock-label-row {3396  display: flex;3397  align-items: center;3398  justify-content: space-between;3399  margin-bottom: 0;3400}34013402.peach-lock-reveal-btn {3403  display: inline-flex;3404  align-items: center;3405  gap: 4px;3406  background: none;3407  border: none;3408  cursor: pointer;3409  font-family: "IBM Plex Mono", monospace;3410  font-size: 9px;3411  letter-spacing: 0.06em;3412  color: var(--peach-t2);3413  padding: 2px 0;3414  transition: color 150ms ease;3415}34163417.peach-lock-reveal-btn:hover {3418  color: var(--peach-t1);3419}34203421.peach-lock-warning {3422  color: rgba(220, 80, 60, 0.85) !important;3423  line-height: 1.5;3424}34253426.peach-onboarding-cards {3427  display: grid;3428  gap: 8px;3429  position: relative;3430  z-index: 1;3431}34323433.peach-lock-panel {3434  position: relative;3435  z-index: 1;3436  display: grid;3437  gap: 9px;3438  padding: 14px 16px 15px;3439  border-radius: 18px;3440  border: 1px solid var(--peach-t3);3441  background:3442    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));3443  box-shadow:3444    inset 0 1px 0 rgba(240, 232, 216, 0.04),3445    0 12px 28px rgba(0, 0, 0, 0.12);3446}34473448/* Glass surface — lock panel and settings groups */3449.peach-glass {3450  background: rgba(26, 20, 16, 0.65);3451  border: 1px solid rgba(255, 255, 255, 0.08);3452  border-radius: 12px;3453  backdrop-filter: blur(12px) saturate(1.4);3454  -webkit-backdrop-filter: blur(12px) saturate(1.4);3455}34563457@supports not (backdrop-filter: blur(1px)) {3458  .peach-glass {3459    background: rgba(26, 20, 16, 0.92);3460    border: 1px solid rgba(255, 255, 255, 0.10);3461    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 4px 24px rgba(0, 0, 0, 0.4);3462  }3463}34643465.light .peach-glass,3466[data-theme="light"] .peach-glass {3467  background: rgba(253, 248, 244, 0.70);3468  border: 1px solid rgba(0, 0, 0, 0.07);3469  backdrop-filter: blur(12px) saturate(1.2);3470  -webkit-backdrop-filter: blur(12px) saturate(1.2);3471}34723473@supports not (backdrop-filter: blur(1px)) {3474  .light .peach-glass,3475  [data-theme="light"] .peach-glass {3476    background: rgba(253, 248, 244, 0.95);3477    border: 1px solid rgba(0, 0, 0, 0.09);3478  }3479}34803481/* Lock panel keeps its own border-radius over the generic glass token */3482.peach-lock-panel.peach-glass {3483  border-radius: 18px;3484  background: rgba(26, 20, 16, 0.65);3485  border: 1px solid rgba(255, 255, 255, 0.08);3486  box-shadow:3487    inset 0 1px 0 rgba(255, 255, 255, 0.05),3488    0 12px 28px rgba(0, 0, 0, 0.3);3489}34903491.light .peach-lock-panel.peach-glass,3492[data-theme="light"] .peach-lock-panel.peach-glass {3493  background: rgba(238, 227, 204, 0.75);3494  border: 1px solid rgba(34, 24, 9, 0.10);3495  box-shadow:3496    inset 0 1px 0 rgba(255, 255, 255, 0.5),3497    0 8px 24px rgba(80, 56, 32, 0.15);3498}34993500@supports not (backdrop-filter: blur(1px)) {3501  .peach-lock-panel.peach-glass {3502    background: rgba(26, 20, 16, 0.92);3503    box-shadow:3504      inset 0 1px 0 rgba(255, 255, 255, 0.05),3505      0 12px 28px rgba(0, 0, 0, 0.4);3506  }3507  .light .peach-lock-panel.peach-glass,3508  [data-theme="light"] .peach-lock-panel.peach-glass {3509    background: rgba(238, 227, 204, 0.96);3510  }3511}35123513.peach-lock-panel--secondary {3514  gap: 12px;3515}35163517.peach-lock-panel-header {3518  display: flex;3519  align-items: baseline;3520  justify-content: space-between;3521  gap: 12px;3522}35233524.peach-lock-option-grid {3525  display: grid;3526  gap: 10px;3527}35283529.peach-lock-option {3530  width: 100%;3531  display: grid;3532  gap: 6px;3533  padding: 14px 15px;3534  border-radius: 16px;3535  border: 1px solid rgba(240, 232, 216, 0.08);3536  background: rgba(240, 232, 216, 0.02);3537  color: var(--peach-t0);3538  text-align: left;3539  transition: border-color 140ms ease, background 140ms ease, transform 140ms ease;3540}35413542.peach-lock-option:hover {3543  border-color: color-mix(in srgb, var(--peach-accent) 28%, transparent);3544  background: rgba(240, 232, 216, 0.04);3545  transform: translateY(-1px);3546}35473548.peach-lock-option-title {3549  font-size: 12px;3550  color: var(--peach-t0);3551}35523553.peach-lock-option-copy {3554  font-size: 11px;3555  line-height: 1.55;3556  color: var(--peach-t1);3557}35583559.peach-onboarding-stack {3560  margin-top: 2px;3561}3562.peach-lock-panel-footer {3563  display: grid;3564  gap: 6px;3565  margin-top: 2px;3566  padding-top: 10px;3567  border-top: 1px solid rgba(240, 232, 216, 0.06);3568}35693570/* Restore picker panel — method option cards (legacy; kept for any callers3571   that still mount the old shape). The v2.12.0 restore picker uses the3572   .peach-restore-stack glass cards below instead. */3573.peach-lock-panel--restore {3574  gap: 10px;3575}3576.peach-lock-option--history {3577  border-color: rgba(240, 232, 216, 0.06);3578  opacity: 0.85;3579}35803581/* ── Restore picker (v2.12.0) ─────────────────────────────────────────────3582   Three onboarding-style glass cards (PeachScript / Mayan code / CSV) that3583   replace the flat option list. Visually echoes .peach-onboarding-card so3584   the restore surface reads as part of the onboarding family. */3585.peach-restore-screen {3586  /* The three cards already have their own padding and spacing — no extra3587     panel wrapper, so the screen just needs a comfortable bottom margin. */3588  padding-bottom: 14px;3589}35903591.peach-restore-stack {3592  position: relative;3593  z-index: 1;3594  display: flex;3595  flex-direction: column;3596  gap: 9px;3597  margin-top: 4px;3598}35993600.peach-restore-card {3601  position: relative;3602  width: 100%;3603  display: flex;3604  flex-direction: column;3605  gap: 6px;3606  padding: 14px 16px 13px;3607  border-radius: 14px;3608  border: 1px solid var(--peach-t3);3609  background:3610    linear-gradient(180deg, rgba(240, 232, 216, 0.035), rgba(240, 232, 216, 0.012));3611  backdrop-filter: blur(3px);3612  -webkit-backdrop-filter: blur(3px);3613  box-shadow:3614    inset 0 1px 0 rgba(240, 232, 216, 0.04),3615    0 8px 18px rgba(0, 0, 0, 0.18);3616  color: var(--peach-t0);3617  text-align: left;3618  cursor: pointer;3619  transition:3620    border-color 160ms ease,3621    transform 160ms ease,3622    box-shadow 160ms ease,3623    background 160ms ease;3624  animation: peach-card-in 240ms cubic-bezier(0.16, 1, 0.3, 1) both;3625}36263627.peach-restore-card:hover {3628  border-color: color-mix(in srgb, var(--peach-accent) 32%, transparent);3629  background:3630    linear-gradient(180deg, rgba(240, 232, 216, 0.05), rgba(240, 232, 216, 0.02));3631  transform: translateY(-1px);3632  box-shadow:3633    inset 0 1px 0 rgba(240, 232, 216, 0.05),3634    0 12px 24px rgba(0, 0, 0, 0.22);3635}36363637.peach-restore-card:focus-visible {3638  outline: none;3639  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);3640  box-shadow:3641    inset 0 1px 0 rgba(240, 232, 216, 0.05),3642    0 0 0 2px color-mix(in srgb, var(--peach-accent) 24%, transparent);3643}36443645/* The Mayan card is interactive but routes to a "decoder coming soon"3646   stub — we still want the hover affordance, just slightly toned down. */3647.peach-restore-card:has(.peach-restore-card-soon) {3648  opacity: 0.78;3649}3650.peach-restore-card:has(.peach-restore-card-soon):hover {3651  opacity: 0.92;3652}36533654/* Used by MayanComingSoonView for the explanatory card — non-interactive. */3655.peach-restore-card--static {3656  cursor: default;3657}3658.peach-restore-card--static:hover {3659  border-color: var(--peach-t3);3660  transform: none;3661  background:3662    linear-gradient(180deg, rgba(240, 232, 216, 0.035), rgba(240, 232, 216, 0.012));3663  box-shadow:3664    inset 0 1px 0 rgba(240, 232, 216, 0.04),3665    0 8px 18px rgba(0, 0, 0, 0.18);3666}36673668.peach-restore-card-headline {3669  margin: 0;3670  font-family: var(--font-display);3671  font-style: italic;3672  font-weight: 400;3673  font-size: 19px;3674  line-height: 1.05;3675  color: var(--peach-t0);3676}36773678.peach-restore-card-divider {3679  margin: 1px 0 3px;3680  border: 0;3681  border-top: 1px solid var(--peach-t3);3682  width: 100%;3683}36843685.peach-restore-card-body {3686  margin: 0;3687  font-size: 12px;3688  line-height: 1.55;3689  color: var(--peach-t1);3690}36913692.peach-restore-card-body code {3693  font-family: "IBM Plex Mono", monospace;3694  font-size: 11px;3695  padding: 1px 5px;3696  border-radius: 4px;3697  background: rgba(240, 232, 216, 0.06);3698  color: var(--peach-t0);3699}37003701.peach-restore-card-meta {3702  margin: 2px 0 0;3703  font-family: "IBM Plex Mono", monospace;3704  font-size: 9px;3705  letter-spacing: 0.14em;3706  text-transform: uppercase;3707  color: var(--peach-t2);3708}37093710.peach-restore-card-soon {3711  position: absolute;3712  top: 12px;3713  right: 12px;3714  display: inline-flex;3715  align-items: center;3716  padding: 2px 7px;3717  border-radius: 999px;3718  border: 1px solid color-mix(in srgb, var(--peach-accent) 26%, transparent);3719  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);3720  color: var(--peach-t0);3721  font-family: "IBM Plex Mono", monospace;3722  font-size: 8px;3723  letter-spacing: 0.18em;3724  text-transform: uppercase;3725}37263727.peach-restore-footer {3728  position: relative;3729  z-index: 1;3730  margin-top: 6px;3731  padding-top: 10px;3732  border-top: 1px solid rgba(240, 232, 216, 0.06);3733  display: flex;3734  justify-content: center;3735}37363737.peach-restore-footer-link {3738  background: none;3739  border: none;3740  padding: 4px 0;3741  cursor: pointer;3742  font-family: "IBM Plex Mono", monospace;3743  font-size: 10px;3744  letter-spacing: 0.06em;3745  color: var(--peach-t2);3746  transition: color 150ms ease;3747}37483749.peach-restore-footer-link:hover {3750  color: var(--peach-t0);3751}37523753/* Snapshot restore panel */3754.peach-snapshot-panel {3755  gap: 10px;3756  overflow-y: auto;3757  max-height: 340px;3758}3759.peach-snapshot-list {3760  display: flex;3761  flex-direction: column;3762  gap: 4px;3763}3764.peach-snapshot-row {3765  display: flex;3766  align-items: center;3767  justify-content: space-between;3768  width: 100%;3769  padding: 8px 10px;3770  border-radius: 8px;3771  border: 1px solid rgba(240, 232, 216, 0.07);3772  background: transparent;3773  cursor: pointer;3774  transition: border-color 120ms, background 120ms;3775  text-align: left;3776  gap: 8px;3777}3778.peach-snapshot-row:hover {3779  border-color: rgba(240, 232, 216, 0.14);3780  background: rgba(240, 232, 216, 0.03);3781}3782.peach-snapshot-row.is-selected {3783  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);3784  background: color-mix(in srgb, var(--peach-accent) 7%, transparent);3785}3786.peach-snapshot-time {3787  font-size: 11.5px;3788  color: var(--peach-t0);3789  flex: 1;3790}3791.peach-snapshot-count {3792  font-family: "IBM Plex Mono", monospace;3793  font-size: 10px;3794  color: var(--peach-t2);3795  flex-shrink: 0;3796}3797.peach-snapshot-confirm {3798  display: flex;3799  flex-direction: column;3800  gap: 8px;3801  padding-top: 10px;3802  border-top: 1px solid rgba(240, 232, 216, 0.06);3803}3804.peach-snapshot-warning {3805  display: flex;3806  align-items: flex-start;3807  gap: 6px;3808  font-size: 10.5px;3809  color: rgba(220, 80, 60, 0.85);3810  line-height: 1.55;3811}3812.peach-snapshot-warning svg { flex-shrink: 0; margin-top: 2px; }3813.peach-snapshot-confirm-row {3814  display: flex;3815  gap: 6px;3816  align-items: center;3817}3818.peach-snapshot-restore-btn {3819  width: 100%;3820}3821.peach-lock-hero--unlock .peach-lock-hero-art {3822  width: 112px;3823  height: 112px;3824  right: 0;3825  top: 2px;3826  opacity: 0.1;3827}38283829.peach-card {3830  border: 1px solid var(--peach-t3);3831  border-radius: 18px;3832  background:3833    linear-gradient(180deg, rgba(240, 232, 216, 0.03) 0%, rgba(240, 232, 216, 0.015) 100%);3834  box-shadow:3835    inset 0 0 0 1px var(--peach-border-accent),3836    inset 0 1px 0 rgba(240, 232, 216, 0.04),3837    0 12px 32px rgba(0, 0, 0, 0.14);3838  overflow: hidden;3839}38403841.peach-card-active {3842  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);3843  box-shadow:3844    inset 0 1px 0 rgba(240, 232, 216, 0.05),3845    0 16px 38px rgba(0, 0, 0, 0.18),3846    0 0 0 1px color-mix(in srgb, var(--peach-accent) 8%, transparent);3847}38483849.peach-card-disabled {3850  opacity: 0.72;3851}38523853.peach-card-header {3854  width: 100%;3855  padding: 13px 16px 11px;3856  background: transparent;3857  color: var(--peach-t0);3858  display: flex;3859  justify-content: space-between;3860  align-items: center;3861  text-align: left;3862  font-size: 12px;3863}38643865.peach-card-body {3866  padding: 0 16px 16px;3867  display: grid;3868  gap: 9px;3869}38703871.peach-card-tag {3872  color: var(--peach-t2);3873  font-family: "IBM Plex Mono", monospace;3874  font-size: 9px;3875  letter-spacing: 0.12em;3876  text-transform: uppercase;3877}38783879.peach-empty-copy {3880  display: grid;3881  gap: 6px;3882  color: var(--peach-t1);3883  font-size: 13px;3884}38853886.peach-lock-submit {3887  width: 100%;3888  box-shadow:3889    0 1px 0 rgba(255,255,255,0.10) inset,3890    0 0 0 1px color-mix(in srgb, var(--peach-accent) 19%, transparent),3891    0 12px 32px color-mix(in srgb, var(--peach-accent) 19%, transparent),3892    0 0 48px color-mix(in srgb, var(--peach-accent) 10%, transparent);3893}38943895.peach-lock-secondary {3896  width: 100%;3897  border-color: var(--peach-t3);3898  background: rgba(240, 232, 216, 0.02);3899}39003901.peach-lock-secondary:hover {3902  background: rgba(240, 232, 216, 0.04);3903}39043905.peach-lock-note {3906  max-width: none;3907  line-height: 1.55;3908  margin: 0;3909}39103911.peach-overlay-action {3912  font-size: 10px;3913  padding: 4px 8px;3914  letter-spacing: 0.06em;3915  min-width: 44px;3916  text-align: center;3917}39183919.peach-overlay-spacer {3920  width: 32px;3921}39223923.peach-inline-action {3924  flex-shrink: 0;3925  font-size: 9px;3926  letter-spacing: 0.1em;3927  text-transform: uppercase;3928  padding: 4px 7px;3929}3930.peach-password-toggle-btn {3931  display: inline-flex;3932  align-items: center;3933  justify-content: center;3934  min-width: 30px;3935  min-height: 26px;3936  padding: 0 7px;3937  border: 1px solid var(--peach-t3);3938  border-radius: 999px;3939  background: rgba(240, 232, 216, 0.04);3940  color: var(--peach-t2);3941  transition: border-color 140ms ease, color 140ms ease, background 140ms ease;3942}3943.peach-password-toggle-btn:hover {3944  border-color: var(--peach-t2);3945  color: var(--peach-t0);3946  background: rgba(240, 232, 216, 0.06);3947}39483949.peach-new-textarea {3950  width: 100%;3951  min-height: 88px;3952  resize: vertical;3953  border: 0;3954  outline: none;3955  background: transparent;3956  color: var(--peach-t1);3957  font-family: "IBM Plex Mono", monospace;3958  font-size: 12px;3959  line-height: 1.65;3960  caret-color: var(--peach-accent);3961}39623963.peach-new-textarea::placeholder {3964  color: var(--peach-t2);3965  opacity: 0.7;3966}39673968.peach-settings-actions {3969  display: grid;3970  gap: 8px;3971}39723973.peach-sync-section-label {3974  font-size: 11px;3975  color: var(--peach-t2);3976  text-transform: uppercase;3977  letter-spacing: 0.05em;3978}39793980.peach-sync-device-row {3981  display: flex;3982  justify-content: space-between;3983  align-items: center;3984  padding: 6px 0;3985  border-bottom: 1px solid var(--peach-t3);3986}39873988.peach-sync-device-info {3989  display: flex;3990  flex-direction: column;3991  gap: 2px;3992}39933994.peach-sync-device-name {3995  font-size: 13px;3996  color: var(--peach-t0);3997}39983999.peach-sync-device-meta {4000  font-size: 11px;4001  color: var(--peach-t2);4002}40034004.peach-sync-status-dot {4005  display: inline-block;4006  width: 8px;4007  height: 8px;4008  border-radius: 50%;4009  vertical-align: middle;4010}40114012.peach-sync-remove-btn {4013  color: var(--peach-breach);4014}40154016.peach-sync-advanced-row {4017  display: flex;4018  justify-content: space-between;4019  align-items: center;4020  padding: 6px 0;4021  gap: 12px;4022}40234024.peach-sync-advanced-info {4025  display: flex;4026  flex-direction: column;4027  gap: 2px;4028  flex: 1;4029}40304031.peach-sync-advanced-name {4032  font-size: 13px;4033  color: var(--peach-t0);4034}40354036.peach-sync-reset-confirm {4037  display: flex;4038  flex-direction: column;4039  gap: 8px;4040  padding: 10px;4041  border: 1px solid var(--peach-breach);4042  border-radius: 10px;4043  background: color-mix(in srgb, var(--peach-breach) 6%, transparent);4044}40454046.peach-sync-reset-confirm-headline {4047  font-size: 13px;4048  font-weight: 600;4049  color: var(--peach-t0);4050  margin: 0;4051}40524053.peach-sync-reset-confirm-body {4054  font-size: 12px;4055  color: var(--peach-t1);4056  margin: 0;4057  line-height: 1.4;4058}40594060.peach-btn--danger {4061  background: var(--peach-breach);4062  color: #fff;4063  border-color: var(--peach-breach);4064}4065.peach-btn--danger:hover:not(:disabled) {4066  background: color-mix(in srgb, var(--peach-breach) 88%, #000);4067}4068.peach-btn--danger:disabled {4069  opacity: 0.55;4070  cursor: not-allowed;4071}40724073.peach-sync-hero-icon {4074  color: var(--peach-t1);4075  opacity: 0.85;4076}40774078.peach-import-preview {4079  margin-bottom: 12px;4080  max-height: 152px;4081  overflow-y: auto;4082  border: 1px solid var(--peach-t3);4083  border-radius: 10px;4084  padding: 8px 10px;4085  display: grid;4086  gap: 8px;4087  background: rgba(240, 232, 216, 0.02);4088}40894090.peach-import-preview-row {4091  display: flex;4092  justify-content: space-between;4093  gap: 10px;4094  font-size: 11px;4095  color: var(--peach-t1);4096}40974098.peach-import-preview-title {4099  color: var(--peach-t0);4100  flex: 1;4101  min-width: 0;4102  overflow: hidden;4103  text-overflow: ellipsis;4104  white-space: nowrap;4105}41064107.peach-import-preview-meta {4108  color: var(--peach-t2);4109  flex-shrink: 0;4110  max-width: 42%;4111  overflow: hidden;4112  text-overflow: ellipsis;4113  white-space: nowrap;4114}41154116.peach-import-preview-more {4117  color: var(--peach-t2);4118  font-size: 10px;4119}41204121.peach-restore-copy {4122  margin: 0;4123  color: var(--peach-t1);4124  font-size: 11px;4125  line-height: 1.6;4126}41274128.peach-restore-warning {4129  padding: 10px 12px;4130  border-radius: 12px;4131  border: 1px solid color-mix(in srgb, var(--peach-breach) 35%, transparent);4132  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4133  color: var(--peach-t0);4134  font-size: 11px;4135  line-height: 1.55;4136}41374138.peach-provider-chips {4139  display: flex;4140  flex-wrap: wrap;4141  gap: 6px;4142}41434144.peach-provider-chip {4145  display: inline-flex;4146  align-items: center;4147  padding: 5px 8px;4148  border-radius: 999px;4149  border: 1px solid var(--peach-t3);4150  background: rgba(240, 232, 216, 0.02);4151  color: var(--peach-t1);4152  font-family: "IBM Plex Mono", monospace;4153  font-size: 8px;4154  letter-spacing: 0.08em;4155  text-transform: uppercase;4156}41574158.peach-restore-file,4159.peach-restore-input {4160  width: 100%;4161  border-radius: 10px;4162  border: 1px solid var(--peach-t3);4163  background: var(--peach-s2);4164  color: var(--peach-t0);4165  font-size: 12px;4166}41674168.peach-restore-file {4169  padding: 9px 10px;4170}41714172.peach-restore-file::file-selector-button {4173  margin-right: 10px;4174  padding: 7px 10px;4175  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4176  border-radius: 999px;4177  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4178  color: var(--peach-t0);4179  font-size: 10px;4180  letter-spacing: 0.08em;4181  text-transform: uppercase;4182  cursor: pointer;4183}41844185.peach-restore-input {4186  padding: 10px 12px;4187}41884189.peach-auth-grid {4190  display: grid;4191  gap: 10px;4192}41934194.peach-import-summary {4195  color: var(--peach-t1);4196  font-size: 12px;4197  line-height: 1.6;4198  margin-bottom: 12px;4199}42004201.peach-restore-error {4202  color: rgba(220, 80, 60, 0.95);4203  font-size: 12px;4204  line-height: 1.55;4205}42064207.peach-passkey-card {4208  max-width: 400px;4209  margin: auto 16px;4210  align-self: center;4211  width: calc(100% - 32px);4212}42134214/* Center the approval card vertically inside the overlay-view (which sets4215 * flex-direction: column without justify-content). Without this, the card4216 * sits at the top with a tall empty band below — looks unfinished on the4217 * 320px popup. */4218.peach-overlay-view:has(.peach-passkey-card) {4219  justify-content: center;4220}42214222.peach-pro-badge {4223  padding: 2px 6px;4224  border-radius: 999px;4225  font-family: var(--font-ui);4226  font-size: 10px;4227  letter-spacing: 0.08em;4228  text-transform: uppercase;4229  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4230  color: var(--peach-accent);4231}42324233/* ── Shortcuts rebind table ─────────────────────────────────── */4234.peach-shortcuts-group { display: flex; flex-direction: column; gap: 6px; }4235.peach-shortcut-row {4236  display: flex;4237  align-items: center;4238  gap: 10px;4239  padding: 6px 0;4240}4241.peach-shortcut-row-label {4242  flex: 1;4243  font-size: 12px;4244  color: var(--peach-t0);4245}4246.peach-shortcut-chip {4247  min-width: 64px;4248  padding: 4px 10px;4249  border-radius: 6px;4250  border: 1px solid var(--peach-t3);4251  background: var(--peach-input-bg, var(--surface-card));4252  color: var(--peach-t0);4253  font-family: var(--font-mono);4254  font-size: 11px;4255  letter-spacing: 0.04em;4256  cursor: pointer;4257  text-align: center;4258  transition: border-color 120ms ease, background 120ms ease, color 120ms ease;4259}4260.peach-shortcut-chip:hover { border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent); }4261.peach-shortcut-chip.is-custom {4262  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);4263  color: var(--peach-accent);4264}4265.peach-shortcut-chip.is-capturing {4266  border-color: var(--peach-accent);4267  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);4268  color: var(--peach-accent);4269  animation: peach-shortcut-capture-pulse 1.4s ease-in-out infinite;4270}4271@keyframes peach-shortcut-capture-pulse {4272  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--peach-accent) 30%, transparent); }4273  50%      { box-shadow: 0 0 0 4px color-mix(in srgb, var(--peach-accent) 12%, transparent); }4274}4275.peach-shortcut-reset {4276  background: transparent;4277  border: none;4278  cursor: pointer;4279  color: var(--peach-t2);4280  padding: 4px 6px;4281  border-radius: 5px;4282  font-size: 14px;4283  line-height: 1;4284  transition: color 120ms ease, background 120ms ease;4285}4286.peach-shortcut-reset:hover {4287  color: var(--peach-t0);4288  background: color-mix(in srgb, var(--peach-text, var(--peach-t0)) 6%, transparent);4289}4290.peach-shortcuts-conflict {4291  margin: 4px 0 0;4292  padding: 8px 10px;4293  border-radius: 7px;4294  background: color-mix(in srgb, var(--peach-breach) 10%, transparent);4295  border: 1px solid color-mix(in srgb, var(--peach-breach) 30%, transparent);4296  font-family: var(--font-mono);4297  font-size: 11px;4298  color: var(--peach-t0);4299}43004301/* ── Help dialog overlay (? to open) ────────────────────────── */4302.peach-shortcuts-help-backdrop {4303  position: fixed;4304  inset: 0;4305  background: rgba(0, 0, 0, 0.55);4306  backdrop-filter: blur(2px);4307  display: flex;4308  align-items: center;4309  justify-content: center;4310  z-index: 1000;4311  animation: peach-help-fade-in 140ms ease forwards;4312}4313@keyframes peach-help-fade-in { from { opacity: 0 } to { opacity: 1 } }4314.peach-shortcuts-help-card {4315  width: min(320px, 92vw);4316  max-height: 80vh;4317  overflow-y: auto;4318  border-radius: 14px;4319  border: 1px solid var(--peach-t3);4320  background: var(--peach-bg);4321  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);4322  padding: 16px 18px 18px;4323  display: flex;4324  flex-direction: column;4325  gap: 12px;4326}4327.peach-shortcuts-help-head {4328  display: flex; align-items: center; justify-content: space-between;4329}4330.peach-shortcuts-help-head h3 {4331  margin: 0;4332  font-family: var(--font-display);4333  font-style: italic;4334  font-weight: 400;4335  font-size: 22px;4336  color: var(--peach-t0);4337}4338.peach-shortcuts-help-close {4339  background: transparent;4340  border: none;4341  color: var(--peach-t2);4342  cursor: pointer;4343  font-size: 14px;4344  padding: 4px 8px;4345  border-radius: 5px;4346}4347.peach-shortcuts-help-close:hover { color: var(--peach-t0); background: var(--surface-card); }4348.peach-shortcuts-help-body ul {4349  list-style: none; padding: 0; margin: 4px 0 12px;4350  display: grid; gap: 8px;4351}4352.peach-shortcuts-help-body li {4353  display: flex; align-items: center; justify-content: space-between; gap: 12px;4354  font-size: 12px; color: var(--peach-t0);4355}4356.peach-shortcuts-help-body kbd {4357  font-family: var(--font-mono);4358  font-size: 11px;4359  padding: 3px 8px;4360  border-radius: 6px;4361  background: var(--surface-card);4362  border: 1px solid var(--peach-t3);4363  color: var(--peach-accent);4364  letter-spacing: 0.04em;4365}43664367/* ── Pro promo on Account screen ────────────────────────────── */4368.peach-pro-promo {4369  position: relative;4370  border-radius: 14px;4371  border: 1px solid color-mix(in srgb, var(--peach-accent) 22%, transparent);4372  background:4373    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--peach-accent) 10%, transparent) 0%, transparent 60%),4374    radial-gradient(85% 100% at 100% 100%, color-mix(in srgb, var(--peach-accent) 6%, transparent) 0%, transparent 65%),4375    var(--surface-card);4376  overflow: hidden;4377  margin-bottom: 14px;4378}4379.peach-pro-promo-glow {4380  position: absolute;4381  inset: -40% -20% auto auto;4382  width: 220px; height: 220px;4383  background: radial-gradient(closest-side, var(--peach-glow), transparent 70%);4384  pointer-events: none;4385  filter: blur(8px);4386}4387.peach-pro-promo-inner {4388  position: relative;4389  padding: 18px 18px 16px;4390}4391.peach-pro-promo-title {4392  font-family: var(--font-display);4393  font-style: italic;4394  font-weight: 400;4395  font-size: 28px;4396  line-height: 1;4397  letter-spacing: -0.005em;4398  color: var(--peach-t0);4399  margin: 0 0 4px;4400}4401.peach-pro-promo-tagline {4402  font-family: var(--font-mono);4403  font-size: 10px;4404  letter-spacing: 0.06em;4405  color: var(--peach-t2);4406  margin: 0 0 14px;4407}4408.peach-pro-promo-list {4409  list-style: none;4410  margin: 0 0 16px;4411  padding: 0;4412  display: grid;4413  gap: 9px;4414}4415.peach-pro-promo-list li {4416  display: flex;4417  align-items: flex-start;4418  gap: 9px;4419  font-size: 12px;4420  color: var(--peach-t1);4421  line-height: 1.4;4422}4423.peach-pro-promo-list svg {4424  width: 14px;4425  height: 14px;4426  flex-shrink: 0;4427  color: var(--peach-accent);4428  margin-top: 2px;4429}4430.peach-pro-promo-list span {4431  color: var(--peach-t0);4432}4433.peach-pro-promo-cta {4434  width: 100%;4435  background: var(--peach-accent);4436  color: #fff;4437  border: none;4438  padding: 9px 12px;4439  border-radius: 9px;4440  font-size: 12px;4441  font-weight: 500;4442  font-family: var(--font-ui);4443  letter-spacing: 0.02em;4444  text-decoration: none;4445  display: inline-flex;4446  align-items: center;4447  justify-content: center;4448  cursor: pointer;4449  transition: filter 120ms ease, box-shadow 120ms ease, transform 80ms ease;4450  box-shadow: 0 2px 16px var(--peach-glow);4451}4452.peach-pro-promo-cta:hover {4453  filter: brightness(1.07);4454  box-shadow: 0 4px 24px var(--peach-glow);4455  transform: translateY(-1px);4456}4457.peach-pro-promo-cta:active { transform: translateY(0); filter: brightness(0.96); }44584459.peach-pro-or-divider {4460  display: flex;4461  align-items: center;4462  gap: 10px;4463  margin: 4px 0 12px;4464  font-family: var(--font-mono);4465  font-size: 10px;4466  letter-spacing: 0.06em;4467  color: var(--peach-t2);4468  text-transform: uppercase;4469}4470.peach-pro-or-divider::before,4471.peach-pro-or-divider::after {4472  content: "";4473  flex: 1;4474  height: 1px;4475  background: var(--peach-t3);4476}44774478.peach-loading {4479  position: absolute;4480  inset: 0;4481  display: flex;4482  align-items: center;4483  justify-content: center;4484  background: var(--bg);4485  animation: peach-loading-pulse 1.2s ease-in-out infinite;4486}44874488@keyframes peach-loading-pulse {4489  0%, 100% { opacity: 0.6; }4490  50% { opacity: 1; }4491}44924493/* ── Health Dashboard ─────────────────────────────────────────────────── */4494.peach-health-body {4495  flex: 1;4496  overflow-y: auto;4497  display: flex;4498  flex-direction: column;4499  /* Hide the platform scrollbar — every other scrollable surface in the4500   * popup hides it; the Health view was the one outlier and it ruined the4501   * polish. Behavior unchanged, just no rail rendered. */4502  scrollbar-width: none;4503  -ms-overflow-style: none;4504}4505.peach-health-body::-webkit-scrollbar { display: none; }45064507/* Loading screen for the Vault Health view. The advanced report computation4508 * can run for a few seconds on a large vault — without a clear loading4509 * screen the surface looked broken (the entry view bleeds through the4510 * empty body). Centered glyph + title + copy + indeterminate progress bar. */4511.peach-health-loading-screen {4512  flex: 1;4513  display: flex;4514  flex-direction: column;4515  align-items: center;4516  justify-content: center;4517  gap: 14px;4518  padding: 32px 28px;4519  text-align: center;4520}45214522.peach-health-loading-glyph {4523  width: 48px;4524  height: 48px;4525  display: flex;4526  align-items: center;4527  justify-content: center;4528  border-radius: 14px;4529  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);4530  color: var(--peach-accent);4531}45324533.peach-health-loading-title {4534  margin: 0;4535  font-family: var(--font-display);4536  font-style: italic;4537  font-weight: 300;4538  font-size: 19px;4539  line-height: 1.2;4540  color: var(--peach-t0);4541}45424543.peach-health-loading-copy {4544  margin: 0;4545  max-width: 240px;4546  font-size: 12px;4547  line-height: 1.55;4548  color: var(--peach-t2);4549}45504551.peach-health-loading-track {4552  width: 200px;4553  height: 3px;4554  margin-top: 6px;4555  border-radius: 999px;4556  background: rgba(240, 232, 216, 0.06);4557  overflow: hidden;4558}45594560.peach-health-loading-fill {4561  width: 40%;4562  height: 100%;4563  border-radius: inherit;4564  background: linear-gradient(4565    90deg,4566    transparent 0%,4567    var(--peach-accent) 50%,4568    transparent 100%4569  );4570  animation: peach-health-loading-sweep 1.4s ease-in-out infinite;4571}45724573@keyframes peach-health-loading-sweep {4574  0%   { transform: translateX(-100%); }4575  100% { transform: translateX(350%); }4576}45774578[data-motion="reduce"] .peach-health-loading-fill,4579[data-motion="reduce"] .peach-health-loading-glyph svg path {4580  animation: none;4581}45824583.peach-health-summary {4584  padding: 10px 16px 6px;4585  font-family: "IBM Plex Mono", monospace;4586  font-size: 11px;4587}4588.peach-health-summary-warn { color: rgba(220,80,60,0.9); }4589.peach-health-summary-ok { color: var(--peach-t2); }45904591.peach-health-check-row {4592  padding: 0 16px 10px;4593}4594.peach-health-check-btn {4595  width: 100%;4596  display: flex;4597  align-items: center;4598  justify-content: center;4599}46004601.peach-health-sections {4602  flex: 1;4603  display: flex;4604  flex-direction: column;4605}46064607.peach-health-section {4608  border-bottom: 1px solid var(--peach-t3);4609}46104611.peach-health-section-header {4612  width: 100%;4613  display: flex;4614  align-items: center;4615  justify-content: space-between;4616  padding: 9px 16px;4617  background: transparent;4618  cursor: pointer;4619  color: var(--peach-t0);4620}46214622.peach-health-section-title-row {4623  display: flex;4624  align-items: center;4625  gap: 8px;4626}46274628.peach-health-count-badge {4629  display: inline-flex;4630  align-items: center;4631  justify-content: center;4632  min-width: 20px;4633  height: 18px;4634  padding: 0 5px;4635  border-radius: 999px;4636  background: rgba(220,80,60,0.15);4637  border: 1px solid rgba(220,80,60,0.25);4638  font-family: "IBM Plex Mono", monospace;4639  font-size: 9px;4640  color: rgba(220,80,60,0.9);4641}46424643.peach-health-section-title {4644  font-family: "IBM Plex Mono", monospace;4645  font-size: 11px;4646  text-transform: uppercase;4647  letter-spacing: 0.1em;4648  color: var(--peach-t1);4649}46504651.peach-health-chevron {4652  color: var(--peach-t2);4653  transition: transform 200ms ease;4654  flex-shrink: 0;4655}4656.peach-health-chevron.is-expanded {4657  transform: rotate(180deg);4658}46594660.peach-health-section-body {4661  padding: 0 16px 10px;4662  display: flex;4663  flex-direction: column;4664  gap: 4px;4665}46664667.peach-health-row {4668  display: flex;4669  align-items: flex-start;4670  justify-content: space-between;4671  gap: 8px;4672  padding: 6px 8px;4673  border-radius: 8px;4674  background: rgba(240,232,216,0.02);4675}46764677.peach-health-row-info {4678  flex: 1;4679  min-width: 0;4680  display: flex;4681  flex-direction: column;4682  gap: 2px;4683}46844685.peach-health-row-name {4686  font-family: var(--font-display);4687  font-size: 15px;4688  font-style: italic;4689  font-weight: 400;4690  color: var(--peach-t0);4691  white-space: nowrap;4692  overflow: hidden;4693  text-overflow: ellipsis;4694}46954696.peach-health-row-meta {4697  font-family: "IBM Plex Mono", monospace;4698  font-size: 9px;4699  color: var(--peach-t2);4700  letter-spacing: 0.05em;4701}47024703.peach-health-fix-btn {4704  font-size: 9px;4705  letter-spacing: 0.08em;4706  text-transform: uppercase;4707  padding: 4px 7px;4708  flex-shrink: 0;4709  display: flex;4710  align-items: center;4711}47124713.peach-health-empty {4714  font-family: "IBM Plex Mono", monospace;4715  font-size: 10px;4716  color: var(--peach-t2);4717  padding: 6px 0;4718}47194720.peach-health-loading {4721  font-family: "IBM Plex Mono", monospace;4722  font-size: 10px;4723  color: var(--peach-t2);4724  padding: 6px 0;4725  display: flex;4726  align-items: center;4727  gap: 6px;4728}47294730.peach-health-loading::before {4731  content: "";4732  width: 10px;4733  height: 10px;4734  border: 1.5px solid var(--peach-t3);4735  border-top-color: var(--peach-accent);4736  border-radius: 50%;4737  animation: peach-spin 600ms linear infinite;4738}47394740@keyframes peach-spin {4741  to { transform: rotate(360deg); }4742}47434744.peach-spinner {4745  width: 32px;4746  height: 32px;4747  border: 2px solid var(--peach-s2);4748  border-top-color: var(--peach-accent);4749  border-radius: 50%;4750  margin: 0 auto 16px;4751  animation: peach-spin 0.8s linear infinite;4752}47534754.peach-progress-screen {4755  text-align: center;4756  padding: 32px 16px;4757}47584759.peach-progress-screen-title {4760  font-size: 13px;4761  color: var(--peach-t0);4762  margin-bottom: 16px;4763}47644765.peach-progress-screen-stage {4766  font-size: 11px;4767  color: var(--peach-t2);4768  min-height: 14px;4769}47704771.peach-progress-screen-note {4772  font-size: 10px;4773  color: var(--peach-t2);4774  margin-top: 8px;4775}47764777.peach-pairing-body {4778  flex: 1;4779  overflow-y: auto;4780  display: flex;4781  flex-direction: column;4782}47834784.peach-pairing-content {4785  flex: 1;4786  display: flex;4787  flex-direction: column;4788  align-items: center;4789  justify-content: center;4790  gap: 14px;4791  padding: 28px 20px;4792  text-align: center;4793}47944795.peach-pairing-discover {4796  justify-content: flex-start;4797  align-items: stretch;4798  text-align: left;4799  gap: 12px;4800}48014802.peach-pairing-discover .peach-pairing-headline {4803  text-align: center;4804  margin-bottom: 4px;4805}48064807.peach-pairing-peer-card {4808  display: flex;4809  align-items: center;4810  justify-content: space-between;4811  gap: 12px;4812  padding: 10px 12px;4813  border: 1px solid var(--peach-t3);4814  border-radius: 10px;4815  background: var(--peach-bg-card);4816}48174818.peach-pairing-peer-info {4819  display: flex;4820  flex-direction: column;4821  gap: 2px;4822  flex: 1;4823  min-width: 0;4824}48254826.peach-pairing-peer-name {4827  font-size: 13px;4828  color: var(--peach-t0);4829  white-space: nowrap;4830  overflow: hidden;4831  text-overflow: ellipsis;4832}48334834.peach-pairing-peer-meta {4835  font-size: 11px;4836  color: var(--peach-t2);4837}48384839.peach-pairing-headline {4840  font-family: var(--font-display);4841  font-style: italic;4842  font-weight: 300;4843  font-size: 28px;4844  color: var(--peach-t0);4845  margin: 0;4846  line-height: 1;4847}48484849.peach-pairing-subline {4850  font-size: 12px;4851  color: var(--peach-t2);4852  max-width: 220px;4853  line-height: 1.5;4854  margin: 0;4855}48564857.peach-pairing-subline--center {4858  text-align: center;4859}48604861.peach-pairing-code-display {4862  display: flex;4863  gap: 6px;4864}48654866.peach-pairing-code-digit {4867  display: flex;4868  align-items: center;4869  justify-content: center;4870  width: 36px;4871  height: 48px;4872  background: var(--peach-s2);4873  border: 1px solid var(--peach-t3);4874  border-radius: 6px;4875  font-family: var(--font-mono);4876  font-size: 22px;4877  color: var(--peach-t0);4878  letter-spacing: 0;4879}48804881.peach-pairing-countdown-ring {4882  position: relative;4883  display: inline-flex;4884  align-items: center;4885  justify-content: center;4886}48874888.peach-pairing-countdown-num {4889  position: absolute;4890  font-family: var(--font-mono);4891  font-size: 14px;4892  color: var(--peach-t1);4893}48944895.peach-pairing-ring-track {4896  fill: none;4897  stroke: var(--peach-t3);4898  stroke-width: 2;4899}49004901.peach-pairing-ring-progress {4902  fill: none;4903  stroke: var(--peach-accent);4904  stroke-width: 2;4905  stroke-linecap: round;4906  transform: rotate(-90deg);4907  transform-origin: 50% 50%;4908  transition: stroke-dashoffset 0.5s linear;4909}49104911.peach-pairing-code-inputs {4912  display: flex;4913  gap: 8px;4914}49154916.peach-pairing-code-box {4917  width: 36px;4918  height: 48px;4919  text-align: center;4920  background: var(--peach-s2);4921  border: 1px solid var(--peach-t3);4922  border-radius: 6px;4923  font-family: var(--font-mono);4924  font-size: 20px;4925  color: var(--peach-t0);4926  outline: none;4927  transition: border-color 120ms ease;4928}49294930.peach-pairing-code-box:focus {4931  border-color: var(--peach-accent);4932}49334934.peach-pairing-code-box.has-error {4935  border-color: rgba(220, 80, 60, 0.45);4936}49374938.peach-pairing-status {4939  display: flex;4940  align-items: center;4941  gap: 8px;4942  margin: 0;4943  font-size: 12px;4944  color: var(--peach-t1);4945}49464947.peach-pairing-error {4948  margin: 0;4949  font-size: 11px;4950  color: var(--peach-breach);4951}49524953.peach-pairing-error-msg {4954  color: var(--peach-t1);4955}49564957.peach-pairing-spinner {4958  width: 12px;4959  height: 12px;4960  border: 1.5px solid var(--peach-t3);4961  border-top-color: var(--peach-accent);4962  border-radius: 50%;4963  animation: peach-spin 0.8s linear infinite;4964}49654966.peach-pairing-success-icon,4967.peach-pairing-error-icon,4968.peach-pairing-hero {4969  display: inline-flex;4970  align-items: center;4971  justify-content: center;4972}49734974/* Tag chips */4975.peach-tag-chip {4976  display: inline-flex;4977  align-items: center;4978  gap: 4px;4979  padding: 3px 8px;4980  border-radius: 999px;4981  border: 1px solid color-mix(in srgb, var(--peach-accent) 28%, transparent);4982  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);4983  color: var(--peach-t0);4984  font-family: "IBM Plex Mono", monospace;4985  font-size: 10px;4986  letter-spacing: 0.04em;4987}49884989.peach-tag-chip-remove {4990  background: transparent;4991  border: none;4992  color: inherit;4993  opacity: 0.6;4994  cursor: pointer;4995  padding: 0;4996  font-size: 12px;4997  line-height: 1;4998}49995000.peach-tag-chip-remove:hover {5001  opacity: 1;5002}50035004/* Tag input */5005.peach-tag-input-wrap {5006  border-bottom: 1px solid var(--peach-t3);5007}50085009.peach-tag-suggestions {5010  display: flex;5011  flex-wrap: wrap;5012  gap: 4px;5013  padding: 6px 0;5014}50155016.peach-tag-suggestion {5017  padding: 2px 8px;5018  border-radius: 999px;5019  border: 1px solid var(--peach-t3);5020  background: var(--peach-s2);5021  color: var(--peach-t1);5022  font-family: "IBM Plex Mono", monospace;5023  font-size: 10px;5024  cursor: pointer;5025  transition: border-color 80ms ease, background 80ms ease;5026}50275028.peach-tag-suggestion:hover {5029  border-color: color-mix(in srgb, var(--peach-accent) 40%, transparent);5030  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5031}50325033/* Tag filter strip */5034.peach-tag-filter-strip {5035  border-bottom: 1px solid var(--peach-t3);5036  flex-shrink: 0;5037}50385039.peach-tag-filter-chip {5040  display: inline-flex;5041  align-items: center;5042  padding: 4px 10px;5043  border-radius: 999px;5044  border: 1px solid var(--peach-t3);5045  background: transparent;5046  color: var(--peach-t2);5047  font-family: "IBM Plex Mono", monospace;5048  font-size: 9px;5049  letter-spacing: 0.06em;5050  text-transform: uppercase;5051  cursor: pointer;5052  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5053  white-space: nowrap;5054}50555056.peach-tag-filter-chip:hover {5057  border-color: color-mix(in srgb, var(--peach-accent) 35%, transparent);5058  color: var(--peach-t1);5059}50605061.peach-tag-filter-chip.is-selected {5062  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5063  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5064  color: var(--peach-t0);5065}50665067/* ─────────────────────────────────────────────────────────────────────────5068   v1.4.12 additions5069   ─────────────────────────────────────────────────────────────────────── */50705071/* Sort bar */5072.peach-sort-bar {5073  display: flex;5074  align-items: center;5075  gap: 4px;5076  padding: 5px 12px;5077  border-bottom: 1px solid var(--peach-t3);5078  flex-shrink: 0;5079  overflow-x: auto;5080  scrollbar-width: none;5081}50825083.peach-sort-btn {5084  padding: 2px 9px;5085  border-radius: 999px;5086  border: 1px solid transparent;5087  background: transparent;5088  color: var(--peach-t2);5089  font-family: "IBM Plex Mono", monospace;5090  font-size: 9px;5091  letter-spacing: 0.07em;5092  text-transform: uppercase;5093  cursor: pointer;5094  transition: border-color 120ms ease, color 120ms ease, background 120ms ease;5095  white-space: nowrap;5096}50975098.peach-sort-btn:hover {5099  border-color: color-mix(in srgb, var(--peach-accent) 30%, transparent);5100  color: var(--peach-t1);5101}51025103.peach-sort-btn.is-active {5104  border-color: color-mix(in srgb, var(--peach-accent) 50%, transparent);5105  background: color-mix(in srgb, var(--peach-accent) 12%, transparent);5106  color: var(--peach-t0);5107}51085109.peach-sort-domain-hint {5110  margin-left: auto;5111  font-family: "IBM Plex Mono", monospace;5112  font-size: 9px;5113  color: color-mix(in srgb, var(--peach-accent) 60%, transparent);5114  white-space: nowrap;5115  overflow: hidden;5116  text-overflow: ellipsis;5117  max-width: 110px;5118}51195120/* Tab-match badge on entry rows */5121.peach-tab-match-badge {5122  display: inline-block;5123  width: 6px;5124  height: 6px;5125  border-radius: 50%;5126  background: color-mix(in srgb, var(--peach-accent) 75%, transparent);5127  margin-left: 5px;5128  vertical-align: middle;5129  flex-shrink: 0;5130  box-shadow: 0 0 4px color-mix(in srgb, var(--peach-accent) 40%, transparent);5131}51325133.peach-entry-row.is-tab-match {5134  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5135  border-bottom-color: color-mix(in srgb, var(--peach-accent) 8%, transparent);5136}51375138.peach-entry-row.is-tab-match:hover {5139  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5140}51415142/* Entry list stagger entrance */5143@keyframes peach-entry-fadein {5144  from { opacity: 0; transform: translateY(4px); }5145  to   { opacity: 1; transform: translateY(0); }5146}51475148.peach-vault-list .peach-entry-row {5149  animation: peach-entry-fadein 220ms cubic-bezier(0.16, 1, 0.3, 1) both;5150  content-visibility: auto;5151  contain-intrinsic-size: auto 44px;5152}51535154/* Button press micro-interaction */5155.peach-btn:active {5156  transform: scale(0.95);5157  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5158}51595160.peach-sort-btn:active,5161.peach-tag-filter-chip:active {5162  transform: scale(0.93);5163  transition: transform 80ms cubic-bezier(0.34, 1.56, 0.64, 1);5164}51655166/* Password strength bar (Lock view + shared) */5167.peach-password-strength {5168  display: flex;5169  align-items: center;5170  gap: 8px;5171  margin-top: 6px;5172}51735174.peach-strength-bar {5175  flex: 1;5176  height: 3px;5177  border-radius: 2px;5178  background: var(--peach-t3);5179  overflow: hidden;5180}51815182.peach-strength-fill {5183  height: 100%;5184  border-radius: 2px;5185  transition: width 300ms cubic-bezier(0.34, 1.56, 0.64, 1),5186              background 300ms ease;5187}51885189.peach-strength-bar--weak   .peach-strength-fill { width: 25%; background: rgba(220, 80, 60, 0.65); }5190.peach-strength-bar--fair   .peach-strength-fill { width: 50%; background: rgba(200, 140, 60, 0.6); }5191.peach-strength-bar--good   .peach-strength-fill { width: 75%; background: rgba(180, 162, 100, 0.55); }5192.peach-strength-bar--strong .peach-strength-fill { width: 100%; background: rgba(150, 175, 110, 0.6); }51935194.peach-strength-label {5195  font-family: "IBM Plex Mono", monospace;5196  font-style: italic;5197  font-size: 9px;5198  font-weight: 300;5199  letter-spacing: 0.06em;5200  color: var(--peach-t2);5201  min-width: 36px;5202  text-align: right;5203}52045205.peach-strength-bar--weak   + .peach-strength-label { color: rgba(220, 80, 60, 0.65); }5206.peach-strength-bar--fair   + .peach-strength-label { color: rgba(200, 140, 60, 0.6); }5207.peach-strength-bar--good   + .peach-strength-label { color: rgba(180, 162, 100, 0.55); }5208.peach-strength-bar--strong + .peach-strength-label { color: rgba(150, 175, 110, 0.6); }52095210/* Duress form */5211.peach-duress-status {5212  padding: 2px 8px;5213  border-radius: 999px;5214  border: 1px solid var(--peach-t3);5215  font-family: "IBM Plex Mono", monospace;5216  font-size: 9px;5217  letter-spacing: 0.07em;5218  text-transform: uppercase;5219  color: var(--peach-t2);5220  flex-shrink: 0;5221}52225223.peach-duress-status.is-active {5224  border-color: color-mix(in srgb, var(--peach-accent) 45%, transparent);5225  background: color-mix(in srgb, var(--peach-accent) 10%, transparent);5226  color: var(--peach-t0);5227}52285229.peach-duress-form {5230  padding: 8px 0 4px;5231  display: flex;5232  flex-direction: column;5233  gap: 6px;5234}52355236.peach-duress-form .peach-label {5237  margin-top: 4px;5238}52395240.peach-duress-actions {5241  display: flex;5242  gap: 6px;5243  align-items: center;5244  margin-top: 4px;5245}52465247.peach-duress-actions .peach-btn:first-child {5248  margin-right: auto;5249}52505251/* Improved overlay spring entrance */5252.peach-overlay-view.ov-enter-up {5253  animation: ov-enter-up-spring 300ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5254}52555256@keyframes ov-enter-up-spring {5257  from { opacity: 0; transform: translateY(16px) scale(0.98); }5258  to   { opacity: 1; transform: translateY(0) scale(1); }5259}52605261.peach-overlay-view.ov-enter-right {5262  animation: ov-enter-right-spring 280ms cubic-bezier(0.34, 1.56, 0.64, 1) both;5263}52645265@keyframes ov-enter-right-spring {5266  from { opacity: 0; transform: translateX(18px) scale(0.98); }5267  to   { opacity: 1; transform: translateX(0) scale(1); }5268}52695270/* ── Onboarding-mode restore screens (file import) ── */5271/* Used when MainImportView renders during onboarding (no vault yet).5272   Animates like a lock-screen transition. */5273.peach-lock-view {5274  position: absolute;5275  inset: 0;5276  display: flex;5277  flex-direction: column;5278  background:5279    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),5280    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),5281    var(--peach-bg);5282  z-index: 2;5283  overflow: hidden;5284  animation: peach-screen-enter 280ms cubic-bezier(0.16, 1, 0.3, 1) both;5285}52865287.peach-lock-view-header {5288  display: flex;5289  align-items: center;5290  justify-content: space-between;5291  padding: 16px 18px 12px;5292  flex-shrink: 0;5293}52945295/* ───────── Settings: auto-lock select ───────── */5296.peach-settings-select {5297  font-family: "IBM Plex Mono", monospace;5298  font-size: 11px;5299  background: transparent;5300  border: 1px solid var(--peach-t3);5301  border-radius: 4px;5302  color: var(--peach-t1);5303  padding: 3px 6px;5304  cursor: pointer;5305  outline: none;5306}5307.peach-settings-select:focus {5308  border-color: var(--peach-accent);5309}53105311/* ───────── Duress status pill (new polished) ───────── */5312.peach-duress-status-pill {5313  font-family: "IBM Plex Mono", monospace;5314  font-size: 9px;5315  text-transform: uppercase;5316  letter-spacing: 0.12em;5317  padding: 2px 8px;5318  border-radius: 12px;5319  background: var(--peach-t3);5320  color: var(--peach-t2);5321  flex-shrink: 0;5322}5323.peach-duress-status-pill.is-active {5324  background: color-mix(in srgb, var(--peach-accent) 15%, transparent);5325  color: var(--peach-accent);5326}53275328/* ───────── Entry advanced disclosure (canary) ───────── */5329.peach-entry-advanced {5330  margin-top: 12px;5331  border-top: 1px solid var(--peach-t3);5332  padding-top: 10px;5333  position: relative;5334  z-index: 1;5335}5336.peach-entry-advanced-toggle {5337  display: flex;5338  align-items: center;5339  justify-content: space-between;5340  width: 100%;5341  background: transparent;5342  border: none;5343  cursor: pointer;5344  padding: 0;5345  color: var(--peach-t2);5346}5347.peach-canary-section {5348  margin-top: 10px;5349  display: grid;5350  gap: 6px;5351}53525353/* ───────── Import: merge/replace radio choices ───────── */5354.peach-import-choice {5355  display: flex;5356  align-items: flex-start;5357  gap: 10px;5358  padding: 8px 10px;5359  border: 1px solid var(--peach-t3);5360  border-radius: 10px;5361  cursor: pointer;5362  margin-bottom: 6px;5363  transition: border-color 120ms ease, background 120ms ease;5364}5365.peach-import-choice:hover {5366  border-color: var(--peach-accent);5367}5368.peach-import-choice input[type="radio"] {5369  margin-top: 3px;5370  accent-color: var(--peach-accent);5371  flex-shrink: 0;5372}5373.peach-import-choice-main {5374  display: flex;5375  flex-direction: column;5376  gap: 2px;5377  min-width: 0;5378}5379.peach-import-choice-label {5380  font-size: 12px;5381  color: var(--peach-t0);5382}5383.peach-import-choice-sub {5384  font-size: 11px;5385  color: var(--peach-t2);5386  line-height: 1.5;5387}53885389/* ───────── Export: success confirmation strip ───────── */5390.peach-export-success {5391  display: flex;5392  align-items: flex-start;5393  gap: 10px;5394  padding: 12px;5395  border-radius: 12px;5396  border: 1px solid rgba(150, 175, 110, 0.3);5397  background: rgba(150, 175, 110, 0.08);5398  color: var(--peach-t0);5399  font-size: 12px;5400  line-height: 1.55;5401}5402.peach-export-success-check {5403  color: rgba(150, 175, 110, 0.9);5404  font-size: 14px;5405  flex-shrink: 0;5406}54075408/* ── Trash view ──────────────────────────────────────────────────────── */5409.peach-trash-entry-row {5410  display: flex;5411  align-items: center;5412  justify-content: space-between;5413  gap: 8px;5414  padding: 8px 0;5415  border-bottom: 1px solid var(--peach-border);5416}5417.peach-trash-entry-info {5418  flex: 1;5419  min-width: 0;5420  display: flex;5421  flex-direction: column;5422  gap: 2px;5423}5424.peach-trash-entry-title {5425  font-size: 13px;5426  color: var(--peach-t0);5427  overflow: hidden;5428  text-overflow: ellipsis;5429  white-space: nowrap;5430}5431.peach-trash-entry-meta {5432  font-family: var(--font-mono);5433  font-size: 9px;5434  color: var(--peach-t2);5435  letter-spacing: 0.04em;5436}5437.peach-trash-entry-actions {5438  display: flex;5439  align-items: center;5440  gap: 4px;5441  flex-shrink: 0;5442}5443.peach-trash-delete-btn {5444  background: transparent;5445  border: 0;5446  color: var(--peach-t3);5447  font-size: 16px;5448  line-height: 1;5449  cursor: pointer;5450  padding: 2px 5px;5451  transition: color 0.15s;5452}5453.peach-trash-delete-btn:hover { color: var(--peach-breach); }5454.peach-trash-list {5455  overflow-y: auto;5456}5457.peach-trash-footer {5458  display: flex;5459  align-items: center;5460  gap: 8px;5461  padding: 8px 0 0;5462  border-top: 1px solid var(--peach-border);5463  margin-top: 4px;5464}5465.peach-trash-purge-all {5466  background: transparent;5467  border: 0;5468  color: var(--peach-t3);5469  font-size: 10px;5470  cursor: pointer;5471  padding: 4px 0;5472  letter-spacing: 0.03em;5473  transition: color 0.2s;5474}5475.peach-trash-purge-all:hover { color: var(--peach-breach); }5476.peach-trash-purge-confirm-label {5477  font-size: 10px;5478  color: var(--peach-t1);5479  flex: 1;5480}54815482/* ── Settings shortcuts grid ─────────────────────────────────────────── */5483.peach-shortcuts-grid {5484  display: grid;5485  grid-template-columns: auto 1fr;5486  gap: 6px 12px;5487  align-items: center;5488  padding: 4px 0;5489}5490.peach-shortcut-key {5491  font-family: var(--font-mono);5492  font-size: 10px;5493  color: var(--peach-t0);5494  background: var(--peach-t3);5495  border-radius: 4px;5496  padding: 2px 6px;5497  white-space: nowrap;5498  text-align: center;5499}5500.peach-shortcut-desc {5501  font-size: 11px;5502  color: var(--peach-t1);5503}55045505/* ── Sort bar trash button ───────────────────────────────────────────── */5506.peach-sort-trash-btn {5507  display: flex;5508  align-items: center;5509  justify-content: center;5510  padding: 3px 5px;5511  background: transparent;5512  border: none;5513  cursor: pointer;5514  color: var(--peach-t2);5515  border-radius: 4px;5516  transition: color 140ms ease, background 140ms ease;5517}5518.peach-sort-trash-btn:hover {5519  color: var(--peach-t1);5520  background: var(--peach-t3);5521}5522.peach-sort-trash-btn.is-active {5523  color: var(--peach-accent);5524}55255526/* Accent color picker */5527.peach-settings-row--accent { align-items: flex-start; padding-top: 10px; }5528.peach-accent-picker {5529  display: flex;5530  flex-wrap: wrap;5531  gap: 7px;5532  padding: 2px 0;5533}5534.peach-accent-swatch {5535  width: 22px;5536  height: 22px;5537  border-radius: 50%;5538  border: 2px solid transparent;5539  cursor: pointer;5540  padding: 0;5541  transition: transform 100ms;5542  outline-offset: 2px;5543}5544.peach-accent-swatch:hover { transform: scale(1.15); }5545.peach-accent-swatch.is-active {5546  border-color: var(--peach-t0);5547  transform: scale(1.1);5548}55495550/* Display font picker — swatch shows an "Aa" preview rendered with each5551   font option so the user can see what they're picking before they pick. */5552.peach-settings-row--font { align-items: flex-start; padding-top: 10px; }5553.peach-font-picker {5554  display: flex;5555  flex-wrap: wrap;5556  gap: 6px;5557  padding: 2px 0;5558  flex: 1;5559  justify-content: flex-end;5560}5561.peach-font-swatch {5562  display: flex;5563  flex-direction: column;5564  align-items: center;5565  gap: 2px;5566  padding: 4px 8px;5567  background: transparent;5568  border: 1px solid var(--peach-t3);5569  border-radius: 6px;5570  cursor: pointer;5571  transition: border-color 100ms, background 100ms;5572  min-width: 56px;5573}5574.peach-font-swatch:hover {5575  border-color: var(--peach-accent-dim);5576  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);5577}5578.peach-font-swatch.is-active {5579  border-color: var(--peach-accent);5580  background: color-mix(in srgb, var(--peach-accent) 8%, transparent);5581}5582.peach-font-swatch-glyph {5583  font-size: 18px;5584  line-height: 1;5585  color: var(--peach-t0);5586}5587.peach-font-swatch[data-font-preview="cormorant-italic"] .peach-font-swatch-glyph {5588  font-family: "Cormorant Garamond", serif;5589  font-style: italic;5590  font-weight: 400;5591}5592.peach-font-swatch[data-font-preview="cormorant"] .peach-font-swatch-glyph {5593  font-family: "Cormorant Garamond", serif;5594  font-style: normal;5595  font-weight: 400;5596}5597.peach-font-swatch[data-font-preview="inter"] .peach-font-swatch-glyph {5598  font-family: "Inter Variable", "Inter", sans-serif;5599  font-style: normal;5600  font-weight: 400;5601}5602.peach-font-swatch[data-font-preview="system"] .peach-font-swatch-glyph {5603  font-family: system-ui, -apple-system, sans-serif;5604  font-style: normal;5605  font-weight: 400;5606}5607.peach-font-swatch-name {5608  font-family: var(--font-mono);5609  font-size: 8px;5610  letter-spacing: 0.06em;5611  color: var(--peach-t2);5612  text-transform: lowercase;5613}56145615.peach-pill-group {5616  display: flex;5617  gap: 6px;5618}5619.peach-pill-group .peach-btn.is-active {5620  background: color-mix(in srgb, var(--peach-accent) 14%, transparent);5621  border-color: var(--peach-accent);5622  color: var(--peach-t0);5623}56245625/* ── Card entry styles ───────────────────────────────────────── */5626.peach-card-number {5627  font-family: var(--peach-mono);5628  letter-spacing: 0.08em;5629}56305631.peach-card-network-badge {5632  font-size: 10px;5633  padding: 1px 5px;5634  border-radius: 4px;5635  border: 0.5px solid var(--peach-border);5636  color: var(--peach-text-dim);5637  margin-left: 6px;5638  vertical-align: middle;5639}56405641.peach-card-expiry-row {5642  display: flex;5643  align-items: center;5644  gap: 8px;5645}56465647.peach-card-expiry-sep {5648  color: var(--peach-text-dim);5649}56505651/* ── Pro tier — upgrade screen ──────────────────────────────── */5652.peach-pro-mark {5653  font-size: 9px;5654  color: var(--peach-accent);5655  margin-left: 6px;5656  vertical-align: super;5657  opacity: 0.7;5658}56595660.peach-pro-mini-badge {5661  display: block;5662  font-size: 10px;5663  font-style: italic;5664  color: var(--peach-accent);5665  letter-spacing: 0.04em;5666  margin-top: -2px;5667  padding-left: 2px;5668  opacity: 0.85;5669  text-align: center;5670}56715672.peach-wordmark-stack {5673  display: inline-flex;5674  flex-direction: column;5675  align-items: center;5676}56775678/* ── Pro tier — upgrade page ─────────────────────────────────── */5679.peach-pro-upgrade {5680  display: flex;5681  flex-direction: column;5682  align-items: stretch;5683  gap: 10px;5684  padding: 0 4px 8px;5685}56865687.peach-pro-upgrade-hero {5688  display: flex;5689  flex-direction: column;5690  align-items: center;5691  gap: 4px;5692  padding: 10px 0 6px;5693}56945695.peach-pro-upgrade-mark-wrap {5696  display: flex;5697  align-items: center;5698  justify-content: center;5699  margin-bottom: 2px;5700}57015702.peach-pro-upgrade-mark {5703  width: 38px;5704  height: 38px;5705  filter:5706    drop-shadow(0 0 7px color-mix(in srgb, var(--peach-accent) 45%, transparent))5707    drop-shadow(0 0 18px color-mix(in srgb, var(--peach-accent) 18%, transparent));5708}57095710.peach-pro-upgrade-title {5711  font-family: var(--font-display, var(--font-ui));5712  font-size: 22px;5713  margin: 0;5714  color: var(--peach-t0);5715  letter-spacing: 0.01em;5716}57175718.peach-pro-upgrade-tagline {5719  margin: 0;5720  font-style: italic;5721  color: var(--peach-t2);5722  font-size: 11px;5723}57245725.peach-pro-features {5726  display: flex;5727  flex-direction: column;5728  gap: 8px;5729  border-top: 1px solid var(--peach-border);5730  border-bottom: 1px solid var(--peach-border);5731  padding: 10px 4px;5732}57335734.peach-pro-feature {5735  display: flex;5736  gap: 9px;5737  align-items: baseline;5738}57395740.peach-pro-feature-mark {5741  color: var(--peach-accent);5742  font-size: 11px;5743  flex-shrink: 0;5744  display: inline-block;5745  transform-origin: center;5746  opacity: 0.8;5747}57485749.peach-pro-feature-text {5750  display: flex;5751  flex-direction: column;5752  gap: 1px;5753}57545755.peach-pro-feature-name {5756  font-size: 12px;5757  color: var(--peach-t0);5758}57595760.peach-pro-feature-desc {5761  font-size: 10px;5762  color: var(--peach-t2);5763}57645765.peach-pro-feature.is-highlighted .peach-pro-feature-mark {5766  animation: peach-pulse-accent 600ms ease-out forwards;5767}57685769@keyframes peach-pulse-accent {5770  0%   { opacity: 1; transform: scale(1.4); }5771  100% { opacity: 0.7; transform: scale(1); }5772}57735774.peach-pro-upgrade-actions {5775  display: flex;5776  flex-direction: column;5777  align-items: center;5778  gap: 8px;5779  padding-top: 2px;5780}57815782.peach-pro-pricing {5783  margin: 0;5784  text-align: center;5785  font-size: 11px;5786  color: var(--peach-t2);5787  letter-spacing: 0.04em;5788}57895790.peach-pro-upgrade-cta {5791  align-self: stretch;5792  text-align: center;5793  text-decoration: none;5794  display: block;5795  padding: 9px 20px;5796  font-size: 13px;5797  box-sizing: border-box;5798}57995800.peach-pro-key-divider {5801  display: flex;5802  align-items: center;5803  gap: 8px;5804  width: 100%;5805  color: var(--peach-t3);5806  font-size: 10px;5807  letter-spacing: 0.08em;5808}58095810.peach-pro-key-divider::before,5811.peach-pro-key-divider::after {5812  content: "";5813  flex: 1;5814  height: 1px;5815  background: var(--peach-border);5816}58175818.peach-pro-key-link {5819  background: transparent;5820  border: 1px solid var(--peach-border);5821  border-radius: 8px;5822  color: var(--peach-t1);5823  font-size: 12px;5824  cursor: pointer;5825  align-self: stretch;5826  padding: 8px 12px;5827  text-align: center;5828  transition: border-color 0.2s, color 0.2s;5829}58305831.peach-pro-key-link:hover {5832  border-color: var(--peach-accent);5833  color: var(--peach-accent);5834}58355836/* ── Pro tier — key ceremony ─────────────────────────────────── */5837.peach-pro-key-ceremony {5838  display: flex;5839  flex-direction: column;5840  align-items: center;5841  gap: 12px;5842  padding: 20px 4px 16px;5843}58445845.peach-pro-key-ceremony .peach-lock-rune-string {5846  font-size: 16px;5847  gap: 12px;5848  flex: 0;5849  justify-content: center;5850}58515852.peach-pro-key-ceremony-label {5853  margin: 0;5854  font-size: 11px;5855  color: var(--peach-t2);5856  font-style: italic;5857  letter-spacing: 0.04em;5858}58595860.peach-pro-key-input {5861  font-family: var(--font-mono, monospace);5862  letter-spacing: 0.06em;5863  text-align: center;5864  width: 100%;5865  box-sizing: border-box;5866}58675868.peach-pro-key-error {5869  margin: 0;5870  font-size: 12px;5871  text-align: center;5872  color: var(--peach-breach, #e55);5873  padding: 0;5874}58755876.peach-pro-key-activate {5877  width: 100%;5878  text-align: center;5879  box-sizing: border-box;5880  padding: 10px 20px;5881  font-size: 13px;5882}58835884.peach-pro-key-cancel {5885  background: transparent;5886  border: 0;5887  color: var(--peach-t2);5888  font-size: 11px;5889  cursor: pointer;5890  padding: 2px 8px;5891  transition: color 0.2s;5892}58935894.peach-pro-key-cancel:hover { color: var(--peach-accent); }58955896/* ── Pro tier — active state ─────────────────────────────────── */5897.peach-pro-active {5898  display: flex;5899  flex-direction: column;5900  align-items: center;5901  gap: 0;5902  padding: 8px 4px 16px;5903  min-height: 280px;5904}59055906.peach-pro-active-hero {5907  display: flex;5908  flex-direction: column;5909  align-items: center;5910  gap: 6px;5911  padding: 20px 0 22px;5912}59135914.peach-pro-active-mark-wrap {5915  display: flex;5916  align-items: center;5917  justify-content: center;5918  margin-bottom: 4px;5919}59205921.peach-pro-active-mark {5922  width: 60px;5923  height: 60px;5924  filter:5925    drop-shadow(0 0 10px color-mix(in srgb, var(--peach-accent) 55%, transparent))5926    drop-shadow(0 0 26px color-mix(in srgb, var(--peach-accent) 22%, transparent));5927}59285929.peach-pro-active-title {5930  font-family: var(--font-display, var(--font-ui));5931  font-size: 26px;5932  margin: 0;5933  color: var(--peach-t0);5934  letter-spacing: 0.01em;5935}59365937.peach-pro-active-since {5938  margin: 0;5939  font-size: 11px;5940  color: var(--peach-t2);5941  font-style: italic;5942}59435944.peach-pro-active-features {5945  display: flex;5946  flex-direction: column;5947  gap: 8px;5948  width: 100%;5949  padding: 14px 8px 0;5950  border-top: 1px solid var(--peach-border);5951  flex: 1;5952}59535954.peach-pro-active-feature {5955  display: flex;5956  align-items: center;5957  gap: 9px;5958}59595960.peach-pro-active-feature-mark {5961  color: var(--peach-accent);5962  font-size: 10px;5963  opacity: 0.65;5964  flex-shrink: 0;5965}59665967.peach-pro-active-feature-name {5968  font-size: 12px;5969  color: var(--peach-t1);5970}59715972.peach-pro-deactivate {5973  align-self: center;5974  background: transparent;5975  border: 0;5976  color: var(--peach-t3);5977  font-size: 10px;5978  cursor: pointer;5979  padding: 8px 0 0;5980  margin-top: 16px;5981  letter-spacing: 0.03em;5982  transition: color 0.2s;5983}59845985.peach-pro-deactivate:hover { color: var(--peach-t2); }59865987.peach-pro-deactivate:disabled {5988  opacity: 0.5;5989  cursor: default;5990}59915992/* ── Pro advanced health remediation queue ──────────────────── */5993.peach-health-pro-queue {5994  display: flex;5995  flex-direction: column;5996  gap: 10px;5997  padding: 12px;5998  margin: 0 0 12px;5999  background: color-mix(in srgb, var(--peach-accent) 4%, transparent);6000  border: 1px solid color-mix(in srgb, var(--peach-accent) 18%, transparent);6001  border-radius: 10px;6002}60036004.peach-health-pro-queue-head {6005  display: flex;6006  justify-content: space-between;6007  align-items: baseline;6008}60096010.peach-health-pro-queue-title {6011  font-size: 12px;6012  font-weight: 500;6013  letter-spacing: 0.04em;6014  text-transform: uppercase;6015  color: var(--peach-accent);6016}60176018.peach-health-pro-queue-score {6019  font-size: 11px;6020  color: var(--peach-t2);6021}60226023.peach-health-pro-row {6024  display: flex;6025  gap: 10px;6026  align-items: center;6027  padding: 8px 0;6028  border-top: 1px solid var(--peach-border);6029}60306031.peach-health-pro-row-info {6032  flex: 1;6033  display: flex;6034  flex-direction: column;6035  gap: 4px;6036  min-width: 0;6037}60386039.peach-health-pro-row-name {6040  font-size: 13px;6041  color: var(--peach-t0);6042  overflow: hidden;6043  text-overflow: ellipsis;6044  white-space: nowrap;6045}60466047.peach-health-pro-row-meta {6048  font-size: 11px;6049  color: var(--peach-t2);6050}60516052.peach-health-pro-bar {6053  height: 2px;6054  background: var(--peach-border);6055  border-radius: 2px;6056  overflow: hidden;6057  margin-top: 2px;6058}60596060.peach-health-pro-bar-fill {6061  height: 100%;6062  background: var(--peach-accent);6063  transition: width 200ms ease-out;6064}60656066/* ── Pro activation celebration ── */6067@keyframes peach-pro-bloom {6068  0%   { filter: drop-shadow(0 0 0px var(--peach-glow)); }6069  40%  { filter: drop-shadow(0 0 24px var(--peach-accent))6070                 drop-shadow(0 0 48px var(--peach-glow)); }6071  100% { filter: drop-shadow(0 0 0px var(--peach-glow)); }6072}60736074@keyframes peach-pro-wordmark-in {6075  from { opacity: 0; transform: translateY(4px); }6076  to   { opacity: 1; transform: translateY(0); }6077}60786079@keyframes peach-pro-fade-out {6080  from { opacity: 1; }6081  to   { opacity: 0; }6082}60836084.peach-pro-celebration {6085  background:6086    radial-gradient(120% 80% at 0% 0%, var(--shell-accent-a) 0%, transparent 65%),6087    radial-gradient(85% 100% at 100% 100%, var(--shell-accent-b) 0%, transparent 70%),6088    var(--peach-bg);6089  border: 1px solid var(--peach-t3);6090  box-shadow:6091    0 2px 8px rgba(0,0,0,0.55),6092    0 14px 48px rgba(0,0,0,0.7),6093    0 0 0 1px rgba(240,232,216,0.04);6094  overflow: hidden;6095  width: 320px;6096  height: 520px;6097  display: flex;6098  flex-direction: column;6099  align-items: center;6100  justify-content: center;6101  gap: 8px;6102  padding: 32px 24px;6103  text-align: center;6104}61056106.peach-pro-celebration.is-leaving {6107  animation: peach-pro-fade-out 400ms ease forwards;6108}61096110.peach-pro-bloom-target {6111  font-size: 48px;6112  animation: peach-pro-bloom 600ms cubic-bezier(0.16, 1, 0.3, 1) forwards;6113  margin-bottom: 12px;6114}61156116.peach-pro-wordmark {6117  font-family: var(--font-display);6118  font-size: 22px;6119  font-style: italic;6120  font-weight: 400;6121  color: var(--peach-accent);6122  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 500ms both;6123}61246125.peach-pro-thankyou {6126  font-size: 12px;6127  font-style: italic;6128  color: var(--peach-t2);6129  animation: peach-pro-wordmark-in 400ms cubic-bezier(0.16, 1, 0.3, 1) 800ms both;6130}613161326133/* ── Pending Pro notice banner (shown after background sync gate fires) ── */6134.peach-pro-notice-banner {6135  display: flex;6136  align-items: center;6137  gap: 8px;6138  padding: 7px 12px;6139  background: color-mix(in srgb, var(--peach-accent) 12%, var(--peach-bg-card));6140  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 25%, transparent);6141  font-size: 11px;6142  color: var(--peach-t2);6143  font-family: "IBM Plex Mono", monospace;6144  flex-shrink: 0;6145}61466147.peach-pro-notice-link {6148  background: none;6149  border: none;6150  padding: 0;6151  cursor: pointer;6152  font-size: 11px;6153  color: var(--peach-accent);6154  font-family: "IBM Plex Mono", monospace;6155  margin-left: auto;6156  white-space: nowrap;6157}61586159.peach-pro-notice-close {6160  background: none;6161  border: none;6162  padding: 0 0 0 4px;6163  cursor: pointer;6164  font-size: 10px;6165  color: var(--peach-t3);6166  line-height: 1;6167}61686169/* ── Incoming pairing request overlay banner (Phase 7) ──────────────────6170   Renders over whatever view is showing. 60-second expiry; the popup ticks6171   the countdown each second and clears the banner when it hits zero. */6172.peach-pair-request-banner {6173  display: flex;6174  flex-direction: column;6175  gap: 8px;6176  padding: 10px 12px;6177  background: color-mix(in srgb, var(--peach-accent) 14%, var(--peach-bg-card));6178  border-bottom: 1px solid color-mix(in srgb, var(--peach-accent) 32%, transparent);6179  font-family: "IBM Plex Mono", monospace;6180  flex-shrink: 0;6181}61826183.peach-pair-request-header {6184  display: flex;6185  align-items: center;6186  gap: 8px;6187  font-size: 12px;6188  color: var(--peach-t1);6189}61906191.peach-pair-request-mark {6192  font-size: 14px;6193}61946195.peach-pair-request-title {6196  font-weight: 600;6197  color: var(--peach-t0);6198}61996200.peach-pair-request-countdown {6201  margin-left: auto;6202  font-variant-numeric: tabular-nums;6203  color: var(--peach-t2);6204  font-size: 11px;6205}62066207.peach-pair-request-body {6208  margin: 0;6209  font-size: 12px;6210  color: var(--peach-t1);6211  line-height: 1.4;6212}62136214.peach-pair-request-body strong {6215  color: var(--peach-t0);6216  font-weight: 600;6217}62186219.peach-pair-request-actions {6220  display: flex;6221  gap: 8px;6222  justify-content: flex-end;6223}62246225/* ─── First-run onboarding ──────────────────────────────────────────────6226   Three-card welcome shown once before vault creation. The PeachScript6227   rune background drifts behind everything at very low opacity — it's6228   atmosphere, not focus. The cards themselves use the same panel6229   language as the rest of the popup so the transition into NewVault is6230   continuous, not a jarring switch of visual register. */62316232.peach-onboarding {6233  position: relative;6234  display: flex;6235  flex-direction: column;6236  width: 100%;6237  height: 100%;6238  padding: 16px 16px 18px;6239  box-sizing: border-box;6240  overflow: hidden;6241  animation: peach-onboard-enter 300ms cubic-bezier(0.16, 1, 0.3, 1) both;6242}62436244.peach-onboarding.is-completing {6245  animation: peach-onboard-exit 200ms ease-out forwards;6246}62476248.peach-rune-background {6249  position: absolute;6250  inset: 0;6251  width: 100%;6252  height: 100%;6253  pointer-events: none;6254  z-index: 0;6255  transition: opacity 500ms ease-out;6256}62576258.peach-onboarding.is-completing .peach-rune-background {6259  opacity: 0;6260}62616262.peach-onboarding-header {6263  position: relative;6264  z-index: 1;6265  display: flex;6266  align-items: center;6267  margin-bottom: 14px;6268}62696270.peach-onboarding-card {6271  position: relative;6272  z-index: 1;6273  flex: 1;6274  display: flex;6275  flex-direction: column;6276  gap: 10px;6277  padding: 22px 20px;6278  border-radius: 16px;6279  border: 1px solid var(--peach-t3);6280  background:6281    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6282  backdrop-filter: blur(3px);6283  -webkit-backdrop-filter: blur(3px);6284  box-shadow:6285    inset 0 1px 0 rgba(240, 232, 216, 0.04),6286    0 12px 28px rgba(0, 0, 0, 0.12);6287  cursor: pointer;6288  user-select: none;6289  animation: peach-card-in 200ms cubic-bezier(0.16, 1, 0.3, 1) both;6290}62916292.peach-onboarding-card.is-exiting {6293  animation: peach-card-out 120ms ease-in forwards;6294  pointer-events: none;6295}62966297.peach-onboarding-card-headline {6298  margin: 0;6299  font-family: var(--font-display);6300  font-style: italic;6301  font-weight: 400;6302  font-size: 22px;6303  line-height: 1.05;6304  color: var(--peach-t0);6305  white-space: pre-line;6306}63076308.peach-onboarding-divider {6309  margin: 4px 0 6px;6310  border: 0;6311  border-top: 1px solid var(--peach-t3);6312  width: 100%;6313}63146315.peach-onboarding-body {6316  margin: 0;6317  font-size: 13px;6318  line-height: 1.6;6319  color: var(--peach-t1);6320}63216322.peach-onboarding-warning {6323  display: flex;6324  align-items: flex-start;6325  gap: 8px;6326  margin: 6px 0 0;6327  padding-top: 8px;6328  border-top: 1px dashed var(--peach-t3);6329  font-size: 13px;6330  line-height: 1.5;6331  color: var(--peach-t1);6332}63336334.peach-onboarding-warning-icon {6335  color: var(--peach-accent);6336  font-size: 13px;6337  line-height: 1.5;6338  flex: 0 0 auto;6339}63406341.peach-onboarding-nav {6342  position: relative;6343  z-index: 1;6344  display: flex;6345  align-items: center;6346  justify-content: space-between;6347  margin-top: 12px;6348  padding: 0 4px;6349}63506351.peach-onboarding-dots {6352  display: flex;6353  align-items: center;6354  gap: 6px;6355}63566357.peach-onboarding-dot {6358  width: 6px;6359  height: 6px;6360  border-radius: 50%;6361  background: var(--peach-t2);6362  transition: width 200ms ease, height 200ms ease, background 200ms ease;6363}63646365.peach-onboarding-dot.is-active {6366  width: 8px;6367  height: 8px;6368  background: var(--peach-accent);6369}63706371.peach-onboarding-next {6372  background: none;6373  border: none;6374  padding: 4px 0;6375  cursor: pointer;6376  font-family: "IBM Plex Mono", monospace;6377  font-size: 11px;6378  letter-spacing: 0.04em;6379  color: var(--peach-t1);6380  transition: color 150ms ease;6381}63826383.peach-onboarding-next:hover {6384  color: var(--peach-t0);6385}63866387.peach-onboarding-next:disabled {6388  opacity: 0.5;6389  cursor: default;6390}63916392.peach-onboarding-mobile-card-buttons {6393  display: flex;6394  flex-direction: column;6395  gap: 8px;6396  margin-top: 16px;6397}63986399@keyframes peach-onboard-enter {6400  from { opacity: 0; transform: translateY(20px); }6401  to   { opacity: 1; transform: translateY(0); }6402}64036404@keyframes peach-onboard-exit {6405  from { opacity: 1; }6406  to   { opacity: 0; }6407}64086409@keyframes peach-card-in {6410  from { opacity: 0; transform: translateX(12px); }6411  to   { opacity: 1; transform: translateX(0); }6412}64136414@keyframes peach-card-out {6415  from { opacity: 1; transform: translateX(0); }6416  to   { opacity: 0; transform: translateX(-12px); }6417}64186419/* ─── New vault screen — matched to onboarding card language ─────────── */64206421.peach-newvault {6422  position: relative;6423  display: flex;6424  flex-direction: column;6425  gap: 12px;6426  padding: 16px 16px 18px;6427  overflow: hidden;6428}64296430/* Suppress the warm-blob ambient art inherited from .lock-screen — the6431   new vault card now carries the visual weight. */6432.peach-newvault::before {6433  content: none;6434}64356436.peach-newvault-header {6437  position: relative;6438  z-index: 2;6439  display: flex;6440  align-items: center;6441  gap: 10px;6442  margin-bottom: 2px;6443}64446445.peach-newvault-back {6446  display: inline-flex;6447  align-items: center;6448  gap: 4px;6449  background: transparent;6450  border: none;6451  color: var(--peach-t2);6452  font-family: "IBM Plex Mono", monospace;6453  font-size: 10px;6454  letter-spacing: 0.06em;6455  cursor: pointer;6456  padding: 4px 6px;6457  border-radius: 6px;6458  transition: color 120ms ease, background 120ms ease;6459}64606461.peach-newvault-back:hover {6462  color: var(--peach-t0);6463  background: rgba(240, 232, 216, 0.04);6464}64656466.peach-newvault-mark {6467  position: absolute;6468  right: -12px;6469  top: 6px;6470  width: 110px;6471  height: 110px;6472  pointer-events: none;6473  opacity: 0.10;6474  filter: saturate(0.9);6475  z-index: 0;6476}6477.peach-newvault-mark-art {6478  width: 100%;6479  height: 100%;6480}6481.peach-newvault-mark-art path:nth-child(2),6482.peach-newvault-mark-art path:nth-child(3) {6483  stroke: rgba(123, 144, 96, 0.88);6484  fill: rgba(123, 144, 96, 0.88);6485}64866487.peach-newvault-card {6488  position: relative;6489  z-index: 1;6490  display: flex;6491  flex-direction: column;6492  gap: 12px;6493  padding: 22px 20px 18px;6494  border-radius: 16px;6495  border: 1px solid var(--peach-t3);6496  background:6497    linear-gradient(180deg, rgba(240, 232, 216, 0.03), rgba(240, 232, 216, 0.015));6498  backdrop-filter: blur(3px);6499  -webkit-backdrop-filter: blur(3px);6500  box-shadow:6501    inset 0 1px 0 rgba(240, 232, 216, 0.04),6502    0 12px 28px rgba(0, 0, 0, 0.12);6503  animation: peach-onboard-enter 320ms cubic-bezier(0.16, 1, 0.3, 1) both;6504}65056506.peach-newvault-headline {6507  margin: 0;6508  font-family: var(--font-display);6509  font-style: italic;6510  font-weight: 400;6511  font-size: 24px;6512  line-height: 1.05;6513  color: var(--peach-t0);6514  white-space: pre-line;6515}65166517.peach-newvault-divider {6518  margin: 2px 0 4px;6519  border: 0;6520  border-top: 1px solid var(--peach-t3);6521  width: 100%;6522}65236524.peach-newvault-field {6525  display: flex;6526  flex-direction: column;6527  gap: 4px;6528}65296530.peach-newvault-label-row {6531  display: flex;6532  align-items: center;6533  justify-content: space-between;6534}65356536/* Monospace input scaled to the card. Replaces the 22px unlock-input6537   so the placeholder no longer overflows and the field reads as part6538   of the same surface as the body copy. */6539.peach-newvault-input {6540  font-size: 14px;6541  letter-spacing: 0.18em;6542  padding: 8px 0;6543}6544.peach-newvault-input::placeholder {6545  letter-spacing: 0.18em;6546  color: var(--peach-t2);6547}65486549.peach-newvault-hint {6550  margin: 2px 0 0;6551  font-family: "IBM Plex Mono", monospace;6552  font-size: 10px;6553  color: var(--peach-t2);6554  letter-spacing: 0.04em;6555}65566557.peach-newvault-submit {6558  margin-top: 4px;6559}65606561.peach-newvault-warning {6562  display: flex;6563  align-items: flex-start;6564  gap: 8px;6565  margin: 4px 0 0;6566  padding-top: 10px;6567  border-top: 1px dashed var(--peach-t3);6568  font-size: 12px;6569  line-height: 1.5;6570  color: var(--peach-t1);6571}65726573.peach-newvault-warning-icon {6574  color: var(--peach-accent);6575  font-size: 13px;6576  line-height: 1.4;6577  flex: 0 0 auto;6578}65796580.peach-newvault-footer {6581  position: relative;6582  z-index: 1;6583  display: flex;6584  flex-direction: column;6585  gap: 4px;6586  padding: 4px 4px 0;6587}65886589/* Settings body — warm accent gradient gives the glass something to blur against */6590.peach-settings-body {6591  background:6592    radial-gradient(6593      ellipse at 30% 20%,6594      color-mix(in srgb, var(--peach-accent) 8%, transparent) 0%,6595      transparent 60%6596    );6597}65986599/* ── Danger zone (Settings home → Panic flow) ──────────────────────────── */6600/* ── Danger cards (Replace + Destroy) ────────────────────────────────────6601 * Two severity levels: "warn" for actions that are dangerous-but-recoverable6602 * (replacing the vault from a backup file) and "hazard" for actions that6603 * are absolutely irreversible (Panic). Both use the same card scaffold so6604 * they read as a pair, but the colour family signals the severity at a6605 * glance — yellow for caution, red for don't.6606 */6607.peach-danger-card {6608  --danger-tint: 235, 158, 52; /* amber */6609  display: flex;6610  flex-direction: column;6611  gap: 8px;6612  padding: 14px;6613  margin-top: 10px;6614  border-radius: 12px;6615  border: 1px solid rgba(var(--danger-tint), 0.32);6616  background:6617    radial-gradient(120% 120% at 0% 0%, rgba(var(--danger-tint), 0.10) 0%, transparent 60%),6618    rgba(var(--danger-tint), 0.04);6619  box-shadow:6620    inset 0 1px 0 rgba(var(--danger-tint), 0.08),6621    0 0 24px rgba(var(--danger-tint), 0.04);6622  transition: box-shadow 220ms ease, border-color 220ms ease, transform 180ms ease;6623}66246625.peach-danger-card:hover {6626  border-color: rgba(var(--danger-tint), 0.55);6627  box-shadow:6628    inset 0 1px 0 rgba(var(--danger-tint), 0.12),6629    0 0 36px rgba(var(--danger-tint), 0.10);6630}66316632.peach-danger-card--hazard {6633  --danger-tint: 220, 38, 38; /* red */6634}66356636.peach-danger-card-head {6637  display: flex;6638  align-items: center;6639  gap: 10px;6640}66416642.peach-danger-card-glyph {6643  width: 28px;6644  height: 28px;6645  flex-shrink: 0;6646  display: flex;6647  align-items: center;6648  justify-content: center;6649  border-radius: 8px;6650  background: rgba(var(--danger-tint), 0.12);6651  color: rgba(var(--danger-tint), 0.95);6652  font-size: 16px;6653  line-height: 1;6654}66556656.peach-danger-card-title {6657  margin: 0;6658  font-size: 13px;6659  font-weight: 600;6660  color: rgba(var(--danger-tint), 0.92);6661  letter-spacing: 0.01em;6662}66636664.peach-danger-card-copy {6665  margin: 0;6666  font-size: 11px;6667  line-height: 1.5;6668  color: var(--peach-t2);6669}66706671.peach-danger-card-button {6672  width: 100%;6673  padding: 9px;6674  margin-top: 4px;6675  background: transparent;6676  border: 1px solid rgba(var(--danger-tint), 0.45);6677  border-radius: 8px;6678  color: rgba(var(--danger-tint), 0.9);6679  font-size: 12px;6680  font-weight: 500;6681  letter-spacing: 0.02em;6682  cursor: pointer;6683  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6684}66856686.peach-danger-card-button:hover {6687  background: rgba(var(--danger-tint), 0.10);6688  border-color: rgba(var(--danger-tint), 0.75);6689  color: rgb(var(--danger-tint));6690}66916692/* ── Panic flow (three-step destruction) ───────────────────────────────── */6693.peach-panic {6694  display: flex;6695  flex-direction: column;6696  flex: 1;6697  min-height: 0;6698  padding: 28px 20px 20px;6699  gap: 18px;6700  overflow-y: auto;6701  scrollbar-width: none;6702  -ms-overflow-style: none;6703}67046705.peach-panic::-webkit-scrollbar { display: none; }67066707.peach-panic-step2 {6708  background: rgba(220, 38, 38, 0.04);6709}67106711.peach-panic-step3 {6712  position: relative;6713  background: #0f0505;6714  color: #ffffff;6715  overflow: hidden;6716}67176718.peach-panic-rune-bg {6719  position: absolute;6720  inset: 0;6721  opacity: 0.22;6722  pointer-events: none;6723  overflow: hidden;6724}67256726.peach-panic-rune-bg canvas {6727  width: 100% !important;6728  height: 100% !important;6729}67306731.peach-panic-icon {6732  font-size: 32px;6733  color: rgb(220, 38, 38);6734  line-height: 1;6735}67366737.peach-panic-title {6738  margin: 0;6739  font-size: 18px;6740  font-weight: 500;6741  color: var(--peach-t1);6742}67436744.peach-panic-title--severe {6745  font-size: 20px;6746  font-weight: 700;6747  color: rgb(220, 38, 38);6748}67496750.peach-panic-body {6751  margin: 0;6752  font-size: 13px;6753  line-height: 1.55;6754  color: var(--peach-t2);6755}67566757.peach-panic-body--severe {6758  color: rgba(220, 38, 38, 0.85);6759}67606761.peach-panic-body--final {6762  font-size: 16px;6763  font-weight: 700;6764  color: rgb(255, 80, 80);6765  line-height: 1.4;6766}67676768.peach-panic-body--final-intro {6769  font-size: 16px;6770  color: #ffffff;6771  font-weight: 400;6772}67736774.peach-panic-divider {6775  height: 1px;6776  background: rgba(255, 255, 255, 0.08);6777  margin: 4px 0;6778}67796780.peach-panic-confirm-input {6781  width: 100%;6782  padding: 10px 12px;6783  background: rgba(255, 255, 255, 0.02);6784  border: 1px solid rgba(220, 38, 38, 0.4);6785  border-radius: 8px;6786  color: var(--peach-t1);6787  font-family: "IBM Plex Mono", monospace;6788  font-size: 14px;6789  letter-spacing: 0.12em;6790  text-transform: uppercase;6791}67926793.peach-panic-confirm-input:focus {6794  outline: none;6795  border-color: rgb(220, 38, 38);6796}67976798.peach-panic-confirm-input--match {6799  border-color: rgb(220, 38, 38);6800  color: rgb(220, 38, 38);6801}68026803.peach-panic-confirm-label {6804  font-size: 11px;6805  color: var(--peach-t2);6806  margin: 0 0 -8px;6807  letter-spacing: 0.06em;6808}68096810.peach-panic-actions {6811  display: flex;6812  flex-direction: column;6813  gap: 10px;6814  margin-top: auto;6815}68166817.peach-panic-button {6818  width: 100%;6819  padding: 12px;6820  border-radius: 8px;6821  font-size: 13px;6822  cursor: pointer;6823  transition: background 150ms ease, border-color 150ms ease, color 150ms ease;6824}68256826.peach-panic-button--primary {6827  background: var(--peach-accent);6828  border: 1px solid var(--peach-accent);6829  color: #ffffff;6830  font-weight: 600;6831}68326833.peach-panic-button--primary:hover {6834  background: color-mix(in srgb, var(--peach-accent) 88%, white);6835}68366837.peach-panic-button--danger {6838  background: rgb(220, 38, 38);6839  border: 1px solid rgb(220, 38, 38);6840  color: #ffffff;6841  font-weight: 600;6842}68436844.peach-panic-button--danger:disabled {6845  opacity: 0.35;6846  cursor: not-allowed;6847}68486849.peach-panic-button--ghost {6850  background: transparent;6851  border: 1px solid rgba(255, 255, 255, 0.18);6852  color: var(--peach-t2);6853}68546855.peach-panic-button--ghost:hover {6856  border-color: rgba(255, 255, 255, 0.32);6857  color: var(--peach-t1);6858}68596860.peach-panic-link {6861  background: transparent;6862  border: none;6863  padding: 4px 0;6864  color: rgba(220, 38, 38, 0.65);6865  font-size: 12px;6866  cursor: pointer;6867  text-align: left;6868  text-decoration: underline;6869  text-underline-offset: 3px;6870}68716872.peach-panic-link:hover {6873  color: rgb(220, 38, 38);6874}68756876.peach-panic-bar {6877  background: rgb(220, 38, 38);6878  padding: 16px 20px;6879  margin: -28px -20px 0;6880  text-align: center;6881  font-size: 13px;6882  font-weight: 700;6883  letter-spacing: 0.12em;6884  color: #ffffff;6885}68866887.peach-panic-final-button {6888  width: 100%;6889  padding: 14px;6890  background: rgb(220, 38, 38);6891  border: none;6892  border-radius: 8px;6893  color: #ffffff;6894  font-size: 14px;6895  font-weight: 700;6896  letter-spacing: 0.08em;6897  text-transform: uppercase;6898  cursor: pointer;6899  animation: peach-panic-pulse 2s ease-in-out infinite;6900}69016902.peach-settings-license {6903  margin-top: 10px;6904  padding-top: 10px;6905  border-top: 1px solid var(--peach-t3);6906}69076908.peach-settings-label {6909  font-size: 10px;6910  letter-spacing: 0.08em;6911  color: var(--peach-t3);6912  display: block;6913  margin-bottom: 6px;6914}69156916.peach-settings-license-row {6917  display: flex;6918  align-items: center;6919  justify-content: space-between;6920  gap: 8px;6921}69226923.peach-settings-license-key {6924  font-family: 'IBM Plex Mono', monospace;6925  font-size: 12px;6926  color: var(--peach-t0);6927  letter-spacing: 0.04em;6928  word-break: break-all;6929}69306931.peach-settings-license-copy {6932  font-size: 11px;6933  color: var(--peach-accent);6934  background: transparent;6935  border: none;6936  cursor: pointer;6937  padding: 4px 8px;6938  border-radius: 4px;6939  flex-shrink: 0;6940  transition: opacity 150ms ease;6941}69426943.peach-settings-license-copy:hover {6944  opacity: 0.75;6945}69466947@keyframes peach-panic-pulse {6948  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.4); }6949  50%      { box-shadow: 0 0 0 8px rgba(220, 38, 38, 0); }6950}69516952[data-motion="reduce"] .peach-panic-final-button {6953  animation: none;6954}69556956.peach-mobile-row {6957  display: flex;6958  align-items: center;6959  justify-content: space-between;6960  padding: 8px 0;6961}69626963.peach-mobile-status {6964  color: #9a8b7a;6965  font-size: 14px;6966}