/* 腾讯云风格配色 */
:root {
    --primary-color:#006EFF; /* 腾讯云主蓝 */
    --secondary-color:#0052D9; /* 深蓝 */
    --accent-color:#4D7CFF; /* 浅蓝 */
    --dark-color:#1A1A1A; /* 腾讯云深色 */
    --light-color:#F5F7FA; /* 背景灰 */
    --gray-color:#8A919F; /* 腾讯云灰 */
    --white-color:#FFFFFF;
    --shadow:0 4px 12px rgba(0, 110, 255, 0.1);
}

* {
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body {
    font-family:'PingFang SC', 'Microsoft YaHei', sans-serif;
    line-height:1.6;
    color:var(--dark-color);
    background-color:var(--light-color);
}

.container {
    width:100%;
    max-width:1200px;
    margin:0 auto;
    padding:0 20px;
}

a {
    text-decoration:none;
    color:var(--primary-color);
}

/* 头部样式 - 腾讯云风格 */
.header {
    background-color:var(--white-color);
    box-shadow:var(--shadow);
    position:sticky;
    top:0;
    z-index:100;
    padding:1rem 0;
}

.header .container {
    display:flex;
    justify-content:space-between;
    align-items:center;
    flex-wrap:nowrap;
}

.logo {
    font-size:1.8rem;
    font-weight:700;
    color:var(--primary-color);
    display:flex;
    align-items:center;
}

.logo-icon {
    width:36px;
    height:36px;
    margin-right:10px;
    background-color:var(--primary-color);
    border-radius:6px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:white;
    font-weight:bold;
}

/* 搜索框样式 */
.search-container {
    flex:1;
    max-width:500px;
    margin:0 2rem;
    position:relative;
}

.search-input {
    width:100%;
    padding:0.6rem 3rem 0.6rem 1rem;
    border:1px solid #dfdfdf;
    border-radius:4px;
    font-size:1rem;
    transition:border-color 0.3s;
}

.search-input:focus {
    border-color:var(--primary-color);
    outline:none;
}

.search-button {
    position:absolute;
    right:0;
    top:0;
    height:100%;
    width:3rem;
    background:none;
    border:none;
    color:var(--gray-color);
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:center;
    transition:color 0.3s;
}

.search-button:hover {
    color:var(--primary-color);
}

/* 导航菜单 */
.nav-menu {
    display:flex;
    list-style:none;
}

.nav-menu li {
    margin-left:1.5rem;
}

.nav-menu a {
    color:var(--dark-color);
    font-weight:500;
    transition:color 0.3s;
    position:relative;
    padding:0.5rem 0;
}

.nav-menu a:hover {
    color:var(--primary-color);
}

.nav-menu a::after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:0;
    height:2px;
    background-color:var(--primary-color);
    transition:width 0.3s;
}

.nav-menu a:hover::after {
    width:100%;
}

.nav-toggle {
    display:none;
    background:none;
    border:none;
    font-size:1.5rem;
    cursor:pointer;
    color:var(--dark-color);
}

/* 主要内容区域 */
.main {
    padding:2rem 0;
    position:relative;
}

section {
    margin-bottom:3rem;
}

.section-title {
    font-size:1.8rem;
    margin-bottom:1.5rem;
    color:var(--dark-color);
    position:relative;
    padding-bottom:0.5rem;
}

.section-title::after {
    content:'';
    position:absolute;
    bottom:0;
    left:0;
    width:50px;
    height:3px;
    background-color:var(--primary-color);
}

.section-header {
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:1.5rem;
}

.view-more {
    color:var(--primary-color);
    font-weight:500;
    transition:color 0.3s;
    margin-left:auto;
    padding-left:1rem;
}

.view-more:hover {
    color:var(--secondary-color);
}

/* 文章卡片样式 */
.articles-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
    gap:2rem;
}

.article-card {
    background-color:var(--white-color);
    border-radius:8px;
    overflow:hidden;
    box-shadow:var(--shadow);
    transition:transform 0.3s, box-shadow 0.3s;
}

.article-card:hover {
    transform:translateY(-5px);
    box-shadow:0 10px 20px rgba(0, 110, 255, 0.15);
}

.article-image {
    height:180px;
    background-color:var(--light-color);
    background-size:cover;
    background-position:center;
}

.article-content {
    padding:1.5rem;
}

.article-meta {
    display:flex;
    align-items:center;
    margin-bottom:0.8rem;
    color:var(--gray-color);
    font-size:0.9rem;
}

.article-meta span {
    margin-right:1rem;
    display:flex;
    align-items:center;
}

.article-meta i {
    margin-right:0.3rem;
}

.article-title {
    font-size:1.2rem;
    margin-bottom:0.8rem;
    color:var(--dark-color);
}

.article-excerpt {
    color:var(--gray-color);
    margin-bottom:1rem;
    line-height:1.6;
}

.read-more {
    color:var(--primary-color);
    font-weight:500;
    transition:color 0.3s;
}

.read-more:hover {
    color:var(--secondary-color);
}

/* 收藏夹样式 */
.bookmarks-grid {
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));
    gap:2rem;
}

.bookmark-card {
    background-color:var(--white-color);
    border-radius:8px;
    padding:1.5rem;
    box-shadow:var(--shadow);
    transition:transform 0.3s, box-shadow 0.3s;
}

.bookmark-card:hover {
    transform:translateY(-5px);
    box-shadow:0 10px 20px rgba(0, 110, 255, 0.15);
}

.bookmark-card h3 {
    font-size:1.2rem;
    margin-bottom:0.5rem;
}

.bookmark-card h3 a {
    color:var(--dark-color);
    transition:color 0.3s;
}

.bookmark-card h3 a:hover {
    color:var(--primary-color);
}

.bookmark-card p {
    color:var(--gray-color);
    margin-bottom:1rem;
    line-height:1.6;
}

.tag {
    display:inline-block;
    background-color:var(--primary-color);
    color:var(--white-color);
    padding:0.2rem 0.5rem;
    border-radius:4px;
    font-size:0.8rem;
    margin-top:0.5rem;
}

/* 返回顶部按钮 - 修改后样式 */
.back-to-top {
    position:fixed;
    right:2rem;
    bottom:2rem;
    width:50px;
    height:50px;
    background-color:var(--primary-color);
    color:var(--white-color);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    opacity:1;
    visibility:visible;
    transition:all 0.3s;
    z-index:99;
    box-shadow:0 2px 10px rgba(0, 110, 255, 0.3);
}

.back-to-top:hover {
    background-color:var(--secondary-color);
    transform:translateY(-3px);
}

/* 修改后的页脚样式 */
.footer {
    padding:0;
    text-align:center;
    position:relative;
    overflow:hidden;
}

.footer .container {
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
}

.footer p {
    font-size:1.2rem;
    margin-bottom:1.5rem;
}

/* 响应式设计 */
@media (max-width:768px) {
    .container {
        padding:0 15px;
    }

    .header .container {
        flex-direction:column;
        align-items:stretch;
    }

    .logo {
        margin-bottom:1rem;
        text-align:center;
    }

    .search-container {
        order:2;
        margin:1rem 0;
        max-width:100%;
    }

    .nav {
        order:3;
        width:100%;
    }

    .nav-menu {
        display:none;
        flex-direction:column;
        width:100%;
        position:absolute;
        top:100%;
        left:0;
        background-color:var(--white-color);
        padding:1rem;
        box-shadow:var(--shadow);
    }

    .nav-menu.active {
        display:flex;
    }

    .nav-menu li {
        margin:0.5rem 0;
    }

    .nav-toggle {
        display:block;
        position:absolute;
        right:20px;
        top:20px;
    }

    .articles-grid,
    .bookmarks-grid {
        grid-template-columns:1fr;
    }
}