.confirm-modal {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  width: min(440px, calc(100vw - 32px));
  max-height: calc(100vh - 32px);
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 28px;
  overflow: auto;
  color: #fff;
  background: #111C30;
  border: 1px solid #304665;
  border-radius: 14px;
  box-shadow: 0 24px 80px #0009;
  font-family: inherit;
}
.confirm-modal:not([open]) { display: none; }
.confirm-modal[open] { animation: confirm-modal-in 160ms ease-out; }
.confirm-modal::backdrop { background: rgb(0 0 0 / 70%); }
html.confirm-modal-open { overflow: hidden; }
.confirm-modal-icon {
  display: grid; place-items: center; width: 48px; height: 48px;
  margin-bottom: 18px; border-radius: 14px; color: #80adff; background: #2563eb20;
}
.confirm-modal-icon svg { width: 28px; height: 28px; }
.confirm-modal .confirm-icon-warning { display: none; }
.confirm-modal[data-variant="warning"] .confirm-modal-icon { color: #fbbf24; background: #fbbf241a; }
.confirm-modal[data-variant="danger"] .confirm-modal-icon { color: #fb7185; background: #ef44441a; }
.confirm-modal[data-variant="warning"] .confirm-icon-check,
.confirm-modal[data-variant="danger"] .confirm-icon-check { display: none; }
.confirm-modal[data-variant="warning"] .confirm-icon-warning,
.confirm-modal[data-variant="danger"] .confirm-icon-warning { display: block; }
.confirm-modal h2 { margin: 0 0 12px; font: inherit; font-weight: 800; font-size: 22px; line-height: 1.35; color: #fff; overflow-wrap: anywhere; }
.confirm-modal p { margin: 0; color: #bec9da; font-size: 14px; line-height: 1.65; white-space: pre-line; overflow-wrap: anywhere; }
.confirm-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 26px; }
.confirm-modal-actions button {
  appearance: none; min-height: 42px; padding: 10px 16px; margin: 0;
  border: 1px solid transparent; border-radius: 9px; font: inherit; font-size: 14px;
  font-weight: 700; line-height: 1.4; cursor: pointer; color: #fff;
  transition: background-color 150ms, border-color 150ms;
}
.confirm-modal .confirm-modal-cancel { background: #273244; border-color: #3a4658; }
.confirm-modal .confirm-modal-cancel:hover { background: #334155; }
.confirm-modal .confirm-modal-accept { background: #2563EB; border-color: #3b78f9; }
.confirm-modal .confirm-modal-accept:hover { background: #1d4ed8; }
.confirm-modal[data-variant="danger"] .confirm-modal-accept { background: #dc2626; border-color: #ef4444; }
.confirm-modal[data-variant="danger"] .confirm-modal-accept:hover { background: #b91c1c; }
.confirm-modal-actions button:focus-visible { outline: 3px solid #93baff; outline-offset: 3px; }
.confirm-modal-actions button:disabled { opacity: .65; cursor: wait; }
.confirm-modal-backdrop:not([hidden]) { position: fixed; inset: 0; z-index: 2147483646; background: rgb(0 0 0 / 70%); }
.confirm-modal[data-fallback][open] { z-index: 2147483647; height: fit-content; }
@keyframes confirm-modal-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) {
  .confirm-modal { padding: 22px; }
  .confirm-modal-actions { flex-wrap: wrap; }
  .confirm-modal-actions button { flex: 1 1 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .confirm-modal[open] { animation: none; }
  .confirm-modal-actions button { transition: none; }
}