/* 全局重置基础样式 */
*{margin:0;padding:0;box-sizing:border-box;text-decoration:none;}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";background-color:#F9F9F9;}

.divider{border:1px solid #ECF0F1;}
.highlight {color:#FF8E44;}

/* =============================================================== */
.header{border-bottom:1px solid #E7E7E9;background-color:#FFF;margin-bottom:32px;border-top:2px solid #03A9F4;}
.header-container{margin:0 auto;padding:0 16px}
.header-inner{display:flex;align-items:center;justify-content:space-between;height:64px}
.header-logo-group{display:flex;align-items:center;gap:20px}
.header-logo-link{display:flex;align-items:center;gap:8px}
.header-logo-img{width:32px;height:32px;color:transparent}
.header-logo-text{font-size:20px;font-weight:600;color:#303030}
.header-search-box{display:flex;align-items:center;width:320px;height:38px;border:1px solid #E7E7E9;border-radius:8px;background-color:#f9f9f9;overflow:hidden}
.header-search-box:focus-within{border-color:#03A9F4;background-color:#FFF}
.header-search-input{flex:1;height:100%;padding:0 14px;border:none;outline:none;background:transparent;font-size:14px;color:#303030}
.header-search-input::placeholder{color:#999}
.header-search-button{height:100%;padding:0 16px;border:none;background-color:#03A9F4;color:#FFF;font-size:16px;cursor:pointer;}
.header-search-button:hover{background-color:#2196F3}
.header-nav-desktop{display:flex;align-items:center;gap:16px}
.header-nav-link{font-size:16px;font-weight:600;color:#303030;}
.header-nav-link:hover{color:#2196F3;text-decoration:underline;}
.header-account-login{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;border-radius:6px;font-size:14px;font-weight:600;height:36px;padding:0 16px;background-color:#03A9F4;color:#FFF;border:none;cursor:pointer}
.header-account-login:hover{background-color:#2196F3}
.header-menu-button{display:none;padding:8px;color:#303030;background:transparent;border:none;cursor:pointer;}
.header-menu-button:hover{color:#2196F3}
.header-nav-mobile{display:none;/*position:absolute;top:64px;left:0;*/width:100%;background:#FFF;border-bottom:1px solid #E7E7E9;padding:16px;flex-direction:column;gap:8px}
.header-nav-mobile.active{display:flex}
.header-nav-mobile .header-nav-link{font-size:15px;padding:8px 0}
.header-nav-mobile .header-account-login{width:100%}
/* =============================================================== */
.main{background-color:#FFF;padding:64px;max-width:950px;margin:0 auto;}
/* =============================================================== */
.footer{margin-top:16px;padding-top:16px;text-align:center;font-size:16px;line-height:2;color:#7f8c8d;}
.footer-container{max-width:970px;margin:0 auto;padding:32px 16px}
.footer-content{display:flex;flex-direction:column;align-items:center;justify-content:space-between;gap:16px}
.footer-copyright{font-size:14px;color:#898989}
.footer-links{display:flex;align-items:center;gap:24px}
.footer-link{font-size:14px;color:#898989;text-decoration:none;}
.footer-link:hover{color:#2196F3}

/* =================== 首页样式 ================== */
.home-banner{background-color:#f0f7ff;padding:32px 16px;text-align:center;margin-bottom:32px;border-radius:8px;}
.home-banner-title{font-size:32px;color:#303030;margin-bottom:16px;}
.home-banner-desc{font-size:18px;color:#898989;max-width:700px;margin:0 auto 24px;}
.home-banner-button{display:inline-block;padding:8px 24px;background-color:#03A9F4;color:#FFF;font-size:16px;font-weight:600;border-radius:8px;}
.home-banner-button:hover{background-color:#2196F3;color:#FFF;}
.home-section{margin-bottom:32px;}
.home-section-title{font-size:22px;color:#2c3e50;padding-bottom:8px;border-bottom:2px solid #ECF0F1;}
/* =============================================================== */
.category-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:16px;margin-bottom:32px;}
.category-card{padding:20px;background-color:#f9f9f9;border-radius:8px;}
.category-card:hover{background-color:#f0f7ff;transform:translateY(-2px);box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.category-card-title{font-size:16px;font-weight:600;color:#303030;margin-bottom:8px;}
.category-card-count{font-size:14px;color:#898989;}
/* =============================================================== */
.latest-items{list-style:none;}
.latest-item{padding:12px 0;border-bottom:1px solid #eaecee;display:flex;justify-content:space-between;align-items:center;}
.latest-item:last-child{border-bottom:none;}
.latest-item-link{font-size:16px;color:#03A9F4;flex:1;margin-right:12px;}
.latest-item-link:hover{text-decoration:underline;}
.latest-item-date{font-size:14px;color:#898989;white-space:nowrap;flex-shrink:0;}

/* =================== 频道样式 ================== */
.channel{margin-bottom:32px;}
.channel-title{font-size:20px;color:#2c3e50;padding-bottom:8px;border-bottom:2px solid #ECF0F1;}
.channel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:16px;margin-bottom:32px;}
.channel-grid .category-card{padding:20px;background-color:#f9f9f9;border-radius:8px;}
.channel-grid .category-card:hover{background-color:#f0f7ff;transform:translateY(-2px);box-shadow:0 2px 8px rgba(0,0,0,0.1);}
.channel-grid .category-card .category-card-title{font-size:16px;font-weight:600;color:#303030;margin-bottom:8px;}
.channel-grid .category-card .category-card-count{font-size:14px;color:#898989;}

/* =================== 列表样式 ================== */

.category-header{margin-bottom:16px;}
.category-title{font-size:24px;color:#2c3e50;margin-bottom:8px;}
.category-description{font-size:14px;color:#898989;font-weight:normal;margin-bottom:16px;line-height: 2;}

/* 面包屑导航样式 */
.breadcrumb{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px;font-size:14px;color:#7f8c8d;}
.breadcrumb-item{display:inline-block;}
.breadcrumb-item a{color:#03A9F4;text-decoration:none;}
.breadcrumb-item a:hover{text-decoration:underline;}
.breadcrumb-item.active{color:#898989;font-weight:500;}
.breadcrumb-separator{color:#bdc3c7;}

/* 分页样式 */
.pagination{text-align:center;padding:15px 0;}
.pagination span,
.pagination a{display:inline-block;padding:8px 15px;margin:0 4px;border-radius:4px;text-decoration:none;color:#666;font-size:14px;}
.pagination a{background-color:#FFF;border:1px solid #e0e0e0;}
.pagination a:hover{background-color:#f0f7ff;border-color:#1976d2;color:#1976d2;}
.pagination .pagination-current{background-color:#1976d2;color:#FFF;border:1px solid #1976d2;}

/* =================== 文章样式 ================== */
.article-header{margin-bottom: 16px;padding-bottom:16px;border-bottom: 2px solid #ECF0F1;}

.article-meta{background-color:#f9f9f9;padding:20px;border-radius:8px;margin-bottom:24px;}
.article-meta-item{display:flex;margin-bottom:12px;font-size:15px;}
.article-meta-item:last-child{margin-bottom:0;}
.article-meta-label{width:120px;color:#898989;font-weight:500;}
.article-meta-value{color:#303030;flex:1;}

.article-content{line-height:2;color:#303030;font-size:16px;margin-bottom:32px;}
.article-content h3{font-size:18px;color:#2c3e50;margin:24px 0 12px;}
.article-content p{margin-bottom:16px;}
.article-content img{display:block;margin:32px 0;max-width:100%;border-width:0;border-radius:20px}
.article-content pre{background-color:#f0f7ff;padding:16px;border-radius:4px;overflow-x:auto;margin-bottom:16px;font-size:14px;}

.download-block{padding:20px;background:#f9f9f9;border-radius:6px;margin:24px 0;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:16px;}
.download-info h4{font-size:16px;color:#222;margin-bottom:6px;}
.download-info p{font-size:13px;color:#666;}
.download-full-button{padding:8px 24px;background:#03A9F4;color:#FFF;border:none;border-radius:6px;font-size:14px;cursor:pointer;}
.download-full-button:hover{background:#2196F3}

.article-related{margin-top:64px;}
.article-related .article-related-title{font-size:20px;color:#2c3e50;padding-bottom:8px;border-bottom:2px solid #ECF0F1;}

/* =============================================================== */
@media (max-width:768px){
    .header{margin-bottom:16px;}
    .header-search-box{width: 100%;}
    .header-nav-desktop{display:none}
    .header-menu-button{display:block}
    .header-logo-group .header-search-box{display:none}
    .home-banner-title{font-size:24px;}
    .home-banner-desc{font-size:16px;}

    .main{padding:16px;}

    .category-grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));}
    .footer-content{flex-direction:row}

    .article-title{font-size:20px;}
    .article-meta-label{width:100px;font-size:14px;}
    .article-meta-value{font-size:14px;}
    .article-download-button{width:100%;text-align:center;}

    .pagination span,
    .pagination a{padding:6px 12px;margin:0 2px;}
}
/* =============================================================== */
@media (max-width:480px){
    body{padding:10px;}
    .breadcrumb{font-size:13px;}
}


/* USER CENTER -------------------------------------------------------- */
.user-center{max-width:100%;margin:0 auto;}
.user-center h1{font-size:24px;font-weight:600;margin-bottom:20px;color:#333;}
.user-center h2{font-size:18px;font-weight:600;margin-bottom:16px;color:#333;}

/* Navigation Menu */
.user-center .nav-menu{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:24px;padding-bottom:16px;border-bottom:2px solid #e3e3e3;}
.user-center .nav-item{padding:10px 20px;text-decoration:none;color:#666;font-size:14px;font-weight:500;border-radius:4px;transition:all 0.3s ease;background-color:#f5f5f5;border:1px solid transparent;}
.user-center .nav-item:hover{color:#00AAFF;background-color:#fff;border-color:#00AAFF;text-decoration:none;}
.user-center .nav-item.active{background-color:#00AAFF;color:#fff;border-color:#00AAFF;}

/* User Info */
.user-center .user-info{background:#f9f9f9;padding:24px;border-radius:8px;margin-bottom:24px;border:1px solid #e3e3e3;}
.user-center .user-info .info-item{margin-bottom:16px;padding-bottom:16px;border-bottom:1px solid #e3e3e3;}
.user-center .user-info .info-item:last-child{margin-bottom:0;padding-bottom:0;border-bottom:none;}
.user-center .user-info .info-item .info-label{display:inline-block;min-width:100px;font-weight:600;color:#333;margin-right:8px;}

/* Download List */
.download-list{background:#f9f9f9;padding:24px;border-radius:8px;border:1px solid #e3e3e3;}
.download-item{background:white;padding:16px;margin-bottom:12px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.1);border:1px solid #e3e3e3;transition:box-shadow 0.3s ease;}
.download-item:hover{box-shadow:0 2px 8px rgba(0,0,0,0.15);}
.download-item:last-child{margin-bottom:0;}
.item-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;flex-wrap:wrap;gap:8px;}
.item-title{font-weight:600;color:#333;font-size:16px;}
.item-time{color:#999;font-size:14px;}
.item-info{display:flex;justify-content:space-between;align-items:center;font-size:14px;color:#666;flex-wrap:wrap;gap:8px;}
.status{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:500;}
.status.valid{background:#e8f5e9;color:#4CAF50;border:1px solid #4CAF50;}
.status.expired{background:#ffebee;color:#f44336;border:1px solid #f44336;}

/* Integral List */
.user-center .integral-list{background:#f9f9f9;padding:24px;border-radius:8px;border:1px solid #e3e3e3;}
.user-center .integral-list .integral-item{background:white;padding:16px;margin-bottom:12px;border-radius:6px;box-shadow:0 1px 3px rgba(0,0,0,0.1);border:1px solid #e3e3e3;transition:box-shadow 0.3s ease;}
.user-center .integral-list .integral-item:hover{box-shadow:0 2px 8px rgba(0,0,0,0.15);}
.user-center .integral-list .integral-item:last-child{margin-bottom:0;}
.user-center .integral-list .integral-item .item-amount{font-size:18px;font-weight:700;}
.user-center .integral-list .integral-item .item-amount.positive{color:#4CAF50;}
.user-center .integral-list .integral-item .item-amount.negative{color:#f44336;}
.user-center .integral-list .integral-item .item-desc{font-size:14px;color:#666;margin-top:8px;}

/* Recharge Form */
.user-center .recharge-form{background:#f9f9f9;padding:24px;border-radius:8px;border:1px solid #e3e3e3;}
.user-center .recharge-form .alert{padding:16px;margin-bottom:16px;border:1px solid transparent;border-radius:3px;background-color:#d9edf7;border-color:#c6e4f3;color:#3a87ad;}
.user-center .recharge-form .form-group{margin-bottom:24px;}
.user-center .recharge-form .form-label{display:block;margin-bottom:12px;font-weight:600;color:#333;font-size:16px;}
.user-center .recharge-form .amount-options{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;margin-bottom:20px;}
.user-center .recharge-form .amount-options .amount-option{padding:16px 20px;border:2px solid #e3e3e3;border-radius:6px;cursor:pointer;transition:all 0.3s ease;text-align:center;font-weight:500;background:white;color:#333;}
.user-center .recharge-form .amount-options .amount-option:hover{border-color:#00AAFF;color:#00AAFF;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,170,255,0.2);}
.user-center .recharge-form .amount-options .amount-option.active{background:#00AAFF;color:white;border-color:#00AAFF;transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,170,255,0.3);}
.user-center .recharge-form .amount-options .amount-option .amount{font-size:24px;font-weight:700;color:#00AAFF;margin-bottom:4px;}
.user-center .recharge-form .amount-options .amount-option .integral{font-size:14px;color:#666;}
.user-center .recharge-form .amount-options .amount-option.active .amount{color:white;}
.user-center .recharge-form .amount-options .amount-option.active .integral{color:rgba(255,255,255,0.9);}
.user-center .recharge-form .payment-options{display:flex;gap:12px;}
.user-center .recharge-form .payment-options .payment-option{display:flex;align-items:center;justify-content:center;gap:8px;padding:12px 24px;border:2px solid #e3e3e3;border-radius:8px;cursor:pointer;transition:all 0.3s ease;background:white;min-width:120px;}
.user-center .recharge-form .payment-options .payment-option:hover{border-color:#07C160;}
.user-center .recharge-form .payment-options .payment-option.active{border-color:#07C160;background:#f0f9f4;}
.user-center .recharge-form .payment-options .payment-option .payment-icon{width:24px;height:24px;}
.user-center .recharge-form .payment-options .payment-option .payment-name{font-size:16px;font-weight:500;color:#333;}
.user-center .recharge-form .submit-btn{background:linear-gradient(135deg,#00AAFF 0%,#0088CC 100%);color:white;padding:14px 32px;border:none;border-radius:6px;font-size:16px;font-weight:600;cursor:pointer;transition:all 0.3s ease;display:block;text-align:center;margin:0 auto;min-width:200px;}
.user-center .recharge-form .submit-btn:hover{background:linear-gradient(135deg,#0088CC 0%,#006699 100%);transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,136,204,0.3);}
.user-center .recharge-form .submit-btn:active{transform:translateY(0);}
.user-center .recharge-form .message{margin-bottom:20px;padding:12px 16px;border-radius:6px;font-size:14px;}
.user-center .recharge-form .message.success{background:#e8f5e9;color:#4CAF50;border:1px solid #4CAF50;}
.user-center .recharge-form .message.error{background:#ffebee;color:#f44336;border:1px solid #f44336;}