.sp-popup { box-sizing: border-box; border: 1px solid #e5eee9; border-radius: 28px; padding: 30px 24px 24px; width: min(420px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); margin: auto; color: #253b30; background: #fff; box-shadow: 0 24px 80px #17372726; text-align: center; overflow-wrap: anywhere; }
.sp-popup::backdrop { background: #142b2466; backdrop-filter: blur(5px); }
.sp-popup[open] { animation: sp-popup-in .25s ease-out; }
.sp-popup-symbol { --notice: #388266; color: var(--notice); background: #edf7f1; width: 86px; height: 86px; border-radius: 28px; margin: 0 auto 20px; display: grid; place-items: center; }
.sp-popup-symbol svg { width: 58px; height: 58px; }
.sp-popup[open] .sp-popup-symbol { animation: sp-symbol-bob 2.8s ease-in-out 3; }
.sp-popup svg path { display: none; }
.sp-popup[data-kind="success"] .sp-symbol-success, .sp-popup[data-kind="error"] .sp-symbol-error { display: block; }
.sp-popup[data-kind="info"] .sp-symbol-info, .sp-popup[data-kind="warning"] .sp-symbol-info, .sp-popup[data-kind="confirm"] .sp-symbol-info { display: block; }
.sp-popup[data-kind="error"] .sp-popup-symbol, .sp-popup[data-kind="confirm"] .sp-popup-symbol { color: #b35f63; background: #fbefef; }
.sp-popup[data-kind="warning"] .sp-popup-symbol { color: #987241; background: #fbf4e8; }
.sp-popup[data-kind="info"] .sp-popup-symbol { color: #577f9c; background: #eef4fa; }
.sp-popup h2 { font-size: 21px; font-weight: 600; margin: 0 0 10px; }
#sp-popup-message { font-size: 14px; line-height: 1.75; color: #63736b; white-space: pre-line; max-height: 40dvh; overflow: auto; }
.sp-popup-actions { display: flex; gap: 10px; margin-top: 24px; }
.sp-popup-actions button { flex: 1; border-radius: 14px; border: 1px solid #dfe9e3; background: #f3f7f4; color: #425b4d; padding: 12px 16px; font-weight: 500; min-height: 46px; }
.sp-popup-actions #sp-popup-ok { background: #387d60; color: white; border-color: #387d60; }
.sp-popup[data-kind="confirm"] #sp-popup-ok { background: #ad565e; border-color: #ad565e; }
.sp-popup button:focus-visible { outline: 3px solid #87b5a0; outline-offset: 3px; }
.sp-popup [hidden] { display: none !important; }
@keyframes sp-popup-in { from { opacity: 0; transform: translateY(12px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes sp-symbol-bob { 0%,100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-5px) rotate(3deg); } }
@media(prefers-reduced-motion: reduce) { .sp-popup[open], .sp-popup[open] .sp-popup-symbol { animation: none; } }