:root{--sf-blue:#2563eb;--sf-green:#16a34a;--sf-orange:#d97706;--sf-red:#dc2626;--sf-text:#172033;--sf-muted:#667085;--sf-border:#dbe3ee}
.sf-toast-stack{position:fixed;right:16px;bottom:16px;z-index:3000;display:grid;gap:8px}
.sf-toast{width:min(360px,calc(100vw - 32px));padding:12px 14px;border:1px solid var(--sf-border);border-left:5px solid var(--sf-blue);border-radius:10px;background:#fff;color:var(--sf-text);box-shadow:0 16px 44px rgba(15,23,42,.18);font:14px/1.5 Tahoma,sans-serif;animation:sfSlide .2s ease}
.sf-toast.success{border-left-color:var(--sf-green)}.sf-toast.warn{border-left-color:var(--sf-orange)}.sf-toast.error{border-left-color:var(--sf-red)}
.sf-modal{position:fixed;inset:0;z-index:3001;display:none;align-items:center;justify-content:center;padding:18px;background:rgba(15,23,42,.55)}
.sf-modal.is-open{display:flex;animation:sfFade .18s ease}
.sf-dialog{width:min(520px,100%);border-radius:12px;background:#fff;color:var(--sf-text);box-shadow:0 28px 80px rgba(15,23,42,.32);overflow:hidden;font:15px/1.55 Tahoma,sans-serif}
.sf-body{display:grid;gap:12px;padding:18px}.sf-body h2{margin:0;font-size:22px}.sf-body p{margin:0;color:var(--sf-muted)}
.sf-spinner{width:38px;height:38px;border:4px solid #dbeafe;border-top-color:var(--sf-blue);border-radius:50%;animation:sfSpin .9s linear infinite}
.sf-bar{height:10px;border-radius:999px;background:#e5e7eb;overflow:hidden}.sf-bar span{display:block;height:100%;width:68%;border-radius:999px;background:linear-gradient(90deg,var(--sf-blue),var(--sf-green));animation:sfProgress 1.4s ease-in-out infinite}
.sf-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap;padding:14px 18px;border-top:1px solid var(--sf-border)}
.sf-btn{min-height:38px;border:1px solid var(--sf-border);border-radius:8px;background:#fff;color:var(--sf-text);font-weight:800;padding:8px 12px;cursor:pointer}.sf-btn.primary{background:var(--sf-blue);border-color:var(--sf-blue);color:#fff}
@keyframes sfFade{from{opacity:0}to{opacity:1}}@keyframes sfSlide{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}@keyframes sfSpin{to{transform:rotate(360deg)}}@keyframes sfProgress{0%{width:15%}50%{width:78%}100%{width:96%}}
@media(max-width:640px){.sf-modal{align-items:flex-end;padding:0}.sf-dialog{border-radius:12px 12px 0 0}.sf-actions{flex-direction:column}.sf-btn{width:100%}}