:root{
  --bp-surface:var(--surface,var(--panel,#f2f1ed));
  --bp-surface-muted:var(--surface-muted,var(--bg,#e5e7e4));
  --bp-ink:var(--ink,#20242b);
  --bp-ink-muted:var(--ink-2,#565e60);
  --bp-line:var(--line-2,var(--line,#cfd3ce));
  --bp-primary:var(--sold,#12a563);
  --bp-danger:var(--broke,#e1503c);
}

.bp-overlay{
  position:fixed;inset:0;background:rgba(13,19,30,.48);padding:20px;
  align-items:center;justify-content:center;overscroll-behavior:contain;
}
.bp-dialog{
  background:var(--bp-surface);color:var(--bp-ink);border:1px solid var(--bp-line);
  border-radius:20px;box-shadow:0 24px 64px -18px rgba(13,19,30,.38);
  max-height:calc(100dvh - 40px);overflow:hidden;
}
.bp-dialog-small{width:min(360px,100%)}
.bp-dialog-standard{width:min(560px,100%)}
.bp-dialog-wide{width:min(900px,100%)}

.bp-runtime{display:flex;z-index:9800;font-family:inherit}
.bp-runtime .bp-dialog{display:flex;flex-direction:column}
.bp-head{display:flex;align-items:flex-start;gap:14px;padding:20px 22px 14px;border-bottom:1px solid var(--bp-line)}
.bp-heading{flex:1;min-width:0}
.bp-title{font-size:18px;font-weight:800;line-height:1.25;color:var(--bp-ink)}
.bp-subtitle{margin-top:4px;font-size:13px;font-weight:600;line-height:1.5;color:var(--bp-ink-muted);white-space:pre-line}
.bp-close{width:32px;height:32px;flex:none;border:0;border-radius:50%;background:var(--bp-surface-muted);color:var(--bp-ink-muted);font:inherit;font-size:20px;line-height:1;cursor:pointer;position:relative}
.bp-close svg{width:16px;height:16px;display:block;margin:auto;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round}
.bp-close::after{content:"";position:absolute;inset:-6px}
.bp-body{padding:18px 22px;overflow:auto;min-height:0}
.bp-message{font-size:14px;font-weight:650;line-height:1.55;color:var(--bp-ink-muted);white-space:pre-line}
.bp-field{width:100%;min-height:48px;margin:0;border:1.5px solid var(--bp-line);border-radius:12px;background:var(--bp-surface);color:var(--bp-ink);padding:11px 13px;font:inherit;font-size:16px;outline:none}
.bp-field:focus{border-color:var(--bp-ink-muted);box-shadow:0 0 0 3px color-mix(in srgb,var(--bp-line) 55%,transparent)}
.bp-field[type=password]{font-size:20px;letter-spacing:.28em;text-align:center}
.bp-error{min-height:18px;margin-top:7px;color:var(--bp-danger);font-size:12px;font-weight:700}
.bp-foot{display:flex;gap:10px;padding:14px 22px 18px;border-top:1px solid var(--bp-line)}
.bp-button{min-height:46px;flex:1;border:1.5px solid var(--bp-line);border-radius:12px;background:var(--bp-surface);color:var(--bp-ink-muted);padding:10px 14px;font:inherit;font-size:14px;font-weight:800;cursor:pointer}
.bp-button-primary{flex:1.35;border-color:var(--bp-primary);background:var(--bp-primary);color:#fff}
.bp-button-danger{flex:1.35;border-color:var(--bp-danger);background:var(--bp-danger);color:#fff}
.bp-button:disabled{opacity:.5;cursor:not-allowed}

@media (max-width:767px){
  .bp-overlay{padding:12px}
  .bp-dialog{border-radius:18px;max-height:calc(100dvh - 24px)}
  .bp-head{padding:18px 18px 13px}
  .bp-body{padding:16px 18px}
  .bp-foot{padding:12px 18px calc(16px + env(safe-area-inset-bottom))}
}
@media (prefers-reduced-motion:reduce){
  .bp-overlay *{animation-duration:.01ms!important;transition-duration:.01ms!important}
}
