/* CSS变量定义 */
:root {
    /* 主题色 */
    --primary-color: #ff4e6a;
    --secondary-color: #4e6aff;
    /* 文字色 */
    --text-primary: #333;
    --text-secondary: #666;
    --text-tertiary: #999;
    /* 背景色 */
    --bg-primary: #ffffff;
    --bg-secondary: #f5f5f5;
    --bg-tertiary: #f8f9fa;
    /* 字体 */
    --font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    /* 字号 */
    --font-xs: 12px;
    --font-sm: 14px;
    --font-base: 16px;
    --font-lg: 18px;
    --font-xl: 24px;
    /* 间距 */
    --spacing-xs: 8px;
    --spacing-sm: 16px;
    --spacing-md: 24px;
    --spacing-lg: 32px;
    --spacing-xl: 48px;
    /* 圆角 */
    --border-radius-sm: 4px;
    --border-radius-md: 8px;
    --border-radius-lg: 16px;
    --border-radius-full: 50%;
    /* 阴影 */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 25px rgba(0, 0, 0, 0.1);
    /* 动画时间 */
    --transition-time: 0.3s;
}
/* 全局样式重置 */
* {margin: 0;padding: 0;box-sizing: border-box;}
body {font-family: var(--font-family);color: var(--text-primary);background-color: var(--bg-secondary);font-size: var(--font-base);line-height: 1.5;}
/* 容器样式 */
.container {max-width: 1200px;width: 100%;margin: 0 auto;position: relative;}
/* 响应式布局 */
@media (max-width: 1240px) {
    .container {padding: 0 var(--spacing-sm);}
}
/* 通用响应式工具类 */
.flex-responsive {display: flex;flex-wrap: wrap;gap: var(--spacing-sm);}
.grid-responsive {display: grid;grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));gap: var(--spacing-md);}
@media (max-width: 768px) {
    /* 响应式导航栏 */
    .nav-menu {display: none;}
    /* 响应式漫画网格布局 */
    .comics-grid, .category-comics {flex-direction: column;}
    .comics-grid .comic-item, .category-comics .comic-item {width: 100%;margin-bottom: var(--spacing-sm);}
    /* 响应式标签区域 */
    .tags-wrapper {flex-wrap: wrap;}
    .tag-item {margin-bottom: var(--spacing-xs);}
    /* 响应式轮播图 */
    .banner-container {height: 200px;}
    .banner-info h2 {font-size: var(--font-lg);}
    .banner-info p {font-size: var(--font-xs);display: none;}
    /* 移动设备网格调整 */
    .grid-responsive {grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));gap: var(--spacing-sm);}
}

/* 顶部区域样式 */
.header {background-color: var(--bg-primary);box-shadow: var(--shadow-md);}
.header .header-top .user-info{display: flex;justify-content: flex-start;align-content: center;}
.header .header-top .user-info .user{padding: 0 15px;border: 2px solid #ff4e6a;background: #fff;line-height: 30px;display: block;border-radius: 4px;color: #ff4e6a;transition: all 0.3s ease;font-size: 14px;}
.header .header-top .user-info .user:hover{border-radius: 15px;background: #ff4e6a;color: #fff;}
.header .header-top .user-info .logout{line-height: 34px;padding-left: 14px;color: #333;transition: all 0.3s ease;}
.header .header-top .user-info .logout:hover{color: #ff4e6a;}
.header-top {padding: var(--spacing-sm) 0;}
.header-top .container {display: flex;align-items: center;justify-content: space-between;}
.logo {width: 150px;height: 50px;background: url('../img/logo.png') no-repeat center;background-size: contain;}/* 搜索框样式 */
.search-box {flex: 1;max-width: 500px;margin: 0 var(--spacing-lg);position: relative;}
.search-box input {width: 100%;height: 40px;padding: 0 var(--spacing-sm);padding-right: 100px;border: 2px solid #eee;border-radius: var(--border-radius-lg);font-size: var(--font-sm);outline: none;transition: all var(--transition-time) ease;}
.search-box input:focus {border-color: var(--primary-color);box-shadow: 0 0 0 2px rgba(255, 78, 106, 0.1);}
.search-box button {position: absolute;right: 2px;top: 2px;height: 36px;width: 90px;background-color: var(--primary-color);color: var(--bg-primary);border: none;border-radius: var(--border-radius-lg);font-size: var(--font-sm);cursor: pointer;transition: all var(--transition-time) ease;}
.search-box button:hover {background-color: #ff3355;}
.search-box.focused input {border-color: var(--primary-color);}
/* 用户链接样式 */
.user-links {display: flex;align-items: center;gap: var(--spacing-sm);}
.user-links a {color: var(--text-primary);text-decoration: none;font-size: var(--font-base);transition: color var(--transition-time) ease;}
.user-links a:hover {color: var(--primary-color);}
.user-links .login-btn {font-weight: 500;}
.user-links .reg-btn {color: var(--primary-color);font-weight: 600;}
/* 导航栏样式 */
.nav-main {background-color: var(--primary-color);height: 48px;}
.nav-main .container {height: 100%;}
.nav-main ul {display: flex;list-style: none;height: 100%;}
.nav-main li {position: relative;margin-right: var(--spacing-lg);height: 100%;display: flex;align-items: center;}
.nav-main li:hover {background-color: rgba(255, 255, 255, 0.1);}
.nav-main li.hover {background-color: rgba(255, 255, 255, 0.1);}
.nav-main a {color: var(--bg-primary);text-decoration: none;padding: 0 12px;font-size: var(--font-base);font-weight: 500;height: 100%;display: flex;align-items: center;transition: all var(--transition-time) ease;}
.nav-main a.active {position: relative;font-weight: 600;}
.nav-main a.active::after {content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 3px;background-color: var(--bg-primary);border-radius: var(--border-radius-sm) var(--border-radius-sm) 0 0;}
/* 主内容区域样式 */
.main-container {padding: var(--spacing-md) 0;}
/* 通用样式类 */
.text-primary {color: var(--text-primary);}
.text-secondary {color: var(--text-secondary);}
.text-tertiary {color: var(--text-tertiary);}
.text-primary-color {color: var(--primary-color);}
.text-secondary-color {color: var(--secondary-color);}
.bg-primary {background-color: var(--bg-primary);}
.bg-secondary {background-color: var(--bg-secondary);}
.bg-tertiary {background-color: var(--bg-tertiary);}
/* 间距工具类 */
.m-0 { margin: 0; }
.m-xs { margin: var(--spacing-xs); }
.m-sm { margin: var(--spacing-sm); }
.m-md { margin: var(--spacing-md); }
.m-lg { margin: var(--spacing-lg); }
.m-xl { margin: var(--spacing-xl); }
.p-0 { padding: 0; }
.p-xs { padding: var(--spacing-xs); }
.p-sm { padding: var(--spacing-sm); }
.p-md { padding: var(--spacing-md); }
.p-lg { padding: var(--spacing-lg); }
.p-xl { padding: var(--spacing-xl); }
/* 圆角工具类 */
.rounded-sm { border-radius: var(--border-radius-sm); }
.rounded-md { border-radius: var(--border-radius-md); }
.rounded-lg { border-radius: var(--border-radius-lg); }
.rounded-full { border-radius: var(--border-radius-full); }
/* 阴影工具类 */
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
/* 过渡动画 */
.transition {transition: all var(--transition-time) ease;}
/* 按钮基础样式 */
.btn {display: inline-block;padding: 8px 20px;border: none;border-radius: var(--border-radius-md);font-size: var(--font-sm);font-weight: 500;cursor: pointer;transition: all var(--transition-time) ease;text-decoration: none;text-align: center;}
.btn-primary {background-color: var(--primary-color);color: var(--bg-primary);}
.btn-primary:hover {background-color: #ff3355;transform: translateY(-1px);}
.btn-secondary {background-color: var(--secondary-color);color: var(--bg-primary);}
.btn-secondary:hover {background-color: #3a57e6;transform: translateY(-1px);}
.btn-outline {background-color: transparent;border: 1px solid var(--primary-color);color: var(--primary-color);}
.btn-outline:hover {background-color: var(--primary-color);color: var(--bg-primary);}
/* 轮播图区域样式 */
.banner-section {margin-bottom: 30px;position: relative;overflow: hidden;height: 360px;border-radius: 8px;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);}
.banner-container {position: relative;width: 100%;height: 100%;}
.banner-slide {position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: 0;transition: opacity 0.5s ease;display: none;}
.banner-slide.active {opacity: 1;display: block;}
.banner-slide img {width: 100%;height: 100%;object-fit: cover;border-radius: 8px;}
.banner-info {position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.3), transparent);padding: 40px 30px 20px;color: #fff;border-radius: 0 0 8px 8px;}
.banner-info h3 {font-size: 24px;font-weight: 600;margin-bottom: 8px;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);}
.banner-info p {font-size: 14px;opacity: 0.9;text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);}
/* 轮播图控制按钮样式 */
.banner-controls {position: absolute;top: 50%;left: 0;right: 0;transform: translateY(-50%);display: flex;justify-content: space-between;padding: 0 20px;z-index: 10;}
.banner-prev, .banner-next {width: 40px;height: 40px;border-radius: 50%;background-color: rgba(0, 0, 0, 0.5);color: #fff;border: none;cursor: pointer;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;font-size: 18px;}
.banner-prev:hover, .banner-next:hover {background-color: rgba(255, 78, 106, 0.8);transform: scale(1.1);}

/* 轮播图指示器样式 */
.banner-dots {position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;gap: 10px;z-index: 10;}
.banner-dots span {width: 30px;height: 30px;border-radius: 50%;background-color: rgba(255, 255, 255, 0.3);color: #fff;display: flex;align-items: center;justify-content: center;cursor: pointer;font-size: 12px;transition: all 0.3s ease;}
.banner-dots span:hover {background-color: rgba(255, 255, 255, 0.5);}
.banner-dots span.active {background-color: #ff4e6a;font-weight: 600;}
/* 标签区域样式 */
.tags-section {margin-bottom: 30px;padding: 15px 0;border-radius: 8px;}
.tags-wrapper {display: flex;flex-wrap: wrap;gap: 12px;}
.tag-item {display: inline-block;padding: 6px 16px;background-color: #f5f5f5;color: #666;text-decoration: none;border-radius: 16px;font-size: 14px;transition: all 0.3s ease;border: 1px solid transparent;}
.tag-item:hover {background-color: #fdd7dd;color: #ff4e6a;border-color: #ff4e6a;}
.tag-item.active {background-color: #ff4e6a;color: #fff;border-color: #ff4e6a;}
.tag-item.all-tag {font-weight: 500;}
.tag-item.all-tag.active {background-color: #ff4e6a;}
/* 漫画展示区域通用样式 */
.featured-section,
.latest-section {margin-bottom: 30px;}
/* 最新漫画样式 */
.latest-section {margin: 20px 0;border-radius: 8px;overflow: hidden;}
/* 友情链接样式 */
.links-section {margin: 30px 0;background-color: #fff;border-radius: 8px;padding: 20px 0;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);}
.links-title {font-size: 18px;font-weight: 600;color: #333;margin-bottom: 15px;padding-bottom: 10px;border-bottom: 1px solid #f0f0f0;}
.links-wrapper {display: flex;flex-wrap: wrap;gap: 15px;}
.link-item {color: #666;text-decoration: none;padding: 5px 15px;border-radius: 15px;background-color: #f5f5f5;transition: all 0.3s ease;font-size: 14px;}
.link-item:hover {color: #ff4e6a;background-color: #fff5ef;transform: translateY(-2px);}
/* 底部区域样式 */
.footer {background-color: #333;color: #999;padding: 40px 0 20px;margin-top: 50px;}
.footer-content {display: flex;flex-wrap: wrap;justify-content: space-between;}
.footer-logo {flex: 0 0 300px;margin-bottom: 20px;}
.logo-text {font-size: 24px;font-weight: bold;color: #fff;display: block;margin-bottom: 10px;}
.logo-desc {font-size: 14px;line-height: 1.6;color: #999;}
.footer-nav, .footer-help, .footer-contact {flex: 0 0 calc(33.333% - 30px);margin-bottom: 20px;}
.footer-title {font-size: 16px;font-weight: 600;color: #fff;margin-bottom: 15px;}
.footer-links {display: flex;flex-wrap: wrap;gap: 15px;}
.footer-link {color: #999;text-decoration: none;font-size: 14px;transition: color 0.3s;}
.footer-link:hover {color: #ff4e6a;}
.contact-item {font-size: 14px;margin-bottom: 10px;display: flex;align-items: center;}
.contact-icon {margin-right: 10px;font-size: 16px;color: #ff4e6a;}
.footer-bottom {text-align: center;padding-top: 20px;}
.copyright {font-size: 12px;margin-bottom: 10px;}
.legal {font-size: 12px;line-height: 1.5;}
/* 响应式底部样式 */
@media (max-width: 768px) {
    .footer-content {flex-direction: column;}
    .footer-logo, .footer-nav, .footer-help, .footer-contact {flex: 0 0 100%;margin-bottom: 30px;}
}
/* 全局优化样式 */
/* 页面滚动进度条 */
::-webkit-scrollbar {width: 8px;height: 8px;}
::-webkit-scrollbar-track {background: #f1f1f1;}
::-webkit-scrollbar-thumb {background: #c1c1c1;border-radius: 4px;}
::-webkit-scrollbar-thumb:hover {background: #a8a8a8;}
/* 平滑滚动 */
html {scroll-behavior: smooth;}
/* 图片优化 */
img {max-width: 100%;height: auto;display: block;}
/* 链接全局样式优化 */
a {transition: all 0.3s ease;}
/* 防止文本选择时的默认样式 */
::selection {background-color: rgba(255, 78, 106, 0.2);color: #333;}
/* 焦点样式优化 */
button:focus,a:focus,input:focus {outline: none;box-shadow: 0 0 0 2px rgba(255, 78, 106, 0.3);}
/* 加载动画 */
@keyframes fadeIn {
    from {opacity: 0;transform: translateY(10px);}
    to {opacity: 1;transform: translateY(0);}
}
.comic-item, .tag-item, .link-item {animation: fadeIn 0.3s ease-out;}
/* 回到顶部按钮样式 */
.back-to-top {position: fixed;bottom: 30px;right: 30px;width: 50px;height: 50px;border-radius: 50%;background-color: #ff4e6a;color: #fff;border: none;cursor: pointer;font-size: 24px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);opacity: 0;visibility: hidden;transition: all 0.3s ease;z-index: 999;display: flex;align-items: center;justify-content: center;}
.back-to-top.visible {opacity: 1;visibility: visible;}
.back-to-top:hover {background-color: #e55c00;transform: translateY(-3px);box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);}
.back-to-top:active {transform: translateY(-1px);}
/* 漫画分类区域样式 */
.categories-section {margin: 30px 0;}
.category-group {margin-bottom: 30px;border-radius: 8px;padding: 20px 0;}
.category-header {display: flex;align-items: center;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 1px solid #f0f0f0;}
.category-tag {display: inline-block;padding: 4px 12px;border-radius: 12px;color: #fff;font-size: 12px;margin-right: 10px;font-weight: 500;}
.category-tag.love {background-color: #ff6b6b;}
.category-tag.hot-blood {background-color: #e74c3c;}
.category-tag.fantasy {background-color: #9b59b6;}
.category-tag.campus {background-color: #3498db;}
.category-title {font-size: 18px;font-weight: 600;color: #333;flex: 1;}
.more-link {color: #666;text-decoration: none;font-size: 14px;display: flex;align-items: center;transition: color 0.3s;}
.more-link:hover {color: #ff4e6a;}
.more-link .arrow {margin-left: 4px;font-size: 16px;}
.category-comics {display: flex;flex-wrap: wrap;justify-content: space-between;}
.category-comics .comic-item {width: calc(25% - 15px);margin-bottom: 20px;}
/* 热门漫画区域 */
.hot-section {margin-top: 30px;padding: 20px 0;margin-bottom: 30px;}
/* 区域标题样式 */
.section-title {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #ff4e6a;font-size: 20px;font-weight: 600;}
.section-title h2 {font-size: 20px;color: #333;font-weight: bold;margin: 0;}
.more-link {color: #666;font-size: 14px;text-decoration: none;transition: color 0.3s;}
.more-link:hover {color: #ff4e6a;}
.more-link span {font-size: 16px;}
/* 漫画内容区域 */
.section-content {display: grid;grid-template-columns: repeat(6, 1fr);gap: 20px;}
/* 漫画项样式 */
.comic-item {background-color: #fff;border-radius: 8px;overflow: hidden;transition: transform 0.3s ease;}
.comic-item:hover {transform: translateY(-5px);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}
/* 漫画封面容器 */
.comic-cover {position: relative;width: 100%;aspect-ratio: 3/4;overflow: hidden;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);margin-bottom: 10px;}
.comic-cover img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.comic-cover:hover img {transform: scale(1.05);}
/* 漫画标签样式 */
.comic-badge {position: absolute;top: 8px;right: 8px;padding: 4px 8px;font-size: 12px;font-weight: bold;border-radius: 4px;color: #fff;}
.comic-badge.hot {background-color: #ff4e6a;}
.comic-badge.featured {background-color: #e74c3c;}
.comic-badge.latest {background-color: #3498db;}
/* 漫画信息样式 */
.comic-info {padding: 10px;text-align: left;}
.comic-title {font-size: 14px;color: #333;font-weight: 500;margin-bottom: 5px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;line-height: 1.4;}
.comic-title:hover {color: #ff4e6a;}
/* 漫画统计信息 */
.comic-stats {font-size: 12px;color: #999;}
.comic-stats .views {display: block;line-height: 1.3;}
/* 分类区域样式 */
.category-section {margin-bottom: 30px;}
.category-item {margin-bottom: 25px;}
.category-content {display: grid;grid-template-columns: repeat(6, 1fr);gap: 15px;}
/* 友情链接样式 */
.links-section {background-color: #fff;padding: 20px;border-radius: 8px;margin-bottom: 30px;}
/* 响应式设计 */
@media (max-width: 1200px) {
    .container {width: 100%;padding: 0 15px;}
}
/* 分类页面样式 */
.category .category-container {width: 1200px;margin: 0 auto;padding: 20px 0;display: flex;gap: 20px;min-height: 600px;transition: all 0.3s ease;align-items: flex-start;}
/* 左侧筛选区域样式 */
.category .filter-sidebar {width: 240px;background: #fff;border-radius: 8px;padding: 20px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
.category .filter-section {margin-bottom: 25px;}
.category .filter-section:last-child {margin-bottom: 0;}
.category .filter-title {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 15px;padding-bottom: 10px;border-bottom: 2px solid #ff6b6b;position: relative;}
.category .filter-title::after {content: '';position: absolute;bottom: -2px;left: 0;width: 50px;height: 2px;background: #ff6b6b;}
.category .filter-options {list-style: none;}
.category .filter-options li {margin-bottom: 10px;border-radius: 4px;transition: all 0.3s ease;}.filter-options li.active{background: #ff6b6b;box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);}.filter-options li.active a{color: #fff;}.filter-options li:hover{color: #fff;background: #ff6b6b;transform: translateY(5px);box-shadow: 0 2px 4px rgba(255, 107, 107, 0.3);}.filter-options li:hover a{color: #fff;}.filter-option {display: block;padding: 8px 12px;color: #666;text-decoration: none;transition: all 0.3s ease;}
/* 标签云样式 */
.category .tag-cloud {display: flex;flex-wrap: wrap;gap: 8px;}
.category .tag {display: inline-block;padding: 6px 16px;color: #666;background: #f5f5f5;border-radius: 16px;text-decoration: none;font-size: 14px;transition: all 0.3s ease;}
.category .tag:hover {color: #fff;background: #ff6b6b;transform: translateY(-2px) scale(1.05);box-shadow: 0 2px 8px rgba(255,78,106, 0.3);}
.category .tag.active {color: #fff;background: #ff6b6b;box-shadow: 0 2px 8px rgba(255,78,106, 0.3);}
/* 中间内容区域样式 */
.category .main-content {flex: 1;background: #fff;border-radius: 8px;padding: 20px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);min-width: 0; /* 防止flex子元素溢出 */}
/* 筛选栏样式 */
.category .filter-bar {display: flex;justify-content: space-between;align-items: center;padding: 15px 0;border-bottom: 1px solid #e5e5e5;margin-bottom: 20px;}
.category .filter-label {color: #666;font-size: 14px;margin-right: 10px;}
.category .sort-options,.category .status-options {display: flex;align-items: center;gap: 10px;}
.category .sort-option,.category .status-option {color: #666;text-decoration: none;padding: 6px 12px;border-radius: 4px;transition: all 0.3s ease;}
.category .sort-option:hover,.category .status-option:hover,.category .sort-option.active,.category .status-option.active {color: #fff;background: var(--primary-color);}
/* 漫画网格样式 */
.category .comic-grid {display: grid;grid-template-columns: repeat(5, 1fr); /* 调整为3列以更好地适应布局 */gap: 20px;margin-bottom: 20px;align-items: start;}
.category .comic-item {transition: all 0.3s ease;border-radius: 8px;overflow: hidden;}
.category .comic-item:hover {transform: translateY(-5px);box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);}
.category .comic-link {display: block;text-decoration: none;}
.category .comic-cover {position: relative;width: 100%;padding-top: 140%;overflow: hidden;border-radius: 8px;margin-bottom: 10px;background: #f0f0f0; /* 添加背景色防止图片加载时的空白 */}
.category .cover-img {position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.category .comic-item:hover .cover-img {transform: scale(1.05);}
.category .comic-status {position: absolute;top: 8px;right: 8px;padding: 4px 8px;border-radius: 4px;font-size: 12px;font-weight: 500;color: #fff;}
.category .comic-status.ongoing {background: #ff6b6b;}
.category .comic-status.completed {background: var(--primary-color);}
.category .comic-info {padding: 0 4px;}
.category .comic-title {font-size: 15px;font-weight: 600;color: #333;margin-bottom: 6px;line-height: 1.4;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;transition: color 0.3s ease;}
.category .comic-link:hover .comic-title {color: #ff6b6b;}
.category .comic-author {font-size: 12px;color: #666;margin-bottom: 6px;}
.category .comic-latest {font-size: 12px;color: #999;margin-bottom: 6px;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.category .comic-stats {display: flex;justify-content: space-between;font-size: 12px;color: #999;}
.category .stat-item {white-space: nowrap;}
/* 分页样式 */
.pagination {display: flex;justify-content: center;align-items: center;padding-top: 20px;border-top: 1px solid #e5e5e5;flex-wrap: wrap;gap: 15px;}
.pagination .page-info {font-size: 14px;color: #666;}
.pagination .page-controls {display: flex;align-items: center;gap: 5px;}
.pagination .page-controls a {display: inline-block;padding: 8px 12px;color: #666;background: #f5f5f5;border-radius: 4px;text-decoration: none;font-size: 14px;transition: all 0.3s ease;}
.pagination .page-controls a:hover:not(.disabled) {color: #fff;background: var(--primary-color);transform: translateY(-2px);box-shadow: 0 2px 6px rgba(78, 205, 196, 0.3);}
.pagination .page-controls a.on {color: #fff;background: var(--primary-color);}
.pagination .page-controls a.disabled {opacity: 0.5;cursor: not-allowed;}
.pagination .page-ellipsis {padding: 8px;color: #666;}
.pagination .page-jump {display: flex;align-items: center;gap: 8px;}
.pagination .jump-label {font-size: 14px;color: #666;}
.pagination .jump-input {width: 60px;padding: 6px 8px;border: 1px solid #ddd;border-radius: 4px;text-align: center;}
.pagination .jump-btn {padding: 6px 12px;color: #fff;background: var(--primary-color);border: none;border-radius: 4px;cursor: pointer;transition: background 0.3s ease;}
.pagination .jump-btn:hover {background: #45b7aa;}
/* 右侧边栏样式 */
.category .right-sidebar {width: 240px;}
.category .sidebar-section {background: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
.category .sidebar-title {font-size: 16px;font-weight: 600;color: #333;margin-bottom: 15px;padding-bottom: 10px;border-bottom: 2px solid var(--primary-color);position: relative;}
.category .sidebar-title::after {content: '';position: absolute;bottom: -2px;left: 0;width: 50px;height: 2px;background: var(--primary-color);}
.category .sidebar-comic-list {list-style: none;}
.category .sidebar-comic-item {margin-bottom: 15px;}
.category .sidebar-comic-item:last-child {margin-bottom: 0;}
.category .sidebar-comic-link {display: flex;align-items: center;gap: 10px;text-decoration: none;transition: all 0.3s ease;}
.category .sidebar-comic-link:hover {transform: translateX(5px);}
.category .sidebar-comic-cover {width: 50px;height: 60px;border-radius: 2px;object-fit: cover;}
.category .sidebar-comic-title {flex: 1;font-size: 14px;color: #333;font-weight: 500;line-height: 1.3;}
/* 响应式设计 */
@media (max-width: 1220px) {
    .category .category-container {width: 100%;padding: 20px;box-sizing: border-box;}
    .category .comic-grid {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 992px) {
    .category .category-container {gap: 15px;}
    .category .filter-sidebar {width: 200px;}
    .category .right-sidebar {width: 200px;}
    .category .comic-grid {grid-template-columns: repeat(2, 1fr);gap: 15px;}
}
@media (max-width: 768px) {
    .category .category-container {flex-direction: column;gap: 15px;}
    .category .filter-sidebar,.right-sidebar {width: 100%;}
    .category .comic-grid {grid-template-columns: repeat(2, 1fr);gap: 15px;}
    .category .filter-bar {flex-direction: column;align-items: flex-start;gap: 10px;}
    .category .pagination {flex-direction: column;gap: 15px;align-items: center;}
    .category .page-controls {flex-wrap: wrap;justify-content: center;}
    /* 调整标签云在小屏幕上的显示 */
    .category .tag-cloud {justify-content: center;}
    .category .tag {padding: 5px 10px;font-size: 13px;}
    /* 优化筛选选项在移动设备上的显示 */
    .category .filter-options {display: flex;flex-wrap: wrap;gap: 8px;}
    .category .filter-options li {margin-bottom: 0;}
    .category .filter-option {font-size: 13px;padding: 6px 10px;}
}
@media (max-width: 480px) {
    .category .category-container {padding: 10px;} 
    .category .main-content {padding: 15px;}
    .category .comic-grid {grid-template-columns: 1fr;gap: 15px;}
    .category .comic-item {border-radius: 6px;}
    .category .comic-cover {padding-top: 130%;border-radius: 6px;}
    .category .comic-title {font-size: 14px;}
    .category .page-btn {padding: 6px 10px;font-size: 13px;}
    .category .page-info,.jump-label {font-size: 13px;}
    .category .sidebar-section {padding: 15px;}
    .category .sidebar-comic-cover {width: 45px;height: 65px;}
    .category .sidebar-comic-title {font-size: 13px;}
}
/* 排行榜页面专用样式 */
/* 排行榜内容区域 */
.topbox .rank-container {padding: 20px 0;}
.topbox .rank-container .main-content {width: 1200px;margin: 0 auto;padding: 20px;background-color: #fff;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
/* 排行榜左右分栏布局 */
.topbox .rank-layout {display: flex;gap: 20px;margin-top: 20px;}
/* 左侧导航栏 */
.topbox .rank-sidebar {width: 200px;flex-shrink: 0;}
/* 榜单分类导航 - 垂直布局 */
.topbox .rank-nav {background-color: #fff;border-radius: 8px;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);padding: 10px 0;}
.topbox .rank-tabs {display: flex;flex-direction: column;margin: 0;padding: 0;list-style: none;}
.topbox .rank-tabs li {margin: 0;width: 100%;}
.topbox .rank-tabs a {display: block;padding: 15px 20px;font-size: 16px;font-weight: 500;color: #666;text-decoration: none;position: relative;transition: all 0.3s ease;border-left: 3px solid transparent;}
.topbox .rank-tabs a:hover {color: #e60012;background-color: rgba(230, 0, 18, 0.05);border-left-color: rgba(230, 0, 18, 0.3);}
.topbox .rank-tabs a.active {color: #e60012;background-color: rgba(230, 0, 18, 0.05);font-weight: 600;border-left-color: #e60012;}
/* 右侧主内容区域 */
.topbox .rank-main-content {flex: 1;min-width: 0;background-color: #fff;border-radius: 8px;box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);padding: 20px;}
/* 响应式导航样式优化 */
@media (max-width: 1240px) {
    .topbox .rank-sidebar {width: 180px;}
    .topbox .rank-tabs a {padding: 12px 16px;font-size: 15px;}
}
@media (max-width: 992px) {
    /* 中等屏幕下改为垂直布局 */
    .topbox .rank-layout {flex-direction: column;}
    .topbox .rank-sidebar {width: 100%;}
    /* 中等屏幕下导航改为水平布局 */
    .topbox .rank-nav {padding: 0 10px;}
    .topbox .rank-tabs {flex-direction: row;justify-content: center;flex-wrap: wrap;padding-bottom: 10px;}
    .topbox .rank-tabs li {margin-bottom: 5px;min-width: 100px;flex: 1;text-align: center;}
    .topbox .rank-tabs a {padding: 12px 15px;font-size: 14px;border-left: none;border-radius: 8px 8px 0 0;}
    .topbox .rank-tabs a:hover {border-left-color: transparent;}
    .topbox .rank-tabs a.active {border-left-color: transparent;position: relative;}
    .topbox .rank-tabs a.active::after {content: '';position: absolute;bottom: 0;left: 15%;width: 70%;height: 3px;background-color: #e60012;border-radius: 3px;}
}
@media (max-width: 768px) {
    .topbox .rank-nav {padding: 0 10px;}
    .topbox .rank-tabs li {min-width: auto;flex: none;}
    .topbox .rank-main-content {padding: 15px;}
}
@media (max-width: 480px) {
    .topbox .rank-tabs {justify-content: flex-start;overflow-x: auto;padding-bottom: 5px;}
    .topbox .rank-tabs::-webkit-scrollbar {height: 3px;}
    .topbox .rank-tabs::-webkit-scrollbar-track {background: #f1f1f1;}
    .topbox .rank-tabs::-webkit-scrollbar-thumb {background: #ddd;}
    .topbox .rank-tabs a {padding: 10px 12px;font-size: 13px;white-space: nowrap;}
    .topbox .rank-main-content {padding: 12px;}
}
/* 漫画列表样式 */
.topbox .comic-list {margin-bottom: 30px;}
.topbox .rank-content {display: none;}
.topbox .rank-content.active {display: block;}
.topbox .comic-rank-item {display: flex;padding: 15px 0;border-bottom: 1px solid #f0f0f0;transition: background-color 0.3s ease;align-items: center;}
.topbox .comic-rank-item:hover {background-color: #fafafa;}
.topbox .comic-rank-item:last-child {border-bottom: none;}
/* 排名数字样式 */
.topbox .rank-number {width: 40px;height: 40px;line-height: 40px;text-align: center;font-size: 20px;font-weight: bold;color: #999;margin-right: 15px;background-color: #f5f5f5;border-radius: 50%;}
.topbox .rank-number.top1 {background-color: #ffd700;color: #fff;}
.topbox .rank-number.top2 {background-color: #c0c0c0;color: #fff;}
.topbox .rank-number.top3 {background-color: #cd7f32;color: #fff;}
/* 漫画封面样式 */
.topbox .comic-cover {width: 120px;height: 160px;margin-right: 20px;overflow: hidden;border-radius: 4px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.topbox .comic-cover img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.topbox .comic-cover:hover img {transform: scale(1.05);}
/* 漫画信息样式 */
.topbox .comic-info {flex: 1;display: flex;flex-direction: column;justify-content: center;}
.topbox .comic-title {font-size: 18px;font-weight: bold;color: #333;margin-bottom: 10px;transition: color 0.3s ease;}
.topbox .comic-title:hover {color: #e60012;text-decoration: none;}
.topbox .comic-author {font-size: 14px;color: #666;margin-bottom: 8px;}
.topbox .comic-chapter {font-size: 14px;color: #999;margin-bottom: 10px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.topbox .comic-stats {display: flex;gap: 20px;}
.topbox .comic-stats span {font-size: 14px;color: #666;}
.topbox .comic-stats .views {color: #e60012;}
.topbox .comic-stats .favorites {color: #0066cc;}
/* 加载状态 */
.topbox .loading {text-align: center;padding: 60px 20px;color: #666;font-size: 16px;display: flex;flex-direction: column;align-items: center;justify-content: center;min-height: 300px;}
.topbox .loading-spinner {width: 40px;height: 40px;margin-bottom: 15px;border: 3px solid #f3f3f3;border-top: 3px solid #e60012;border-radius: 50%;animation: spin 1s linear infinite;}
@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
.topbox .loading-text {font-size: 16px;color: #666;margin-top: 10px;}
/* 响应式设计 */
@media (max-width: 1240px) {
    .topbox .rank-container .main-content {width: 95%;padding: 15px;margin: 0 auto;}
    .topbox .rank-layout {gap: 15px;}
}
@media (max-width: 992px) {
    /* 中等屏幕优化 */
    .topbox .comic-rank-item {padding: 12px 0;}
    .topbox .comic-cover {width: 100px;height: 133px;margin-right: 15px;}
    .topbox .comic-info {flex: 1;}
    .topbox .comic-title {font-size: 16px;margin-bottom: 8px;}
    .topbox .comic-author,
    .topbox .comic-chapter {font-size: 13px;margin-bottom: 6px;}
    .topbox .comic-stats {gap: 15px;}
    .topbox .comic-stats span {font-size: 13px;}
}
@media (max-width: 768px) {
    /* 平板和手机优化 */
    .topbox .rank-container .main-content {padding: 12px;}
    .topbox .comic-rank-item {flex-direction: column;align-items: flex-start;padding: 15px;border-radius: 8px;margin-bottom: 15px;border-bottom: none;background-color: #fafafa;}
    .topbox .rank-number {position: absolute;top: 10px;left: 10px;margin-bottom: 0;margin-right: 0;width: 35px;height: 35px;line-height: 35px;font-size: 18px;}
    .topbox .comic-cover {width: 80px;height: 106px;margin-bottom: 0;margin-right: 15px;}
    .topbox .comic-info {flex: 1;min-width: 0;}
    .topbox .pagination {flex-direction: column;gap: 15px;align-items: stretch;}
    .topbox .pagination-info {width: 100%;justify-content: center;flex-wrap: wrap;gap: 10px;}
    .topbox .pagination-controls {width: 100%;flex-direction: column;gap: 15px;}
    .topbox .page-numbers {justify-content: center;gap: 5px;}
    .topbox .page-jump {width: 100%;justify-content: center;flex-wrap: wrap;}
}
@media (max-width: 480px) {
    .topbox .comic-cover {width: 100px;height: 133px;}
    .topbox .comic-title {font-size: 16px;}
    .topbox .comic-stats {flex-direction: column;gap: 5px;}
    .topbox .page-numbers {max-width: 280px;}
    .topbox .page-number {width: 32px;height: 32px;line-height: 32px;font-size: 13px;}
}
/* 动画效果 */
@keyframes fadeIn {
    from {opacity: 0;transform: translateY(10px);}
    to {opacity: 1;transform: translateY(0);}
}
.topbox .rank-content.active {animation: fadeIn 0.3s ease;}
.topbox .comic-rank-item {transition: all 0.3s ease;}
/* 滚动条样式 */
@media (min-width: 769px) {
    .topbox .comic-list::-webkit-scrollbar {width: 6px;}
    .topbox .comic-list::-webkit-scrollbar-track {background: #f1f1f1;border-radius: 3px;}
    .topbox .comic-list::-webkit-scrollbar-thumb {background: #888;border-radius: 3px;}
    .topbox .comic-list::-webkit-scrollbar-thumb:hover {background: #555;}
}
/* 回到顶部按钮样式 */
.topbox .back-to-top {position: fixed;bottom: 30px;right: 30px;width: 50px;height: 50px;background-color: #e60012;color: #fff;border: none;border-radius: 50%;font-size: 24px;cursor: pointer;display: flex;align-items: center;justify-content: center;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);opacity: 0;visibility: hidden;transition: all 0.3s ease;z-index: 9999;}
.topbox .back-to-top.show {opacity: 1;visibility: visible;}
.topbox .back-to-top:hover {background-color: #c40010;transform: translateY(-3px);box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);}
.topbox .back-to-top:active {transform: translateY(-1px);box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);}
@media (max-width: 768px) {
    .topbox .back-to-top {width: 40px;height: 40px;font-size: 20px;bottom: 20px;right: 20px;}
}
.searchbox .search-main-content{padding: 30px 0;max-width: 1200px;margin: 0 auto;width: 100%;}
/* 搜索统计区域 */
.searchbox .search-stats{margin-bottom: 30px;padding: 15px 20px;background-color: #f9f9f9;border-radius: 8px;border: 1px solid #e5e5e5;}
.searchbox .search-stats h2{margin: 0;font-size: 18px;color: #333;font-weight: 500;}
.searchbox .search-stats h2 span{color: #ff6b6b;font-weight: 600;}
/* 搜索容器 */
.searchbox .search-container{display: flex;gap: 30px;align-items: flex-start;}
/* 搜索结果区域 */
.searchbox .search-results{flex: 1;min-width: 0;}
/* 漫画列表样式 */
.searchbox #comicList{display: grid;grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));gap: 20px;margin: 0;padding: 0;}
.searchbox .comic-item{background: #fff;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);transition: all 0.3s ease;display: flex;flex-direction: column;height: 100%;list-style: none;}
.searchbox .comic-item:hover{transform: translateY(-2px);box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);}
.searchbox .comic-item a{display: block;text-decoration: none;color: inherit;width: 100%;height: 100%;}
.searchbox .comic-cover{position: relative;padding-top: 140%;overflow: hidden;background-color: #f0f0f0;}
.searchbox .comic-cover img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.searchbox .comic-item:hover .comic-cover img{transform: scale(1.05);}
.searchbox .comic-info{padding: 15px;flex: 1;display: flex;flex-direction: column;min-height: 0;justify-content: space-between;padding-top: 0;}
.searchbox .comic-title{font-size: 16px;font-weight: 600;color: #333;margin: 0 0 8px 0;line-height: 1.4;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;}
.searchbox .comic-author{font-size: 14px;color: #999;margin-bottom: 8px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.searchbox .comic-latest{font-size: 12px;color: #666;margin-bottom: 8px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.searchbox .comic-update{font-size: 12px;color: #666;margin-bottom: 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin-top: auto;}
.searchbox .comic-popularity{font-size: 12px;color: #ff6b6b;margin-top: auto;display: flex;align-items: center;}
.searchbox .comic-popularity::before{content: '🔥';margin-right: 5px;}
/* 加载更多按钮 */
.searchbox #loadMoreBtn{display: none;margin: 30px auto;padding: 12px 40px;background-color: #ff6b6b;color: white;border: none;border-radius: 25px;font-size: 16px;font-weight: 500;cursor: pointer;transition: all 0.3s ease;text-align: center;}
.searchbox #loadMoreBtn:hover{background-color: #ee5253;transform: translateY(-2px);box-shadow: 0 4px 10px rgba(255, 107, 107, 0.3);}
.searchbox #loadMoreBtn:active{transform: translateY(0);}
/* 加载和无结果状态 */
.searchbox .loading,.searchbox .no-results{display: none;text-align: center;padding: 60px 20px;background: #fff;border-radius: 8px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);}
.searchbox .loading p,.searchbox .no-results p{margin: 0;color: #666;font-size: 16px;}
.searchbox .no-results .suggestion{margin-top: 10px;color: #999;font-size: 14px;}
/* 右侧边栏 */
.searchbox .search-sidebar{width: 280px;flex-shrink: 0;}
.searchbox .sidebar-section{background: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);position: relative;}
.searchbox .sidebar-title{font-size: 18px;font-weight: 600;color: #333;margin: 0 0 20px 0;position: relative;padding-bottom: 10px;}
.searchbox .sidebar-title::after{content: '';position: absolute;bottom: 0;left: 0;width: 40px;height: 3px;background: #ff6b6b;border-radius: 3px;}
/* 热门漫画和最新漫画列表 */
.searchbox .hot-comics-list,.searchbox .latest-comics-list{list-style: none;margin: 0;padding: 0;}
.searchbox .hot-comic-item,.searchbox .latest-comic-item{display: flex;gap: 12px;margin-bottom: 15px;transition: transform 0.2s ease;align-items: flex-start;}
.searchbox .hot-comic-item:hover,.searchbox .latest-comic-item:hover{transform: translateX(5px);}
.searchbox .hot-comic-item:last-child,.searchbox .latest-comic-item:last-child{margin-bottom: 0;}
.searchbox .hot-comic-rank{font-size: 14px;font-weight: 600;color: #ff6b6b;width: 20px;text-align: center;line-height: 20px;flex-shrink: 0;}
/* 修复排名选择器 */
.searchbox .hot-comics-list > li:nth-child(1) .hot-comic-rank{color: #ff6b6b;font-size: 16px;}
.searchbox .hot-comics-list > li:nth-child(2) .hot-comic-rank{color: #ff9f43;font-size: 15px;}
.searchbox .hot-comics-list > li:nth-child(3) .hot-comic-rank{color: #48dbfb;font-size: 14px;}
.searchbox .sidebar-comic-cover{width: 40px;height: 56px;flex-shrink: 0;border-radius: 4px;overflow: hidden;background-color: #f0f0f0;}
.searchbox .sidebar-comic-cover img{width: 100%;height: 100%;object-fit: cover;transition: opacity 0.3s ease;}
.searchbox .sidebar-comic-cover:hover img{opacity: 0.9;}
.searchbox .sidebar-comic-info{flex: 1;min-width: 0;display: flex;flex-direction: column;justify-content: space-between;height: 56px;}
.searchbox .sidebar-comic-title{font-size: 14px;font-weight: 500;color: #333;margin: 0 0 5px 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 1.3;text-decoration: none;}
.searchbox .sidebar-comic-title:hover{color: #ff6b6b;text-decoration: none;}
.searchbox .sidebar-comic-latest{font-size: 12px;color: #999;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;line-height: 1.2;}
/* 为侧边栏添加链接样式 */
.searchbox .hot-comic-item a,.searchbox .latest-comic-item a {color: inherit;text-decoration: none;}
.searchbox .hot-comic-item a:hover .sidebar-comic-title,.searchbox .latest-comic-item a:hover .sidebar-comic-title {color: #ff6b6b;transition: color 0.2s ease;}
/* 响应式设计 */
/* 平板和中屏幕设备 */
@media (max-width: 1024px) {
    .searchbox .search-main-content {padding: 20px;max-width: 900px;}
    .searchbox .search-content-wrapper {flex-direction: column;gap: 20px;}
    .searchbox .search-sidebar {width: 100%;}
    .searchbox .sidebar-section {display: flex;flex-direction: column;}
    .searchbox .hot-comics-list,.searchbox .latest-comics-list {display: grid;grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));gap: 15px;}
    .searchbox .hot-comic-item,.searchbox .latest-comic-item {flex-direction: column;margin-bottom: 0;align-items: center;text-align: center;}
    .searchbox .sidebar-comic-cover {width: 100%;height: 180px;margin-bottom: 10px;}
    .searchbox .hot-comic-rank {position: absolute;top: -5px;left: 0;}
    .searchbox .sidebar-comic-info {width: 100%;}
    .searchbox .comic-list {grid-template-columns: repeat(3, 1fr);gap: 15px;}
    .searchbox .comic-item {min-height: auto;}
}
/* 手机横屏和小平板 */
@media (max-width: 768px) {
    .searchbox .search-main-content {padding: 15px;}
    .searchbox .comic-list {grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));gap: 15px;}
    .searchbox .search-stats {margin-bottom: 20px;padding: 12px 15px;font-size: 14px;}
    .searchbox .search-stats h2 {font-size: 16px;}
    .searchbox .comic-title {font-size: 14px;}
    .searchbox .comic-author,.searchbox .comic-latest {font-size: 13px;}
    .searchbox .sidebar-section {flex: 1;min-width: 200px;}
    .searchbox .sidebar-title {font-size: 16px;}
}
/* 手机竖屏 */
@media (max-width: 480px) {
    .searchbox .search-main-content {padding: 15px 10px;}
    .searchbox .comic-list {grid-template-columns: repeat(2, 1fr);gap: 10px;}
    .searchbox .comic-info {padding: 12px 8px;}
    .searchbox .hot-comics-list,.searchbox .latest-comics-list {grid-template-columns: repeat(2, 1fr);gap: 10px;}
    .searchbox .comic-title {font-size: 15px;}
    .searchbox .hot-comic-rank {font-size: 13px;}
    .searchbox .hot-comics-list > li:nth-child(1) .hot-comic-rank {font-size: 15px;}
    .searchbox .hot-comics-list > li:nth-child(2) .hot-comic-rank {font-size: 14px;}
    .searchbox .hot-comics-list > li:nth-child(3) .hot-comic-rank {font-size: 13px;}
}
/* 注册页面专用样式 */
/* 注册区域样式 */
.loginbox .reg-section{padding: 50px 0;min-height: 500px;}
.loginbox .reg-container{max-width: 600px;margin: 0 auto;padding: 40px;background: #ffffff;border-radius: 8px;box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);}
.loginbox .reg-title{text-align: center;font-size: 28px;font-weight: bold;color: #333;margin-bottom: 30px;}
/* 表单样式 */
.loginbox .reg-form{width: 100%;}
.loginbox .form-group{margin-bottom: 20px;position: relative;}
.loginbox .form-label{display: block;margin-bottom: 8px;font-size: 14px;color: #333;font-weight: 500;}
.loginbox .form-input{width: 100%;padding: 12px 15px;font-size: 14px;border: 1px solid #ddd;border-radius: 4px;transition: border-color 0.3s;box-sizing: border-box;}
.loginbox .form-input:focus{outline: none;border-color: #ff6b6b;box-shadow: 0 0 0 2px rgba(255,78,106, 0.1);}
.loginbox .form-input::placeholder{color: #999;}
.loginbox .form-options{margin-bottom: 25px;text-align: right;}
.loginbox .forgot-password{font-size: 14px;color: #ff6b6b;text-decoration: none;transition: color 0.3s;}
.loginbox .forgot-password:hover{color: #ff8533;}
/* 错误提示样式 */
.loginbox .error-message{margin-top: 5px;font-size: 12px;color: #f56c6c;min-height: 16px;}
.loginbox .has-error .form-input{border-color: #f56c6c;}
/* 用户协议勾选样式 */
.loginbox .agreement-group{display: flex;align-items: flex-start;margin-bottom: 30px;}
.loginbox .agreement-checkbox{margin-top: 2px;margin-right: 10px;width: 16px;height: 16px;cursor: pointer;}
.loginbox .agreement-label{font-size: 14px;color: #666;cursor: pointer;flex: 1;}
.loginbox .agreement-link{color: #ff6b6b;text-decoration: none;}
.loginbox .agreement-link:hover{text-decoration: underline;}
/* 注册按钮样式 */
.loginbox .btn-group{margin-bottom: 20px;}
.loginbox .submit-btn{width: 100%;padding: 14px;font-size: 16px;font-weight: bold;color: #fff;background-color: #ff6b6b;border: none;border-radius: 4px;cursor: pointer;transition: background-color 0.3s;}
.loginbox .submit-btn:hover{background-color: #ff6b6b;}
.loginbox .submit-btn:disabled{background-color: #ccc;cursor: not-allowed;}
/* 登录链接样式 */
.loginbox .login-link-group{text-align: center;font-size: 14px;color: #666;}
.loginbox .login-link{color: #ff6b6b;text-decoration: none;margin-left: 5px;}
.loginbox .login-link:hover{text-decoration: underline;}
/* 密码强度指示器样式 */
.loginbox .password-strength{margin-top: 8px;height: 4px;background-color: #f0f0f0;border-radius: 2px;overflow: hidden;}
.loginbox .strength-bar{height: 100%;transition: width 0.3s, background-color 0.3s;width: 0;}
.loginbox .strength-weak{width: 33%;background-color: #f56c6c;}
.loginbox .strength-medium{width: 66%;background-color: #e6a23c;}
.loginbox .strength-strong{width: 100%;background-color: #67c23a;}
.loginbox .strength-text{font-size: 12px;margin-top: 4px;display: none;}
.loginbox .strength-text.weak{color: #f56c6c;display: block;}
.loginbox .strength-text.medium{color: #e6a23c;display: block;}
.loginbox .strength-text.strong{color: #67c23a;display: block;}
/* 响应式设计 */
@media (max-width: 768px){
    .loginbox .reg-container{padding: 20px;margin: 0 15px;box-shadow: none;border: 1px solid #eee;}
    .loginbox .reg-title{font-size: 24px;margin-bottom: 20px;}
    .loginbox .form-input{padding: 10px 12px;font-size: 15px;}
    .loginbox .agreement-label{font-size: 13px;}
    .loginbox .submit-btn{padding: 12px;font-size: 15px;}
}
@media (max-width: 480px){
    .loginbox .reg-section{padding: 30px 0;}
    .loginbox .reg-container{padding: 15px;margin: 0 10px;}
    .loginbox .form-group{margin-bottom: 15px;}
    .loginbox .agreement-group{margin-bottom: 20px;}
}
/* 确保回到顶部按钮样式一致 */
.loginbox .back-to-top {position: fixed;bottom: 30px;right: 30px;width: 50px;height: 50px;background-color: #ff6b6b;color: white;border: none;border-radius: 50%;font-size: 20px;cursor: pointer;display: none;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);transition: all 0.3s;z-index: 1000;}
.loginbox .back-to-top:hover {background-color: #ff6b6b;transform: translateY(-3px);}
.loginbox .back-to-top .icon {display: block;line-height: 50px;text-align: center;}
.userbox .empty-state {text-align: center;padding: 60px 0;color: #999;}
.userbox .empty-state i {font-size: 48px;margin-bottom: 15px;color: #e0e0e0;}
/*充值弹窗*/
.j-dialog-pay{position: relative;}
.j-dialog-pay .j-pay-header{width: 100%;background-color: #ff4e6a;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: #ff4e6a;}
.layui-tab-brief>.layui-tab-more li.layui-this:after, .layui-tab-brief>.layui-tab-title .layui-this:after {border-bottom: 2px solid #ff4e6a;}
.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;background: transparent;}
.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: #ff4e6a;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: #ff4e6a;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: #ff4e6a;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: #ff4e6a;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: #ff4e6a;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: #ff4e6a;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: #ff4e6a;}
.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: #ff4e6a;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: #ff4e6a;font-size: 15px;color: #fff;border-radius: 4px;float: right;margin: 20px 0;cursor: pointer;}
/* 个人中心页面专用样式 */
/* 个人中心容器 */
.userbox .user-center{padding: 20px 0;}
/* 个人中心导航菜单 */
.userbox .user-nav{background-color: #fff;border-radius: 8px;padding: 15px 0;margin-bottom: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.userbox .user-nav ul{display: flex;justify-content: center;flex-wrap: wrap;margin: 0;padding: 0;list-style: none;}
.userbox .user-nav li{margin: 0 15px;flex: 1;text-align: center;}
.userbox .user-nav a{display: block;padding: 10px 20px;color: #333;text-decoration: none;font-size: 16px;font-weight: 500;border-radius: 20px;transition: all 0.3s ease;}
.userbox .user-nav a:hover{background-color: #f5f5f5;color: #ff4e6a;}
.userbox .user-nav a.active{background-color: #ff4e6a;color: #fff;}
/* 用户基本信息展示区域 */
.userbox .user-info-section{background-color: #fff;border-radius: 8px;padding: 30px;margin-bottom: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);display: flex;align-items: center;flex-wrap: wrap;}
.userbox .user-avatar{width: 120px;height: 120px;border-radius: 50%;overflow: hidden;border: 3px solid #f0f0f0;margin-right: 30px;flex-shrink: 0;}
.userbox .user-avatar img{width: 100%;height: 100%;object-fit: cover;}
.userbox .user-details{flex: 1;min-width: 300px;}
.userbox .username{font-size: 24px;font-weight: bold;color: #333;margin: 0 0 10px 0;}
.userbox .user-level{display: flex;align-items: center;margin-bottom: 10px;}
.userbox .level-badge{background-color: #ff4e6a;color: #fff;padding: 4px 12px;border-radius: 12px;font-size: 14px;font-weight: bold;margin-right: 10px;}
.userbox .exp-bar{font-size: 14px;color: #666;}
.userbox .user-membership{display: flex;align-items: center;margin-bottom: 15px;}
.userbox .non-member{color: #999;font-size: 14px;margin-right: 15px;}
.userbox .btn-user{background-color: #ff4e6a;color: #fff;padding: 6px 20px;border-radius: 20px;text-decoration: none;font-size: 14px;font-weight: bold;transition: background-color 0.3s ease;border: 0;cursor: pointer;}
.userbox .btn-user:hover{background-color: #ff4e8a;color: #fff;}
.userbox .user-bio{color: #666;font-size: 14px;line-height: 1.6;}
.userbox .user-stats{display: flex;flex-wrap: wrap;margin-left: 30px;flex-shrink: 0;}
.userbox .stat-item{text-align: center;margin: 0 20px 10px 0;min-width: 60px;}
.userbox .stat-value{display: block;font-size: 24px;font-weight: bold;color: #ff4e6a;margin-bottom: 5px;}
.userbox .stat-label{display: block;font-size: 14px;color: #666;}
/* 快捷操作区域 */
.userbox .quick-actions-section{background-color: #fff;border-radius: 8px;padding: 25px;margin-bottom: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.userbox .section-title{font-size: 18px;font-weight: bold;color: #333;margin: 0 0 0 0;}
.userbox .quick-actions-grid{display: grid;grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));gap: 20px;}
.userbox .action-item{display: flex;flex-direction: column;align-items: center;justify-content: center;padding: 20px 10px;background-color: #f8f8f8;border-radius: 8px;text-decoration: none;transition: all 0.3s ease;}
.userbox .action-item:hover{background-color: #ff4e6a;transform: translateY(-3px);box-shadow: 0 4px 12px rgba(255, 106, 0, 0.3);}
.userbox .action-item:hover .action-icon,.userbox .action-item:hover .action-text{color: #fff;}
.userbox .action-icon{font-size: 32px;margin-bottom: 10px;color: #ff4e6a;transition: color 0.3s ease;}
.userbox .action-text{font-size: 14px;color: #333;text-align: center;transition: color 0.3s ease;}
/* 阅读历史快捷入口 */
.userbox .reading-history-section{background-color: #fff;border-radius: 8px;padding: 25px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.userbox .section-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 0;}
.userbox .view-more{color: #ff4e6a;text-decoration: none;font-size: 14px;transition: opacity 0.3s ease;}
.userbox .view-more:hover{opacity: 0.8;}
.userbox .history-comics-grid{display: grid;grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));gap: 20px;}
.userbox .history-comic-item{display: flex;flex-direction: column;transition: transform 0.3s ease;}
.userbox .history-comic-item:hover{transform: translateY(-3px);}
.userbox .comic-cover{position: relative;margin-bottom: 10px;border-radius: 4px;overflow: hidden;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.userbox .comic-cover img{width: 100%;height: auto;display: block;transition: transform 0.3s ease;}
.userbox .comic-cover:hover img{transform: scale(1.05);}
.userbox .reading-progress{position: absolute;bottom: 0;left: 0;right: 0;background: rgba(0, 0, 0, 0.7);padding: 8px 10px;display: flex;align-items: center;justify-content: space-between;}
.userbox .progress-bar{flex: 1;height: 4px;background-color: rgba(255, 255, 255, 0.3);border-radius: 2px;margin-right: 8px;overflow: hidden;}
.userbox .progress-fill{height: 100%;background-color: #ff4e6a;border-radius: 2px;}
.userbox .progress-text{color: #fff;font-size: 12px;font-weight: bold;}
.userbox .comic-info{flex: 1;}
.userbox .comic-title{display: block;font-size: 16px;font-weight: 500;color: #333;text-decoration: none;margin-bottom: 5px;transition: color 0.3s ease;line-height: 1.4;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.userbox .comic-title:hover{color: #ff4e6a;}
.userbox .comic-chapter{font-size: 13px;color: #666;margin-bottom: 3px;}
.userbox .read-time{font-size: 12px;color: #999;}
/* 响应式设计 */
@media (max-width: 768px) {
    .userbox .user-info-section{flex-direction: column;text-align: center;}
    .userbox .user-avatar{margin-right: 0;margin-bottom: 20px;}
    .userbox .user-stats{margin-left: 0;margin-top: 20px;justify-content: center;}
    .userbox .stat-item{margin: 0 15px 10px 15px;}
    .userbox .user-nav ul{flex-direction: column;align-items: center;}
    .userbox .user-nav li{margin: 5px 0;}
    .userbox .quick-actions-grid{grid-template-columns: repeat(3, 1fr);}
    .userbox .history-comics-grid{grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 480px) {
    .userbox .quick-actions-grid{grid-template-columns: repeat(2, 1fr);}
    .userbox .history-comics-grid{grid-template-columns: 1fr;}
}
/* 阅读记录页面专用样式 */
/* 主要内容区域样式 */
.userbox .reading-history-container {background: #ffffff;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);padding: 20px;margin: 20px 0;}
/* 页面标题和操作区域 */
.userbox .page-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 15px;border-bottom: 1px solid #eee;}
.userbox .page-title {font-size: 24px;font-weight: 600;color: #333;margin: 0;}
.userbox .clear-history-btn {background-color: #ff4e6a;color: white;border: none;padding: 8px 16px;border-radius: 4px;cursor: pointer;font-size: 14px;transition: all 0.3s ease;}
.userbox .clear-history-btn:hover {background-color: #ff8c00;transform: translateY(-1px);}
/* 阅读记录列表样式 */
.userbox .reading-list {margin-bottom: 20px;}
.userbox .reading-item {display: flex;justify-content: space-between;align-items: center;padding: 15px 0;border-bottom: 1px solid #f0f0f0;transition: all 0.3s ease;}
.userbox .reading-item:hover {background-color: #fafafa;padding-left: 10px;padding-right: 10px;}
.userbox .reading-item:last-child {border-bottom: none;}
.userbox .comic-info {display: flex;align-items: center;flex: 1;}
.userbox .comic-cover {width: 80px;height: 120px;margin-right: 15px;overflow: hidden;border-radius: 4px;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);flex-shrink: 0;}
.userbox .comic-cover img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.userbox .comic-cover:hover img {transform: scale(1.05);}
.userbox .comic-details {flex: 1;}
.userbox .comic-title {font-size: 18px;font-weight: 600;color: #333;margin: 0 0 8px 0;transition: color 0.3s ease;}
.userbox .comic-title:hover {color: #ff4e6a;}
.userbox .comic-author {font-size: 14px;color: #666;margin: 0 0 6px 0;}
.userbox .comic-chapter {font-size: 14px;color: #444;margin: 0 0 6px 0;}
.userbox .read-time {font-size: 12px;color: #999;margin: 0;}
.userbox .action-buttons {margin-left: 20px;}
.userbox .continue-reading {background-color: #2e7ec8;color: white;border: none;padding: 8px 20px;border-radius: 4px;cursor: pointer;font-size: 14px;transition: all 0.3s ease;}
.userbox .continue-reading:hover {background-color: #3498db;transform: translateY(-1px);box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);}
/* 分页控件样式 */
.userbox .pagination {display: flex;justify-content: space-between;align-items: center;padding-top: 20px;border-top: 1px solid #eee;}
.userbox .pagination-info {display: flex;align-items: center;font-size: 14px;color: #666;}
.userbox .pagination-info select {margin: 0 5px;padding: 4px 8px;border: 1px solid #ddd;border-radius: 3px;}
.userbox .pagination-controls {display: flex;align-items: center;}
.userbox .page-btn {padding: 6px 12px;margin: 0 5px;border: 1px solid #ddd;background-color: #fff;color: #333;cursor: pointer;border-radius: 3px;transition: all 0.3s ease;}
.userbox .page-btn:hover:not(:disabled) {background-color: #f5f5f5;border-color: #ccc;}
.userbox .page-btn:disabled {cursor: not-allowed;opacity: 0.5;}
.userbox .page-numbers {display: flex;align-items: center;margin: 0 10px;}
.userbox .page-number {display: inline-block;padding: 6px 10px;margin: 0 3px;cursor: pointer;border-radius: 3px;transition: all 0.3s ease;}
.userbox .page-number:hover {background-color: #f5f5f5;}
.userbox .page-number.active {background-color: #ff4e6a;color: white;}
.userbox .page-jump {display: flex;align-items: center;margin-left: 15px;font-size: 14px;}
.userbox .page-jump input {width: 50px;padding: 4px 8px;margin: 0 5px;border: 1px solid #ddd;border-radius: 3px;text-align: center;}
.userbox .jump-btn {padding: 4px 10px;margin-left: 5px;background-color: #f0f0f0;border: 1px solid #ddd;border-radius: 3px;cursor: pointer;transition: all 0.3s ease;}
.userbox .jump-btn:hover {background-color: #e0e0e0;}
/* 空状态样式 */
.userbox .empty-state {text-align: center;padding: 60px 20px;color: #999;}
.userbox .empty-icon {font-size: 64px;margin-bottom: 20px;}
.userbox .empty-text {font-size: 18px;margin-bottom: 20px;}
.userbox .browse-comics {display: inline-block;padding: 10px 20px;background-color: #ff4e6a;color: white;text-decoration: none;border-radius: 4px;transition: all 0.3s ease;}
.userbox .browse-comics:hover {background-color: #ff8c00;transform: translateY(-1px);}
/* 响应式设计 */
@media (max-width: 768px) {
    .userbox .reading-history-container {padding: 15px;margin: 10px 0;}
    .userbox .page-header {flex-direction: column;align-items: flex-start;}
    .userbox .page-title {margin-bottom: 10px;}
    .userbox .reading-item {flex-direction: column;align-items: flex-start;}
    .userbox .comic-info {width: 100%;margin-bottom: 10px;}
    .userbox .action-buttons {margin-left: 95px;}
    .userbox .pagination {flex-direction: column;align-items: flex-start;}
    .userbox .pagination-info {margin-bottom: 15px;}
    .userbox .pagination-controls {flex-wrap: wrap;}
    .userbox .page-jump {margin-top: 10px;margin-left: 0;}
}
@media (max-width: 480px) {
    .userbox .comic-cover {width: 70px;height: 105px;}
    .userbox .comic-title {font-size: 16px;}
    .userbox .comic-author,
    .userbox .comic-chapter {font-size: 13px;}
    .userbox .action-buttons {margin-left: 85px;}
    .userbox .continue-reading {padding: 6px 15px;font-size: 13px;}
}
/* 订单区域 */
.userbox .order-section {background-color: #fff;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);padding: 20px;margin-bottom: 30px;}
/* 订单表格 */
.userbox .order-table-container {overflow-x: auto;margin-bottom: 20px;}
.userbox .order-table {width: 100%;border-collapse: collapse;font-size: 14px;}
.userbox .order-table th {background-color: #f5f5f5;padding: 12px;text-align: left;font-weight: 500;color: #666;border-bottom: 2px solid #e0e0e0;}
.userbox .order-table td {padding: 12px;border-bottom: 1px solid #f0f0f0;color: #333;}
.userbox .order-table tr:hover {background-color: #f9f9f9;}
.userbox .order-item {transition: background-color 0.3s ease;}
/* 订单标题 */
.userbox .order-title {color: #333;text-decoration: none;font-weight: 500;transition: color 0.3s ease;}
.userbox .order-title:hover {color: #ff4e6a;}
/* 价格样式 */
.userbox .order-price {font-weight: bold;color: #ff4d4f;}
/* 订单状态 */
.userbox .order-status {padding: 4px 8px;border-radius: 12px;font-size: 12px;font-weight: 500;}
.userbox .order-status.completed {background-color: #f6ffed;color: #52c41a;border: 1px solid #b7eb8f;}
.userbox .order-status.processing {background-color: #fffbe6;color: #faad14;border: 1px solid #ffe58f;}
.userbox .order-status.cancelled {background-color: #f5f5f5;color: #999;border: 1px solid #d9d9d9;}
/* 操作按钮 */
.userbox .action-btn {color: #1890ff;text-decoration: none;font-size: 14px;transition: color 0.3s ease;}
.userbox .action-btn:hover {color: #40a9ff;text-decoration: underline;}
/* 响应式设计 */
@media (max-width: 768px) {
    .userbox .user-nav ul {flex-wrap: wrap;}
    .userbox .user-nav li {flex: 0 0 50%;}
    .userbox .filter-buttons {display: block;margin-top: 10px;}
    .userbox .filter-btn {margin-bottom: 8px;}
    .userbox .pagination {flex-direction: column;align-items: stretch;}
    .userbox .pagination-info,.userbox .pagination-controls,.userbox .pagination-jump {margin-bottom: 15px;text-align: center;}
    .userbox .pagination-controls {justify-content: center;}
    .userbox .order-table-container {font-size: 12px;}
    .userbox .order-table th,.userbox .order-table td {padding: 8px;}
}
@media (max-width: 480px) {
    .userbox .user-nav li {flex: 0 0 100%;}
    .userbox .page-number {width: 28px;height: 28px;font-size: 12px;}
    .userbox .page-btn {padding: 6px 12px;font-size: 12px;}
}
/* 加载状态 */
.userbox .loading {text-align: center;padding: 40px 0;color: #666;}
/* 空状态 */
.userbox .empty-state {text-align: center;padding: 60px 0;color: #999;}
.userbox .empty-state p {margin: 10px 0;font-size: 14px;}
.userbox .profile-section {margin: 30px 0;background-color: #fff;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);padding: 30px;}
/* 标题样式 */
.userbox .profile-section .section-title {margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #ff4e6a;}
.userbox .profile-section .section-title h2 {font-size: 24px;color: #333;margin: 0;}
/* 表单容器 */
.userbox .profile-form-container {max-width: 800px;}
/* 表单样式 */
.userbox .profile-form {display: flex;flex-direction: column;gap: 20px;}
/* 表单组样式 */
.userbox .form-group {display: flex;flex-direction: column;gap: 8px;}
.userbox .form-group label {font-size: 14px;color: #666;font-weight: 500;}
.userbox .form-group input,
.userbox .form-group textarea {padding: 12px 15px;border: 1px solid #ddd;border-radius: 4px;font-size: 14px;transition: border-color 0.3s ease;}
.userbox .form-group input:focus,
.userbox .form-group textarea:focus {outline: none;border-color: #ff4e6a;box-shadow: 0 0 0 2px rgba(255,78,106, 0.1);}
.userbox .form-group textarea {resize: vertical;min-height: 100px;}
/* 头像上传区域样式 */
.userbox .avatar-group {display: flex;align-items: center;gap: 20px;margin-bottom: 20px;}
.userbox .avatar-group label {margin: 0;min-width: 40px;}
.userbox .avatar-upload {display: flex;flex-direction: column;align-items: center;gap: 10px;}
.userbox .avatar-preview {width: 120px;height: 120px;border-radius: 50%;overflow: hidden;border: 2px solid #eee;cursor: pointer;transition: border-color 0.3s ease;}
.userbox .avatar-preview:hover {border-color: #ff4e6a;}
.userbox .avatar-preview img {width: 100%;height: 100%;object-fit: cover;}
.userbox #avatar {display: none;}
.userbox .upload-tip {font-size: 12px;color: #999;cursor: pointer;}
.userbox .upload-tip:hover {color: #ff4e6a;}
/* 错误信息样式 */
.userbox .error-message {font-size: 12px;color: #ff4d4f;min-height: 16px;}
/* 表单操作区域样式 */
.userbox .form-actions {display: flex;align-items: center;gap: 20px;margin-top: 30px;}
/* 提交按钮样式 */
.userbox .submit-btn {padding: 12px 30px;background-color: #ff4e6a;color: white;border: none;border-radius: 4px;font-size: 16px;cursor: pointer;transition: background-color 0.3s ease;}
.userbox .submit-btn:hover {background-color: #ff8c38;}
.userbox .submit-btn:active {background-color: #e55c00;}
/* 修改密码链接样式 */
.userbox .password-link {color: #ff4e6a;text-decoration: none;font-size: 14px;transition: color 0.3s ease;}
.userbox .password-link:hover {color: #ff8c38;text-decoration: underline;}
/* 响应式设计 */
@media (max-width: 768px) {
    .userbox .profile-section {padding: 20px;margin: 20px 0;}
    .userbox .avatar-group {flex-direction: column;align-items: flex-start;}
    .userbox .form-actions {flex-direction: column;align-items: stretch;gap: 15px;}
    .userbox .submit-btn {width: 100%;text-align: center;}
    .userbox .password-link {text-align: center;}
}
/* 动画效果 */
@keyframes fadeIn {
    from {opacity: 0;transform: translateY(10px);}
    to {opacity: 1;transform: translateY(0);}
}
.userbox .form-group {animation: fadeIn 0.3s ease-out;}
/* 表单元素的聚焦效果增强 */
.userbox .form-group input:focus + .error-message,
.userbox .form-group textarea:focus + .error-message {opacity: 0;}
/* 必填字段星号样式 */
.userbox .form-group label::after {content: attr(data-required);color: #ff4d4f;margin-left: 4px;}
/* 购买记录页面样式 */
/* 主要购买区域容器 */
.comicbox .purchase-container {padding: 20px 0;}
/* 页面标题 */
.comicbox .page-title {font-size: 24px;font-weight: 600;color: #333;margin-bottom: 20px;border-bottom: 2px solid #e0e0e0;padding-bottom: 10px;}
/* 主内容区域容器 */
.comicbox .comic-main-content {max-width: 1200px;margin: 20px auto;padding: 0 20px;}
/* 漫画基本信息区域 */
.comicbox .comic-info-section {background: #fff;border-radius: 8px;padding: 30px;margin-bottom: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.comicbox .comic-info-content {display: flex;gap: 30px;}
/* 封面样式 */
.comicbox .comic-cover-large {position: relative;width: 240px;flex-shrink: 0;}
.comicbox .cover-img {width: 100%;height: auto;border-radius: 6px;box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);transition: transform 0.3s ease;}
.comicbox .cover-img:hover {transform: scale(1.02);}
.comicbox .comic-status {position: absolute;top: 10px;right: 10px;padding: 4px 12px;border-radius: 12px;font-size: 12px;font-weight: 500;}
.comicbox .comic-status.ongoing {background: #ff6b6b;color: white;}
.comicbox .comic-status.completed {background: #48dbfb;color: white;}
/* 漫画详情信息 */
.comicbox .comic-details {flex: 1;}
.comicbox .comic-title-main {font-size: 32px;font-weight: 700;color: #2c3e50;margin-bottom: 20px;line-height: 1.3;}
.comicbox .comic-meta {display: flex;flex-wrap: wrap;gap: 20px;margin-bottom: 20px;}
.comicbox .meta-item {display: flex;align-items: center;}
.comicbox .meta-label {font-weight: 500;color: #666;margin-right: 8px;}
.comicbox .meta-value {color: #333;}
/* 评分样式 */
.comicbox .comic-rating {display: flex;align-items: center;gap: 15px;margin-bottom: 20px;padding: 0 15px;background: #f8f9fa;border-radius: 6px;}
.comicbox .rating-score {font-size: 36px;font-weight: 700;color: #ff6b6b;line-height: 1;}
.comicbox .rating-stars {font-size: 20px;color: #ffd93d;letter-spacing: 2px;}
.comicbox .rating-count {font-size: 14px;color: #666;}
/* 标签样式 */
.comicbox .comic-tags {display: flex;flex-wrap: wrap;gap: 10px;margin-bottom: 20px;}.comic-tags a{padding: 6px 16px;background: #e9ecef;border-radius: 16px;font-size: 14px;color: #495057;transition: all 0.3s ease;} 
.comicbox .tag {padding: 6px 16px;background: #e9ecef;border-radius: 16px;font-size: 14px;color: #495057;transition: all 0.3s ease;}
.comicbox .tag:hover {background: #dee2e6;color: #343a40;}
/* 更新信息 */
.comicbox .comic-update-info {display: flex;flex-wrap: wrap;gap: 20px;margin-bottom: 25px;font-size: 14px;color: #666;}
/* 操作按钮 */
.comicbox .comic-actions {display: flex;gap: 15px;flex-wrap: wrap;}
.comicbox .btn {display: inline-flex;align-items: center;justify-content: center;padding: 12px 24px;border: none;border-radius: 6px;font-size: 16px;font-weight: 500;cursor: pointer;transition: all 0.3s ease;text-decoration: none;gap: 8px;}
.comicbox .btn-primary {background: #ff6b6b;color: white;}
.comicbox .btn-primary:hover {background: #ee5253;transform: translateY(-1px);box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);}
.comicbox .btn-secondary {background: #feca57;color: #2c3e50;}
.comicbox .btn-secondary.collected {background: #e1e1e1;color: #999;}
.comicbox .btn-secondary:hover {background: #ff9ff3;transform: translateY(-1px);box-shadow: 0 4px 12px rgba(254, 202, 87, 0.3);}
.comicbox .btn-secondary.collected:hover  {background: #d5d5d5;color: #595959;box-shadow: 0 4px 12px rgba(254, 202, 87, 0.3);}
.comicbox .btn-outline {background: transparent;color: #48dbfb;border: 2px solid #48dbfb;}
.comicbox .btn-outline:hover {background: #48dbfb;color: white;transform: translateY(-1px);box-shadow: 0 4px 12px rgba(72, 219, 251, 0.3);}
/* 漫画描述区域 */
.comicbox .comic-desc-section {background: #fff;border-radius: 8px;padding: 30px;margin-bottom: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.comicbox .section-title {font-size: 24px;font-weight: 600;color: #2c3e50;margin-bottom: 20px;padding-bottom: 10px;border-bottom: 2px solid #e9ecef;position: relative;}
.comicbox .section-title::after {content: '';position: absolute;bottom: -2px;left: 0;width: 60px;height: 2px;background: #ff6b6b;}
.comicbox .description-content {position: relative;}
.comicbox .description-text {font-size: 16px;line-height: 1.8;color: #495057;padding-top: 20px;}
.comicbox .description-text p {margin-bottom: 15px;}
.comicbox .description-text p:last-child {margin-bottom: 0;}
.comicbox .btn-toggle-description {margin-top: 15px;background: none;border: 1px solid #e9ecef;border-radius: 4px;padding: 8px 16px;color: #666;cursor: pointer;font-size: 14px;display: flex;align-items: center;gap: 5px;transition: all 0.3s ease;}
.comicbox .btn-toggle-description:hover {color: #ff6b6b;border-color: #ff6b6b;}
.comicbox .toggle-icon {font-size: 12px;transition: transform 0.3s ease;}
.comicbox .description-text.expanded + .btn-toggle-description .toggle-icon {transform: rotate(180deg);}
/* 章节列表区域 */
.comicbox .chapters-section {background: #fff;border-radius: 8px;padding: 30px;margin-bottom: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.comicbox .chapters-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;flex-wrap: wrap;gap: 15px;}
.comicbox .chapters-controls {display: flex;align-items: center;}
.comicbox .sort-controls {display: flex;gap: 10px;background: #f8f9fa;padding: 4px;border-radius: 6px;}
.comicbox .btn-sort {padding: 8px 20px;border: none;background: transparent;color: #666;cursor: pointer;border-radius: 4px;font-size: 14px;transition: all 0.3s ease;}
.comicbox .btn-sort:hover {color: #ff6b6b;}
.comicbox .btn-sort-active {background: #ff6b6b;color: white;}
.comicbox .btn-sort-active:hover {background: #ee5253;color: white;}
/* 章节列表 */
.comicbox .chapters-list {display: grid;grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));gap: 10px;}
.comicbox .chapter-item {display: flex;justify-content: space-between;align-items: center;padding: 15px 20px;border: 1px solid #e9ecef;border-radius: 6px;text-decoration: none;color: #333;transition: all 0.3s ease;}
.comicbox .chapter-item:hover {background: #f8f9fa;border-color: #ff6b6b;transform: translateX(5px);}
.comicbox .chapter-title {font-weight: 500;flex: 1;}
.comicbox .chapter-extra {display: flex;align-items: center;gap: 10px;font-size: 14px;}
.comicbox .chapter-tag {padding: 2px 8px;border-radius: 3px;font-size: 12px;font-weight: 500;}
.comicbox .tag-vip {background: #ffeaa7;color: #d63031;}
.comicbox .tag-paid {background: #fdcb6e;color: #8e44ad;}
.comicbox .chapter-date {color: #95a5a6;font-size: 12px;}
/* 相关漫画推荐区域 */
.comicbox .related-comics-section {background: #fff;border-radius: 8px;padding: 30px;margin-bottom: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.comicbox .comics-recommend-list {display: grid;grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));gap: 20px;}
.comicbox .comic-recommend-item {text-decoration: none;transition: all 0.3s ease;display: block;}
.comicbox .comic-recommend-item:hover {transform: translateY(-5px);}
.comicbox .comic-recommend-cover {position: relative;margin-bottom: 12px;overflow: hidden;border-radius: 6px;}
.comicbox .recommend-cover-img {width: 100%;height: 250px;object-fit: cover;transition: transform 0.3s ease;display: block;}
.comicbox .comic-recommend-item:hover .recommend-cover-img {transform: scale(1.05);}
.comicbox .comic-recommend-info {padding: 0 5px;}
.comicbox .comic-recommend-title {font-size: 16px;font-weight: 600;color: #2c3e50;margin-bottom: 6px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.comicbox .comic-recommend-author {font-size: 14px;color: #7f8c8d;margin-bottom: 6px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.comicbox .comic-recommend-rating {display: flex;align-items: center;gap: 5px;}
.comicbox .rating-score.small {font-size: 14px;font-weight: 600;color: #ff6b6b;}
.comicbox .rating-stars.small {font-size: 12px;color: #ffd93d;letter-spacing: 1px;}
/* 收藏按钮激活状态 */
.comicbox .btn-collect.collected {background: #ff6b6b;color: white;}
.comicbox .btn-collect.collected .icon-collect {color: #feca57;}
/* 章节列表倒序状态 */
.comicbox .chapters-list.reversed {display: flex;flex-direction: column;}
.comicbox .chapters-list.reversed .chapter-item {order: -1;}
/* 响应式图片基础设置 */
.comicbox img {max-width: 100%;height: auto;display: block;}
/* 响应式设计 */
@media (max-width: 992px) {
    .comicbox .comic-main-content {padding: 0 15px;}
    .comicbox .comic-info-content {flex-direction: column;align-items: center;text-align: center;}
    .comicbox .comic-cover-large {width: 200px;max-width: 80%;}
    .comicbox .comic-meta {justify-content: center;}
    .comicbox .comic-rating {justify-content: center;}
    .comicbox .comic-tags {justify-content: center;}
    .comicbox .comic-update-info {justify-content: center;}
    .comicbox .comic-actions {justify-content: center;gap: 12px;}
    .comicbox .chapters-header {flex-direction: column;align-items: stretch;text-align: center;}
    .comicbox .chapters-controls {justify-content: center;}
    .comicbox .chapters-list {grid-template-columns: 1fr;}
    .comicbox .comics-recommend-list {grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));}
    .comicbox .recommend-cover-img {height: 200px;object-fit: cover;}
}
@media (max-width: 768px) {
    .comicbox .comic-info-section,
    .comicbox .comic-desc-section,
    .comicbox .chapters-section,
    .comicbox .related-comics-section {padding: 20px;}
    .comicbox .comic-title-main {font-size: 28px;}
    .comicbox .rating-score {font-size: 30px;}
    .comicbox .section-title {font-size: 20px;}
    .comicbox .comic-meta {gap: 15px;}
    .comicbox .comic-update-info {gap: 15px;}
    .comicbox .btn {padding: 10px 20px;font-size: 14px;}
    .comicbox .comics-recommend-list {grid-template-columns: repeat(3, 1fr);gap: 15px;}
    .comicbox .recommend-cover-img {height: 180px;}
}
@media (max-width: 480px) {
    .comicbox .comic-main-content {margin: 10px auto;padding: 0 10px;}
    .comicbox .comic-info-section,
    .comicbox .comic-desc-section,
    .comicbox .chapters-section,
    .comicbox .related-comics-section {padding: 15px;}
    .comicbox .comic-title-main {font-size: 24px;}
    .comicbox .comic-cover-large {width: 160px;}
    .comicbox .comic-meta {flex-direction: column;gap: 10px;align-items: center;}
    .comicbox .comic-rating {flex-direction: column;gap: 10px;}
    .comicbox .rating-score {font-size: 28px;}
    .comicbox .comic-tags {gap: 8px;}
    .comicbox .tag {padding: 5px 12px;font-size: 12px;}
    .comicbox .comic-update-info {flex-direction: column;gap: 10px;}
    .comicbox .comic-actions {gap: 10px;}
    .comicbox .btn {padding: 10px 16px;font-size: 14px;flex: 1;min-width: 120px;}
    .comicbox .description-text {font-size: 14px;}
    .comicbox .chapters-list {gap: 8px;}
    .comicbox .chapter-item {padding: 12px 15px;flex-direction: column;align-items: flex-start;gap: 8px;}
    .comicbox .chapter-extra {width: 100%;justify-content: space-between;}
    .comicbox .comics-recommend-list {grid-template-columns: repeat(2, 1fr);gap: 10px;}
    .comicbox .recommend-cover-img {height: 160px;}
    .comicbox .comic-recommend-title {font-size: 14px;}
    .comicbox .comic-recommend-author {font-size: 12px;}
}
/* 主内容区域 */
.chapterbox .reader-main-content {max-width: 1200px;margin: 0 auto;padding: 20px;}
/* 阅读控制栏 */
.chapterbox .reader-controls {background: #fff;border-radius: 8px;padding: 15px 20px;margin-bottom: 20px;display: flex;justify-content: space-between;align-items: center;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);position: sticky;top: 0;z-index: 100;}
/* 夜间模式下的控制栏 */
.chapterbox .dark-mode .reader-controls {background: #2c2c2c;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);}
/* 控制栏左右部分 */
.chapterbox .control-left,
.chapterbox .control-right {display: flex;gap: 10px;}
/* 控制栏中间部分 */
.chapterbox .control-center {flex: 1;text-align: center;margin: 0 20px;}
/* 章节标题 */
.chapterbox .chapter-title {font-size: 18px;font-weight: 600;color: #2c3e50;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.chapterbox .dark-mode .chapter-title {color: #e0e0e0;}
/* 控制按钮 */
.chapterbox .control-btn {background: #f8f9fa;border: 1px solid #dee2e6;border-radius: 6px;padding: 8px 16px;font-size: 14px;color: #495057;cursor: pointer;transition: all 0.3s ease;display: flex;align-items: center;gap: 6px;}
.chapterbox .control-btn:hover {background: #e9ecef;border-color: #adb5bd;transform: translateY(-1px);}
.chapterbox .control-btn:active {transform: translateY(0);}
/* 图标样式 */
.chapterbox .control-btn .icon {font-size: 16px;}
/* 响应式控制栏 */
@media (max-width: 768px) {
    .chapterbox .reader-controls {flex-wrap: wrap;gap: 15px;}
    .chapterbox .control-left,
    .chapterbox .control-right {flex: 1;justify-content: center;}
    .chapterbox .control-center {order: -1;width: 100%;margin: 0;}
    .chapterbox .chapter-title {font-size: 16px;}
    .chapterbox .control-btn {padding: 6px 12px;font-size: 13px;}
}
/* 移动端下的简化控制栏 */
@media (max-width: 480px) {
    .chapterbox .reader-controls {padding: 10px;} 
    .chapterbox .control-left,
    .chapterbox .control-right {flex-direction: column;gap: 8px;}
    .chapterbox .chapter-title {font-size: 14px;}
    .chapterbox .control-btn {font-size: 12px;padding: 5px 10px;}
}
/* 漫画内容区域 */
.chapterbox .comic-content-area {background: #fff;border-radius: 8px;padding: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);margin-bottom: 20px;}
/* 夜间模式下的漫画内容区域 */
.chapterbox .dark-mode .comic-content-area {background: #2c2c2c;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);}
/* 漫画图片容器 */
.chapterbox .comic-images {display: flex;flex-direction: column;align-items: center;}
/* 漫画图片样式 */
.chapterbox .comic-image {max-width: 100%;height: auto;border-radius: 4px;box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);transition: transform 0.2s ease;}
.chapterbox .comic-image:hover {transform: scale(1.01);}
/* 加载占位图 */
.chapterbox .image-loading {display: flex;align-items: center;justify-content: center;min-height: 400px;background: #f8f9fa;border-radius: 4px;color: #6c757d;font-size: 14px;}
/* 图片错误提示 */
.chapterbox .image-error {display: flex;align-items: center;justify-content: center;min-height: 400px;background: #f8d7da;border-radius: 4px;color: #721c24;font-size: 14px;border: 1px solid #f5c6cb;}
/* 响应式漫画内容 */
@media (max-width: 768px) {
    .chapterbox .comic-content-area {padding: 15px;}
    .chapterbox .image-loading,
    .chapterbox .image-error {min-height: 300px;font-size: 12px;}
}
@media (max-width: 480px) {
    .chapterbox .comic-content-area {padding: 10px;}
    .chapterbox .image-loading,
    .chapterbox .image-error {min-height: 250px;font-size: 12px;}
}
/* 弹窗基础样式 */
.chapterbox .modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background: rgba(0, 0, 0, 0.7);z-index: 1000;align-items: center;justify-content: center;}
.chapterbox .modal-content {background: #fff;border-radius: 12px;width: 100%;max-width: 500px;box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);overflow: hidden;animation: modalFadeIn 0.3s ease-out;}
@keyframes modalFadeIn {
    from {opacity: 0;transform: scale(0.9) translateY(-20px);}
    to {opacity: 1;transform: scale(1) translateY(0);}
}
/* 弹窗头部 */
.chapterbox .modal-header {display: flex;justify-content: space-between;align-items: center;padding: 20px 24px;border-bottom: 1px solid #e9ecef;}
.chapterbox .modal-header h3 {margin: 0;font-size: 20px;font-weight: 600;color: #2c3e50;}
/* 关闭按钮 */
.chapterbox .close-modal {font-size: 28px;font-weight: bold;color: #6c757d;cursor: pointer;transition: all 0.3s ease;line-height: 1;padding: 0;margin: 0;}
.chapterbox .close-modal:hover {color: #ff6b6b;transform: rotate(90deg);}
/* 弹窗内容 */
.chapterbox .modal-body {padding: 24px;}
/* VIP弹窗样式 */
.chapterbox .vip-info {display: flex;align-items: center;gap: 20px;margin-bottom: 24px;padding: 20px;background: #fff3cd;border-radius: 8px;border: 1px solid #ffeaa7;}
.chapterbox .vip-icon {font-size: 48px;animation: vipPulse 2s infinite;}
@keyframes vipPulse {
    0% {transform: scale(1);}
    50% {transform: scale(1.1);}
    100% {transform: scale(1);}
}
.chapterbox .vip-text p {margin: 8px 0;color: #856404;font-size: 16px;}
.chapterbox .vip-text p:first-child {font-weight: 600;}
/* VIP按钮 */
.chapterbox .btn-vip {width: 100%;padding: 14px;background: linear-gradient(135deg, #ff6b6b, #ee5253);color: white;border: none;border-radius: 8px;font-size: 18px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;text-transform: uppercase;letter-spacing: 1px;}
.chapterbox .btn-vip:hover {background: linear-gradient(135deg, #ee5253, #ff6b6b);transform: translateY(-2px);box-shadow: 0 4px 12px rgba(238, 82, 83, 0.3);}
.chapterbox .btn-vip:active {transform: translateY(0);}
/* 金币收费弹窗样式 */
.chapterbox .coin-info {display: flex;align-items: center;gap: 20px;margin-bottom: 24px;padding: 20px;background: #e3f2fd;border-radius: 8px;border: 1px solid #90caf9;}
.chapterbox .coin-icon {font-size: 48px;animation: coinSpin 3s ease-in-out infinite;}
@keyframes coinSpin {
    0%, 100% {transform: rotateY(0deg);}
    50% {transform: rotateY(180deg);}
}
.chapterbox .coin-text p {margin: 8px 0;color: #1565c0;font-size: 16px;}
.chapterbox .coin-text p:first-child {font-weight: 600;}
.chapterbox .current-coins {margin-bottom: 20px;text-align: center;}
.chapterbox .current-coins .coin-amount {font-size: 24px;font-weight: 600;color: #ffb300;margin-left: 8px;}
.chapterbox .price-info {margin-bottom: 24px;text-align: center;}
.chapterbox .price-info .chapter-price {font-size: 28px;font-weight: 700;color: #e53935;margin-left: 8px;}
/* 按钮组 */
.chapterbox .modal-actions {display: flex;gap: 12px;}
.chapterbox .btn-recharge,
.chapterbox .btn-buy {flex: 1;padding: 14px;border: none;border-radius: 8px;font-size: 16px;font-weight: 600;cursor: pointer;transition: all 0.3s ease;text-transform: uppercase;letter-spacing: 1px;}
.chapterbox .btn-recharge {background: linear-gradient(135deg, #4fc3f7, #29b6f6);color: white;}
.chapterbox .btn-recharge:hover {background: linear-gradient(135deg, #29b6f6, #4fc3f7);transform: translateY(-2px);box-shadow: 0 4px 12px rgba(33, 150, 243, 0.3);}
.chapterbox .btn-buy {background: linear-gradient(135deg, #ffb300, #ffa000);color: white;}
.chapterbox .btn-buy:hover {background: linear-gradient(135deg, #ffa000, #ffb300);transform: translateY(-2px);box-shadow: 0 4px 12px rgba(255, 160, 0, 0.3);}
.chapterbox .btn-recharge:active,
.chapterbox .btn-buy:active {transform: translateY(0);}