html.is-preloading,
html.is-preloading body {
    overflow: hidden;
}

#site-preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity var(--site-preloader-fade, 350ms) ease, visibility var(--site-preloader-fade, 350ms) ease;
}

#site-preloader.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

#site-preloader .site-preloader__backdrop {
    position: absolute;
    inset: 0;
    background-color: var(--body-bg, #ffffff);
    opacity: 0.94;
}

html.dark-theme #site-preloader .site-preloader__backdrop,
html[data-theme="dark"] #site-preloader .site-preloader__backdrop {
    background-color: var(--body-bg, #0f172a);
    opacity: 0.96;
}

#site-preloader .site-preloader__content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 120px;
    min-height: 120px;
}

#site-preloader .site-preloader__image {
    display: block;
    width: 100px;
    height: auto;
    max-height: 100px;
    object-fit: contain;
}

#site-preloader .preloader {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: 200px;
    height: 200px;
    margin: 0;
    background: transparent;
}

#panel-preloader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--bs-body-bg, #f8f9fa);
}

#panel-preloader .preloader-wrap {
    text-align: center;
    max-width: 320px;
    width: 100%;
    padding: 0 1rem;
}

#panel-preloader .preloader-wrap img {
    max-width: 300px;
    height: auto;
    max-height: 96px;
    object-fit: contain;
}

#panel-preloader .loading-bar {
    width: 100%;
    height: 3px;
    margin-top: 1.5rem;
    position: relative;
    overflow: hidden;
    background: #e9ecef;
    border-radius: 2px;
}

#panel-preloader .loading-bar::before {
    content: "";
    width: 35%;
    height: 100%;
    background: #9333ea;
    position: absolute;
    left: -35%;
    animation: panel-preloader-bar 1.2s ease-in-out infinite;
}

@keyframes panel-preloader-bar {
    0% { left: -35%; }
    50% { left: 50%; }
    100% { left: 100%; }
}