/* 基础样式 */
:root {
    --primary-color: #4F46E5; /* 定义主色调 */
    --text-primary: #1E293B; /* 定义主要文本颜色 */
    --bg-base: rgba(255, 255, 255, 0.15); /* 定义基础背景颜色 */
    --border-light: rgba(255, 255, 255, 0.1); /* 定义浅色边框颜色 */
    --shadow-base: 0 8px 32px rgba(0, 0, 0, 0.1); /* 定义基础阴影 */
}

@media (prefers-color-scheme: dark) {
    :root {
        --text-primary: #F8FAFC; /* 暗模式下定义主要文本颜色 */
        --bg-base: rgba(0, 0, 0, 0.2); /* 暗模式下定义基础背景颜色 */
        --border-light: rgba(255, 255, 255, 0.05); /* 暗模式下定义浅色边框颜色 */
    }
}

* {
    margin: 0; /* 重置外边距 */
    padding: 0; /* 重置内边距 */
    box-sizing: border-box; /* 使用边框盒模型 */
    font-family: 'Segoe UI', system-ui, sans-serif; /* 设置字体 */
}

body {
    min-height: 100vh; /* 设置最小高度为视口高度 */
    display: flex; /* 使用弹性布局 */
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
    padding: 2rem; /* 设置内边距 */
    position: relative; /* 设置相对定位 */
    overflow: hidden; /* 隐藏溢出内容 */
    background: linear-gradient(
            135deg,
            rgba(106, 90, 205, 0.15) 0%, /* 线性渐变背景 */
            rgba(70, 130, 180, 0.15) 50%,
            rgba(147, 112, 219, 0.15) 100%
    );
}

.background-glow {
    position: fixed; /* 固定定位 */
    width: 150vw; /* 宽度为视口宽度的1.5倍 */
    height: 150vh; /* 高度为视口高度的1.5倍 */
    background: radial-gradient(
            circle at 50% 50%, /* 径向渐变背景 */
            rgba(79, 70, 229, 0.15) 0%,
            transparent 60%
    );
    animation: glow-move 20s linear infinite; /* 设置动画 */
    z-index: -1; /* 设置层级 */
}

@keyframes glow-move {
    0% { transform: translate(-25%, -25%); } /* 动画起始状态 */
    50% { transform: translate(25%, 25%); } /* 动画中间状态 */
    100% { transform: translate(-25%, -25%); } /* 动画结束状态 */
}

/* 容器样式 */
.container {
    background: var(--bg-base); /* 使用变量设置背景颜色 */
    backdrop-filter: blur(12px) saturate(180%); /* 设置背景模糊和饱和度 */
    -webkit-backdrop-filter: blur(12px) saturate(180%); /* 兼容Webkit浏览器 */
    border-radius: 24px; /* 设置边框圆角 */
    padding: 2.5rem; /* 设置内边距 */
    width: 100%; /* 设置宽度 */
    max-width: 640px; /* 设置最大宽度 */
    border: 1px solid var(--border-light); /* 使用变量设置边框颜色 */
    box-shadow: var(--shadow-base); /* 使用变量设置阴影 */
    color: var(--text-primary); /* 使用变量设置文本颜色 */
}

/* 头部样式 */
.header {
    text-align: center; /* 文本居中 */
    margin-bottom: 2.5rem; /* 设置底部外边距 */
}

.header i {
    font-size: 3rem; /* 设置图标大小 */
    color: var(--primary-color); /* 使用变量设置图标颜色 */
    margin-bottom: 1.5rem; /* 设置底部外边距 */
}

.header h1 {
    font-size: 2.2rem; /* 设置标题大小 */
    margin-bottom: 0.75rem; /* 设置底部外边距 */
    font-weight: 600; /* 设置字体粗细 */
}

.header p {
    color: #64748B; /* 设置文本颜色 */
    font-size: 1.1rem; /* 设置文本大小 */
}

/* 进度卡片 */
.status-card {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    gap: 2rem; /* 设置间距 */
    padding: 2rem; /* 设置内边距 */
    background: var(--bg-base); /* 使用变量设置背景颜色 */
    border-radius: 16px; /* 设置边框圆角 */
    margin: 2rem 0; /* 设置上下外边距 */
}

.progress-circle {
    position: relative; /* 设置相对定位 */
    width: 100px; /* 设置宽度 */
    height: 100px; /* 设置高度 */
    border-radius: 50%; /* 设置圆形 */
    background: conic-gradient(
            var(--primary-color) 75%, /* 设置圆锥渐变背景 */
            rgba(79, 70, 229, 0.2) 75%
    );
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    justify-content: center; /* 水平居中 */
}

.progress-circle::before {
    content: ''; /* 伪元素 */
    position: absolute; /* 绝对定位 */
    width: 84px; /* 设置宽度 */
    height: 84px; /* 设置高度 */
    background: var(--bg-base); /* 使用变量设置背景颜色 */
    border-radius: 50%; /* 设置圆形 */
    backdrop-filter: blur(8px); /* 设置背景模糊 */
}

.progress-text {
    position: relative; /* 设置相对定位 */
    font-size: 1.5rem; /* 设置字体大小 */
    font-weight: 600; /* 设置字体粗细 */
    color: var(--primary-color); /* 使用变量设置文本颜色 */
}

.status-info h2 {
    font-size: 1.4rem; /* 设置标题大小 */
    margin-bottom: 0.5rem; /* 设置底部外边距 */
}

.status-info p {
    color: #64748B; /* 设置文本颜色 */
    font-size: 0.95rem; /* 设置文本大小 */
}

/* 联系方式 */
.contact-section {
    display: grid; /* 使用网格布局 */
    gap: 1.5rem; /* 设置间距 */
}

.About_more {
    display: flex; /* 使用弹性布局 */
    align-items: center; /* 垂直居中 */
    gap: 1.2rem; /* 设置间距 */
    padding: 1.2rem; /* 设置内边距 */
    border-radius: 12px; /* 设置边框圆角 */
    background: var(--bg-base); /* 使用变量设置背景颜色 */
    transition: transform 0.2s ease; /* 设置过渡效果 */
}

.About_more:hover {
    transform: translateX(8px); /* 鼠标悬停时移动 */
}

.About_more i {
    font-size: 1.6rem; /* 设置图标大小 */
    color: var(--primary-color); /* 使用变量设置图标颜色 */
    width: 40px; /* 设置宽度 */
    text-align: center; /* 文本居中 */
}

.About_more h3 {
    font-size: 1.1rem; /* 设置标题大小 */
    margin-bottom: 0.25rem; /* 设置底部外边距 */
}

.About_more p {
    color: #64748B; /* 设置文本颜色 */
    font-size: 0.95rem; /* 设置文本大小 */
}

/* 响应式设计 */
@media (max-width: 640px) {
    .status-card {
        flex-direction: column; /* 设置为垂直布局 */
        text-align: center; /* 文本居中 */
    }

    .About_more {
        padding: 1rem; /* 设置内边距 */
    }
}