:root {
    --primary: #1677ff;
    --primary-light: #e8f3ff;
    --text-main: #333;
    --text-gray: #666;
    --text-light: #999;
    --border: #dcdcdc;
    --border-light: #f0f0f0;
    --white: #fff;
    --radius-md: 6px;
    --radius-sm: 4px;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Microsoft YaHei", "PingFang SC", "Hiragino Sans GB", sans-serif;
    color: var(--text-main);
    font-size: 14px;
    line-height: 2.2;
    background: #fefefe;
}
a {
    color: var(--primary);
    text-decoration: none;
}
a:hover {
    text-decoration: underline;
}
h2 {
    font-size: 20px;
    margin: 0 0 18px;
    color: #000;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--border-light);
    font-weight: bold;
}
h3 {
    font-size: 16px;
    margin-bottom: 12px;
    font-weight: bold;
}

/* ========== 头部导航 ========== */
header.site-header {
    width: 100%;
    background: var(--white);
    border-bottom: 1px solid var(--border-light);
}
.header-inner {
    max-width: 1180px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
}
.nav-logo img {
    height: 28px;
    display: block;
    filter: grayscale(100%);
}
.nav-logo img:hover {
    filter: none;
}
.nav-user {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}
.nav-user button {
    padding: 7px 16px;
    border: 1px solid var(--primary);
    background: transparent;
    color: var(--primary);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}
.nav-user button.fill {
    background: var(--primary);
    color: var(--white);
}
.nav-user button:hover {
    opacity: 0.9;
}

/* ========== 首页搜索模块 ========== */
.hero-search {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f4ff 100%);
    padding: 40px 20px;
    margin-bottom: 30px;
}
.hero-search-inner {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
}
.hero-search h1 {
    font-size: 24px;
    color: #000;
    margin-bottom: 8px;
    font-weight: bold;
}
.hero-search p {
    color: var(--text-gray);
    margin-bottom: 24px;
    font-size: 14px;
}
.hero-search-box {
    width: 100%;
    box-shadow: 0 4px 12px rgba(22, 119, 255, 0.1);
    border-radius: var(--radius-md);
    overflow: hidden;
}
.hero-search-box form {
    display: flex;
    width: 100%;
    margin: 0;
    padding: 0;
}
.hero-search-box input {
    flex: 1;
    height: 52px;
    padding: 0 20px;
    border: none;
    font-size: 15px;
    outline: none;
    background: #fff;
    font-family: "SimSun", serif;
}
.hero-search-box button {
    height: 52px;
    padding: 0 36px;
    border: none;
    background: var(--primary);
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: opacity 0.2s;
    font-family: "SimSun", serif;
}
.hero-search-box button:hover {
    opacity: 0.92;
}
.hero-hot {
    margin-top: 14px;
    font-size: 13px;
    color: var(--text-gray);
    text-align: left;
}
.hero-hot span {
    margin-right: 8px;
}
.hero-hot a {
    margin-right: 12px;
    color: var(--text-gray);
}
.hero-hot a:hover {
    color: var(--primary);
    text-decoration: none;
}

/* ========== 主体容器 ========== */
.wrap {
    max-width: 1180px;
    margin: 0 auto 40px;
    padding: 0 20px;
}

.category-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-bottom: 40px;
}
.category-card {
    padding: 20px;
    border-radius: var(--radius-md);
    transition: transform 0.2s, box-shadow 0.2s;
}
.category-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
}
.category-card h3 {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 14px;
}
.category-card h3::before {
    content: "";
    width: 18px;
    height: 18px;
    background-repeat: no-repeat;
    background-size: contain;
    opacity: 0.9;
}

.cat-blue {
    background: linear-gradient(135deg, #f0f7ff 0%, #e6f0ff 100%);
}
.cat-blue h3 {
    color: #0958d9;
}
.cat-blue h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%230958d9'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zM9 17H7v-5h2v5zm4 0h-2V7h2v10zm4 0h-2v-7h2v7z'/%3E%3C/svg%3E");
}

.cat-green {
    background: linear-gradient(135deg, #f0fff4 0%, #e6f7ed 100%);
}
.cat-green h3 {
    color: #008020;
}
.cat-green h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23008020'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E");
}

.cat-orange {
    background: linear-gradient(135deg, #fffaf0 0%, #fff1e0 100%);
}
.cat-orange h3 {
    color: #d46b08;
}
.cat-orange h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23d46b08'%3E%3Cpath d='M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-5 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E");
}

.cat-purple {
    background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
}
.cat-purple h3 {
    color: #531dab;
}
.cat-purple h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23531dab'%3E%3Cpath d='M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7L12 2zm0 10c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2z'/%3E%3C/svg%3E");
}

.cat-red {
    background: linear-gradient(135deg, #fff5f5 0%, #ffeaea 100%);
}
.cat-red h3 {
    color: #cf1322;
}
.cat-red h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cf1322'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z'/%3E%3C/svg%3E");
}

.cat-cyan {
    background: linear-gradient(135deg, #f0fffd 0%, #e6fffb 100%);
}
.cat-cyan h3 {
    color: #08979c;
}
.cat-cyan h3::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2308979c'%3E%3Cpath d='M16 11c1.66 0 2.99-1.34 2.99-3S17.66 5 16 5c-1.66 0-3 1.34-3 3s1.34 3 3 3zm-8 0c1.66 0 2.99-1.34 2.99-3S9.66 5 8 5C6.34 5 5 6.34 5 8s1.34 3 3 3zm0 2c-2.33 0-7 1.17-7 3.5V19h14v-2.5c0-2.33-4.67-3.5-7-3.5zm8 0c-.29 0-.62.02-.97.05 1.16.84 1.97 1.97 1.97 3.45V19h6v-2.5c0-2.33-4.67-3.5-7-3.5z'/%3E%3C/svg%3E");
}

/* 分类内独立标签 */
.cat-tag-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cat-tag-list a {
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.85);
    border-radius: var(--radius-sm);
    font-size: 13px;
    color: var(--text-main);
    transition: all 0.2s;
    cursor: pointer;
}
.cat-tag-list a:hover {
    background: #fff;
    text-decoration: none;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06);
    color: var(--primary);
}

/* ========== 最新发布 ========== */
.latest-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 40px;
}
.latest-item {
    display: flex;
    align-items: center;
    padding: 12px 4px;
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.2s;
    text-decoration: none;
    color: inherit;
}
.latest-item:hover {
    background: #fafafa;
    text-decoration: none;
}
.latest-item:hover .latest-title {
    color: var(--primary);
}
.latest-title {
    flex: 1;
    min-width: 0;
    font-size: 16px;
    color: var(--text-main);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ========== 页脚 ========== */
footer.site-footer {
    width: 100%;
    padding: 25px 20px;
    background: #f7f8fa;
    border-top: 1px solid var(--border-light);
    margin-top: 40px;
    text-align: center;
    font-size: 12px;
    color: var(--text-light);
    line-height: 2;
}

/* ========== 响应式适配 ========== */
@media (max-width: 992px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .latest-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 24px;
    }
}

@media (max-width: 576px) {
    .header-inner {
        padding: 16px 20px;
    }
    .nav-logo img {
        height: 28px;
    }

    .hero-search {
        padding: 30px 20px;
    }
    .hero-search h1 {
        font-size: 22px;
    }
    .hero-search-box input {
        height: 46px;
        padding: 0 16px;
    }
    .hero-search-box button {
        height: 46px;
        padding: 0 24px;
    }
    .hero-hot {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .category-grid {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .latest-list {
        grid-template-columns: minmax(0, 1fr);
    }
}