#spa-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 100000;
    height: 2px;
    width: 0;
    background: var(--sd-primary, #006196);
    box-shadow: 0 0 8px rgba(0, 97, 150, .45);
    opacity: 0;
    pointer-events: none;
    transition: width .6s cubic-bezier(.2, .8, .2, 1), opacity .2s ease;
}

#spa-progress.is-active {
    opacity: 1;
}

#spa-progress.is-done {
    opacity: 0;
    transition: opacity .3s ease;
}

#spa-toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 100001;
    max-width: calc(100vw - 32px);
    padding: 12px 16px;
    border-radius: 9px;
    background: #1F2933;
    color: #FFF;
    font: 500 13px/1.4 Inter, system-ui, sans-serif;
    box-shadow: 0 8px 24px rgba(31, 41, 51, .24);
    opacity: 0;
    transform: translate(-50%, 8px);
    pointer-events: none;
    transition: opacity .2s ease, transform .2s ease;
}

#spa-toast.is-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* кнопка отправленной формы, пока ждём ответ */
button[aria-busy="true"],
input[aria-busy="true"] {
    cursor: progress;
    opacity: .7;
}

/* после перехода фокус переносится в контент (tabindex=-1) — рамка тут не нужна */
[data-spa-region]:focus {
    outline: none;
}

/* загрузка дольше 120 мс — старый контент притухает; после подмены новый проявляется */
html.spa-busy [data-spa-region="main"],
html.spa-busy [data-spa-region="head"] {
    opacity: .55;
    transition: opacity .15s ease;
}

[data-spa-region].spa-enter {
    animation: spa-enter .2s cubic-bezier(.16, 1, .3, 1);
}

@keyframes spa-enter {
    from { opacity: 0; transform: translateY(4px); }
}

@media (prefers-reduced-motion: reduce) {
    [data-spa-region].spa-enter { animation: none; }
}