.sf{font-family:var(--sf-font);color:var(--sf-ink);line-height:1.9;direction:rtl;text-align:right}
.sf *,.sf *::before,.sf *::after{box-sizing:border-box}
.sf a{color:inherit;text-decoration:none}
.sf button,.sf input,.sf select{font:inherit}
.sf button{cursor:pointer}
.sf :is(a,button,input,select,summary):focus-visible{outline:3px solid var(--sf-focus);outline-offset:4px}
.sf [hidden]{display:none!important}
.sf-icon{width:21px;height:21px;flex-shrink:0;vertical-align:middle}
.sf-container{width:min(100%,var(--sf-width));margin-inline:auto;padding-inline:24px}
.sf-brand{display:inline-flex;align-items:center;gap:10px;flex-shrink:0}
.sf-brand img{width:48px;height:48px;object-fit:contain}
.sf-brand strong{display:block;font-size:21px;font-weight:800;line-height:1.6;letter-spacing:-.6px}
.sf-brand small{display:block;font-size:10px;color:var(--sf-muted)}
.sf-button{display:inline-flex;justify-content:center;align-items:center;gap:8px;min-height:46px;padding:10px 20px;border:1px solid transparent;border-radius:12px;background:var(--sf-brand);color:#fff!important;font-weight:700;line-height:1.7;text-decoration:none;transition:background .16s}
.sf-button:hover{background:var(--sf-brand-hover)}
.sf-button--light{background:var(--sf-soft);color:var(--sf-ink)!important;border-color:var(--sf-line)}
.sf-button--light:hover{background:#eaf0e7}
.sf-link{color:var(--sf-brand)!important;font-weight:600}
.sf-muted{color:var(--sf-muted);font-size:12px}
.sf-skip{position:fixed;top:-100px;right:20px;z-index:3000;padding:12px 18px;background:var(--sf-dark);color:#fff!important;border-radius:10px}
.sf-skip:focus{top:12px}
.sf-alert{padding:13px 16px;border:1px solid var(--sf-line);background:var(--sf-soft);border-radius:12px;font-size:13px;margin-bottom:18px}
.sf-alert--error{background:var(--sf-danger-bg);color:var(--sf-danger);border-color:#f1d0ca}
.sf-alert ul{padding-inline-start:18px;margin:0}
.sf-alert p{margin:0}
.sf-spinner{display:inline-block;width:16px;height:16px;border:2px solid currentColor;border-left-color:transparent;border-radius:50%;animation:sf-spin .7s linear infinite}
@keyframes sf-spin{to{transform:rotate(360deg)}
}
@media(max-width:640px){.sf-container{padding-inline:16px}
.sf-brand img{width:40px;height:40px}
.sf-brand strong{font-size:19px}
}
@media(prefers-reduced-motion:reduce){.sf *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}