.system-modal-backdrop[hidden] { display: none; }
.system-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 20000;
    display: grid;
    place-items: center;
    padding: 20px;
    background: rgba(12, 25, 43, .52);
    backdrop-filter: blur(3px);
}
.system-modal-dialog {
    width: min(100%, 460px);
    overflow: hidden;
    border: 1px solid #dfe6ef;
    border-top: 4px solid var(--system-modal-accent, #2878f0);
    border-radius: 12px;
    background: #fff;
    box-shadow: 0 24px 70px rgba(11, 24, 42, .25);
    color: #263449;
    direction: inherit;
    animation: system-modal-in .18s ease-out;
}
.system-modal-dialog[data-type="success"] { --system-modal-accent: #14916d; }
.system-modal-dialog[data-type="danger"] { --system-modal-accent: #c83d4d; }
.system-modal-dialog[data-type="warning"] { --system-modal-accent: #d58a19; }
.system-modal-dialog[data-type="confirm"] { --system-modal-accent: #2878f0; }
.system-modal-heading { margin: 0; padding: 20px 22px 0; color: #142b52; font-size: 19px; font-weight: 700; }
.system-modal-body { padding: 14px 22px 8px; font-size: 15px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.system-modal-body a { color: #1766b0; }
.system-modal-body .alert { margin: 0; padding: 0; border: 0; background: transparent; color: inherit; }
.system-modal-actions { display: flex; justify-content: flex-start; gap: 9px; padding: 16px 22px 20px; }
.system-modal-button { min-width: 88px; min-height: 40px; padding: 8px 16px; border: 1px solid transparent; border-radius: 7px; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.system-modal-button:focus-visible { outline: 3px solid #27c2a0; outline-offset: 2px; }
.system-modal-primary { color: #fff; background: #2878f0; }
.system-modal-primary:hover { background: #1d62c6; }
.system-modal-cancel { border-color: #d9e1eb; color: #334155; background: #fff; }
.system-modal-cancel:hover { background: #f4f7fb; }
body.system-modal-open { overflow: hidden; }
@keyframes system-modal-in {
    from { opacity: 0; transform: translateY(8px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .system-modal-dialog { animation: none; }
}