:root {
    --strm-brand-orange: #ff681f;
    --strm-brand-ink: #090a0a;
}

.strm-brand-loader {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: grid;
    place-items: center;
    overflow: hidden;
    padding: 2rem;
    background:
        radial-gradient(circle at 50% 44%, rgba(255, 104, 31, .1), transparent 32rem),
        var(--strm-brand-ink);
    opacity: 1;
    visibility: visible;
    transition: opacity .42s ease, visibility .42s ease;
}

.strm-brand-loader::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: .16;
    background-image:
        linear-gradient(rgba(255, 255, 255, .08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .08) 1px, transparent 1px);
    background-size: 72px 72px;
    mask-image: radial-gradient(circle at center, #000, transparent 72%);
}

.strm-brand-loader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.strm-brand-loader__content {
    position: relative;
    z-index: 1;
    width: min(78vw, 600px);
    text-align: center;
}

.strm-brand-loader__logo {
    display: block;
    width: 100%;
    height: auto;
    animation: strm-logo-breathe 1.7s ease-in-out infinite;
}

.strm-brand-loader__track {
    position: relative;
    width: min(72%, 360px);
    height: 2px;
    margin: 1.65rem auto 0;
    overflow: hidden;
    background: rgba(255, 255, 255, .15);
}

.strm-brand-loader__track::after {
    content: "";
    position: absolute;
    inset: 0;
    width: 42%;
    background: var(--strm-brand-orange);
    box-shadow: 0 0 18px rgba(255, 104, 31, .7);
    animation: strm-loading-track 1.05s ease-in-out infinite;
}

.strm-brand-loader__label {
    display: block;
    margin-top: .85rem;
    color: rgba(255, 255, 255, .58);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: .24em;
    text-transform: uppercase;
}

.strm-site-logo {
    display: block;
    width: auto;
    max-width: 100%;
    height: auto;
    object-fit: contain;
}

.hero-brand-link {
    position: absolute;
    top: 22px;
    left: 12px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    width: clamp(190px, 19vw, 290px);
    margin: 0;
    text-decoration: none;
}

.hero-brand-link .strm-site-logo {
    width: 100%;
}

.admin-brand-lockup {
    display: flex;
    align-items: center;
    gap: .9rem;
    min-width: 0;
}

.admin-brand-link,
.statistics-brand-link {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: transparent;
    border: 0;
    text-decoration: none;
}

.admin-brand-link .strm-site-logo {
    width: 112px;
}

.statistics-brand-link .strm-site-logo {
    width: 128px;
}

.admin-welcome {
    display: flex;
    align-items: center;
    gap: .45rem;
    min-width: 0;
}

.strm-login-brand {
    display: flex;
    justify-content: center;
    margin: 0 auto 1.6rem;
    padding: 0;
    background: transparent;
    border: 0;
}

.strm-login-brand .strm-site-logo {
    width: min(100%, 260px);
}

.utility-brand {
    display: flex;
    justify-content: center;
    width: fit-content;
    margin: 0 auto 1.5rem;
    padding: 0;
    background: transparent;
    border: 0;
}

.utility-brand .strm-site-logo {
    width: min(72vw, 280px);
}

.footer-brand-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 220px;
    margin-bottom: 1.35rem;
    padding: 0;
    background: transparent;
    border: 0;
    text-decoration: none;
}

.footer-brand-link .strm-site-logo {
    width: 100%;
}

.strm-brand-for-dark {
    display: none;
}

.strm-brand-for-light {
    display: block;
}

body.theme-dark .strm-brand-for-dark {
    display: block;
}

body.theme-dark .strm-brand-for-light {
    display: none;
}

/* Highlight only the selected theme and language; keep the other controls neutral. */
body.site-redesign .floating-actions .floating-language a.is-active,
body.site-redesign .floating-actions .floating-theme button.is-active,
body.site-redesign .floating-actions .floating-theme button.is-active i,
body.site-redesign .floating-actions button[data-design-theme][aria-pressed="true"],
body.site-redesign .floating-actions button[data-design-theme][aria-pressed="true"] i,
body.strm-login-page.admin-redesign .floating-actions .floating-language a.is-active,
body.strm-login-page.admin-redesign .floating-actions .admin-theme-switch button.is-active,
body.strm-login-page.admin-redesign .floating-actions .admin-theme-switch button.is-active i,
body.strm-login-page.admin-redesign .floating-actions button[data-admin-theme][aria-pressed="true"],
body.strm-login-page.admin-redesign .floating-actions button[data-admin-theme][aria-pressed="true"] i {
    color: var(--preview-accent-text, var(--adm-accent-text, var(--utility-accent-text, #a63815))) !important;
}

body.site-redesign .floating-actions :is(button, a) {
    transform: translateY(0) !important;
    transition:
        color .18s ease,
        background-color .18s ease,
        border-color .18s ease,
        opacity .18s ease,
        transform .18s ease !important;
}

body.site-redesign .floating-actions > :is(
    .floating-support,
    .floating-disclaimer,
    .floating-contact,
    .floating-back,
    .floating-panel
) {
    transform: none !important;
}

body.site-redesign .floating-actions > :is(
    .floating-support,
    .floating-disclaimer,
    .floating-contact,
    .floating-back,
    .floating-panel
) > :is(i, span) {
    transform: translateY(0);
    transition: color .18s ease, transform .18s ease;
}

body.site-redesign .floating-actions > :is(
    .floating-support,
    .floating-disclaimer,
    .floating-contact,
    .floating-back,
    .floating-panel
):is(:hover, :focus-visible) {
    color: var(--preview-accent-text, var(--preview-accent)) !important;
    background: var(--preview-surface) !important;
    border-color: var(--preview-accent-text, var(--preview-accent)) !important;
    transform: none !important;
}

body.site-redesign .floating-actions > :is(
    .floating-support,
    .floating-disclaimer,
    .floating-contact,
    .floating-back,
    .floating-panel
):is(:hover, :focus-visible) > :is(i, span),
body.site-redesign .floating-actions :is(.floating-theme button, .floating-language a):is(:hover, :focus-visible),
body.site-redesign .floating-actions :is(button, a):is(:hover, :focus-visible) > :is(i, span) {
    color: var(--preview-accent-text, var(--preview-accent)) !important;
    transform: translateY(-2px) !important;
}

body.strm-login-page.admin-redesign .floating-actions :is(button, a):is(:hover, :focus-visible),
body.strm-login-page.admin-redesign .floating-actions :is(button, a):is(:hover, :focus-visible) > :is(i, span) {
    color: var(--adm-accent-text, var(--adm-accent)) !important;
}

body.site-redesign .floating-actions > :is(
    .floating-support,
    .floating-disclaimer,
    .floating-contact,
    .floating-back,
    .floating-panel
):active > :is(i, span),
body.site-redesign .floating-actions :is(.floating-theme button, .floating-language a):active {
    transform: translateY(0) scale(.96) !important;
}

@keyframes strm-logo-breathe {
    0%, 100% { transform: translateY(0) scale(1); filter: drop-shadow(0 0 0 rgba(255, 104, 31, 0)); }
    50% { transform: translateY(-4px) scale(1.012); filter: drop-shadow(0 8px 22px rgba(255, 104, 31, .18)); }
}

@keyframes strm-loading-track {
    0% { transform: translateX(-120%); }
    55% { transform: translateX(105%); }
    100% { transform: translateX(250%); }
}

@media (max-width: 767.98px) {
    .strm-brand-loader__content { width: min(88vw, 460px); }
    .hero-brand-link { top: 18px; left: 12px; width: 180px; }
    .admin-brand-link .strm-site-logo { width: 92px; }
    .admin-welcome { display: none; }
    .footer-brand-link { width: 190px; }
}

@media (prefers-reduced-motion: reduce) {
    .strm-brand-loader,
    .strm-brand-loader__logo,
    .strm-brand-loader__track::after {
        animation: none;
        transition-duration: .01ms;
    }
    .strm-brand-loader__track::after { width: 100%; }

    body.site-redesign .floating-actions :is(button, a) {
        transform: none !important;
        transition: none !important;
    }
}