/**
 * 全局基础样式。
 *
 * 说明:
 * - 从前端 style.css 迁移，包含 CSS 变量定义和全局重置。
 * - Element Plus 主色变量保持一致（#002FA8）。
 * - 所有 SSR 页面共享本文件。
 */

/* ─── Element Plus 主色覆盖 ─── */
/* 学习建议: CSS 自定义属性（Custom Properties）可以实现主题切换，
   这里通过 :root 定义全局变量，后续所有颜色引用都使用变量而非硬编码值。 */
:root {
    --el-color-primary:         #002fa8;
    --el-color-primary-light-1: #1a44b1;
    --el-color-primary-light-2: #3359b9;
    --el-color-primary-light-3: #4d6dc2;
    --el-color-primary-light-4: #6682cb;
    --el-color-primary-light-5: #8097d4;
    --el-color-primary-light-6: #99acdc;
    --el-color-primary-light-7: #b3c1e5;
    --el-color-primary-light-8: #ccd5ee;
    --el-color-primary-light-9: #e6eaf6;
    --el-color-primary-dark-2:  #002686;
}

/* ─── 全局重置 ─── */
*, *::before, *::after {
    box-sizing: border-box;
}

body, html {
    background-color: #f0f2ff;
    font-family: 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
    margin: 0;
    padding: 0;
    scrollbar-width: thin;
}

a {
    text-decoration: none;
    color: inherit;
}

img {
    max-width: 100%;
    height: auto;
}

/* ─── 通用动画 ─── */
/* 学习建议: 把多个组件共用的 @keyframes 提取到全局，避免重复定义 */
@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* ─── 加载占位 spinner ─── */
.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid #e6eaf6;
    border-top-color: #002fa8;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 40px auto;
}

/* ─── 错误页面 ─── */
.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 60vh;
    text-align: center;
}
.error-page h1 {
    font-size: 72px;
    color: #002fa8;
    margin: 0;
}
.error-page p {
    font-size: 16px;
    color: #666;
    margin: 16px 0 32px;
}
.error-back-btn {
    display: inline-flex;
    align-items: center;
    padding: 10px 24px;
    border-radius: 20px;
    font-size: 14px;
    color: #fff;
    background: linear-gradient(90deg, rgba(0,53,186,1) 0%, rgba(41,187,255,1) 100%);
    transition: opacity 0.2s;
}
.error-back-btn:hover {
    opacity: 0.85;
}

/* ─── 页面公共底部 ─── */
.site-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    font-size: 13px;
    color: #999;
    padding: 10px 0;
}

.footer-text {
    white-space: nowrap;
}

.footer-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #999;
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s;
}

.footer-link:hover {
    color: #555;
}

.footer-icon {
    width: 20px;
    height: 20px;
    object-fit: contain;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .site-footer {
        flex-direction: column;
        gap: 6px;
        padding: 12px;
        font-size: 11px;
        white-space: normal;
        text-align: center;
    }

    .site-footer .footer-text {
        white-space: normal;
    }
}