:root {
    --bg-main: #f8fafc;        /* 极浅灰白背景 */
    --card-bg: #ffffff;        /* 白色卡片 */
    --text-main: #1e293b;      /* 深色文字 */
    --accent-blue: #38bdf8;    /* 亮蓝高亮 */
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--bg-main); color: var(--text-main); font-family: 'Segoe UI', Roboto, sans-serif; }

/* 头部 */
header { background: #ffffff; border-bottom: 1px solid #e2e8f0; }
.header-container { max-width: 1100px; margin: 0 auto; padding: 20px; overflow: hidden; }

.logo { float: left; }
.logo img { height: 40px; display: block; }

/* 导航 */
nav { float: right; margin-top: 10px; }
nav ul { list-style: none; padding: 0; margin: 0; }
nav ul li { display: inline-block; margin-left: 20px; }
nav ul li a { color: #1e293b; text-decoration: none; font-weight: bold; transition: 0.3s; }
nav ul li a:hover { color: var(--accent-blue); }

/* 主体区域：背景为白色，有轻微阴影 */
.container { max-width: 1100px; margin: 0 auto; padding: 20px; background: #ffffff; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); border-radius: 8px; margin-top: 20px; margin-bottom: 20px; }

.card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    width: 32%;
    float: left;
    margin-right: 2%;
    margin-bottom: 20px;
}
.card-link:nth-child(3n) {
    margin-right: 0;
}
.card { 
    width: 100%; 
    background: #f1f5f9; /* 极浅灰卡片 */
    padding: 25px; 
    border-radius: 8px;
    min-height: 200px;
    border: 1px solid #e2e8f0;
}

/* 响应式适配 */
@media (max-width: 768px) {
    .logo, nav { float: none; text-align: center; }
    nav { margin-top: 20px; }
    nav ul li { margin: 0 10px; }
    .card { width: 100%; float: none; margin: 0 0 20px 0; }
}

footer { text-align: center; padding: 40px 0; color: #64748b; }
footer a { color: var(--accent-blue); text-decoration: none; margin: 0 10px; }
h1, h2, p { margin-bottom: 20px; }
.btn { display: inline-block; background: var(--accent-blue); color: #fff; padding: 10px 20px; text-decoration: none; border-radius: 5px; margin-top: 10px; }