html,
body,
#app {
    width: 100%;
    height: 100%;
    margin: 0;
}

html[data-theme="dark"] .ant-steps-navigation .ant-steps-item::after {
    border-bottom: none;
    border-left: none;
}

.app-loading {
    position: relative;
    display: flex;
    width: 100%;
    height: 100%;
    min-height: 100vh;
    overflow: hidden;
    align-items: center;
    justify-content: center;
    --app-loading-primary: #1F489C;
    --app-loading-accent: #6B8FD6;
    color: #1f2937;
    background:
        radial-gradient(circle at 50% 43%, rgb(31 72 156 / 15%), transparent 34%),
        radial-gradient(circle at 50% 68%, rgb(107 143 214 / 12%), transparent 28%),
        linear-gradient(180deg, #fbfdff 0%, #eef6ff 52%, #f8fbff 100%);
    font-family:
        "Noto Sans SC",
        "Microsoft YaHei",
        Arial,
        sans-serif;
}

html[data-theme='dark'] .app-loading {
    color: rgb(255 255 255 / 88%);
    background:
        radial-gradient(circle at 50% 43%, rgb(31 72 156 / 24%), transparent 34%),
        radial-gradient(circle at 50% 68%, rgb(107 143 214 / 16%), transparent 28%),
        linear-gradient(180deg, #101827 0%, #13233a 52%, #0d1624 100%);
}

.app-loading::before {
    position: absolute;
    inset: 0;
    content: "";
    pointer-events: none;
    background:
        linear-gradient(115deg, transparent 18%, rgb(255 255 255 / 46%) 48%, transparent 76%),
        linear-gradient(180deg, rgb(255 255 255 / 26%), transparent 42%);
    opacity: 0.62;
}

html[data-theme='dark'] .app-loading::before {
    background:
        linear-gradient(115deg, transparent 18%, rgb(107 143 214 / 10%) 48%, transparent 76%),
        linear-gradient(180deg, rgb(255 255 255 / 8%), transparent 42%);
    opacity: 0.8;
}

.app-loading .app-loading-wrap {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    min-width: min(460px, calc(100vw - 48px));
    align-items: center;
    justify-content: center;
    flex-direction: column;
    transform: translate3d(-50%, -50%, 0);
}

.app-loading .app-loading-wrap::before {
    position: absolute;
    top: 48%;
    left: 50%;
    width: min(520px, 84vw);
    height: 220px;
    content: "";
    pointer-events: none;
    background: radial-gradient(ellipse at center, rgb(31 72 156 / 18%) 0%, rgb(107 143 214 / 10%) 32%, transparent 70%);
    filter: blur(18px);
    transform: translate3d(-50%, -50%, 0);
}

.app-loading .app-loading-logo {
    position: relative;
    z-index: 1;
    display: block;
    width: min(430px, 76vw);
    max-height: 150px;
    margin: 0 auto 32px;
    border: none;
    object-fit: contain;
    filter:
        drop-shadow(0 16px 18px rgb(15 23 42 / 10%))
        drop-shadow(0 0 18px rgb(31 72 156 / 20%));
}

html[data-theme='dark'] .app-loading .app-loading-logo {
    filter:
        drop-shadow(0 18px 22px rgb(0 0 0 / 34%))
        drop-shadow(0 0 20px rgb(107 143 214 / 24%));
}

.app-loading .app-loading-cube {
    position: relative;
    z-index: 1;
    display: grid;
    width: 86px;
    height: 86px;
    align-items: center;
    justify-items: center;
    justify-content: center;
    perspective: 520px;
    filter:
        drop-shadow(0 16px 18px rgb(31 72 156 / 18%))
        drop-shadow(0 0 18px rgb(107 143 214 / 18%));
}

.app-loading .app-loading-cube::before {
    position: absolute;
    bottom: 5px;
    left: 50%;
    width: 72px;
    height: 18px;
    content: "";
    background: radial-gradient(ellipse at center, rgb(31 72 156 / 24%) 0%, rgb(31 72 156 / 9%) 46%, transparent 72%);
    filter: blur(8px);
    transform: translateX(-50%);
}

.app-loading .app-loading-cube::after {
    position: absolute;
    inset: 14px;
    content: "";
    border-radius: 50%;
    background: radial-gradient(circle at 42% 34%, rgb(255 255 255 / 48%), rgb(107 143 214 / 20%) 42%, transparent 68%);
    filter: blur(10px);
}

html[data-theme='dark'] .app-loading .app-loading-cube {
    filter:
        drop-shadow(0 18px 24px rgb(0 0 0 / 30%))
        drop-shadow(0 0 22px rgb(107 143 214 / 22%));
}

.app-loading .app-loading-title {
    position: relative;
    z-index: 1;
    display: flex;
    margin-top: 28px;
    align-items: center;
    justify-content: center;
    color: rgb(31 41 55 / 88%);
    font-size: 30px;
    font-weight: 500;
    line-height: 40px;
    text-align: center;
    text-shadow: 0 1px 0 rgb(255 255 255 / 82%);
}

html[data-theme='dark'] .app-loading .app-loading-title {
    color: rgb(255 255 255 / 86%);
    text-shadow: 0 10px 24px rgb(0 0 0 / 32%);
}

.cube-stage {
    position: relative;
    display: inline-block;
    width: 46px;
    height: 46px;
    box-sizing: border-box;
    transform-style: preserve-3d;
    animation: appLoadingCubeSpin 2.8s ease-in-out infinite;
}

.cube-face {
    position: absolute;
    display: block;
    inset: 0;
    box-sizing: border-box;
    border: 1px solid rgb(255 255 255 / 64%);
    border-radius: 8px;
    background:
        linear-gradient(135deg, rgb(255 255 255 / 54%) 0%, rgb(31 72 156 / 44%) 42%, rgb(107 143 214 / 24%) 100%),
        radial-gradient(circle at 30% 22%, rgb(255 255 255 / 70%), transparent 34%);
    box-shadow:
        inset 0 0 16px rgb(255 255 255 / 34%),
        inset 0 -12px 20px rgb(31 72 156 / 18%),
        0 0 18px rgb(31 72 156 / 20%);
    opacity: 0.82;
    backface-visibility: visible;
}

html[data-theme='dark'] .cube-face {
    border-color: rgb(255 255 255 / 36%);
    background:
        linear-gradient(135deg, rgb(255 255 255 / 22%) 0%, rgb(31 72 156 / 40%) 42%, rgb(107 143 214 / 28%) 100%),
        radial-gradient(circle at 30% 22%, rgb(255 255 255 / 32%), transparent 34%);
    box-shadow:
        inset 0 0 16px rgb(255 255 255 / 14%),
        inset 0 -12px 20px rgb(0 0 0 / 18%),
        0 0 20px rgb(107 143 214 / 16%);
}

.cube-face-front {
    transform: translateZ(23px);
}

.cube-face-back {
    transform: rotateY(180deg) translateZ(23px);
}

.cube-face-right {
    transform: rotateY(90deg) translateZ(23px);
}

.cube-face-left {
    transform: rotateY(-90deg) translateZ(23px);
}

.cube-face-top {
    transform: rotateX(90deg) translateZ(23px);
}

.cube-face-bottom {
    transform: rotateX(-90deg) translateZ(23px);
}

@keyframes appLoadingCubeSpin {
    0% {
        transform: rotateX(-18deg) rotateY(-28deg) rotateZ(0deg);
    }

    50% {
        transform: rotateX(18deg) rotateY(152deg) rotateZ(8deg);
    }

    100% {
        transform: rotateX(342deg) rotateY(332deg) rotateZ(0deg);
    }
}

@media (max-width: 640px) {
    .app-loading .app-loading-wrap {
        min-width: calc(100vw - 32px);
    }

    .app-loading .app-loading-logo {
        width: min(330px, 78vw);
        margin-bottom: 28px;
    }

    .app-loading .app-loading-cube {
        width: 76px;
        height: 76px;
    }

    .cube-stage {
        width: 40px;
        height: 40px;
    }

    .cube-face-front {
        transform: translateZ(20px);
    }

    .cube-face-back {
        transform: rotateY(180deg) translateZ(20px);
    }

    .cube-face-right {
        transform: rotateY(90deg) translateZ(20px);
    }

    .cube-face-left {
        transform: rotateY(-90deg) translateZ(20px);
    }

    .cube-face-top {
        transform: rotateX(90deg) translateZ(20px);
    }

    .cube-face-bottom {
        transform: rotateX(-90deg) translateZ(20px);
    }

    .app-loading .app-loading-title {
        margin-top: 24px;
        font-size: 24px;
        line-height: 34px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .cube-stage {
        animation: none;
        transform: rotateX(-18deg) rotateY(32deg);
    }
}