body ,html { 
    margin: 0;
    padding: 0;
}
#lading-body {
    width: 100%;
    height: 90vh;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #000;
    /* margin: 100px auto; */
}

.loader-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.loader-ring {
    position: relative;
    width: 80px;
    height: 80px;
}

.ring-outer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 4px solid transparent;
    border-top-color: #00e5ff;
    border-bottom-color: #00e5ff;
    border-radius: 50%;
    animation: spin 1.5s linear infinite;
}

.ring-inner {
    position: absolute;
    top: 15px;
    left: 15px;
    width: 50px;
    height: 50px;
    border: 4px solid transparent;
    border-left-color: #2979ff;
    border-right-color: #2979ff;
    border-radius: 50%;
    animation: spin-reverse 1.5s linear infinite;
}

.loader-text {
    display: flex;
    align-items: center;
    margin-top: 50px;
    /* color: #fff; */
    font-size: 18px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji';
    letter-spacing: 1px;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

@keyframes spin-reverse {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(-360deg); }
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 7px;
}

::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.2);
}

::-webkit-scrollbar-track {
    border-radius: 0;
    background: rgba(0, 0, 0, 0.1);
}

/* 打字机效果 */
.loader-text {
    margin-top: 20px;
    height: 24px; /* 固定高度，防止闪烁 */
    display: flex;
    justify-content: center;
}

.typing-text {
    color: #333; /* 更深的颜色，增加对比度 */
    font-size: 16px;
    font-family: 'Courier New', Courier, monospace; /* 等宽字体是打字机效果的关键 */
    font-weight: bold;
    overflow: hidden; /* 隐藏未打出的文字 */
    border-right: 3px solid #000; /* 光标 */
    white-space: nowrap; /* 不换行 */
    margin: 0 auto;
    letter-spacing: 1px;
    width: 0; /* 初始宽度为0 */
    animation: 
        typing 3.5s steps(30, end) infinite alternate, /* 打字动画 */
        blink-caret 0.75s step-end infinite; /* 光标闪烁 */
}

/* 打字动画：从0宽度到100%宽度 */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}

/* 光标闪烁动画 */
@keyframes blink-caret {
    from, to { border-color: transparent }
    50% { border-color: #000; }
}
