.ss-modal-overlay { position: fixed; inset: 0; z-index: 10050; padding: 18px; display: grid; place-items: center; background: rgba(15,23,42,.48); backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s ease; }
.ss-modal-overlay[hidden] { display: none; }
.ss-modal-overlay.is-open { opacity: 1; }
.ss-modal-dialog { position: relative; width: min(460px, 100%); max-height: min(680px, calc(100vh - 36px)); overflow-y: auto; padding: 26px; background: #fff; border: 1px solid #e5e7eb; border-radius: 22px; box-shadow: 0 28px 85px rgba(15,23,42,.28); transform: translateY(10px) scale(.98); transition: transform .18s ease; }
.ss-modal-overlay.is-open .ss-modal-dialog { transform: translateY(0) scale(1); }
.ss-modal-close { position: absolute; top: 10px; right: 10px; width: 44px; height: 44px; border: 0; border-radius: 10px; background: #f1f5f9; color: #475569; font-size: 25px; cursor: pointer; }
.ss-modal-head { display: flex; gap: 13px; align-items: center; padding-right: 42px; }
.ss-modal-head h2 { margin: 0; color: #111827; font: 750 21px/1.25 system-ui,-apple-system,"Segoe UI",Arial,sans-serif; }
.ss-modal-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; background: #eef4ff; }
.ss-modal-icon img { width: 23px; height: 23px; }
.ss-modal-dialog[data-type="success"] .ss-modal-icon { background: #ecfdf5; }
.ss-modal-dialog[data-type="warning"] .ss-modal-icon { background: #fffbeb; }
.ss-modal-dialog[data-type="error"] .ss-modal-icon { background: #fef2f2; }
.ss-modal-message { margin: 18px 0 24px; color: #475569; line-height: 1.6; white-space: pre-line; }
.ss-modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
.ss-modal-primary,
.ss-modal-secondary { min-height: 44px; padding: 9px 17px; border-radius: 11px; font-weight: 700; cursor: pointer; }
.ss-modal-primary { border: 1px solid #2563eb; background: #2563eb; color: #fff; }
.ss-modal-secondary { border: 1px solid #cbd5e1; background: #fff; color: #334155; }
.ss-modal-close:focus-visible,
.ss-modal-primary:focus-visible,
.ss-modal-secondary:focus-visible { outline: 3px solid rgba(37,99,235,.25); outline-offset: 2px; }
body.ss-modal-lock { overflow: hidden; }
@media (max-width: 520px) {
    .ss-modal-dialog { padding: 22px 18px; }
    .ss-modal-actions { flex-direction: column-reverse; }
    .ss-modal-primary,
    .ss-modal-secondary { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
    .ss-modal-overlay,
    .ss-modal-dialog { transition: none; }
}