/* 全局样式重置 */
* {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 {width: 1200px;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;}
.nav-list {display: flex;list-style: none;}
.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;}
/* 轮播图 */
.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;}
.container {display: flex;gap: 20px;}
.content-body {flex: 1;}
.sidebar {width: 300px;}
/* 漫画区块 */
.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(5, 1fr);gap: 15px;}
.comic-item {transition: transform 0.3s ease;width: 148px;}
.comic-item:hover {transform: translateY(-5px);}
.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;}
.comic-cover img {width: 100%;aspect-ratio: 3/4;object-fit: cover;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;}
.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;}
}