/* 基础样式重置 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* 麦苗绿色系 - 语义化变量名 */
:root {
    /* 背景色 */
    --bg-primary: #fcfcfc; /* 浅麦苗绿 - 主背景 */
    --bg-secondary: #F6FAF6; /* 超浅麦苗绿 - 次要背景 */
    
    /* 主色调 */
    --accent-primary: #9CCB86; /* 深麦苗绿 - 主要元素 */
    --accent-secondary: #C6E5B5; /* 中麦苗绿 - 次要元素 */
    --accent-tertiary: #7FB763; /* 特深麦苗绿 - 强调/hover */
    --accent-quaternary: #B3DC9F; /* 浅麦苗绿 - 装饰元素 */
    
    /* 文字色 */
    --text-primary: #334133; /* 文字深色 - 主要文字 */
    --text-secondary: #5A6A55; /* 文字中色 - 次要文字 */
    --text-tertiary: #8B9B86; /* 文字浅色 - 辅助文字 */
    --text-inverse: #FFFFFF; /* 反色文字 - 深色背景上的文字 */
    
    /* 阴影和边框 */
    --shadow-sm: 0 4px 12px rgba(156, 203, 134, 0.1); /* 小阴影 */
    --shadow-md: 0 8px 24px rgba(156, 203, 134, 0.2); /* 中阴影 */
    --shadow-lg: 0 16px 40px rgba(156, 203, 134, 0.25); /* 大阴影 */
    --border-light: rgba(156, 203, 134, 0.2); /* 浅色边框 */
    --border-medium: rgba(156, 203, 134, 0.3); /* 中等边框 */
    
    /* 透明度 */
    --opacity-low: 0.3;
    --opacity-medium: 0.6;
    --opacity-high: 0.9;
}

/* 粒子背景容器 */
#particles-js {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    background-color: var(--bg-primary);
    z-index: 0;
}

/* 全局布局 */
html, body {
    height: 100%;
    overflow: hidden;
}

/* 动画效果 */
@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

/* ========== index.html 特有样式 ========== */

/* 主容器 - 极简居中布局 */
.main-container {
    position: relative;
    z-index: 1;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0 20px;
    text-align: center;
}

/* Logo区域 - 极简设计 */
.logo-section {
    margin-bottom: 40px;
}

.logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-decoration: none;
    color: var(--text-primary);
}

.logo-image {
    width: 120px;
    height: 120px;
    margin-bottom: 20px;
    object-fit: contain;
}

.logo-text {
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 8px;
}

.logo-subtitle {
    font-size: 16px;
    color: var(--text-secondary);
}

.hero h2 {
    font-size: 18px;
    color: var(--text-primary);
    margin-bottom: 10px;
    line-height: 1.3;
}

.hero h2 span {
    color: var(--accent-primary);
}

/* 页脚 - 极简信息 */
footer {
    position: fixed;
    bottom: 20px;
    left: 0;
    right: 0;
    text-align: center;
    font-size: 12px;
    color: var(--text-tertiary);
}

.icp-record a {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color 0.3s ease;
}

.icp-record a:hover {
    color: var(--accent-primary);
}

/* 响应式适配 - index.html */
@media (max-width: 480px) {
    .logo-image {
        width: 100px;
        height: 100px;
    }

    .logo-text {
        font-size: 24px;
    }

    .hero h2 {
        font-size: 13px;
    }
}

/* ========== error.html 特有样式 ========== */

/* 错误页面主体 - error.html */
.error-content {
    text-align: center;
    padding: 30px 0;
    margin-bottom: 20px;
}

.error-code {
    font-size: 120px;
    font-weight: 700;
    color: var(--accent-tertiary);
    margin-bottom: 20px;
    position: relative;
    animation: float 3s ease-in-out infinite;
}

.error-icon {
    font-size: 80px;
    color: var(--accent-primary);
    margin-bottom: 30px;
    opacity: 0.8;
}

.error-message {
    max-width: 600px;
    margin: 0 auto 40px;
}

.error-message h2 {
    font-size: 32px;
    color: var(--text-primary);
    margin-bottom: 15px;
}

.error-message p {
    font-size: 18px;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* 移除按钮相关样式 - error.html */
.btn, .error-actions, .footer-content {
    display: none;
}

/* 响应式适配 - error.html */
@media (max-width: 768px) {
    .error-code {
        font-size: 80px;
    }

    .error-icon {
        font-size: 60px;
    }

    .error-message h2 {
        font-size: 24px;
    }
}

/* 移除导航栏相关样式，与index.html风格统一 */
header, .navbar, .container {
    display: none;
}