:root {
    --cartoon-loader-ink: var(--brand-border, var(--panel-border, #20232a));
    --cartoon-loader-card: var(--brand-card, var(--panel-card, #ffffff));
    --cartoon-loader-primary: var(--brand-primary, var(--panel-primary, #e94f37));
    --cartoon-loader-accent: var(--brand-accent, var(--panel-accent, #008f84));
    --cartoon-loader-warning: var(--brand-warning, var(--panel-warning, #f7b731));
}

.chahuo-ring-overlay {
    position: fixed !important;
    inset: 0 !important;
    display: grid !important;
    place-items: center !important;
    z-index: 2147483647 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    background:
        linear-gradient(90deg, rgba(32, 35, 42, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(32, 35, 42, 0.04) 1px, transparent 1px),
        rgba(255, 248, 243, 0.78) !important;
    background-size: 28px 28px, 28px 28px, auto !important;
    backdrop-filter: blur(4px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(4px) saturate(1.08) !important;
    transition:
        opacity 0.28s ease,
        visibility 0s linear 0.28s !important;
}

.chahuo-ring-overlay[mask-hidden="false"] {
    display: grid !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transition:
        opacity 0.16s ease,
        visibility 0s linear 0s !important;
}

.chahuo-ring-inline {
    display: inline-grid !important;
    place-items: center !important;
    vertical-align: middle !important;
}

.chahuo-ring {
    position: relative !important;
    display: block !important;
    width: 90px !important;
    height: 64px !important;
    aspect-ratio: auto !important;
    overflow: hidden !important;
    border: 2px solid var(--cartoon-loader-ink) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, var(--cartoon-loader-card) 0 58%, #fff8f3 58% 100%) !important;
    box-shadow: 7px 7px 0 rgba(32, 35, 42, 0.16) !important;
    animation: cartoon-loader-bob 0.72s cubic-bezier(0.45, 0, 0.2, 1) infinite alternate !important;
}

.chahuo-ring::before {
    content: "" !important;
    position: absolute !important;
    inset: 15px 12px auto 12px !important;
    width: auto !important;
    height: 11px !important;
    margin: 0 !important;
    border: 2px solid var(--cartoon-loader-ink) !important;
    border-radius: 999px !important;
    background:
        repeating-linear-gradient(
            90deg,
            var(--cartoon-loader-primary) 0 18px,
            var(--cartoon-loader-accent) 18px 36px,
            var(--cartoon-loader-warning) 36px 54px,
            var(--cartoon-loader-primary) 54px 72px
        ) !important;
    background-size: 144px 100% !important;
    animation: cartoon-loader-scan 0.95s linear infinite !important;
}

.chahuo-ring::after {
    content: "" !important;
    position: absolute !important;
    left: 14px !important;
    right: 14px !important;
    bottom: 13px !important;
    width: auto !important;
    height: 12px !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background:
        linear-gradient(var(--cartoon-loader-ink), var(--cartoon-loader-ink)) 0 0 / 34px 2px no-repeat,
        linear-gradient(var(--cartoon-loader-ink), var(--cartoon-loader-ink)) 0 6px / 50px 2px no-repeat,
        linear-gradient(var(--cartoon-loader-primary), var(--cartoon-loader-primary)) right 2px top 0 / 10px 10px no-repeat !important;
    animation: cartoon-loader-lines 0.95s steps(2, end) infinite !important;
}

.net-loading {
    position: fixed !important;
    inset: 0 !important;
    z-index: 2147483647 !important;
    width: 100% !important;
    min-height: 100vh !important;
    background:
        linear-gradient(90deg, rgba(32, 35, 42, 0.04) 1px, transparent 1px),
        linear-gradient(180deg, rgba(32, 35, 42, 0.04) 1px, transparent 1px),
        rgba(255, 248, 243, 0.78) !important;
    background-size: 28px 28px, 28px 28px, auto !important;
    backdrop-filter: blur(4px) saturate(1.08) !important;
    -webkit-backdrop-filter: blur(4px) saturate(1.08) !important;
}

.net-loading .loading-view {
    display: flex !important;
    width: 100% !important;
    min-height: 100vh !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
}

.net-loading .loading-image {
    position: relative !important;
    display: inline-block !important;
    width: 90px !important;
    height: 64px !important;
    padding: 0 !important;
    overflow: hidden !important;
    border: 2px solid var(--cartoon-loader-ink) !important;
    border-radius: 18px !important;
    background:
        linear-gradient(180deg, var(--cartoon-loader-card) 0 58%, #fff8f3 58% 100%) !important;
    box-shadow: 7px 7px 0 rgba(32, 35, 42, 0.16) !important;
    opacity: 1 !important;
    animation: cartoon-loader-bob 0.72s cubic-bezier(0.45, 0, 0.2, 1) infinite alternate !important;
}

.net-loading .loading-image::before {
    content: "";
    position: absolute;
    inset: 15px 12px auto 12px;
    height: 11px;
    border: 2px solid var(--cartoon-loader-ink);
    border-radius: 999px;
    background:
        repeating-linear-gradient(
            90deg,
            var(--cartoon-loader-primary) 0 18px,
            var(--cartoon-loader-accent) 18px 36px,
            var(--cartoon-loader-warning) 36px 54px,
            var(--cartoon-loader-primary) 54px 72px
        );
    background-size: 144px 100%;
    animation: cartoon-loader-scan 0.95s linear infinite;
}

.net-loading .loading-image::after {
    content: "";
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 13px;
    height: 12px;
    background:
        linear-gradient(var(--cartoon-loader-ink), var(--cartoon-loader-ink)) 0 0 / 34px 2px no-repeat,
        linear-gradient(var(--cartoon-loader-ink), var(--cartoon-loader-ink)) 0 6px / 50px 2px no-repeat,
        linear-gradient(var(--cartoon-loader-primary), var(--cartoon-loader-primary)) right 2px top 0 / 10px 10px no-repeat;
    animation: cartoon-loader-lines 0.95s steps(2, end) infinite;
}

@keyframes cartoon-loader-bob {
    from {
        transform: translateY(0);
    }

    to {
        transform: translateY(-6px);
    }
}

@keyframes cartoon-loader-scan {
    from {
        background-position: 0 0;
    }

    to {
        background-position: 72px 0;
    }
}

@keyframes cartoon-loader-lines {
    0% {
        opacity: 0.62;
    }

    50%,
    100% {
        opacity: 1;
    }
}

@media (prefers-reduced-motion: reduce) {
    .chahuo-ring,
    .chahuo-ring::before,
    .chahuo-ring::after,
    .net-loading .loading-image,
    .net-loading .loading-image::before,
    .net-loading .loading-image::after {
        animation: none !important;
    }
}