/* 全局样式重置 */
* {margin: 0;padding: 0;box-sizing: border-box;}
a {text-decoration: none;}
body {font-family: "Microsoft YaHei", Arial, sans-serif;color: #333;background-color: #f5f5f5;line-height: 1.6;}
.container {max-width: 1200px;width: 100%;margin: 0 auto;padding: 0 20px;}
.pagination {display: flex;justify-content: center;align-items: center;gap: 5px;margin: 30px 0;}
.pagination a{padding: 8px 16px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;color: #333;text-decoration: none;transition: all 0.3s ease;font-size: 14px;}
.pagination a:hover:not(.disabled) {background-color: #e63946;color: #fff;border-color: #e63946;}
.pagination a.on {background-color: #e63946;color: #fff;border-color: #e63946;}
.pagination a.disabled {color: #ccc;cursor: not-allowed;}
/* 顶部导航栏 */
.top-header {background-color: #fff;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);padding: 15px 0;}
.header-content {display: flex;align-items: center;justify-content: space-between;width: 100%;}
.logo img {height: 50px;}
.search-box {flex: 1;max-width: 500px;position: relative;}
.search-box input {width: 100%;height: 40px;padding: 0 45px 0 15px;border: 2px solid #e63946;border-radius: 20px;outline: none;font-size: 14px;}
.search-box button {position: absolute;right: 10px;top: 50%;transform: translateY(-50%);background: none;border: none;color: #e63946;font-size: 18px;cursor: pointer;}
.user-actions a {display: inline-block;margin-left: 15px;padding: 8px 16px;border-radius: 20px;font-weight: bold;text-decoration: none;transition: all 0.3s ease;border: 2px solid #333;color: #333;font-size: 14px;}
.user-actions a i {margin-right: 6px;}
/* 我的收藏按钮 */
.btn-favorite {border-color: #e74c3c;color: #e74c3c;}
.btn-favorite:hover {background-color: #e74c3c;color: #fff;transform: translateY(-2px);box-shadow: 0 4px 8px rgba(231, 76, 60, 0.3);}
/* 阅读历史按钮 */
.btn-history {border-color: #3498db;color: #3498db;}
.btn-history:hover {background-color: #3498db;color: #fff;transform: translateY(-2px);box-shadow: 0 4px 8px rgba(52, 152, 219, 0.3);}
/* 夜间模式按钮 */
.btn-dark-mode {border-color: #2c3e50;color: #2c3e50;}
.btn-dark-mode:hover {background-color: #2c3e50;color: #fff;transform: translateY(-2px);box-shadow: 0 4px 8px rgba(44, 62, 80, 0.3);}
.userinfo .login{padding: 0 15px;border: 2px solid #e63946;background: #fff;line-height: 30px;display: block;border-radius: 4px;color: #e63946;transition: all 0.3s ease;font-size: 14px;}
.top-header .userinfo .login:hover{border-radius: 15px;background: #e63946;color: #fff;}
.top-header .userinfo .info{display: flex;justify-content: flex-start;align-content: center;}
.top-header .userinfo .info .user{padding: 0 15px;border: 2px solid #e63946;background: #fff;line-height: 30px;display: block;border-radius: 4px;color: #e63946;transition: all 0.3s ease;font-size: 14px;}
.top-header .userinfo .info .user:hover{border-radius: 15px;background: #e63946;color: #fff;}
.top-header .userinfo .info .logout{line-height: 34px;padding-left: 14px;color: #333;transition: all 0.3s ease;}
.top-header .userinfo .info .logout:hover{color: #e63946;}

/* 主导航 */
.main-nav {background-color: #e63946;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);position: relative;z-index: 1000;}
.main-nav .container {display: flex;justify-content: center;}
.nav-header {display: none;}
.logo-mobile {display: none;}
.menu-toggle {display: none;}
.nav-list {display: flex;list-style: none;margin: 0;padding: 0;}
.nav-list li {margin: 0 15px;}
.nav-list li a {display: block;padding: 15px 25px;color: #fff;text-decoration: none;font-weight: bold;transition: background-color 0.3s ease;}
.nav-list li a:hover,.nav-list li a.active {background-color: #d62839;}

/* 响应式导航 */
@media (max-width: 768px) {
    .main-nav .container {justify-content: space-between;}
    .nav-header {display: flex;align-items: center;justify-content: space-between;width: 100%;}
    .logo-mobile {display: block;}
    .menu-toggle {display: block;background: none;border: none;color: #fff;font-size: 24px;cursor: pointer;padding: 10px;}
    .nav-list {position: absolute;top: 100%;left: 0;width: 100%;background-color: #e63946;flex-direction: column;align-items: center;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);max-height: 0;overflow: hidden;transition: max-height 0.3s ease;z-index: 1000;}
    .nav-list.active {max-height: 300px;}
    .nav-list li {margin: 0;width: 100%;text-align: center;}
    .nav-list li a {padding: 12px 0;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
    .nav-list li:last-child a {border-bottom: none;}
}
/* 轮播图 */
.banner-section {margin: 20px 0;position: relative;overflow: hidden;border-radius: 8px;}
.banner-slider {height: 400px;position: relative;width: 100%;}
.banner-item {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: opacity 0.5s ease;}
.banner-item.active {opacity: 1;z-index: 1;}
.banner-item img {width: 100%;height: 100%;object-fit: cover;}
.banner-info {position: absolute;bottom: 0;left: 0;width: 100%;padding: 30px;background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));color: #fff;z-index: 2;}
.banner-info h3 {font-size: 28px;margin-bottom: 10px;}
.banner-info p {font-size: 16px;margin-bottom: 20px;opacity: 0.9;}
.btn-read {display: inline-block;padding: 10px 30px;background-color: #e63946;color: #fff;text-decoration: none;border-radius: 25px;font-weight: bold;transition: all 0.3s ease;}
.btn-read:hover {background-color: #d62839;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(230, 57, 70, 0.4);}
/* 轮播控制按钮 - 居中显示在两侧 */
.prev-btn,
.next-btn {position: absolute;top: 50%;transform: translateY(-50%);width: 40px;height: 40px;border-radius: 50%;background-color: rgba(0, 0, 0, 0.5);color: #fff;border: none;font-size: 18px;cursor: pointer;transition: all 0.3s ease;z-index: 3;}
.prev-btn {left: 20px;}
.next-btn {right: 20px;}
.prev-btn:hover,.next-btn:hover {background-color: rgba(0, 0, 0, 0.8);}
/* 轮播指示器 - 底部中央 */
.banner-dots {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;gap: 10px;z-index: 3;}
.dot {width: 10px;height: 10px;border-radius: 50%;background-color: rgba(255, 255, 255, 0.5);cursor: pointer;transition: all 0.3s ease;}
.dot.active {background-color: #e63946;width: 20px;border-radius: 5px;}
/* 调整banner-controls容器 */
.banner-controls {position: relative;width: 100%;height: 100%;}
/* 主要内容区域 */
.main-content {margin: 20px 0;}
.main-content .container {display: flex;gap: 20px;}
.content-body {flex: 1;}
.sidebar {width: 300px;flex-shrink: 0;}

/* 响应式布局 */
@media (max-width: 1024px) {
    .sidebar {width: 250px;}
    .comic-list {grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));gap: 12px;}
}

@media (max-width: 768px) {
    .main-content .container {flex-direction: column;}
    .sidebar {width: 100%;}
    .comic-list {grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));gap: 10px;}
    .banner-slider {height: 300px;}
    .banner-info h3 {font-size: 24px;}
    .banner-info p {font-size: 14px;}
}

@media (max-width: 480px) {
    .comic-section {padding: 15px;}
    .comic-list {grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));gap: 8px;}
    .comic-cover img {width: 100% !important;max-width: 100% !important;height: auto !important;}
    .comic-info h3 {font-size: 12px;}
    .comic-desc {font-size: 10px;}
    .comic-meta {font-size: 10px;}
}

@media (max-width: 360px) {
    .comic-list {grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));gap: 6px;}
    .comic-section {padding: 10px;}
}
/* 漫画区块 */
.comic-section {background-color: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.section-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #e63946;}
.section-header h2 {font-size: 20px;color: #e63946;}
.more-link {color: #666;text-decoration: none;transition: color 0.3s ease;}
.more-link:hover {color: #e63946;}
.comic-list {display: grid;grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));gap: 15px;max-width: 100%;overflow: hidden;}
.comic-list > * {grid-column: span 1;box-sizing: border-box;}
.comic-item {transition: transform 0.3s ease;width: 100%;max-width: 100%;display: block;box-sizing: border-box;overflow: hidden;}
.comic-item:hover {transform: translateY(-5px);}
/* 处理a标签形式的comic-item */
.comic-list > a.comic-item {display: block;width: 100%;max-width: 100%;text-decoration: none;color: inherit;box-sizing: border-box;overflow: hidden;}
.comic-list > a.comic-item .comic-cover {width: 100%;max-width: 100%;}
.comic-cover {position: relative;margin-bottom: 10px;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);display: block;width: 100%;max-width: 100%;}
.comic-cover img {width: 100% !important;max-width: 100% !important;height: auto !important;aspect-ratio: 3/4 !important;object-fit: cover !important;transition: transform 0.3s ease;display: block;}
.comic-item:hover .comic-cover img {transform: scale(1.05);}
.update-badge {position: absolute;top: 8px;left: 8px;background-color: #e63946;color: #fff;padding: 2px 8px;border-radius: 4px;font-size: 12px;font-weight: bold;}
.comic-info h3 {font-size: 14px;margin-bottom: 5px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.comic-title {color: #333;text-decoration: none;transition: color 0.3s ease;}
.comic-title:hover {color: #e63946;}
.comic-desc {font-size: 12px;color: #666;margin-bottom: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.comic-meta {display: flex;justify-content: space-between;font-size: 12px;color: #999;}
.comic-meta .category {white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 90px;}
/* 分类区块 */
.category-section {background-color: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.category-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 15px;}
.category-item {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 20px;background-color: #f8f9fa;border-radius: 8px;color: #333;text-decoration: none;transition: all 0.3s ease;}
.category-item:hover {background-color: #e63946;color: #fff;transform: translateY(-3px);}
.category-item i {font-size: 28px;margin-bottom: 10px;}
/* 侧边栏 */
.rank-section,.recent-update {background-color: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.rank-section h3,.recent-update h3 {font-size: 18px;margin-bottom: 15px;color: #e63946;}
.rank-list li {display: flex;align-items: center;padding: 10px 0;border-bottom: 1px solid #f0f0f0;}
.rank-list li:last-child {border-bottom: none;}
.rank-num {display: flex;align-items: center;justify-content: center;width: 24px;height: 24px;border-radius: 4px;background-color: #f0f0f0;color: #666;font-weight: bold;margin-right: 10px;}
.rank-item.top3 .rank-num {background-color: #e63946;color: #fff;}
.rank-title {flex: 1;color: #333;text-decoration: none;transition: color 0.3s ease;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.rank-title:hover {color: #e63946;}
.rank-update {font-size: 12px;color: #999;width: 80px;text-align: right;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.ad-section {margin-bottom: 20px;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.ad-section img {width: 100%;display: block;}
.recent-list {padding-left: 0;}
.recent-item {position: relative;padding: 10px 0;border-bottom: 1px solid #f0f0f0;transition: background-color 0.3s ease;display: flex;align-items: center;gap: 8px;}
.recent-item:hover {background-color: #f8f9fa;padding-left: 12px;border-left: 3px solid #e63946;}
.recent-item:last-child {border-bottom: none;}
.update-icon {font-size: 6px;color: #e63946;flex-shrink: 0;display: flex;align-items: center;justify-content: center;}
.update-title {color: #333;text-decoration: none;transition: color 0.3s ease;flex: 1;font-size: 14px;line-height: 1.4;}
.update-title:hover {color: #e63946;font-weight: 500;}
.update-badge {display: inline-block;padding: 2px 8px;background-color: #e63946;color: #fff;font-size: 10px;border-radius: 10px;margin-right: 8px;font-weight: bold;flex-shrink: 0;}
.update-time {font-size: 12px;color: #999;flex-shrink: 0;min-width: 60px;text-align: right;transition: color 0.3s ease;}
.recent-item:hover .update-time {color: #666;}
/* 更精细的时间样式区分 */
.update-time:contains("分钟") {color: #e63946;font-weight: 500;}
/* 确保section-header在recent-update中的样式正确 */
.recent-update .section-header {margin-bottom: 15px;padding-bottom: 10px;}
.recent-update .section-header h3 {font-size: 18px;margin-bottom: 0;display: flex;align-items: center;gap: 8px;}
.recent-update .section-header h3 i {color: #e63946;font-size: 16px;}
/* 底部区域 */
.footer {background-color: #333;color: #fff;padding: 40px 0 20px;border-top: 4px solid #e63946;}
.footer-content {display: flex;justify-content: space-between;margin-bottom: 30px;flex-wrap: wrap;gap: 15px;}
.footer-info,.footer-links,.footer-contact {flex: 1;margin-bottom: 30px;width: 280px;}
.footer-info h4,.footer-links h4,.footer-contact h4 {font-size: 18px;margin-bottom: 20px;color: #e63946;position: relative;padding-bottom: 10px;}
.footer-info h4::after,.footer-links h4::after,.footer-contact h4::after {content: '';position: absolute;left: 0;bottom: 0;width: 40px;height: 2px;background-color: #e63946;}
/* 关于我们区域 */
.footer-info p {color: #ccc;line-height: 1.6;margin-bottom: 20px;}
/* 社交媒体链接 */
.social-links {display: flex;gap: 12px;}
.social-icon {display: inline-flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 50%;background-color: #444;color: #fff;font-size: 20px;transition: all 0.3s ease;}
.social-icon:hover {background-color: #e63946;transform: translateY(-3px);box-shadow: 0 4px 8px rgba(230, 57, 70, 0.3);}
/* 快速链接区域 */
.footer-links-grid {display: flex;gap: 40px;}
.link-column {display: flex;flex-direction: column;gap: 12px;}
.link-column a {color: #ccc;text-decoration: none;transition: all 0.3s ease;position: relative;}
.link-column a:hover {color: #e63946;transform: translateX(5px);}
.link-column a:hover::before {transform: translateX(-5px);}
/* 联系我们区域 */
.contact-list {list-style: none;}
.contact-item {display: flex;align-items: center;gap: 12px;margin-bottom: 15px;color: #ccc;}
.contact-item i {color: #e63946;font-size: 18px;min-width: 20px;}
.contact-item a {color: #ccc;text-decoration: none;transition: color 0.3s ease;}
.contact-item a:hover {color: #e63946;}
/* 版权信息 */
.footer-bottom {text-align: center;padding-top: 20px;border-top: 1px solid #444;color: #ccc;font-size: 14px;}
.legal-links {margin-top: 10px;display: flex;justify-content: center;align-items: center;gap: 15px;flex-wrap: wrap;}
.legal-links a {color: #ccc;text-decoration: none;transition: color 0.3s ease;font-size: 13px;}
.legal-links a:hover {color: #e63946;}
.legal-links span {color: #555;}
/* 返回顶部按钮 */
.back-to-top {position: fixed;bottom: 120px;right: 30px;width: 50px;height: 50px;border-radius: 50%;background-color: #e63946;color: #fff;border: none;font-size: 20px;cursor: pointer;display: none;box-shadow: 0 4px 12px rgba(230, 57, 70, 0.4);transition: all 0.3s ease;z-index: 999;}
.back-to-top:hover {background-color: #d62839;transform: translateY(-3px);}

/* 分类页特定样式 */
.listbox .category-filters {background-color: #fff;border-radius: 8px;padding: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.listbox .filter-section {margin-bottom: 15px;}
.listbox .filter-title {font-size: 16px;font-weight: bold;color: #333;margin-bottom: 10px;display: flex;align-items: center;}
.listbox .filter-title i {color: #e63946;margin-right: 8px;}
.listbox .filter-options {display: flex;flex-wrap: wrap;gap: 10px;}
.listbox .filter-item {padding: 6px 16px;background-color: #f5f5f5;border-radius: 20px;color: #666;text-decoration: none;transition: all 0.3s ease;font-size: 14px;}
.listbox .filter-item:hover,
.listbox .filter-item.active {background-color: #e63946;color: #fff;}
.listbox .sort-options {display: flex;align-items: center;gap: 15px;padding: 15px;border-radius: 8px;}
.listbox .sort-label {font-size: 14px;color: #666;}
.listbox .sort-btn {padding: 6px 16px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;color: #333;text-decoration: none;transition: all 0.3s ease;font-size: 14px;cursor: pointer;}
.listbox .sort-btn:hover,.sort-btn.active {background-color: #e63946;color: #fff;border-color: #e63946;}
.listbox .pagination {display: flex;justify-content: center;align-items: center;gap: 5px;margin: 30px 0;}
.listbox .pagination a{padding: 8px 16px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;color: #333;text-decoration: none;transition: all 0.3s ease;font-size: 14px;}
.listbox .pagination a:hover:not(.disabled) {background-color: #e63946;color: #fff;border-color: #e63946;}
.listbox .pagination a.on {background-color: #e63946;color: #fff;border-color: #e63946;}
.listbox .pagination a.disabled {color: #ccc;cursor: not-allowed;}
.listbox .page-info {margin: 0 15px;color: #666;font-size: 14px;}
.listbox .clear-filters {color: #e63946;text-decoration: none;font-size: 14px;margin-left: auto;transition: opacity 0.3s ease;}
.listbox .clear-filters:hover {opacity: 0.8;}
.listbox .comic-item .comic-cover{margin-bottom: 0;}
.listbox .comic-item h3 a{font-size: 14px;color: #333;}
.listbox .comic-item .comic-author{font-size: 12px;color: #666;}

.comicbox .comic-detail-section {background-color: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);display: flex;gap: 20px;}
.comicbox .comic-main-info {flex: 1;}
.comicbox .comic-cover-large {width: 200px;border-radius: 8px;overflow: hidden;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}
.comicbox .comic-cover-large img {width: 100%;aspect-ratio: 3/4;object-fit: cover;display: block;}
.comicbox .comic-meta-info h1 {font-size: 24px;margin-bottom: 10px;color: #333;}
.comicbox .comic-stats {display: flex;gap: 20px;margin-bottom: 15px;font-size: 14px;color: #666;flex-direction: column;}
.comicbox .stat-item {display: flex;align-items: center;}
.comicbox .stat-item i {color: #e63946;margin-right: 5px;}
.comicbox .comic-tags {margin-bottom: 15px;}
.comicbox .tag {display: inline-block;padding: 4px 12px;background-color: #f0f0f0;color: #666;border-radius: 15px;font-size: 12px;margin-right: 8px;margin-bottom: 8px;}
.comicbox .tag.active {background-color: #e63946;color: #fff;}
.comicbox .comic-actions {display: flex;gap: 10px;}
.comicbox .btn-primary {display: inline-block;padding: 10px 20px;background-color: #e63946;color: #fff;border: none;border-radius: 25px;font-weight: bold;cursor: pointer;transition: all 0.3s ease;}
.comicbox .btn-primary:hover {background-color: #d62839;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(230, 57, 70, 0.4);}
.comicbox .btn-secondary {display: inline-block;padding: 10px 20px;background-color: #fff;color: #333;border: 2px solid #ddd;border-radius: 25px;font-weight: bold;cursor: pointer;transition: all 0.3s ease;}
.comicbox .btn-secondary:hover {border-color: #e63946;color: #e63946;transform: translateY(-2px);}
.comicbox .comic-description {background-color: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.comicbox .comic-description p {line-height: 1.8;color: #666;}
.comicbox .chapter-section {background-color: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.comicbox .chapter-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}
.comicbox .chapter-sort {display: flex;gap: 10px;}
.comicbox .sort-btn {padding: 6px 16px;background-color: #f0f0f0;border: none;border-radius: 20px;cursor: pointer;transition: all 0.3s ease;font-size: 14px;}
.comicbox .sort-btn:hover {background-color: #e0e0e0;}
.comicbox .sort-btn.active {background-color: #e63946;color: #fff;}
.comicbox .chapter-list {display: grid;grid-template-columns: repeat(4, 1fr);gap: 10px;}
.comicbox .chapter-item {padding: 12px;background-color: #f8f9fa;border-radius: 8px;transition: all 0.3s ease;}
.comicbox .chapter-item:hover {background-color: #e63946;transform: translateY(-2px);}
.comicbox .chapter-item a {color: #333;text-decoration: none;display: block;text-align: center;font-size: 14px;}
.comicbox .chapter-item:hover a {color: #fff;}
.comicbox .chapter-item.new {border: 2px solid #e63946;}
.comicbox .chapter-pagination {margin-top: 20px;text-align: center;}
.comicbox .related-comics {background-color: #fff;border-radius: 8px;padding: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}

.chapterbox .chapterbox {background-color: #222;color: #fff;min-height: 100vh;}
.chapterbox .reader-container {position: relative;min-height: calc(100vh - 60px);overflow-x: hidden;}
.chapterbox .reader-nav {position: fixed;top: 0;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.9);color: #fff;padding: 15px 20px;display: flex;justify-content: space-between;align-items: center;z-index: 100;backdrop-filter: blur(10px);}
.chapterbox .nav-left {display: flex;align-items: center;gap: 15px;}
.chapterbox .nav-center h2 {font-size: 18px;margin: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;max-width: 300px;}
.chapterbox .nav-btn {background: none;border: 2px solid #e63946;color: #fff;padding: 8px 16px;border-radius: 20px;cursor: pointer;font-size: 14px;transition: all 0.3s ease;}
.chapterbox .nav-btn:hover {background-color: #e63946;transform: translateY(-2px);}
.chapterbox .comic-content {max-width: 800px;text-align: center;margin: 0 auto;margin-top: 75px;}
.chapterbox .comic-image {width: 100%;display: block;cursor: pointer;transition: transform 0.3s ease;}
.chapterbox .comic-image:hover {transform: scale(1.02);}
.chapterbox .reader-controls {position: fixed;bottom: 0;left: 0;right: 0;background-color: rgba(0, 0, 0, 0.9);padding: 15px 20px;display: flex;justify-content: space-between;align-items: center;z-index: 100;backdrop-filter: blur(10px);}
.chapterbox .control-buttons {display: flex;gap: 10px;}
.chapterbox .btn-primary {background-color: #e63946;color: #fff;border: none;padding: 10px 20px;border-radius: 25px;cursor: pointer;font-weight: bold;transition: all 0.3s ease;}
.chapterbox .btn-primary:hover {background-color: #d62839;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(230, 57, 70, 0.4);}
.chapterbox .btn-secondary {background-color: transparent;color: #fff;border: 2px solid #fff;padding: 10px 20px;border-radius: 25px;cursor: pointer;font-weight: bold;transition: all 0.3s ease;}
.chapterbox .btn-secondary:hover {background-color: rgba(255, 255, 255, 0.1);transform: translateY(-2px);}

.topbox .rank-tabs{margin-bottom: 20px;}
.topbox .rank-tabs .tab-buttons{display: flex; background-color: #f5f5f5; border-radius: 8px; overflow: hidden;}
.news-section {background-color: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.news-section .section-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #e63946;}
.news-section .section-header h2 {font-size: 20px;color: #e63946;}
.news-section .news-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;}
.news-section .news-main {display: flex;flex-direction: column;gap: 15px;}
.news-section .news-main-item {position: relative;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease;}
.news-section .news-main-item:hover {transform: translateY(-5px);}
.news-section .news-main-item img {width: 100%;height: 200px;object-fit: cover;display: block;}
.news-section .news-main-info {padding: 15px;background-color: #fff;}
.news-section .news-main-title {font-size: 16px;font-weight: bold;color: #333;margin-bottom: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.news-section .news-main-desc {font-size: 13px;color: #666;line-height: 1.5;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.news-section .news-main-meta {display: flex;justify-content: space-between;align-items: center;margin-top: 10px;font-size: 12px;color: #999;}
.news-section .news-list {display: flex;flex-direction: column;gap: 12px;}
.news-section .news-item {display: flex;gap: 12px;padding: 12px;background-color: #f8f9fa;border-radius: 8px;transition: all 0.3s ease;}
.news-section .news-item:hover {background-color: #fff;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);transform: translateX(5px);}
.news-section .news-list > a.news-item {display: flex;text-decoration: none;color: inherit;}
.news-section .news-item-img {width: 100px;height: 70px;border-radius: 6px;overflow: hidden;flex-shrink: 0;}
.news-section .news-item-img img {width: 100%;height: 100%;object-fit: cover;}
.news-section .news-item-info {flex: 1;display: flex;flex-direction: column;justify-content: space-between;}
.news-section .news-item-title {font-size: 14px;color: #333;margin-bottom: 5px;}
.news-section .news-item:hover .news-item-title {color: #e63946;}
.news-section .news-item-desc {font-size: 12px;color: #666;line-height: 1.4;margin-bottom: 5px;}
.news-section .news-item-meta {font-size: 12px;color: #999;display: flex;justify-content: space-between;}
.app-download-section {background: linear-gradient(135deg, #e63946 0%, #d62839 100%);border-radius: 8px;padding: 30px;margin-bottom: 20px;box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);color: #fff;}
.app-download-section .app-content {display: flex;align-items: center;justify-content: space-between;gap: 30px;}
.app-download-section .app-info {flex: 1;}
.app-download-section .app-title {font-size: 28px;font-weight: bold;margin-bottom: 10px;}
.app-download-section .app-desc {font-size: 14px;line-height: 1.6;opacity: 0.9;margin-bottom: 20px;}
.app-download-section .app-features {display: flex;flex-wrap: wrap;gap: 15px;margin-bottom: 20px;}
.app-download-section .feature-item {display: flex;align-items: center;gap: 6px;font-size: 13px;opacity: 0.95;}
.app-download-section .feature-item i {color: #fff;}
.app-download-section .app-actions {display: flex;flex-direction: column;gap: 12px;align-items: flex-end;}
.app-download-section .download-btn {display: flex;align-items: center;gap: 10px;padding: 12px 24px;background-color: #fff;color: #e63946;border-radius: 25px;text-decoration: none;font-weight: bold;transition: all 0.3s ease;}
.app-download-section .download-btn:hover {background-color: #f0f0f0;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);}
.app-download-section .download-btn i {font-size: 20px;}
.app-download-section .qr-code {background-color: #fff;padding: 12px;border-radius: 8px;display: inline-block;}
.app-download-section .qr-code img {width: 120px;height: 120px;display: block;}
.app-download-section .qr-text {font-size: 12px;color: #666;text-align: center;margin-top: 8px;}
.about-section {background-color: #fff;border-radius: 8px;padding: 30px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.about-section .section-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px;padding-bottom: 10px;border-bottom: 2px solid #e63946;}
.about-section .section-header h2 {font-size: 20px;color: #e63946;}
.about-section .about-content {display: grid;grid-template-columns: 1fr 1fr;gap: 30px;}
.about-section .about-info h3 {font-size: 18px;color: #333;margin-bottom: 15px;}
.about-section .about-info p {font-size: 14px;line-height: 1.8;color: #666;margin-bottom: 15px;}
.about-section .about-features {display: grid;grid-template-columns: repeat(2, 1fr);gap: 15px;margin-top: 20px;}
.about-section .feature-card {padding: 20px;background-color: #f8f9fa;border-radius: 8px;text-align: center;transition: all 0.3s ease;}
.about-section .feature-card:hover {background-color: #e63946;color: #fff;transform: translateY(-3px);box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);}
.about-section .feature-card i {font-size: 32px;color: #e63946;margin-bottom: 10px;display: block;}
.about-section .feature-card:hover i {color: #fff;}
.about-section .feature-card h4 {font-size: 16px;margin-bottom: 8px;}
.about-section .feature-card p {font-size: 13px;color: #666;}
.about-section .feature-card:hover p {color: rgba(255, 255, 255, 0.9);}
.about-section .about-stats {display: flex;flex-direction: column;gap: 20px;}
.about-section .stat-card {padding: 20px;background: linear-gradient(135deg, #e63946 0%, #d62839 100%);border-radius: 8px;color: #fff;text-align: center;}
.about-section .stat-card .stat-number {font-size: 36px;font-weight: bold;margin-bottom: 5px;}
.about-section .stat-card .stat-label {font-size: 14px;opacity: 0.9;}
.about-section .about-contact {margin-top: 20px;padding-top: 20px;border-top: 1px solid #f0f0f0;}
.about-section .about-contact h3 {font-size: 16px;color: #333;margin-bottom: 15px;}
.about-section .contact-items {display: flex;gap: 20px;flex-wrap: wrap;}
.about-section .contact-item {display: flex;align-items: center;gap: 8px;font-size: 14px;color: #666;}
.about-section .contact-item i {color: #e63946;font-size: 18px;}
@media (max-width: 768px) {
    .news-section .news-grid {grid-template-columns: 1fr;}
    .app-download-section .app-content {flex-direction: column;text-align: center;}
    .app-download-section .app-actions {align-items: center;}
    .app-download-section .app-features {justify-content: center;}
    .about-section .about-content {grid-template-columns: 1fr;}
    .about-section .about-features {grid-template-columns: 1fr;}
}
@media (max-width: 480px) {
    .listbox .comic-item {width: 100%;}
    .listbox .comic-list {grid-template-columns: 1fr;}
    .listbox .comic-cover {width: 100%;}
    .listbox .comic-info {width: 100%;}
    .listbox .comic-item {display: flex;flex-direction: column;}
    .listbox .comic-cover img {width: 100%;height: auto;}
    .listbox .comic-tag {padding: 2px 6px;font-size: 11px;}
    .comicbox .chapter-list {grid-template-columns: 1fr;}
    .comicbox .comic-actions {flex-direction: column;}
}
.topbox .rank-tabs .tab-buttons .tab-btn{flex: 1; padding: 12px; border: none; background-color: #f5f5f5; color: #333; cursor: pointer; font-weight: bold; transition: all 0.3s ease;}
.topbox .rank-tabs .tab-buttons .tab-btn.active{flex: 1; padding: 12px; border: none; background-color: #e63946; color: white; cursor: pointer; font-weight: bold; transition: all 0.3s ease;}
.topbox .tab-content .section-header h2 i{color: #e63946; margin-right: 10px;}
.topbox .tab-content .list-mian{display: grid; grid-template-columns: 1fr 1fr; gap: 20px;}
.topbox .tab-content .list-mian .zcdt{grid-column: 1;}
.topbox .tab-content .list-mian .zcdt .rank-large{display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; margin-bottom: 20px;}
.topbox .tab-content .list-mian .zcdt .rank-large .rank-top-item{position: relative; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0,0,0,0.1); transition: transform 0.3s ease;}
.topbox .tab-content .list-mian .zcdt .rank-large .rank-top-item .xuhao{position: absolute; top: 0; left: 0; width: 30px; height: 30px; background-color: #e63946; color: white; display: flex; align-items: center; justify-content: center; font-weight: bold; font-size: 16px; z-index: 1;}
.topbox .tab-content .list-mian .zcdt .rank-large .rank-top-item .comic-cover{margin-bottom: 0;}
.topbox .tab-content .list-mian .zcdt .rank-large .rank-top-item .comic-cover img{width: 100%; aspect-ratio: 3/4; object-fit: cover;}
.topbox .tab-content .list-mian .zcdt .rank-large .rank-top-item .info{padding: 10px; background-color: white;}
.topbox .tab-content .list-mian .zcdt .rank-large .rank-top-item .info h3{font-size: 14px; margin-bottom: 5px;}
.topbox .tab-content .list-mian .zcdt .rank-large .rank-top-item .info h3 a{color: #333; text-decoration: none;}
.topbox .tab-content .list-mian .zcdt .rank-large .rank-top-item .info p{font-size: 12px; color: #666; margin-bottom: 5px;}
.topbox .tab-content .list-mian .zcdt .rank-large .rank-top-item .info .rq{display: flex; justify-content: space-between; font-size: 11px; color: #999;}
.topbox .tab-content .list-mian .yclb{grid-column: 2;}
.topbox .tab-content .list-mian .yclb .rank-list{padding: 0;}
.topbox .tab-content .list-mian .yclb .rank-list .rank-item{display: flex; align-items: center; padding: 12px 0; border-bottom: 1px solid #f0f0f0; transition: background-color 0.3s ease;}
.topbox .tab-content .list-mian .yclb .rank-list .rank-item .rank-num{display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 4px; background-color: #f0f0f0; color: #666; font-weight: bold; margin-right: 15px; font-size: 14px;}
.topbox .tab-content .list-mian .yclb .rank-list .rank-item .rank-title{flex: 1; color: #333; text-decoration: none; transition: color 0.3s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 14px;}
.topbox .tab-content .list-mian .yclb .rank-list .rank-item .rq{font-size: 12px; color: #999; margin-left: 10px;}
.topbox .tab-content .list-genduo{margin-top: 30px;}
.topbox .tab-content .list-genduo .ul{display: grid; grid-template-columns: repeat(5, 1fr); gap: 15px;}
.topbox .tab-content .list-genduo .ul .comic-item{transition: transform 0.3s ease; width: 100%;}
.topbox .tab-content .list-genduo .ul .comic-item .comic-cover{margin-bottom: 8px;}
.topbox .tab-content .list-genduo .ul .comic-item h3{font-size: 12px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.topbox .tab-content .list-genduo .ul .comic-item h3 a{color: #333; text-decoration: none;}
.topbox .tab-content .list-genduo .ul .comic-item p{font-size: 11px; color: #999;}

/* 登录注册页面特定样式 */
.loginbox .login-section {display: flex;justify-content: center;align-items: center;min-height: calc(100vh - 200px);padding: 40px 0;width: 600px;margin: 0 auto;}
.loginbox .login-container {width: 100%;max-width: 800px;background-color: #fff;border-radius: 8px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);overflow: hidden;}
.loginbox .login-tabs {display: flex;background-color: #f8f9fa;border-bottom: 2px solid #e63946;}
.loginbox .login-tab {flex: 1;padding: 18px;text-align: center;cursor: pointer;font-size: 16px;font-weight: bold;color: #666;transition: all 0.3s ease;position: relative;}
.loginbox .login-tab.active {color: #e63946;background-color: #fff;}
.loginbox .login-tab.active::after {content: '';position: absolute;bottom: -2px;left: 0;width: 100%;height: 2px;background-color: #e63946;}
.loginbox .login-form {padding: 30px;}
.loginbox .form-group {margin-bottom: 20px;}
.loginbox .form-label {display: block;margin-bottom: 8px;font-size: 14px;color: #333;font-weight: bold;}
.loginbox .form-input {width: 100%;padding: 12px 15px;border: 2px solid #e0e0e0;border-radius: 4px;font-size: 14px;transition: border-color 0.3s ease;}
.loginbox .form-input:focus {outline: none;border-color: #e63946;}
.loginbox .form-row {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;}
.loginbox .remember-me {display: flex;align-items: center;}
.loginbox .remember-me input {margin-right: 8px;}
.loginbox .forgot-password {color: #e63946;text-decoration: none;font-size: 14px;transition: opacity 0.3s ease;}
.loginbox .forgot-password:hover {opacity: 0.8;}
.loginbox .login-button {width: 100%;padding: 12px;background-color: #e63946;color: #fff;border: none;border-radius: 4px;font-size: 16px;font-weight: bold;cursor: pointer;transition: all 0.3s ease;}
.loginbox .login-button:hover {background-color: #d62839;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(230, 57, 70, 0.4);}
.loginbox .login-divider {margin: 25px 0;text-align: center;position: relative;}
.loginbox .login-divider::before {content: '';position: absolute;top: 50%;left: 0;width: 100%;height: 1px;background-color: #e0e0e0;}
.loginbox .login-divider span {position: relative;background-color: #fff;padding: 0 15px;color: #666;font-size: 14px;}
.loginbox .social-login {display: flex;justify-content: center;gap: 20px;margin-top: 20px;}
.loginbox .social-button {display: flex;align-items: center;justify-content: center;width: 40px;height: 40px;border-radius: 50%;color: #fff;font-size: 20px;cursor: pointer;transition: all 0.3s ease;}
.loginbox .social-button.wechat {background-color: #07C160;}
.loginbox .social-button.qq {background-color: #12B7F5;}
.loginbox .social-button.weibo {background-color: #E6162D;}
.loginbox .social-button:hover {transform: translateY(-3px);box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);}
.loginbox .register-section {padding: 20px;text-align: center;background-color: #f8f9fa;border-top: 1px solid #e0e0e0;}
.loginbox .register-section p {margin: 0;color: #666;font-size: 14px;}
.loginbox .register-link {color: #e63946;text-decoration: none;font-weight: bold;transition: opacity 0.3s ease;}
.loginbox .register-link:hover {opacity: 0.8;}
/* 错误提示样式 */
.loginbox .error-message {color: #e74c3c;font-size: 12px;margin-top: 5px;display: none;}
/* 验证码输入框 */
.loginbox .verification-code {display: flex;gap: 10px;}
.loginbox .verification-code input {flex: 1;}
.loginbox .verification-code button {padding: 0 15px;background-color: #3498db;color: #fff;border: none;border-radius: 4px;cursor: pointer;transition: background-color 0.3s ease;}
.loginbox .verification-code button:hover {background-color: #2980b9;}
.loginbox .verification-code button:disabled {background-color: #95a5a6;cursor: not-allowed;}
/* 个人中心页面特定样式 */
body.userbox {background-color: #f5f5f5;}
.userbox .user-info-card {background-color: #fff;border-radius: 8px;padding: 30px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);display: flex;align-items: center;}
.userbox .user-avatar {width: 120px;height: 120px;border-radius: 50%;overflow: hidden;margin-right: 25px;border: 3px solid #e63946;}
.userbox .user-avatar img {width: 100%;height: 100%;object-fit: cover;}
.userbox .user-details {flex: 1;}
.userbox .user-name {font-size: 24px;font-weight: bold;color: #333;margin-bottom: 10px;}
.userbox .user-level {display: inline-block;background-color: #e63946;color: #fff;padding: 2px 12px;border-radius: 12px;font-size: 12px;margin-bottom: 15px;}
.userbox .user-stats {display: flex;gap: 30px;margin-bottom: 15px;}
.userbox .stat-item {display: flex;align-items: center;font-size: 14px;color: #666;}
.userbox .stat-item i {margin-right: 5px;color: #e63946;}
.userbox .stat-value {font-weight: bold;color: #333;margin-left: 5px;}
.userbox .user-actions {display: flex;gap: 15px;}
.userbox .btn-user {padding: 8px 20px;border: 2px solid #e63946;border-radius: 4px;color: #e63946;background-color: #fff;cursor: pointer;transition: all 0.3s ease;font-size: 14px;}
.userbox .btn-user:hover {background-color: #e63946;color: #fff;}
.userbox .user-nav {background-color: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.userbox .nav-tabs {display: flex;list-style: none;border-bottom: 2px solid #f0f0f0;}
.userbox .nav-tab {flex: 1;text-align: center;padding: 12px 0;cursor: pointer;transition: all 0.3s ease;color: #666;border-bottom: 2px solid transparent;}
.userbox .nav-tab:hover {color: #e63946;}
.userbox .nav-tab.active {color: #e63946;border-bottom-color: #e63946;font-weight: bold;}
.userbox .user-content {background-color: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.userbox .content-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #e63946;}
.userbox .content-title {font-size: 20px;color: #e63946;font-weight: bold;}
.userbox .data-list {margin-bottom: 20px;}
.userbox .data-item {display: flex;align-items: center;padding: 15px 0;border-bottom: 1px solid #f0f0f0;}
.userbox .data-item:last-child {border-bottom: none;}
.userbox .data-item .comic-cover {width: 60px;height: 80px;border-radius: 4px;overflow: hidden;margin-right: 15px;flex-shrink: 0;}
.userbox .data-item .comic-cover img {width: 100%;height: 100%;object-fit: cover;}
.userbox .data-info {flex: 1;min-width: 0;}
.userbox .data-title {font-size: 16px;color: #333;margin-bottom: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.userbox .data-meta {font-size: 12px;color: #999;margin-bottom: 5px;}
.userbox .data-time {font-size: 12px;color: #999;}
.userbox .data-action {margin-left: 20px;}
.userbox .btn-small {padding: 4px 12px;border: 1px solid #e63946;border-radius: 4px;color: #e63946;background-color: #fff;cursor: pointer;transition: all 0.3s ease;font-size: 12px;}
.userbox .btn-small:hover {background-color: #e63946;color: #fff;}
.userbox .empty-state {text-align: center;padding: 60px 0;color: #999;}
.userbox .empty-state i {font-size: 48px;margin-bottom: 15px;color: #e0e0e0;}
.userbox .user-sidebar .section {background-color: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.userbox .section h3 {font-size: 18px;color: #e63946;margin-bottom: 15px;padding-bottom: 10px;border-bottom: 2px solid #f0f0f0;}
.userbox .quick-links {display: grid;grid-template-columns: 1fr 1fr;gap: 10px;}
.userbox .quick-link {display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 15px 0;background-color: #f8f9fa;border-radius: 4px;color: #333;text-decoration: none;transition: all 0.3s ease;}
.userbox .quick-link:hover {background-color: #e63946;color: #fff;}
.userbox .quick-link i {font-size: 24px;margin-bottom: 8px;}
.userbox .quick-link span {font-size: 12px;}
.userbox .user-content .form-list .user-name{font-size: 16px;font-weight: 400;color: #333;margin-bottom: 10px;text-align: left;}
/*充值弹窗*/
.j-dialog-pay{position: relative;}
.j-dialog-pay .j-pay-header{width: 100%;background-color: #e63946;color: #fff;padding: 15px 20px;display: flex;justify-content: space-between;align-items: center;}
.j-dialog-pay .j-pay-close{color: #fff;font-size: 20px;cursor: pointer;padding: 10px 20px;position: absolute;top: 0;right: 0;}
.j-dialog-pay .dialog-pay_body .layui-tab-title{display: flex;justify-content: flex-start;}
.j-dialog-pay .dialog-pay_body .layui-tab-title li{width: 100%;}
.layui-tab-brief>.layui-tab-title .layui-this {color: #e63946;}
.layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {border-bottom: 2px solid #e63946;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content{padding: 20px;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .j-paytype-item .item_row .item--title{margin-bottom: 15px;color: #333;font-size: 14px;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .j-paytype-item .item_row .item--content{display: grid;grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));gap: 10px;margin-bottom: 20px;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .j-paytype-item .item_row .item--content .j-item-btn{border: 2px solid #f0f0f0;border-radius: 4px;padding: 15px 10px;text-align: center;cursor: pointer;transition: all 0.3s ease;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .j-paytype-item .item_row .item--content .j-item-btn.active{border-color: #e63946;background-color: rgba(230, 57, 70, 0.05);}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .j-paytype-item .item_row .item--content .j-item-btn p{display: block;font-size: 16px;color: #e63946;font-weight: bold;margin-bottom: 5px;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .j-paytype-item .item_row .item--content .j-item-btn p.item--price{display: block;font-size: 14px;color: #333;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .j-paytype-item .item_row .item--content .j-item-btn .cion-input{width: 80px;padding: 5px;border: 1px solid #ddd;border-radius: 4px;margin-top: 5px;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .item_row .item--title{margin-bottom: 15px;color: #333;font-size: 14px;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .item_row .paytype-box{display: flex;gap: 15px;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .item_row .paytype-box .j-paytype-btn{flex: 1;border: 2px solid #f0f0f0;border-radius: 4px;padding: 10px;text-align: center;cursor: pointer;transition: all 0.3s ease;display: flex;align-items: center;justify-content: center;gap: 8px;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .item_row .paytype-box .j-paytype-btn.active {border-color: #e63946;background-color: rgba(230, 57, 70, 0.05);}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .item_row .paytype-box .j-paytype-btn .fa-weixin{color: #07C160;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .item_row .paytype-box .j-paytype-btn .fa-alipay{color: #1677FF;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .item_row .paytype-box .j-paytype-btn .fa-coins{color: #FFD700;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .item_row .paytype-box .j-paytype-btn .fa-qq{color: #1677FF;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .item_row .item--inline-title{font-size: 16px;color: #333;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .item_row .item--found{font-size: 20px;color: #e63946;font-weight: bold;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .item_row .item--found .pay_ext{font-size: 16px;color: #333;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .item_row .j-pay-warning{font-size: 14px;color: #666;padding-left: 16px;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .item_row .qrcode-alipay{width: 80px;height: 80px;margin-left: 20px;}
.j-dialog-pay .dialog-pay_body .dialog-pay_body--tab-body .j-tab-content .item_row .item_pay-btn{padding: 0 30px;background-color: #e63946;color: #fff;border: none;border-radius: 4px;font-size: 16px;cursor: pointer;transition: all 0.3s ease;position: absolute;bottom: 25px;right: 20px;}
.btn--collect .txt2{display: none;}
.btn--collect.collected{background: #ebebeb;color: #999;}
.btn--collect.collected .txt2{display: block;}
.btn--collect.collected .txt1{display: none;}
.btn--collect.collected:hover {background-color: #ebebeb;transform: translateY(-2px);box-shadow: 0 4px 12px transparent;}
.read-chapter-buy .buy-head .buy-title{width: 100%;background-color: #e63946;color: #fff;padding: 15px 20px;display: flex;justify-content: space-between;align-items: center;}
.read-chapter-buy .buy-head .comic-title{width: 100%;text-align: center;padding: 20px 0;font-size: 18px;}
.read-chapter-buy .buy-head .fund-info{width: calc(100% - 40px);margin: 0 auto;padding: 20px;background: #fff4f5;font-size: 16px;color: #333;}
.read-chapter-buy .buy-head .fund-info .yb{color: #e63946;}
.read-chapter-buy .buy-handle{width: calc(100% - 40px);margin: 0 auto;margin-top: 20px;}
.read-chapter-buy .buy-handle .handle__nav{font-size: 16px;color: #333;}
.read-chapter-buy .buy-handle .handle__nav text{color: #e63946;font-weight: bold;padding-left: 4px;}
.read-chapter-buy .buy-handle .handle__con{width: 100%;display: flex;justify-content: flex-end;}
.read-chapter-buy .buy-handle .handle__con .buy-btn{line-height: 40px;padding: 0 20px;background: #e63946;font-size: 15px;color: #fff;border-radius: 4px;float: right;margin: 20px 0;cursor: pointer;}
/* 响应式设计 */
@media (max-width: 1200px) {
    .container {width: 100%;}
    .comic-list {grid-template-columns: repeat(4, 1fr);}
}
@media (max-width: 768px) {
    .user-actions a {margin-left: 8px;padding: 6px 12px;font-size: 12px;}
    .user-actions a i {margin-right: 4px;}
    .header-content {flex-direction: column;gap: 15px;}
    .search-box {margin: 0;width: 100%;}
    .nav-list {overflow-x: auto;white-space: nowrap;}
    .container {flex-direction: column;}
    .sidebar {width: 100%;}
    .comic-list {grid-template-columns: repeat(3, 1fr);}
    .category-grid {grid-template-columns: repeat(3, 1fr);}
    .footer-content {flex-direction: column;gap: 30px;display: none;}
    .footer-links-grid {flex-direction: column;gap: 20px;}
    .social-links {justify-content: center;}
    .listbox .category-filters {padding: 15px;}
    .listbox .filter-title {font-size: 15px;}
    .listbox .filter-item {padding: 5px 12px;font-size: 13px;margin-bottom: 5px;}
    .listbox .sort-options {flex-wrap: wrap;gap: 10px;padding: 12px;}
    .listbox .sort-label {width: 100%;margin-bottom: 5px;}
    .listbox .sort-btn {padding: 5px 12px;font-size: 13px;flex: 1;text-align: center;min-width: 80px;}
    .listbox .clear-filters {margin-left: 0;width: 100%;text-align: center;padding: 5px;margin-top: 5px;border-top: 1px solid #eee;padding-top: 10px;}
    .listbox .section-header {flex-direction: column;align-items: flex-start;gap: 10px;}
    .listbox .page-btn {padding: 6px 12px;font-size: 12px;}
    .listbox .page-info {margin: 0 8px;font-size: 12px;}
    .listbox .content-body {width: 100%;}
    .listbox .comic-item h3 {font-size: 14px;}
    .listbox .comic-author {font-size: 12px;}
    .comicbox .comic-detail-section {flex-direction: column;}
    .comicbox .comic-cover-large {width: 150px;margin: 0 auto;}
    .comicbox .comic-stats {flex-wrap: wrap;gap: 10px;}
    .comicbox .chapter-list {grid-template-columns: repeat(2, 1fr);}
    .comicbox .chapter-sort {flex-wrap: wrap;}
    .chapterbox .nav-center h2 {max-width: 150px;font-size: 16px;}
    .chapterbox .nav-btn {padding: 6px 12px;font-size: 12px;}
    .chapterbox .chapter-sidebar {width: 100%;right: -100%;}
    .chapterbox .comic-image {max-height: calc(100vh - 150px);}
    .topbox .tab-content .list-mian {display: flex;flex-direction: column;}
    .topbox .tab-content .list-genduo .ul {display: flex;gap: 12px;flex-direction: row;flex-wrap: wrap;}
    .topbox .tab-content .list-genduo .ul .comic-item {width: 31%;}
    .topbox .main-content{margin-top: 0;}
    .topbox .main-content .container{padding: 0;}
    .loginbox .login-container {margin: 0 20px;}
    .loginbox .login-form {padding: 20px;}
    .userbox .container {  flex-direction: column;}
    .userbox .content-body,
    .userbox .sidebar {width: 100%;}
    .userbox .user-info-card {flex-direction: column;text-align: center;padding: 20px;}
    .userbox .stat-item i{display: none;}
    .userbox .btn-user i{display: none;}
    .userbox .user-avatar {margin-right: 0;margin-bottom: 15px;}
    .userbox .user-stats {justify-content: center;}
    .userbox .nav-tabs {flex-wrap: wrap;}
    .userbox .nav-tab {flex: 1 0 33.33%;min-width: 100px;}
    .userbox .data-item {flex-direction: row;align-items: flex-start;}
    .userbox .data-info {padding-left: 10px;}
    .userbox .data-item .comic-cover {margin-right: 0;margin-bottom: 0;}
    .userbox .data-action {margin-left: 0;margin-top: 0;}
}
@media (max-width: 480px) {
    .comic-list {grid-template-columns: repeat(2, 1fr);}
    .category-grid {grid-template-columns: repeat(2, 1fr);}
    .banner-info h3 {font-size: 20px;}
    .banner-info p {font-size: 14px;}
    .listbox .category-filters {padding: 12px;}
    .listbox .filter-section {margin-bottom: 12px;}
    .listbox .filter-title {font-size: 14px;}
    .listbox .filter-options {gap: 8px;}
    .listbox .filter-item {padding: 4px 10px;font-size: 12px;}
    .listbox .sort-options {padding: 10px;gap: 8px;}
    .listbox .sort-btn {padding: 4px 8px;font-size: 12px;}
    .listbox .pagination {flex-wrap: wrap;gap: 3px;}
    .listbox .page-btn {padding: 4px 8px;font-size: 11px;min-width: 30px;text-align: center;}
    .listbox .page-info {margin: 5px 0;width: 100%;text-align: center;}
    .listbox .comic-item h3 {font-size: 13px;}
    .listbox .comic-tag {padding: 2px 6px;font-size: 11px;}
    .comicbox .chapter-list {grid-template-columns: 1fr;}
    .comicbox .comic-actions {flex-direction: column;}
}
.news-section {background-color: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.news-section .section-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #e63946;}
.news-section .section-header h2 {font-size: 20px;color: #e63946;}
.news-section .news-grid {display: grid;grid-template-columns: 1fr 1fr;gap: 20px;}
.news-section .news-main {display: flex;flex-direction: column;gap: 15px;}
.news-section .news-main-item {position: relative;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease;}
.news-section .news-main-item:hover {transform: translateY(-5px);}
.news-section .news-main-item img {width: 100%;height: 200px;object-fit: cover;display: block;}
.news-section .news-main-info {padding: 15px;background-color: #fff;}
.news-section .news-main-title {font-size: 16px;font-weight: bold;color: #333;margin-bottom: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.news-section .news-main-desc {font-size: 13px;color: #666;line-height: 1.5;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.news-section .news-main-meta {display: flex;justify-content: space-between;align-items: center;margin-top: 10px;font-size: 12px;color: #999;}
.news-section .news-list {display: flex;flex-direction: column;gap: 12px;}
.news-section .news-item {display: flex;gap: 12px;padding: 12px;background-color: #f8f9fa;border-radius: 8px;transition: all 0.3s ease;}
.news-section .news-item:hover {background-color: #fff;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);transform: translateX(5px);}
.news-section .news-list > a.news-item {display: flex;text-decoration: none;color: inherit;}
.news-section .news-item-img {width: 100px;height: 70px;border-radius: 6px;overflow: hidden;flex-shrink: 0;}
.news-section .news-item-img img {width: 100%;height: 100%;object-fit: cover;}
.news-section .news-item-info {flex: 1;display: flex;flex-direction: column;justify-content: space-between;}
.news-section .news-item-title {font-size: 14px;color: #333;margin-bottom: 5px;}
.news-section .news-item:hover .news-item-title {color: #e63946;}
.news-section .news-item-desc {font-size: 12px;color: #666;line-height: 1.4;margin-bottom: 5px;}
.news-section .news-item-meta {font-size: 12px;color: #999;display: flex;justify-content: space-between;}
.app-download-section {background: linear-gradient(135deg, #e63946 0%, #d62839 100%);border-radius: 8px;padding: 30px;margin-bottom: 20px;box-shadow: 0 4px 12px rgba(230, 57, 70, 0.3);color: #fff;}
.app-download-section .app-content {display: flex;align-items: center;justify-content: space-between;gap: 30px;}
.app-download-section .app-info {flex: 1;}
.app-download-section .app-title {font-size: 28px;font-weight: bold;margin-bottom: 10px;}
.app-download-section .app-desc {font-size: 14px;line-height: 1.6;opacity: 0.9;margin-bottom: 20px;}
.app-download-section .app-features {display: flex;flex-wrap: wrap;gap: 15px;margin-bottom: 20px;}
.app-download-section .feature-item {display: flex;align-items: center;gap: 6px;font-size: 13px;opacity: 0.95;}
.app-download-section .feature-item i {color: #fff;}
.app-download-section .app-actions {display: flex;flex-direction: column;gap: 12px;align-items: flex-end;}
.app-download-section .download-btn {display: flex;align-items: center;gap: 10px;padding: 12px 24px;background-color: #fff;color: #e63946;border-radius: 25px;text-decoration: none;font-weight: bold;transition: all 0.3s ease;}
.app-download-section .download-btn:hover {background-color: #f0f0f0;transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);}
.app-download-section .download-btn i {font-size: 20px;}
.app-download-section .qr-code {background-color: #fff;padding: 12px;border-radius: 8px;display: inline-block;}
.app-download-section .qr-code img {width: 120px;height: 120px;display: block;}
.app-download-section .qr-text {font-size: 12px;color: #666;text-align: center;margin-top: 8px;}
.news-list-section {background-color: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.news-list-section .section-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #e63946;}
.news-list-section .section-header h2 {font-size: 20px;color: #e63946;}
.news-list-section .sort-options {display: flex;align-items: center;gap: 15px;padding: 15px;border-radius: 8px;background-color: #f8f9fa;}
.news-list-section .sort-label {font-size: 14px;color: #666;}
.news-list-section .sort-btn {padding: 6px 16px;background-color: #fff;border: 1px solid #ddd;border-radius: 4px;color: #333;text-decoration: none;transition: all 0.3s ease;font-size: 14px;cursor: pointer;}
.news-list-section .sort-btn:hover,.news-list-section .sort-btn.active {background-color: #e63946;color: #fff;border-color: #e63946;}
.news-list-container {display: grid;grid-template-columns: repeat(2, 1fr);gap: 20px;}
.news-card {background-color: #fff;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease;}
.news-card:hover {transform: translateY(-5px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}
.news-card-img {position: relative;display: block;overflow: hidden;}
.news-card-img img {width: 100%;height: 200px;object-fit: cover;transition: transform 0.3s ease;}
.news-card:hover .news-card-img img {transform: scale(1.05);}
.news-badge {position: absolute;top: 10px;left: 10px;background-color: #e63946;color: #fff;padding: 4px 12px;border-radius: 4px;font-size: 12px;font-weight: bold;}
.news-card-content {padding: 15px;}
.news-card-title {font-size: 18px;margin-bottom: 10px;line-height: 1.4;}
.news-card-title a {color: #333;text-decoration: none;transition: color 0.3s ease;}
.news-card-title a:hover {color: #e63946;}
.news-card-excerpt {font-size: 14px;color: #666;line-height: 1.6;margin-bottom: 15px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
.news-card-meta {display: flex;gap: 15px;font-size: 13px;color: #999;}
.news-card-meta span {display: flex;align-items: center;gap: 5px;}
.news-card-meta i {color: #e63946;}
.breadcrumb {display: flex;align-items: center;gap: 10px;padding: 15px 0;margin-bottom: 20px;font-size: 14px;color: #666;}
.breadcrumb a {color: #666;text-decoration: none;transition: color 0.3s ease;}
.breadcrumb a:hover {color: #e63946;}
.breadcrumb .separator {color: #ccc;}
.breadcrumb .current {color: #333;font-weight: bold;}
.news-detail-section {background-color: #fff;border-radius: 8px;padding: 30px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.news-detail-header {margin-bottom: 20px;padding-bottom: 20px;border-bottom: 2px solid #e63946;}
.news-detail-title {font-size: 28px;color: #333;margin-bottom: 15px;line-height: 1.4;}
.news-detail-meta {display: flex;flex-wrap: wrap;gap: 20px;font-size: 14px;color: #666;}
.news-detail-meta span {display: flex;align-items: center;gap: 6px;}
.news-detail-meta i {color: #e63946;}
.news-detail-cover {margin-bottom: 30px;border-radius: 8px;overflow: hidden;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
.news-detail-cover img {width: 100%;height: auto;display: block;}
.news-detail-content {font-size: 16px;line-height: 1.8;color: #333;}
.news-detail-content h2 {font-size: 22px;color: #333;margin: 30px 0 15px;padding-bottom: 10px;border-bottom: 2px solid #f0f0f0;}
.news-detail-content p {margin-bottom: 20px;}
.news-detail-content ul,.news-detail-content ol {margin: 20px 0;padding-left: 30px;}
.news-detail-content li {margin-bottom: 10px;line-height: 1.8;color: #666;}
.news-detail-content blockquote {margin: 30px 0;padding: 20px;background-color: #f8f9fa;border-left: 4px solid #e63946;font-style: italic;}
.news-detail-content blockquote cite {display: block;margin-top: 10px;font-size: 14px;color: #999;}
.news-detail-nav {display: flex;justify-content: space-between;gap: 20px;padding: 20px 0;border-top: 1px solid #f0f0f0;border-bottom: 1px solid #f0f0f0;}
.news-detail-nav a {display: flex;align-items: center;gap: 10px;padding: 15px 20px;background-color: #f8f9fa;border-radius: 8px;text-decoration: none;transition: all 0.3s ease;flex: 1;}
.news-detail-nav a:hover {background-color: #e63946;color: #fff;transform: translateY(-2px);}
.news-detail-nav .nav-label {font-size: 13px;color: #999;}
.news-detail-nav .nav-title {font-size: 14px;color: #333;flex: 1;}
.related-news-section {background-color: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.related-news-section .section-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #e63946;}
.related-news-section .section-header h2 {font-size: 20px;color: #e63946;}
.related-news-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 15px;}
.related-news-item {display: block;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease;}
.related-news-item:hover {transform: translateY(-5px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}
.related-news-item img {width: 100%;height: 120px;object-fit: cover;display: block;}
.related-news-item h4 {padding: 10px;font-size: 14px;color: #333;margin: 0;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.related-news-item:hover h4 {color: #e63946;}
.related-date {display: block;padding: 0 10px 10px;font-size: 12px;color: #999;background-color: #f8f9fa;}

.top-section {background-color: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.top-section .section-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #e63946;}
.top-section .section-header h2 {font-size: 20px;color: #e63946;}
.top-container {position: relative;}
.top-grid {display: grid;grid-template-columns: repeat(6, 1fr);gap: 15px;}
.top-item {position: relative;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease;}
.top-item:hover {transform: translateY(-5px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);}
.top-item.top1 .top-rank {background-color: #e63946;}
.top-item.top2 .top-rank {background-color: #f4a261;}
.top-item.top3 .top-rank {background-color: #e9c46a;}
.top-rank {position: absolute;top: 0;left: 0;width: 30px;height: 30px;background-color: #f0f0f0;color: #666;display: flex;align-items: center;justify-content: center;font-weight: bold;font-size: 14px;z-index: 1;}
.top-cover {position: relative;height: 200px;overflow: hidden;}
.top-cover img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.top-item:hover .top-cover img {transform: scale(1.05);}
.top-info {padding: 10px;background-color: #fff;}
.top-title {font-size: 14px;margin-bottom: 5px;line-height: 1.4;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.top-title a {color: #333;text-decoration: none;transition: color 0.3s ease;}
.top-title a:hover {color: #e63946;}
.top-meta {font-size: 12px;color: #999;}
.top-views {display: flex;align-items: center;gap: 5px;}
.top-views i {color: #e63946;}

@media (max-width: 768px) {
    .news-section .news-grid {grid-template-columns: 1fr;}
    .app-download-section .app-content {flex-direction: column;text-align: center;}
    .app-download-section .app-actions {align-items: center;}
    .app-download-section .app-features {justify-content: center;}
    .news-list-container {grid-template-columns: 1fr;}
    .news-detail-meta {flex-direction: column;gap: 10px;}
    .related-news-grid {grid-template-columns: repeat(2, 1fr);}
    .news-detail-nav {flex-direction: column;}
    .top-grid {grid-template-columns: repeat(3, 1fr);}
}

/* 关于我们页面样式 */
.about-section {background-color: #fff;border-radius: 8px;padding: 30px;margin-bottom: 20px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
.about-section .section-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 30px;padding-bottom: 15px;border-bottom: 2px solid #e63946;}
.about-section .section-header h2 {font-size: 24px;color: #e63946;}
.about-content h3 {font-size: 20px;color: #333;margin: 30px 0 15px;padding-bottom: 10px;border-bottom: 2px solid #f0f0f0;}
.about-content p {font-size: 16px;line-height: 1.8;color: #666;margin-bottom: 20px;}
.about-content a {color: #e63946;text-decoration: none;transition: color 0.3s ease;}
.about-content a:hover {color: #d62839;}

.features-grid {display: grid;grid-template-columns: repeat(3, 1fr);gap: 30px;margin: 30px 0;}
.feature-item {text-align: center;padding: 25px;background-color: #f8f9fa;border-radius: 8px;transition: transform 0.3s ease;}
.feature-item:hover {transform: translateY(-5px);box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);}
.feature-icon {width: 60px;height: 60px;background-color: #e63946;color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 15px;font-size: 24px;}
.feature-item h4 {font-size: 16px;color: #333;margin-bottom: 10px;}
.feature-item p {font-size: 14px;line-height: 1.6;color: #666;margin: 0;}

.timeline {position: relative;margin: 30px 0;}
.timeline::before {content: '';position: absolute;top: 0;left: 20px;width: 2px;height: 100%;background-color: #e63946;}
.timeline-item {position: relative;margin-bottom: 30px;padding-left: 60px;}
.timeline-date {position: absolute;top: 0;left: 0;width: 80px;height: 30px;background-color: #e63946;color: #fff;border-radius: 4px;display: flex;align-items: center;justify-content: center;font-size: 14px;font-weight: bold;}
.timeline-content {background-color: #f8f9fa;padding: 20px;border-radius: 8px;}
.timeline-content h4 {font-size: 16px;color: #333;margin-bottom: 10px;}
.timeline-content p {font-size: 14px;line-height: 1.6;color: #666;margin: 0;}

.team-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px;margin: 30px 0;}
.team-member {text-align: center;}
.team-avatar {width: 120px;height: 120px;border-radius: 50%;overflow: hidden;margin: 0 auto 15px;}
.team-avatar img {width: 100%;height: 100%;object-fit: cover;}
.team-member h4 {font-size: 16px;color: #333;margin-bottom: 5px;}
.team-role {font-size: 14px;color: #e63946;margin-bottom: 10px;}
.team-desc {font-size: 13px;line-height: 1.6;color: #666;margin: 0;}

.contact-grid {display: grid;grid-template-columns: repeat(4, 1fr);gap: 20px;margin: 30px 0;}
.contact-item {text-align: center;padding: 20px;background-color: #f8f9fa;border-radius: 8px;}
.contact-icon {width: 50px;height: 50px;background-color: #e63946;color: #fff;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin: 0 auto 15px;font-size: 20px;}
.contact-item h4 {font-size: 16px;color: #333;margin-bottom: 10px;}
.contact-item p {font-size: 14px;line-height: 1.6;color: #666;margin: 0;}

.partners-grid {display: grid;grid-template-columns: repeat(5, 1fr);gap: 20px;margin: 30px 0;}
.partner-item {display: flex;align-items: center;justify-content: center;padding: 20px;background-color: #f8f9fa;border-radius: 8px;}
.partner-item img {max-width: 100%;max-height: 60px;object-fit: contain;}

@media (max-width: 768px) {
    .features-grid {grid-template-columns: 1fr;}
    .team-grid {grid-template-columns: repeat(2, 1fr);}
    .contact-grid {grid-template-columns: repeat(2, 1fr);}
    .partners-grid {grid-template-columns: repeat(2, 1fr);}
    .timeline-item {padding-left: 50px;}
    .timeline-date {width: 70px;font-size: 12px;}
}