/* 漫画网站基础样式文件 */
/* 项目规范：页面宽度1200px，主色调#FFD806，导航栏颜色#282828 */
/* 重置样式 */
*{margin: 0;padding: 0;box-sizing: border-box;}
body{font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;color: #333;background-color: #f5f5f5;line-height: 1.6;}
h1, h2, h3, h4, h5, h6{font-family: 'Arial', sans-serif;font-weight: 600;}
h1{font-size: 32px;color: #282828;}
h2{font-size: 28px;color: #282828;}
h3{font-size: 22px;color: #282828;}
.hide{
    display: none;
}
/* 链接通用样式 */
a{transition: all 0.3s ease;}/* 容器样式 */
.container{width: 1200px;margin: 0 auto;padding: 0 20px;}
.comic-item:hover{transform: translateY(-5px);}
.comic-item:hover .comic-cover img{transform: scale(1.05);}
.hot-main:hover img{transform: scale(1.05);}
/* 头部样式 */
header.header{background-color: #282828;color: #fff;padding: 20px 0;position: sticky;top: 0;z-index: 1000;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}
header.header .navbar{display: flex;justify-content: space-between;align-items: center;}
header.header .navbar .logo-container .logo{font-size: 28px;font-weight: bold;color: #FFD806;text-decoration: none;font-family: 'Arial', sans-serif;}
header.header .navbar .logo-container .logo a{font-size: 28px;font-weight: bold;color: #FFD806;text-decoration: none;}
/* 导航栏样式 */
header.header .navbar .main-nav .nav-links{display: flex;list-style: none;}
header.header .navbar .main-nav .nav-links .nav-item{margin-left: 35px;}
header.header .navbar .main-nav .nav-links .nav-item .nav-link{color: #fff;text-decoration: none;font-weight: 500;font-size: 16px;transition: color 0.3s ease;padding: 5px 0;position: relative;}
header.header .navbar .main-nav .nav-links .nav-item .nav-link:hover{color: #FFD806;}
header.header .navbar .main-nav .nav-links .nav-item .nav-link.active{color: #FFD806;}
header.header .navbar .main-nav .nav-links .nav-item .nav-link.active::after{content: '';position: absolute;bottom: 0;left: 0;width: 100%;height: 2px;background-color: #FFD806;}
header.header .navbar .main-nav .nav-links .nav-item .app-link{background-color: #FFD806;color: #282828 !important;padding: 5px 15px;border-radius: 20px;font-weight: bold;}
header.header .navbar .main-nav .nav-links .nav-item .app-link:hover{background-color: #e6c300;}
header.header .navbar .user-actions{display: flex;align-items: center;gap: 20px;}
header.header .navbar .user-actions .search-box{display: flex;align-items: center;position: relative;}
header.header .navbar .user-actions .search-box .search-input{width: 200px;padding: 8px 15px;outline: none;border: 1px solid #555;border-radius: 20px;background-color: #444;color: #fff;transition: all 0.3s ease;}
header.header .navbar .user-actions .search-box .search-input:focus{outline: none;border-color: #FFD806;background-color: #555;width: 240px;}
header.header .navbar .user-actions .search-box .search-input::placeholder{color: #aaa;}
header.header .navbar .user-actions .search-box .search-btn{border-radius: 0 20px 20px 0;font-weight: 500;position: absolute;right: 5px;top: 50%;transform: translateY(-50%);background-color: transparent;border: none;color: #fff;cursor: pointer;padding: 5px 10px;}
header.header .navbar .user-actions .search-box .search-btn:hover{background-color: #FFC107;}
header.header .navbar .user-actions .user-entry{display: flex;align-items: center;gap: 10px;margin-left: 20px;}
header.header .navbar .user-actions .user-entry a{color: #fff;text-decoration: none;font-size: 14px;transition: color 0.3s ease;}
header.header .navbar .user-actions .user-entry a:hover{color: #FFD806;}
header.header .navbar .user-actions .user-entry .separator{color: #666;}
/* 页脚样式 */
footer.footer{background-color: #282828;color: #fff;padding: 40px 0;margin-top: 60px;}
footer .footer-content{display: flex;justify-content: space-between;}
footer .footer-content .footer-column{flex: 1;margin-right: 40px;}
footer .footer-content .footer-column h3{font-size: 18px;margin-bottom: 20px;color: #FFD806;}
footer .footer-content .footer-column ul{list-style: none;}
footer .footer-content .footer-column li{margin-bottom: 10px;}
footer .footer-content .footer-column a{color: #999;text-decoration: none;font-size: 14px;transition: color 0.3s;}
footer .footer-content .footer-column a:hover{color: #FFD806;}
footer .copyright{text-align: center;padding-top: 20px;border-top: 1px solid #444;font-size: 12px;color: #999;margin-top: 10px;}
footer .copyright a{font-size: 14px;color: #999;transition: color 0.3s;}
footer .copyright a:hover{color: #FFD806;}
footer .copyright p{font-size: 14px;color: #999;}
.emptybox{display: flex;flex-direction: column;align-content: center;justify-content: center;align-items: center;padding: 40px 0;}
.emptybox img{width: 160px;height: auto;}
.emptybox .text{font-size: 14px;color: #999;padding-top: 20px;}
/* 轮播图样式 */
.carousel-section{margin: 20px 0;}
.carousel-section .carousel-container{position: relative;width: 100%;height: 400px;overflow: hidden;border-radius: 8px;box-shadow: 0 4px 15px rgba(0,0,0,0.1);}
.carousel-section .carousel-container .carousel-slide{position: relative;width: 100%;height: 100%;}
.carousel-section .carousel-container .carousel-slide .carousel-item{position: absolute;width: 100%;height: 100%;opacity: 0;transform: scale(1.05);transition: opacity 0.6s ease-in-out, transform 0.6s ease-in-out;z-index: 1;}
.carousel-section .carousel-container .carousel-slide .carousel-item.active{opacity: 1;transform: scale(1);z-index: 2;}
.carousel-section .carousel-container .carousel-slide .carousel-item img{width: 100%;height: 100%;object-fit: cover;transition: transform 0.8s ease;}
.carousel-section .carousel-container .carousel-slide .carousel-item:hover img{transform: scale(1.02);}
.carousel-section .carousel-container .carousel-slide .carousel-item .carousel-caption{position: absolute;bottom: 0;left: 0;right: 0;background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);color: white;padding: 30px;transform: translateY(10px);opacity: 0;transition: transform 0.4s ease, opacity 0.4s ease;}
.carousel-section .carousel-container .carousel-slide .carousel-item.active .carousel-caption{transform: translateY(0);opacity: 1;transition-delay: 0.2s;}
.carousel-section .carousel-container .carousel-slide .carousel-item .carousel-caption h3{font-size: 24px;margin-bottom: 8px;color: #fff;}
.carousel-section .carousel-container .carousel-slide .carousel-item .carousel-caption p{font-size: 16px;opacity: 0.9;}
.carousel-section .carousel-container .carousel-control{position: absolute;top: 50%;transform: translateY(-50%);background: rgba(0,0,0,0.5);color: white;border: none;width: 40px;height: 40px;border-radius: 50%;cursor: pointer;font-size: 20px;display: flex;align-items: center;justify-content: center;transition: all 0.3s ease;z-index: 10;opacity: 0;}
.carousel-section .carousel-container:hover .carousel-control{opacity: 1;}
.carousel-section .carousel-container .carousel-control:hover{background: rgba(255,216,6,0.8);color: #333;transform: translateY(-50%) scale(1.1);}
.carousel-section .carousel-container .carousel-control:active{transform: translateY(-50%) scale(0.95);}
.carousel-section .carousel-container .carousel-control.prev{left: 20px;transform: translateY(-50%) translateX(-10px);}
.carousel-section .carousel-container:hover .carousel-control.prev{transform: translateY(-50%) translateX(0);}
.carousel-section .carousel-container .carousel-control.next{right: 20px;transform: translateY(-50%) translateX(10px);}
.carousel-section .carousel-container:hover .carousel-control.next{transform: translateY(-50%) translateX(0);}
.carousel-section .carousel-container .carousel-indicators{position: absolute;bottom: 20px;left: 50%;transform: translateX(-50%);display: flex;gap: 8px;z-index: 10;}
.carousel-section .carousel-container .carousel-indicators .indicator{width: 8px;height: 8px;border-radius: 50%;background: rgba(255,255,255,0.5);border: 2px solid transparent;cursor: pointer;transition: all 0.4s ease;padding: 0;}
.carousel-section .carousel-container .carousel-indicators .indicator:hover{background: rgba(255,255,255,0.8);transform: scale(1.2);}
.carousel-section .carousel-container .carousel-indicators .indicator.active{background: #FFD806;width: 28px;border-radius: 4px;border-color: rgba(255,255,255,0.3);transform: scale(1);}
.section-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px;padding-bottom: 10px;border-bottom: 2px solid #e0e0e0;}
.section-header .section-title{display: flex;justify-content: space-between;align-items: center;padding-bottom: 10px;border-bottom: 2px solid #f0f0f0;font-size: 22px;font-weight: bold;color: #282828;margin: 0;}
.section-header .more-link{color: #666;text-decoration: none;font-size: 14px;transition: color 0.3s ease;}
/*推荐漫画区域*/
.recommend-section .recommend-grid{grid-template-columns: repeat(6, 1fr);grid-template-rows: repeat(3, auto);display: grid;gap: 20px;}
.recommend-section .recommend-grid .comic-item{background-color: #fff;border-radius: 8px;overflow: hidden;transition: transform 0.3s ease, box-shadow 0.3s ease;}
.recommend-section .recommend-grid .comic-item a{display: block;text-decoration: none;}
.recommend-section .recommend-grid .comic-item a .comic-cover{box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);border-radius: 8px;width: 100%;position: relative;overflow: hidden;}
.recommend-section .recommend-grid .comic-item a .comic-cover img{object-fit: cover;width: 100%;height: auto;transition: transform 0.3s ease;background-color: rgb(240, 240, 240);}
.recommend-section .recommend-grid .comic-item a .comic-info{text-align: left;padding: 15px;}
.recommend-section .recommend-grid .comic-item a .comic-info .comic-title{margin: 0 0 5px 0;line-height: 1.4;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;font-size: 16px;font-weight: 600;color: #282828;margin-bottom: 8px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.recommend-section .recommend-grid .comic-item a .comic-info .comic-author{margin: 0 0 5px 0;margin-bottom: 5px;font-size: 12px;color: #999;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.recommend-section .recommend-grid .comic-item a .comic-info .comic-update{text-align: right;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 12px;color: #999;}
/*精品区域*/
.hot-section{}
.hot-section .hot-container{display: flex;gap: 20px;}
.hot-section .hot-container .hot-main{flex: 1;position: relative;overflow: hidden;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.hot-section .hot-container .hot-main .hot-main-link{display: block;position: relative;height: 547px;}
.hot-section .hot-container .hot-main .hot-main-link img{object-fit: cover;width: 100%;height: auto;transition: transform 0.3s ease;}
.hot-section .hot-container .hot-main .hot-main-link .hot-main-info{position: absolute;bottom: 0;left: 0;right: 0;padding: 20px;background: linear-gradient(transparent, rgba(0, 0, 0, 0.9));color: #fff;}
.hot-section .hot-container .hot-main .hot-main-link .hot-main-info .hot-main-title{color: #fff;font-size: 20px;font-weight: bold;margin-bottom: 10px;}
.hot-section .hot-container .hot-main .hot-main-link .hot-main-info .hot-main-desc{font-size: 14px;margin-bottom: 10px;line-height: 1.5;}
.hot-section .hot-container .hot-main .hot-main-link .hot-main-info .hot-main-meta{font-size: 12px;display: flex;gap: 15px;}
.hot-section .hot-container .hot-side{flex: 0 0 290px;display: grid;gap: 15px;}
.hot-section .hot-container .hot-side .hot-side-item{background-color: #fff;border-radius: 8px;overflow: hidden;padding: 10px;transition: all 0.3s ease;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);}
.hot-section .hot-container .hot-side .hot-side-item:hover{transform: translateX(5px);box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);}
.hot-section .hot-container .hot-side .hot-side-item a{display: flex;gap: 15px;text-decoration: none;}
.hot-section .hot-container .hot-side .hot-side-item a img{flex: 0 0 80px;width: 80px;height: auto;border-radius: 4px;}
.hot-section .hot-container .hot-side .hot-side-item a .hot-side-info{flex: 1;display: flex;flex-direction: column;justify-content: space-between;}
.hot-section .hot-container .hot-side .hot-side-item a .hot-side-info .hot-side-title{font-size: 14px;font-weight: 600;color: #282828;margin-bottom: 5px;}
.hot-section .hot-container .hot-side .hot-side-item a .hot-side-info .hot-side-update{font-size: 12px;color: #999;}
/*热门漫画*/
.exclusive-section{margin: 40px 0;margin-bottom: 40px;}
.exclusive-section .exclusive-grid{display: grid;grid-template-columns: repeat(5, 1fr);grid-template-rows: repeat(2, auto);gap: 20px;}
.exclusive-section .exclusive-grid .exclusive-item{position: relative;background-color: #fff;border-radius: 8px;overflow: hidden;transition: transform 0.3s ease, box-shadow 0.3s ease;}
.exclusive-section .exclusive-grid .exclusive-item:hover{transform: translateY(-5px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);}
.exclusive-section .exclusive-grid .exclusive-item a{display: block;text-decoration: none;}
.exclusive-section .exclusive-grid .exclusive-item a .exclusive-cover{width: 100%;position: relative;overflow: hidden;}
.exclusive-section .exclusive-grid .exclusive-item a .exclusive-cover img{object-fit: cover;border-radius: 6px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);width: 100%;height: auto;transition: transform 0.3s ease;}
.exclusive-section .exclusive-grid .exclusive-item:hover .exclusive-cover img{transform: scale(1.05);}
.exclusive-section .exclusive-grid .exclusive-item a .exclusive-cover .exclusive-badge{z-index: 5;position: absolute;top: 10px;left: 10px;background: #FFD806;color: #333;font-size: 12px;font-weight: bold;padding: 4px 10px;border-radius: 12px;}
.exclusive-section .exclusive-grid .exclusive-item a .exclusive-info{padding: 15px;}
.exclusive-section .exclusive-grid .exclusive-item a .exclusive-info .exclusive-title{font-size: 16px;font-weight: 600;color: #282828;margin-bottom: 8px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.exclusive-section .exclusive-grid .exclusive-item a .exclusive-info .exclusive-update{font-size: 12px;color: #999;}
/*最新漫画*/
.new-release-section{margin-bottom: 40px;}
.new-release-section .new-release-grid{display: grid;grid-template-columns: repeat(4, 1fr);grid-template-rows: repeat(2, auto);gap: 20px;}
.new-release-section .new-release-grid .new-item{display: flex;gap: 12px;padding: 12px;background: white;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);background-color: #fff;border-radius: 8px;overflow: hidden;transition: transform 0.3s ease, box-shadow 0.3s ease;}
.new-release-section .new-release-grid .new-item:hover{transform: translateY(-5px);box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);}
.new-release-section .new-release-grid .new-item a{display: block;text-decoration: none;}
.new-release-section .new-release-grid .new-item a .new-cover{width: 100%;position: relative;overflow: hidden;}
.new-release-section .new-release-grid .new-item a .new-cover img{object-fit: cover;border-radius: 4px;width: 100%;height: 330px;transition: transform 0.3s ease;}
.new-release-section .new-release-grid .new-item:hover .new-cover img{transform: scale(1.05);}
.new-release-section .new-release-grid .new-item a .new-cover .new-badge{position: absolute;top: 10px;left: 0;background-color: #2196F3;color: #fff;padding: 3px 10px;font-size: 12px;font-weight: bold;border-radius: 0 4px 4px 0;z-index: 5;}
.new-release-section .new-release-grid .new-item a .new-info{padding: 10px 15px;}
.new-release-section .new-release-grid .new-item a .new-info .new-title{font-size: 16px;font-weight: 600;color: #282828;margin-bottom: 8px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.new-release-section .new-release-grid .new-item a .new-info .new-author{font-size: 14px;color: #666;margin-bottom: 5px;}
.new-release-section .new-release-grid .new-item a .new-info .new-update{font-size: 12px;color: #999;}
/*首页排行榜*/
.ranking-section{background-color: #fff;border-radius: 8px;padding: 25px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);}
.ranking-section .ranking-tabs{display: grid;grid-template-columns: repeat(3, 1fr);gap: 20px;}
.ranking-section .ranking-tabs .newcomer-ranking{}
.ranking-section .ranking-tabs .newcomer-ranking .ranking-header{display: flex;justify-content: space-between;align-items: center;margin-bottom: 20px;padding-bottom: 15px;border-bottom: 1px solid #e0e0e0;}
.ranking-section .ranking-tabs .newcomer-ranking .ranking-header .ranking-title{font-size: 18px;font-weight: 600;color: #282828;margin: 0;}
.ranking-section .ranking-tabs .newcomer-ranking .ranking-header .more-link{color: #666;text-decoration: none;font-size: 14px;transition: color 0.3s ease;}
.ranking-section .ranking-tabs .newcomer-ranking .ranking-list{border-radius: 8px;display: flex;flex-direction: column;gap: 15px;}
.ranking-section .ranking-tabs .newcomer-ranking .ranking-list .ranking-item{display: flex;align-items: center;gap: 15px;padding: 10px;border-radius: 8px;transition: background-color 0.3s ease;border-bottom: 1px solid #f5f5f5;}
.ranking-section .ranking-tabs .newcomer-ranking .ranking-list .ranking-item:hover{background-color: #f9f9f9;}
.ranking-section .ranking-tabs .newcomer-ranking .ranking-list .ranking-item:last-child{border-bottom: none;}
.ranking-section .ranking-tabs .newcomer-ranking .ranking-list .ranking-item .rank-num{width: 24px;height: 24px;display: flex;align-items: center;justify-content: center;font-weight: bold;font-size: 14px;color: #666;}
.ranking-section .ranking-tabs .newcomer-ranking .ranking-list .ranking-item.top1 .rank-num{background-color: #FFD700;color: #fff;border-radius: 50%;}
.ranking-section .ranking-tabs .newcomer-ranking .ranking-list .ranking-item.top2 .rank-num{background-color: #C0C0C0;color: #fff;border-radius: 50%;}
.ranking-section .ranking-tabs .newcomer-ranking .ranking-list .ranking-item.top3 .rank-num{background-color: #CD7F32;color: #fff;border-radius: 50%;}
.ranking-section .ranking-tabs .newcomer-ranking .ranking-list .ranking-item .rank-info{display: flex;align-items: center;gap: 15px;text-decoration: none;flex: 1;}
.ranking-section .ranking-tabs .newcomer-ranking .ranking-list .ranking-item .rank-info .rank-cover{flex: 0 0 60px;}
.ranking-section .ranking-tabs .newcomer-ranking .ranking-list .ranking-item .rank-info .rank-cover img{object-fit: cover;width: 100%;height: auto;border-radius: 4px;}
.ranking-section .ranking-tabs .newcomer-ranking .ranking-list .ranking-item .rank-info .rank-content{flex: 1;}
.ranking-section .ranking-tabs .newcomer-ranking .ranking-list .ranking-item .rank-info .rank-content .rank-title{font-size: 14px;font-weight: 600;color: #282828;margin-bottom: 5px;}
.ranking-section .ranking-tabs .newcomer-ranking .ranking-list .ranking-item .rank-info .rank-content .rank-update{font-size: 12px;color: #999;}
/*友情链接*/
.friend-links-section{background: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);}
.friend-links-section .section-title{display: flex;justify-content: space-between;align-items: center;padding-bottom: 10px;border-bottom: 2px solid #f0f0f0;font-size: 22px;font-weight: bold;color: #282828;margin: 0;}
.friend-links-section .friend-links-container{display: flex;flex-wrap: wrap;gap: 15px;padding-top: 15px;}
.friend-links-section .friend-links-container .friend-link{padding: 8px 20px;background: #f8f8f8;color: #666;text-decoration: none;border-radius: 20px;font-size: 14px;transition: all 0.3s;border: 1px solid #e0e0e0;}
.friend-links-section .friend-links-container .friend-link:hover{background: #FFD806;color: #333;border-color: #FFD806;transform: translateY(-2px);box-shadow: 0 2px 8px rgba(255,216,6,0.3);}
/*主内容区域*/
.main-content{min-height: calc(100vh - 200px);padding: 20px 0;}
.category-container{width: 1200px;max-width: 1200px;margin: 0 auto;padding: 0 20px;}
.category-container .filter-section{background-color: #fff;border-radius: 8px;padding: 20px;margin-bottom: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.category-container .filter-section .filter-group{margin-bottom: 15px;}
.category-container .filter-section .filter-group:last-child{margin-bottom: 0;}
.category-container .filter-section .filter-group .filter-title{margin-bottom: 10px;}
.category-container .filter-section .filter-group .filter-options .filter-btn{display: inline-block;padding: 6px 16px;margin-right: 10px;margin-bottom: 10px;border: 1px solid #ddd;border-radius: 20px;background-color: #fff;color: #666;font-size: 14px;cursor: pointer;transition: all 0.3s ease;}
.category-container .filter-section .filter-group .filter-options .filter-btn:hover{border-color: #FFD806;color: #FFD806;}
.category-container .filter-section .filter-group .filter-options .filter-btn.active{background-color: #FFD806;border-color: #FFD806;color: #fff;}
.category-container .category-content-wrapper{display: flex;gap: 20px;}
.category-container .category-content-wrapper .category-main-content{flex: 1;background-color: #fff;border-radius: 8px;padding: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.category-container .category-content-wrapper .category-main-content .sidebar-title{font-size: 18px;font-weight: 600;color: #333;margin: 0 0 15px 0;padding-bottom: 10px;border-bottom: 2px solid #FFD806;}
.category-container .category-content-wrapper .category-main-content .comic-list{display: grid;grid-template-columns: repeat(5, 1fr);gap: 20px;margin-bottom: 20px;}
.category-container .category-content-wrapper .category-main-content .comic-list .comic-item{background-color: #fff;border-radius: 8px;overflow: hidden;transition: transform 0.3s ease, box-shadow 0.3s ease;}
.category-container .category-content-wrapper .category-main-content .comic-list .comic-item:hover{transform: translateY(-5px);}
.category-container .category-content-wrapper .category-main-content .comic-list .comic-item a{display: block;text-decoration: none;}
.category-container .category-content-wrapper .category-main-content .comic-list .comic-item a .comic-cover{box-shadow: 0 2px 8px rgba(0,0,0,0.1);border-radius: 8px;aspect-ratio: 2/2.6;width: 100%;position: relative;overflow: hidden;margin-bottom: 0;}
.category-container .category-content-wrapper .category-main-content .comic-list .comic-item a .comic-cover img{object-fit: cover;width: 100%;height: auto;transition: transform 0.3s ease;}
.category-container .category-content-wrapper .category-main-content .comic-list .comic-item:hover .comic-cover img{transform: scale(1.05);}
.category-container .category-content-wrapper .category-main-content .comic-list .comic-item a .comic-info{text-align: left;padding: 15px 0;}
.category-container .category-content-wrapper .category-main-content .comic-list .comic-item a .comic-info h4{margin: 0 0 5px 0;line-height: 1.4;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;color: #282828;font-size: 14px;font-weight: 500;margin-bottom: 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.category-container .category-content-wrapper .category-main-content .comic-list .comic-item a .comic-info .comic-author{font-size: 12px;color: #999;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;margin: 0 0 5px 0;margin-bottom: 5px;}
.category-container .category-content-wrapper .category-main-content .comic-list .comic-item a .comic-info .comic-stats{font-size: 11px;color: #666;}
.category-container .category-content-wrapper .category-main-content .comic-list .comic-item a .comic-info .comic-stats .comic-popularity{flex: 1;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.category-container .category-content-wrapper .category-main-content .comic-list .comic-item a .comic-info .comic-stats .comic-update{flex: 1;text-align: right;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
/*分页*/
.pagination{padding-top: 20px;border-top: 1px solid #eee;display: flex;justify-content: center;align-items: center;gap: 10px;margin-top: 20px;}
.pagination .pagination-info{font-size: 14px;color: #666;}
.pagination .pagination-controls{display: flex;align-items: center;gap: 5px;}
.pagination .pagination-controls a{padding: 8px 14px;border: 1px solid #ddd;border-radius: 4px;background-color: #fff;color: #666;font-size: 14px;cursor: pointer;transition: all 0.3s ease;}
.pagination .pagination-controls a:disabled{opacity: 0.5;cursor: not-allowed;}
.pagination .pagination-controls a:hover:not(:disabled){border-color: #FFD806;color: #FFD806;}
.pagination .pagination-controls a.on{background-color: #FFD806;border-color: #FFD806;color: #fff;}
/*侧边栏*/
.category-container .category-content-wrapper .category-sidebar{width: 300px;display: flex;flex-direction: column;gap: 20px;}
.category-container .category-content-wrapper .category-sidebar .sidebar-section{background-color: #fff;border-radius: 8px;padding: 20px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);}
.category-container .category-content-wrapper .category-sidebar .sidebar-section .sidebar-title{font-size: 18px;font-weight: 600;color: #333;margin: 0 0 15px 0;padding-bottom: 10px;border-bottom: 2px solid #FFD806;}
.category-container .category-content-wrapper .category-sidebar .sidebar-section .category-tags{display: flex;flex-wrap: wrap;gap: 10px;}
.category-container .category-content-wrapper .category-sidebar .sidebar-section .category-tags .category-tag{display: inline-block;padding: 6px 14px;border: 1px solid #ddd;border-radius: 16px;background-color: #fff;color: #666;font-size: 13px;text-decoration: none;transition: all 0.3s ease;}
.category-container .category-content-wrapper .category-sidebar .sidebar-section .category-tags .category-tag:hover{border-color: #FFD806;color: #FFD806;}
.category-container .category-content-wrapper .category-sidebar .sidebar-section .category-tags .category-tag.active{background-color: #FFD806;border-color: #FFD806;color: #fff;}
.category-container .category-content-wrapper .category-sidebar .sidebar-section .recommended-comics{display: flex;flex-direction: column;gap: 15px;}
.category-container .category-content-wrapper .category-sidebar .sidebar-section .recommended-comics .recommended-item{transition: transform 0.2s ease;}
.category-container .category-content-wrapper .category-sidebar .sidebar-section .recommended-comics .recommended-item:hover{transform: translateX(5px);}
.category-container .category-content-wrapper .category-sidebar .sidebar-section .recommended-comics .recommended-item .recommended-link{display: flex;gap: 12px;text-decoration: none;}
.category-container .category-content-wrapper .category-sidebar .sidebar-section .recommended-comics .recommended-item .recommended-link .recommended-cover{width: 60px;height: 84px;border-radius: 4px;overflow: hidden;flex-shrink: 0;}
.category-container .category-content-wrapper .category-sidebar .sidebar-section .recommended-comics .recommended-item .recommended-link .recommended-cover img{width: 100%;height: 100%;object-fit: cover;}
.category-container .category-content-wrapper .category-sidebar .sidebar-section .recommended-comics .recommended-item .recommended-link .recommended-info{flex: 1;display: flex;flex-direction: column;justify-content: space-between;}
.category-container .category-content-wrapper .category-sidebar .sidebar-section .recommended-comics .recommended-item .recommended-link .recommended-info .recommended-title{font-size: 14px;font-weight: 600;color: #333;margin: 0 0 5px 0;line-height: 1.3;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
.category-container .category-content-wrapper .category-sidebar .sidebar-section .recommended-comics .recommended-item .recommended-link .recommended-info .recommended-desc{font-size: 12px;color: #999;margin: 0;line-height: 1.4;overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
/*详情*/
.comic-detail-container{max-width: 100%;margin: 0 auto;}
.comic-detail-container .comic-header{background: white;padding: 30px;border-radius: 12px;box-shadow: 0 4px 16px rgba(0,0,0,0.08);display: flex;gap: 30px;margin-bottom: 30px;transition: box-shadow 0.3s ease;}
.comic-detail-container .comic-header:hover{box-shadow: 0 6px 20px rgba(0,0,0,0.12);}
.comic-detail-container .comic-header .comic-cover-large{width: 220px;height: 300px;border-radius: 8px;overflow: hidden;box-shadow: 0 6px 16px rgba(0,0,0,0.15);transition: transform 0.3s ease;}
.comic-detail-container .comic-header .comic-cover-large:hover{transform: translateY(-5px) scale(1.02);}
.comic-detail-container .comic-header .comic-cover-large img{width: 100%;height: 100%;object-fit: cover;transition: filter 0.3s ease;}
.comic-detail-container .comic-header .comic-cover-large:hover img{filter: brightness(1.05);}
.comic-detail-container .comic-header .comic-info-main{flex: 1;display: flex;flex-direction: column;justify-content: space-between;}
.comic-detail-container .comic-header .comic-info-main h1{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;font-size: 32px;font-weight: 700;margin-bottom: 15px;color: #FFD806;line-height: 1.3;}
.comic-detail-container .comic-header .comic-info-main .comic-meta{margin-bottom: 15px;line-height: 1.8;display: flex;flex-wrap: wrap;gap: 15px 30px;}
.comic-detail-container .comic-header .comic-info-main .comic-meta span{display: inline-flex;align-items: center;color: #666;font-size: 15px;}
.comic-detail-container .comic-header .comic-info-main .comic-meta span.comic-author{margin-bottom: 5px;font-size: 12px;color: #999;margin: 0 0 5px 0;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.comic-detail-container .comic-header .comic-info-main .comic-stats{font-size: 11px;color: #666;display: flex;gap: 40px;border-radius: 8px;}
.comic-detail-container .comic-header .comic-info-main .comic-stats .comic-stats-item{display: flex;align-items: center;gap: 8px;}
.comic-detail-container .comic-header .comic-info-main .comic-stats .comic-stats-item .comic-stats-number{font-size: 28px;font-weight: bold;color: #FFD806;transition: transform 0.3s ease;}
.comic-detail-container .comic-header .comic-info-main .comic-stats .comic-stats-item:hover .comic-stats-number{transform: scale(1.1);}
.comic-detail-container .comic-header .comic-info-main .comic-stats .comic-stats-item .comic-stats-label{font-size: 15px;color: #666;font-weight: 500;}
.comic-detail-container .comic-header .comic-info-main .comic-actions{display: flex;gap: 20px;flex-wrap: wrap;}
.comic-detail-container .comic-header .comic-info-main .comic-actions .btn-secondary{background-color: #f5f5f5;color: #282828;font-size: 16px;border: 1px solid #ddd;padding: 12px 30px;border-radius: 6px;font-weight: bold;cursor: pointer;transition: all 0.3s ease;}
.comic-detail-container .comic-header .comic-info-main .comic-actions .btn-secondary:hover{background-color: #ebebeb;transform: translateY(-2px);box-shadow: 0 4px 12px transparent;}
.comic-detail-container .comic-header .comic-info-main .comic-actions .btn--collect .txt2{display: none;}
.comic-detail-container .comic-header .comic-info-main .comic-actions .btn--collect.collected .txt2{display: block;}
.comic-detail-container .comic-header .comic-info-main .comic-actions .btn--collect.collected .txt1{display: none;}
.comic-detail-container .comic-header .comic-info-main .comic-actions .btn--collect.collected:hover{background-color: #ebebeb;transform: translateY(-2px);box-shadow: 0 4px 12px transparent;}
.comic-detail-container .comic-header .comic-info-main .comic-actions .btn-primary{background-color: #FFD806;color: white;}
.comic-detail-container .comic-header .comic-info-main .comic-actions .btn-large{padding: 14px 35px;font-size: 16px;border-radius: 8px;font-weight: 600;transition: all 0.3s ease;border: none;cursor: pointer;}
.comic-detail-container .comic-header .comic-info-main .comic-actions .btn-large:hover{transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
.comic-detail-container .comic-description{background: white;padding: 20px;border-radius: 8px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);margin-bottom: 20px;}
.comic-detail-container .comic-description h3{margin-bottom: 15px;font-size: 20px;}
.comic-detail-container .comic-description p{line-height: 1.8;color: #666;}
.comic-detail-container .chapter-list-section{background: white;padding: 25px;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);margin-bottom: 30px;}
.comic-detail-container .chapter-list-section .chapter-list-header{display: flex;justify-content: space-between;align-items: center;border-bottom: 2px solid #f0f0f0;font-size: 20px;font-weight: 600;color: #282828;padding-bottom: 10px;}
.comic-detail-container .chapter-list-section .chapter-list-header h2{font-size: 20px;}
.comic-detail-container .chapter-list-section .chapter-list-header .chapter-sort .sort-btn{background-color: #f5f5f5;color: #282828;font-size: 12px;border: 1px solid #ddd;padding: 2px 16px;border-radius: 6px;cursor: pointer;transition: all 0.3s ease;}
.comic-detail-container .chapter-list-section .chapter-list-header .chapter-sort .sort-btn:hover{transform: translateY(-2px);box-shadow: 0 4px 12px rgba(0,0,0,0.15);}
.comic-detail-container .chapter-list-section .chapter-list-header .chapter-sort .sort-btn.active{background-color: #FFD806;color: white;}
.comic-detail-container .chapter-list-section .chapter-container .chapter-list{margin-bottom: 25px;}
.comic-detail-container .chapter-list-section .chapter-container .chapter-list .chapter-page .chapter-item{display: flex;justify-content: space-between;align-items: center;padding: 18px 20px;border-bottom: 1px solid #f0f0f0;border-radius: 8px;transition: all 0.3s ease;background-color: #ffffff;}
.comic-detail-container .chapter-list-section .chapter-container .chapter-list .chapter-page .chapter-item:hover{background-color: #f8f8f8;transform: translateX(5px);box-shadow: 0 2px 8px rgba(0,0,0,0.08);}
.comic-detail-container .chapter-list-section .chapter-container .chapter-list .chapter-page .chapter-item:last-child{border-bottom: none;margin-bottom: 0;}
.comic-detail-container .chapter-list-section .chapter-container .chapter-list .chapter-page .chapter-item .chapter-link{color: #282828;text-decoration: none;font-size: 16px;font-weight: 500;transition: all 0.3s ease;display: flex;align-items: center;gap: 10px;}
.comic-detail-container .chapter-list-section .chapter-container .chapter-list .chapter-page .chapter-item .chapter-link:hover{color: #FFD806;}
.comic-detail-container .chapter-list-section .chapter-container .chapter-list .chapter-page .chapter-item .chapter-link:hover::before{content: "▶";font-size: 12px;color: #FFD806;}
.comic-detail-container .chapter-list-section .chapter-container .chapter-list .chapter-page .chapter-item .chapter-date{font-size: 14px;color: #666;background-color: #f0f0f0;padding: 4px 12px;border-radius: 12px;}
.comic-detail-container .chapter-list-section .chapter-container .chapter-list .toggle-btn{width: 120px;line-height: 40px;background: #ffd806;text-align: center;font-size: 14px;border-radius: 4px;margin: 0 auto;margin-top: 30px;cursor: pointer;}
.recommendations-section{background: white;padding: 25px;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);margin-bottom: 30px;}
.recommendations-section .subsection-title{font-size: 18px;font-weight: 600;color: #282828;padding-bottom: 10px;border-bottom: 1px solid #f0f0f0;margin-bottom: 20px;}
.recommendations-section .similar-genre{}
.recommendations-section .similar-genre .similar-grid{display: grid;grid-template-columns: repeat(6, 1fr);gap: 20px;}
.recommendations-section .similar-genre .similar-grid .recommend-comic{width: 168px;text-align: center;transition: transform 0.3s ease;cursor: pointer;display: block;}
.recommendations-section .similar-genre .similar-grid .recommend-comic:hover{transform: translateY(-8px);}
.recommendations-section .similar-genre .similar-grid .recommend-comic .recommend-comic-cover{border-radius: 8px;overflow: hidden;margin-bottom: 12px;box-shadow: 0 4px 12px rgba(0,0,0,0.1);transition: all 0.3s ease;}
.recommendations-section .similar-genre .similar-grid .recommend-comic .recommend-comic-cover img{width: 100%;height: auto;object-fit: cover;transition: filter 0.3s ease, transform 0.3s ease;}
.recommendations-section .similar-genre .similar-grid .recommend-comic:hover .recommend-comic-cover img{filter: brightness(1.08);transform: scale(1.03);}
.recommendations-section .similar-genre .similar-grid .recommend-comic .recommend-comic-title{font-size: 15px;font-weight: 500;margin-bottom: 8px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;color: #333;transition: color 0.3s ease;}
.recommendations-section .similar-genre .similar-grid .recommend-comic:hover .recommend-comic-title{color: #FFD806;}
.recommendations-section .similar-genre .similar-grid .recommend-comic .recommend-comic-author{font-size: 13px;color: #666;margin-bottom: 5px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.recommendations-section .similar-genre .similar-grid .recommend-comic .recommend-comic-status{font-size: 12px;color: #FFD806;background-color: rgba(255,216,6,0.1);padding: 2px 8px;border-radius: 10px;display: inline-block;}
/*评论 */
.de-comment{margin-top: 30px;margin-bottom: 50px;clear: both;background: white;padding: 25px;border-radius: 12px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);}
.de-comment .comment-box{border-bottom: none;}
.de-comment .comment-pic-preview{position: absolute;top: 0;width: 80px;height: 80px;left: -30px;background: #f1f1f1;text-align: center;font-size: 0;border-radius: 2px;cursor: default;}
.de-comment .comment-pic-preview i.layui-icon{margin: 0;font-size: 20px;margin-top: 10px;margin-bottom: 10px;}
.de-comment .comment-pic-preview p{font-size: 12px;}
.de-comment .comment-pic-preview img{width: 80px;height: 80px;border-radius: 2px;}
.de-comment .comment-pic-preview .icon-comment-close{position: absolute;right: -8px;top: -8px;cursor: pointer;}
.de-comment.mark-vip{color: #ff4e3f;}
.de-comment .mark-icon{margin-left: 5px;vertical-align: -2px;}
.de-comment__title{font-size: 24px;line-height: 40px;}
.de-comment__title .count{font-size: 13px;color: #999;}
.de-comment__title .hl{color: #FFD806;}
.de-comment__item{position: relative;padding-bottom: 15px;margin-bottom: 20px;border-bottom: 1px solid #f1f1f1;}
.de-comment__item:after{content: '.';display: block;height: 0;clear: both;visibility: hidden;}
.de-comment__item .de-comment__item--comment-good{background: url("../img/pic_comment_jp.png?v=89022b5") no-repeat;width: 40px;height: 40px;position: absolute;right: 0;top: 0;}
.de-comment__item-left{float: left;}
.de-comment__item--avatar{width: 40px;height: 40px;font-size: 0;}
.de-comment__item--avatar img,.de-comment__item--avatar .pic{border-radius: 50%;width: 100%;height: 100%;}
.de-comment__item--nickname{font-size: 14px;font-weight: bold;padding-top: 3px;margin-bottom: 2px;}
.de-comment__textarea-wrap{background: #ffffff;border: 1px solid #f1f1f1;border-radius: 8px;padding: 12px;}
.de-comment__textarea-wrap textarea::-webkit-input-placeholder{color: #b4b4b4;}
.de-comment__textarea-wrap textarea::-moz-placeholder{/* Mozilla Firefox 19+ */color: #b4b4b4;}
.de-comment__textarea-wrap textarea:-moz-placeholder{/* Mozilla Firefox 4 to 18 */color: #b4b4b4;}
.de-comment__textarea-wrap textarea:-ms-input-placeholder{/* Internet Explorer 10-11 */color: #b4b4b4;}
.de-comment__item--textarea{width: 100%;height: 60px;resize: none;overflow: auto;border: none;font-size: 14px;outline: none;}
.de-comment__item--textarea img{width: 22px;height: 22px;}
.de-comment__item--textarea.has-placeholder{color: #b4b4b4;}
.de-comment__item-right{margin-left: 55px;margin-right: 5px;}
.de-comment__item--btn-group{text-align: right;margin-top: 12px;}
.de-comment__item--pic,.de-comment__item--emoji,.de-comment__item--submit{display: inline-block;}
.de-comment__item--pic,.de-comment__item--emoji{color: #666;margin-left: 20px;cursor: pointer;position: relative;}
.de-comment__item--pic i,.de-comment__item--emoji i{vertical-align: bottom;margin-right: 5px;margin-bottom: -2px;}
.de-comment__item--submit{background: #FFD806;border-radius: 18px;width: 120px;height: 36px;font-size: 16px;line-height: 36px;text-align: center;color: #fff;margin-left: 30px;cursor: pointer;-webkit-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;}
.de-comment__item--submit:hover{opacity: 0.85;-webkit-transition: all 0.5s ease 0s;transition: all 0.5s ease 0s;}
.de-comment__item--submit.disabled{background: #b49382;}
.de-comment__item--submit .loading-icon{margin-right: 4px;}
.de-comment__item--date{color: #999;font-size: 12px;margin-bottom: 10px;}
.de-comment__item--date span{margin-right: 10px;}
.de-comment__item--content{font-size: 14px;margin-bottom: 15px;}
.de-comment__item--content .pic{width: 50px;height: 50px;vertical-align: bottom;}
.de-comment__item--content .hot-reply-tip-box{font-size: 14px;color: #999999;line-height: 22px;margin-top: 10px;}
.de-comment__item--content .hot-reply-tip-box i{margin-right: 5px;color: #FFD806;}
.de-comment__item--content .hot-reply-tip-box.no-more .hot-reply-tip{cursor: default;}
.de-comment__item--content .hot-reply-tip{display: inline-block;cursor: pointer;}
.de-comment__item--content-box{margin-bottom: 15px;}
.de-comment__item--replybox{margin-top: 15px;}
.de-comment__item--reply-btn,.de-comment__item--like-btn{display: inline-block;margin-right: 15px;font-size: 13px;color: #999;cursor: pointer;min-width: 46px;}
.de-comment__item--reply-btn i,.de-comment__item--like-btn i{margin-right: 6px;font-size: 14px;}
.de-comment__item--reply-btn:hover,.de-comment__item--like-btn:hover{color: #FFD806;}
.de-comment__item--reply-btn.active,.de-comment__item--like-btn.active{color: #FFD806;}
.de-comment__item--reply-btn i{position: relative;bottom: -1px;}
.de-comment__item--stick{position: absolute;right: 0;top: 0;background: url("../img/pic_comment_jp.png?v=89022b5") no-repeat;width: 40px;height: 40px;}
.de-comment__item--reply{padding: 12px 15px;background: #f8f8f9;margin-bottom: 1px;}
.de-comment__item--reply-uinfo{line-height: 24px;}
.de-comment__item--reply-uinfo img{width: 24px;height: 24px;margin-right: 10px;border-radius: 50%;float: left;}
.de-comment__item--reply-uinfo span{font-size: 12px;color: #999;}
.de-comment__item--reply-nickname{margin-right: 20px;font-size: 13px !important;color: #333 !important;font-weight: bold;}
.de-comment__item--reply-nickname.mark-vip{color: #ff4e3f;}
.de-comment__item--reply-content{font-size: 14px;margin: 6px 0;}
.de-comment__face-box{position: absolute;width: 380px;z-index: 10;right: -152px;top: 30px;border: 1px solid #ebebeb;border-top: 2px solid #FFD806;background: #f8f8f8;box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.3);border-radius: 0 0 3px 3px;}
.de-comment__face-box .triangle-up{position: absolute;top: -17px;left: 50%;margin-left: -8px;border: 8px solid transparent;border-bottom-color: #FFD806;}
.de-comment__face-box .triangle-up:after{content: '';position: absolute;top: -7px;left: -8px;border: 8px solid transparent;border-bottom-color: #FFD806;}
.de-comment__face-list{overflow: hidden;padding: 10px 0px 0;background: #fff;}
.de-comment__face-list li{float: left;width: 20%;text-align: center;padding-bottom: 15px;}
.de-comment__face-list img{width: 60px;height: 60px;}
.de-comment__face-list p{margin-top: 6px;font-size: 14px;color: #666;text-align: center;}
.de-comment__face-group{overflow: hidden;background: #f8f8f9;}
.de-comment__face-group-item{float: left;width: 50px;text-align: center;height: 46px;line-height: 46px;}
.de-comment__face-group-item img{width: 28px;height: 28px;border-radius: 50%;border: 1px solid transparent;}
.de-comment__face-group-item.active{background: #fff;}
.de-comment__face-group-item.active img{width: 32px;height: 32px;border: 1px solid #FFD806;}
.de-comment__none{text-align: center;margin-top: 45px;margin-bottom: 100px;}
.de-comment__none p{margin-bottom: 5px;color: #666666;text-align: center;line-height: 1.5;}
.de-comment__none--large{margin-top: 15px;font-size: 18px;}
.j-content-preview{height: 200px;overflow: hidden;margin-top: 15px;position: relative;}
.j-content-preview img{width: 200px;border-radius: 2px;}
.j-content-preview.auto{height: auto !important;}
.j-content-preview.normal-height{height: auto;}
.j-content-preview-large{position: absolute;bottom: 0;width: 40px;text-align: center;color: #fff;height: 20px;line-height: 20px;background: rgba(0, 0, 0, 0.5);left: 160px;cursor: pointer;}
/*搜索*/
.search-page .search-filter-section{background: #fff;padding: 20px;border-radius: 8px;margin-bottom: 20px;box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
.search-page .search-filter-section .search-results-header{font-size: 16px;color: #666;display: flex;align-items: center;}
.search-page .search-results-grid{display: grid;grid-template-columns: repeat(6, 1fr);gap: 20px;margin-top: 20px;}
.search-page .search-results-grid .search-result-item{background: #fff;border-radius: 8px;overflow: hidden;box-shadow: 0 2px 8px rgba(0,0,0,0.1);transition: transform 0.3s, box-shadow 0.3s;}
.search-page .search-results-grid .search-result-item:hover{transform: translateY(-5px);box-shadow: 0 4px 16px rgba(0,0,0,0.15);}
.search-page .search-results-grid .search-result-item .result-cover{position: relative;padding-bottom: 133%;overflow: hidden;}
.search-page .search-results-grid .search-result-item .result-cover img{position: absolute;top: 0;left: 0;width: 100%;height: 100%;object-fit: cover;}
.search-page .search-results-grid .search-result-item .result-cover .comic-status{position: absolute;top: 10px;left: 10px;padding: 3px 6px;background: #ffd806;font-size: 12px;color: #fff;border-radius: 4px;}
.search-page .search-results-grid .search-result-item .result-info{padding: 12px;}
.search-page .search-results-grid .search-result-item .result-info .result-title{font-size: 16px;font-weight: bold;margin-bottom: 6px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.search-page .search-results-grid .search-result-item .result-info .result-author{font-size: 14px;color: #666;margin-bottom: 8px;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}
.search-page .search-results-grid .search-result-item .result-info .result-desc{font-size: 12px;color: #999;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
/*排行榜*/
.category-container .category-content-wrapper .topbox{background: transparent;box-shadow: 0 0 0 rgba(0, 0, 0, 0);padding: 0;}
.category-container .category-content-wrapper .topbox .top-categories{background-color: #fff;padding: 20px 0;margin-bottom: 25px;border-bottom: 1px solid #eee;box-shadow: 0 3px 12px rgba(0,0,0,0.05);border-radius: 8px;}
.category-container .category-content-wrapper .topbox .top-categories .categories-inner .top-categories-list{display: flex;justify-content: center;flex-wrap: wrap;gap: 10px;max-width: 1200px;margin: 0 auto;}
.category-container .category-content-wrapper .topbox .top-categories .categories-inner .top-categories-list .top-category-item{padding: 10px 24px;margin: 0 3px;border-radius: 25px;cursor: pointer;transition: all 0.3s ease;color: #666;font-weight: 500;font-size: 15px;}
.category-container .category-content-wrapper .topbox .top-categories .categories-inner .top-categories-list .top-category-item.active{background-color: #FFD806;color: #fff;box-shadow: 0 3px 10px rgba(255, 107, 107, 0.3);transform: translateY(-1px);}
.category-container .category-content-wrapper .topbox .top-categories .categories-inner .top-categories-list .top-category-item:hover:not(.active){background-color: #f5f5f5;color: #FFD806;transform: translateY(-1px);}
.category-container .category-content-wrapper .topbox .top-list{background-color: #fff;padding: 20px 0;border-bottom: 1px solid #eee;box-shadow: 0 3px 12px rgba(0,0,0,0.05);border-radius: 8px;}
.category-container .category-content-wrapper .topbox .top-list .top-item{display: flex;align-items: center;padding: 10px 20px;border-bottom: 1px solid #f0f0f0;transition: all 0.3s ease;position: relative;gap: 20px;border-radius: 8px;}
.category-container .category-content-wrapper .topbox .top-list .top-item:last-child{border-bottom: none;}
.category-container .category-content-wrapper .topbox .top-list .top-item:hover{background-color: #fafafa;transform: translateX(5px);box-shadow: 0 4px 12px rgba(0,0,0,0.05);}
.category-container .category-content-wrapper .topbox .top-list .top-item .rank-number{width: 40px;height: 40px;line-height: 40px;border-radius: 50%;background-color: #e8e8e8;color: #666;display: flex;align-items: center;justify-content: center;font-size: 18px;font-weight: bold;flex-shrink: 0;box-shadow: 0 2px 6px rgba(0,0,0,0.08);}
.category-container .category-content-wrapper .topbox .top-list .top-item .rank-number.top1{background-color: #FFD806;color: #fff;}
.category-container .category-content-wrapper .topbox .top-list .top-item .rank-number.top2{background-color: #ff6b6b;color: #fff;}
.category-container .category-content-wrapper .topbox .top-list .top-item .rank-number.top3{background-color: #CD7F32;color: #fff;}
.category-container .category-content-wrapper .topbox .top-list .top-item .comic-cover{box-shadow: 0 2px 8px rgba(0,0,0,0.1);border-radius: 8px;margin-bottom: 10px;aspect-ratio: 2 / 2.6;width: 100px;position: relative;overflow: hidden;}
.category-container .category-content-wrapper .topbox .top-list .top-item .comic-cover img{object-fit: cover;width: 100%;height: auto;transition: transform 0.3s ease;}
.category-container .category-content-wrapper .topbox .top-list .top-item .comic-info{padding: 15px;}
.category-container .category-content-wrapper .topbox .top-list .top-item .comic-info .comic-title{display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;margin: 0 0 5px 0;line-height: 1.4;font-size: 16px;font-weight: 600;color: #282828;margin-bottom: 8px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
.category-container .category-content-wrapper .topbox .top-list .top-item .comic-info .category-tags{display: flex;flex-wrap: wrap;gap: 10px;margin-bottom: 10px;}
.category-container .category-content-wrapper .topbox .top-list .top-item .comic-info .category-tags a{display: inline-block;padding: 6px 14px;border: 1px solid #ddd;border-radius: 16px;background-color: #fff;color: #666;font-size: 13px;text-decoration: none;transition: all 0.3s ease;}
.category-container .category-content-wrapper .topbox .top-list .top-item .comic-info .category-tags a:hover{background-color: #48dbfb;color: #fff;}
.category-container .category-content-wrapper .topbox .top-list .top-item .comic-info .comic-meta{margin-bottom: 0;line-height: 1.8;display: flex;flex-wrap: wrap;gap: 15px 30px;}
.category-container .category-content-wrapper .topbox .top-item:hover .comic-cover{transform: scale(1.05) translateY(-5px);box-shadow: 0 8px 20px rgba(0,0,0,0.25);}
/* 登录页面特有样式 */
.login-container {min-height: calc(100vh - 320px);display: flex;justify-content: center;align-items: center;padding: 40px 0;background-color: #f9f9f9;}
.login-container .login-card {background: #fff;border-radius: 10px;box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);width: 100%;max-width: 420px;padding: 40px;}
.login-container .login-header {text-align: center;margin-bottom: 30px;}
.login-container .login-title {font-size: 28px;color: #333;margin: 0;}
.login-container .login-form .form-group {margin-bottom: 20px;}
.login-container .login-form .form-group label {display: block;margin-bottom: 8px;color: #666;font-size: 14px;}
.login-container .login-form .form-input {width: 100%;padding: 12px 15px;border: 1px solid #ddd;border-radius: 5px;font-size: 16px;transition: border-color 0.3s;box-sizing: border-box;}
.login-container .login-form .form-input:focus {outline: none;border-color: #FFD806;}
.login-container .remember-me {display: flex;align-items: center;margin-bottom: 25px;}
.login-container .remember-me input {margin-right: 8px;}
.login-container .remember-me label {font-size: 14px;color: #666;cursor: pointer;}
.login-container .login-btn {width: 100%;padding: 12px;background-color: #FFD806;border: none;border-radius: 5px;color: #333;font-size: 16px;font-weight: bold;cursor: pointer;transition: background-color 0.3s;}
.login-container .login-btn:hover {background-color: #F5CB00;}
.login-container .login-footer {display: flex;justify-content: space-between;margin-top: 20px;font-size: 14px;}
.login-container .login-footer a {color: #666;text-decoration: none;}
.login-container .login-footer a:hover {color: #FFD806;}
.login-container .third-party-login {margin-top: 30px;text-align: center;}
.login-container .third-party-title {position: relative;margin: 30px 0;font-size: 14px;color: #999;}
.login-container .third-party-title::before,
.login-container .third-party-title::after {content: '';position: absolute;top: 50%;width: 40%;height: 1px;background-color: #ddd;}
.login-container .third-party-title::before {left: 0;}
.login-container .third-party-title::after {right: 0;}
.login-container .third-party-buttons {display: flex;justify-content: center;gap: 30px;}
.login-container .third-party-btn {width: 50px;height: 50px;border-radius: 50%;border: none;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 24px;transition: transform 0.3s, box-shadow 0.3s;}
.login-container .third-party-btn:hover {transform: translateY(-3px);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}
.login-container .wechat-btn {background-color: #07C160;color: white;}
.login-container .qq-btn {background-color: #12B7F5;color: white;}
.login-container .guest-entry {margin-top: 30px;text-align: center;}
.login-container .guest-entry a {color: #FFD806;text-decoration: none;font-size: 14px;border: 1px solid #FFD806;padding: 8px 20px;border-radius: 20px;display: inline-block;transition: all 0.3s;}
.login-container .guest-entry a:hover {background-color: #FFD806;color: #333;}
/* 响应式设计 */
@media (max-width: 768px) {
    .login-container .login-container {padding: 20px;}
    .login-container .login-card {padding: 25px;}
    .login-container .login-title {font-size: 24px;}
    .login-container .third-party-buttons {gap: 20px;}
}
/* 个人中心页面特有样式 */
.user-center-container {min-height: calc(100vh - 320px);padding: 40px 0;background-color: #f9f9f9;}
.user-center-container .user-center-content {display: flex;gap: 30px;max-width: 1200px;margin: 0 auto;align-items: flex-start}
/* 用户信息侧边栏样式 */
.user-center-container .user-sidebar {width: 280px;background: #fff;border-radius: 10px;padding: 30px 20px;box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);flex-shrink: 0;}
.user-center-container .user-profile {text-align: center;padding-bottom: 25px;border-bottom: 1px solid #eee;margin-bottom: 25px;}
.user-center-container .avatar-container {position: relative;margin-bottom: 15px;display: inline-block;}
.user-center-container .user-avatar {width: 100px;height: 100px;border-radius: 50%;object-fit: cover;border: 3px solid #FFD806;}
.user-center-container .vip-badge {position: absolute;bottom: 0;right: 0;background-color: #FFD806;color: #333;padding: 2px 8px;border-radius: 10px;font-size: 12px;font-weight: bold;}
.user-center-container .user-info h2 {margin: 0 0 5px 0;font-size: 20px;color: #333;}
.user-center-container .user-level {color: #666;font-size: 14px;}
.user-center-container .user-menu {list-style: none;padding: 0;margin: 0;}
.user-center-container .menu-item {margin-bottom: 10px;}
.user-center-container .menu-link {display: block;padding: 12px 20px;border-radius: 8px;text-decoration: none;color: #666;transition: all 0.3s;font-size: 16px;}
.user-center-container .menu-link:hover {background-color: #f0f0f0;color: #FFD806;}
.user-center-container .menu-link.active {background-color: #FFD806;color: #333;font-weight: bold;}
.user-center-container .logout{width: 100%;display: block;line-height: 40px;text-align: center;background: #efefef;font-size: 16px;border-radius: 4px;color: #666;transition: all 0.3s ease;}
.user-center-container .logout:hover {transform: translateY(-3px);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);color: #999;}
/* 主体内容区域样式 */
.user-center-container .user-main-content {flex: 1;}
.user-center-container .content-section {background: #fff;border-radius: 10px;padding: 30px;margin-bottom: 30px;box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);}
.user-center-container .section-header {display: flex;justify-content: space-between;align-items: center;margin-bottom: 25px;padding-bottom: 15px;border-bottom: 1px solid #eee;}
.user-center-container .section-title-user {margin: 0;font-size: 22px;color: #333;}
.user-center-container .section-more {color: #999;text-decoration: none;font-size: 14px;}
.user-center-container .section-more:hover {color: #FFD806;}
.user-center-container .user-main-content .content-section .user-details .user-membership{width: 100%;display: flex;justify-items: flex-start;align-items: center;gap: 16px;margin-top: 10px;}
.user-center-container .user-main-content .content-section .user-details .user-membership .non-member{font-size: 15px;color: #666;}
.user-center-container .user-main-content .content-section .user-details .user-membership .btn-user{padding: 0 18px;line-height: 35px;background: #FFD806;border: 0;border-radius: 4px;transition: all 0.3s ease;cursor: pointer;}
.user-center-container .user-main-content .content-section .user-details .user-membership .btn-user:hover {transform: translateY(-3px);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);color: #333;}
/* 阅读历史样式 */
.user-center-container .reading-history {display: grid;grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));gap: 20px;}
.user-center-container .history-item {display: block;text-decoration: none;color: #333;transition: transform 0.3s;}
.user-center-container .history-item:hover {transform: translateY(-5px);}
.user-center-container .comic-cover {width: 100%;aspect-ratio: 2/3;border-radius: 8px;object-fit: cover;margin-bottom: 10px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}
.user-center-container .comic-title {font-size: 14px;font-weight: 500;margin-bottom: 5px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;height: 40px;}
.user-center-container .comic-progress {font-size: 12px;color: #999;}
/* 我的收藏样式 */
.user-center-container .my-collections {display: grid;grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));gap: 20px;}
.user-center-container .collection-item {display: flex;text-decoration: none;color: #333;padding: 15px;border-radius: 8px;transition: background-color 0.3s;}
.user-center-container .collection-item:hover {background-color: #f9f9f9;}
.user-center-container .collection-cover {width: 80px;aspect-ratio: 2/3;border-radius: 6px;object-fit: cover;margin-right: 15px;flex-shrink: 0;}
.user-center-container .collection-info {flex: 1;min-width: 0;}
.user-center-container .collection-title {font-size: 16px;font-weight: 500;margin-bottom: 8px;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.user-center-container .collection-desc {font-size: 13px;color: #666;margin-bottom: 8px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;}
.user-center-container .collection-tags {display: flex;gap: 8px;flex-wrap: wrap;}
.user-center-container .collection-tag {background-color: #f0f0f0;color: #666;padding: 2px 8px;border-radius: 10px;font-size: 12px;}
/* 消息通知样式 */
.user-center-container .notifications {display: grid;gap: 15px;}
.user-center-container .notification-item {display: flex;padding: 20px;border-radius: 8px;border: 1px solid #eee;transition: border-color 0.3s;}
.user-center-container .notification-item:hover {border-color: #FFD806;}
.user-center-container .notification-icon {width: 40px;height: 40px;background-color: #f0f0f0;border-radius: 50%;display: flex;align-items: center;justify-content: center;margin-right: 15px;flex-shrink: 0;font-size: 20px;}
.user-center-container .system-icon {color: #FFD806;}
.user-center-container .activity-icon {color: #52c41a;}
.user-center-container .notification-content {flex: 1;}
.user-center-container .notification-title {font-size: 16px;font-weight: 500;margin-bottom: 5px;}
.user-center-container .notification-message {font-size: 14px;color: #666;margin-bottom: 8px;}
.user-center-container .notification-time {font-size: 12px;color: #999;}
/* 推荐作品样式 */
.user-center-container .recommended-comics {display: grid;grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));gap: 20px;}
.user-center-container .recommended-item {display: block;text-decoration: none;color: #333;transition: transform 0.3s;}
.user-center-container .recommended-item:hover {transform: translateY(-5px);}
.user-center-container .recommended-cover {width: 100%;aspect-ratio: 2/3;border-radius: 8px;object-fit: cover;margin-bottom: 10px;box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);}
.user-center-container .recommended-title {font-size: 14px;font-weight: 500;margin-bottom: 5px;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;text-overflow: ellipsis;height: 40px;}
.user-center-container .recommended-stats {display: flex;gap: 10px;font-size: 12px;color: #999;}
/* 响应式设计 */
@media (max-width: 768px) {
    .user-center-container .user-center-content {flex-direction: column;padding: 0 20px;}
    .user-center-container .user-sidebar {width: 100%;padding: 20px;}
    .user-center-container .content-section {padding: 20px;}
    .user-center-container .user-menu {display: grid;grid-template-columns: repeat(2, 1fr);gap: 10px;}
    .user-center-container .menu-item {margin-bottom: 0;}
    .user-center-container .menu-link {text-align: center;padding: 10px;font-size: 14px;}
    .user-center-container .reading-history,
    .user-center-container .recommended-comics {grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));gap: 15px;}
    .user-center-container .my-collections {grid-template-columns: 1fr;}
    .user-center-container .section-header {flex-direction: column;align-items: flex-start;gap: 10px;}
    .user-center-container .section-title {font-size: 20px;}
}
 /* 表格样式 */
.order-table {width: 100%;background-color: white;border-radius: 10px;overflow: hidden;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);}
.order-table thead {background-color: #fafafa;}
.order-table th {padding: 15px;text-align: center;font-size: 14px;font-weight: 500;color: #666;border-bottom: 1px solid #f0f0f0;}
.order-table tbody {background-color: white;}
.order-table tr.order-item {transition: background-color 0.3s;}
.order-table tr.order-item:hover {background-color: #fafafa;}
.order-table td {padding: 15px;text-align: center;font-size: 14px;color: #333;border-bottom: 1px solid #f0f0f0;}
/* 漫画信息样式 */
.order-table .comic-item {display: flex;align-items: center;justify-content: center;}
.order-table .comic-cover-small {width: 60px;height: 80px;border-radius: 6px;overflow: hidden;margin-right: 12px;flex-shrink: 0;}
.order-table .comic-cover-small img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s;}
.order-table .comic-cover-small:hover img {transform: scale(1.05);}
.order-table .comic-details {text-align: left;}
.order-table .comic-title {font-size: 14px;color: #333;margin-bottom: 5px;font-weight: 500;transition: color 0.3s;display: block;}
.order-table .comic-title:hover {color: #FFD806;}
.order-table .comic-detail {font-size: 12px;color: #999;}
/* 账户信息页面特定样式 */
.account-info-section {min-height: 600px;}
.account-info-section .section-title {font-size: 24px;color: #333;margin-bottom: 30px;padding-bottom: 15px;border-bottom: 1px solid #e0e0e0;}
.account-info-section .info-container {background-color: white;border-radius: 10px;padding: 30px;box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);margin-bottom: 30px;}
.account-info-section .info-section {margin-bottom: 40px;}
.account-info-section .info-section:last-child {margin-bottom: 0;}
.account-info-section .info-section h3 {font-size: 18px;color: #333;margin-bottom: 20px;padding-left: 10px;border-left: 4px solid #FFD806;}
/* 头像上传样式 */
.account-info-section .info-section .main-content__profile--right{padding-bottom: 20px;display: flex;justify-items: flex-start;align-items: center;gap: 20px;}
.account-info-section .info-section .main-content__profile--right img{width: 80px;height: 80px;}
/* 表单样式 */
.account-info-section .form-group {display: flex;align-items: center;margin-bottom: 25px;flex-wrap: wrap;}
.account-info-section .form-label {width: 80px;color: #666;font-size: 14px;flex-shrink: 0;}
.account-info-section .form-control {flex: 1;min-width: 200px;padding: 10px 15px;border: 1px solid #e0e0e0;border-radius: 6px;font-size: 14px;transition: border-color 0.3s;}
.account-info-section .form-control:focus {outline: none;border-color: #FFD806;box-shadow: 0 0 0 2px rgba(255, 216, 6, 0.1);}
.account-info-section .form-radio {display: flex;align-items: center;}
.account-info-section .form-radio label {margin-right: 20px;display: flex;align-items: center;cursor: pointer;}
.account-info-section .form-radio input[type="radio"] {margin-right: 5px;}
.account-info-section .textarea {min-height: 100px;resize: vertical;}
.account-info-section .character-count {margin-top: 5px;color: #999;font-size: 12px;text-align: right;}
/* 账号安全样式 */
.account-info-section .security-item {display: flex;justify-content: space-between;align-items: center;padding: 20px 0;border-bottom: 1px solid #f0f0f0;}
.account-info-section .security-item:last-child {border-bottom: none;}
.account-info-section .security-label {color: #666;font-size: 14px;}
.account-info-section .security-value {color: #999;font-size: 14px;margin-right: 20px;}
.account-info-section .security-action {background-color: #f5f5f5;color: #333;border: none;padding: 6px 20px;border-radius: 6px;cursor: pointer;font-size: 14px;transition: all 0.3s;}
.account-info-section .security-action:hover {background-color: #FFD806;color: #333;}
/* 账号注销样式 */
.account-info-section .delete-account {text-align: center;padding: 30px;background-color: #fafafa;border-radius: 10px;border: 1px solid #f0f0f0;}
.account-info-section .delete-account h4 {color: #ff4d4f;margin-bottom: 15px;}
.account-info-section .delete-account p {color: #999;font-size: 14px;margin-bottom: 20px;}
.account-info-section .delete-account-btn {background-color: #ff4d4f;color: white;border: none;padding: 10px 30px;border-radius: 6px;cursor: pointer;font-size: 14px;transition: all 0.3s;}
.account-info-section .delete-account-btn:hover {background-color: #ff7875;}
/* 保存按钮样式 */
.account-info-section .save-container {text-align: center;margin-top: 40px;}
.account-info-section .save-btn {background-color: #FFD806;color: #333;border: none;padding: 12px 40px;border-radius: 10px;cursor: pointer;font-size: 16px;font-weight: 500;transition: all 0.3s;}
.account-info-section .save-btn:hover {background-color: #FFE54C;transform: translateY(-2px);}
.account-info-section .save-btn:disabled {background-color: #d9d9d9;cursor: not-allowed;transform: none;}
/* 弹窗样式 */
.account-info-section .modal {display: none;position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: rgba(0, 0, 0, 0.5);z-index: 1000;justify-content: center;align-items: center;}
.account-info-section .modal-content {background-color: white;padding: 30px;border-radius: 10px;width: 90%;max-width: 400px;text-align: center;}
.account-info-section .modal-title {font-size: 20px;margin-bottom: 20px;color: #333;}
.account-info-section .modal-buttons {display: flex;justify-content: center;gap: 20px;margin-top: 30px;}
.account-info-section .modal-btn {padding: 10px 30px;border-radius: 10px;border: none;cursor: pointer;font-size: 16px;font-weight: 500;transition: all 0.3s;}
.account-info-section .confirm-btn {background-color: #FFD806;color: #333;}
.account-info-section .cancel-btn {background-color: #f0f0f0;color: #333;}
/* 头像上传预览样式 */
.account-info-section #avatarPreview {display: none;position: fixed;top: 50%;left: 50%;transform: translate(-50%, -50%);background-color: white;padding: 30px;border-radius: 10px;z-index: 1001;text-align: center;}
.account-info-section #avatarPreview img {max-width: 200px;max-height: 200px;border-radius: 50%;margin-bottom: 20px;}
/* 响应式设计 */
@media (max-width: 768px) {
.account-info-section {padding: 20px 0;}
.account-info-section .info-container {padding: 20px;}
.account-info-section .avatar-container {flex-direction: column;text-align: center;}
.account-info-section .avatar-wrapper {margin-right: 0;margin-bottom: 15px;}
.account-info-section .form-group {flex-direction: column;align-items: flex-start;}
.account-info-section .form-label {width: 100%;margin-bottom: 10px;}
.account-info-section .form-control {min-width: 100%;}
.account-info-section .security-item {flex-direction: column;align-items: flex-start;}
.account-info-section .security-value {margin-right: 0;margin-bottom: 10px;}
.account-info-section .modal-content {width: 85%;padding: 20px;}
}
.layui-btn{background-color: #FFC107;}
/* 阅读页面滚动行为优化 */
.chapterbox .reader-content {padding-bottom: 80px;}
/* 确保阅读器头部和标准头部不冲突 */
.chapterbox .reader-header {top: 70px;}
/* 响应式优化 */
@media (max-width: 768px) {
    /* 响应式头部样式 */
    .chapterbox .header-top {flex-wrap: wrap;gap: 15px;}
    .chapterbox .logo-container {order: 1;}
    .chapterbox .main-nav {order: 3;width: 100%;}
    .chapterbox .user-actions {order: 2;gap: 10px;}
    .chapterbox .nav-list {justify-content: center;gap: 15px !important;}
    .chapterbox .search-box {display: none;}
    /* 响应式底部样式 */
    .chapterbox .footer-content {flex-direction: column;gap: 20px;}
    .chapterbox .footer-bottom {flex-direction: column;gap: 15px;text-align: center;}
    /* 调整阅读器头部位置 */
    .chapterbox .reader-header {top: 120px;}
}
/* 阅读器头部样式 */
.chapterbox .reader-header {background-color: #fff;border-bottom: 1px solid #e0e0e0;padding: 12px 20px;position: sticky;top: 0;z-index: 9999;display: flex;justify-content: space-between;align-items: center;box-shadow: 0 2px 4px rgba(0,0,0,0.1);}
.chapterbox .reader-header-left, .reader-header-right {display: flex;align-items: center;gap: 15px;}
.chapterbox .reader-header-center {text-align: center;flex: 1;}
.chapterbox .comic-title {font-size: 18px;font-weight: bold;color: #333;margin: 0;}
.chapterbox .chapter-title {font-size: 14px;color: #666;margin: 4px 0 0;}
.chapterbox .btn-icon {display: flex;align-items: center;gap: 4px;padding: 8px 12px;background-color: #f5f5f5;border: 1px solid #ddd;border-radius: 4px;cursor: pointer;font-size: 14px;color: #333;transition: all 0.3s ease;}
.chapterbox .btn-icon:hover {background-color: #e0e0e0;}
.chapterbox .icon {font-size: 16px;}
.chapterbox .menu-btn, .settings-btn {width: 36px;height: 36px;border-radius: 50%;border: none;background-color: #f5f5f5;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 18px;color: #333;transition: all 0.3s ease;}
.chapterbox .menu-btn:hover, .settings-btn:hover {background-color: #e0e0e0;}
.chapterbox .settings-panel {position: absolute;top: 100%;right: 20px;background-color: #fff;border: 1px solid #ddd;border-radius: 8px;box-shadow: 0 4px 12px rgba(0,0,0,0.15);padding: 16px;width: 280px;display: none;}
.chapterbox .settings-panel.show {display: block;}
.chapterbox .setting-item {margin-bottom: 16px;}
.chapterbox .setting-item:last-child {margin-bottom: 0;}
.chapterbox .setting-label {display: block;font-size: 14px;font-weight: 500;color: #333;margin-bottom: 8px;}
.chapterbox .font-size-controls {display: flex;gap: 8px;}
.chapterbox .decrease-font, .increase-font {flex: 1;padding: 8px;border: 1px solid #ddd;background-color: #f5f5f5;border-radius: 4px;cursor: pointer;font-size: 14px;transition: all 0.3s ease;}
.chapterbox .decrease-font:hover, .increase-font:hover {background-color: #e0e0e0;}
.chapterbox .reading-mode-options {display: flex;gap: 8px;}
.chapterbox .mode-btn {flex: 1;padding: 8px;border: 1px solid #ddd;background-color: #fff;border-radius: 4px;cursor: pointer;font-size: 14px;transition: all 0.3s ease;}
.chapterbox .mode-btn:hover {background-color: #f5f5f5;}
.chapterbox .mode-btn.active {background-color: #ff6b6b;color: #fff;border-color: #ff6b6b;}
.chapterbox .reader-content {background-color: #f8f8f8;min-height: 100vh;padding: 20px 0;}
.chapterbox .comic-pages {max-width: 800px;margin: 0 auto;}
.chapterbox .comic-page {background-color: #fff;position: relative;overflow: hidden;}
.chapterbox .comic-image {width: 100%;height: auto;display: block;border-radius: 8px;}
.chapterbox .page-number {position: absolute;bottom: 10px;right: 10px;background-color: rgba(0,0,0,0.6);color: #fff;padding: 4px 8px;border-radius: 4px;font-size: 12px;}
.chapterbox .reader-footer {background-color: #fff;border-top: 1px solid #e0e0e0;padding: 10px 20px;position: sticky;bottom: 0;z-index: 99;box-shadow: 0 -2px 4px rgba(0,0,0,0.1);}
.chapterbox .footer-content {display: flex;justify-content: space-between;align-items: center;max-width: 1200px;margin: 0 auto;}
.chapterbox .footer-left, .footer-right {display: flex;gap: 15px;}
.chapterbox .footer-btn {display: flex;align-items: center;gap: 6px;padding: 8px 12px;background-color: #f5f5f5;border: 1px solid #ddd;border-radius: 20px;cursor: pointer;font-size: 14px;color: #333;transition: all 0.3s ease;}
.chapterbox .footer-btn:hover {background-color: #e0e0e0;}
.chapterbox .footer-btn .icon {font-size: 18px;}
.chapterbox .footer-btn .count {background-color: #ff6b6b;color: #fff;padding: 2px 6px;border-radius: 10px;font-size: 12px;min-width: 20px;text-align: center;}
.chapterbox .footer-btn.like-btn[data-liked="true"] {color: #ff6b6b;background-color: #ffe5e5;border-color: #ff6b6b;}
.chapterbox .footer-btn.collect-btn[data-collected="true"] {color: #ffc107;background-color: #fff8e1;border-color: #ffc107;}
.chapterbox .reading-progress {display: flex;align-items: center;gap: 10px;flex: 1;max-width: 300px;}
.chapterbox .progress-bar {height: 6px;background-color: #e0e0e0;border-radius: 3px;flex: 1;overflow: hidden;}
.chapterbox .progress-fill {height: 100%;background-color: #ff6b6b;border-radius: 3px;transition: width 0.3s ease;}
.chapterbox .progress-text {font-size: 12px;color: #666;min-width: 35px;}
/* 分享面板样式 */
.chapterbox .share-panel {position: fixed;bottom: 80px;left: 50%;transform: translateX(-50%);background-color: #fff;border-radius: 12px;box-shadow: 0 4px 20px rgba(0,0,0,0.15);padding: 20px;width: 90%;max-width: 400px;display: none;z-index: 101;}
.chapterbox .share-panel.show {display: block;}
.chapterbox .share-title {font-size: 16px;font-weight: 500;color: #333;margin-bottom: 15px;text-align: center;}
.chapterbox .share-options {display: flex;justify-content: space-around;}
.chapterbox .share-item {display: flex;flex-direction: column;align-items: center;gap: 8px;background: none;border: none;cursor: pointer;padding: 10px;transition: transform 0.3s ease;}
.chapterbox .share-item:hover {transform: scale(1.1);}
.chapterbox .share-icon {font-size: 32px;}
.chapterbox .share-name {font-size: 12px;color: #666;}
/* 侧边栏样式 */
.chapterbox .reader-sidebar {position: fixed;top: 0;right: -400px;width: 400px;height: 100vh;background-color: #fff;box-shadow: -4px 0 20px rgba(0,0,0,0.15);z-index: 9999999;transition: right 0.3s ease;display: flex;flex-direction: column;overflow: hidden;}
.chapterbox .reader-sidebar.show {right: 0;}
.chapterbox .sidebar-header {display: flex;justify-content: space-between;align-items: center;padding: 16px 20px;border-bottom: 1px solid #e0e0e0;background-color: #fff;}
.chapterbox .sidebar-header h3 {margin: 0;font-size: 18px;color: #333;}
.chapterbox .close-sidebar {width: 32px;height: 32px;border-radius: 50%;border: none;background-color: #f5f5f5;cursor: pointer;display: flex;align-items: center;justify-content: center;font-size: 16px;color: #333;transition: all 0.3s ease;}
.chapterbox .close-sidebar:hover {background-color: #e0e0e0;}
.chapterbox .sidebar-content {flex: 1;overflow-y: auto;padding: 20px;}
/* 章节目录样式 */
.chapterbox .chapter-list {margin-bottom: 30px;}
.chapterbox .group-title {font-size: 16px;font-weight: 500;color: #333;margin-bottom: 15px;}
.chapterbox .chapter-items {list-style: none;padding: 0;margin: 0;}
.chapterbox .chapter-item {margin-bottom: 10px;padding: 10px;background: #f9f9f9;border-radius: 8px;transition: background-color 0.3s ease;position: relative;}
.chapterbox .chapter-item:hover {background-color: #f5f5f5;}
.chapterbox .chapter-item.active {background-color: #ffe5e5;}
.chapterbox .chapter-link {text-decoration: none;color: #333;font-size: 14px;display: block;}
.chapterbox .chapter-item.active .chapter-link {color: #ff6b6b;font-weight: 500;}
.chapterbox .new-tag {position: absolute;right: 10px;top: 50%;transform: translateY(-50%);background-color: #ff6b6b;color: #fff;padding: 2px 6px;border-radius: 4px;font-size: 10px;}
/* 相关推荐样式 */
.chapterbox .section-title {font-size: 16px;font-weight: 500;color: #333;margin-bottom: 15px;}
.chapterbox .recommend-list {display: flex;flex-direction: column;gap: 15px;}
.chapterbox .recommend-item {display: flex;gap: 12px;padding: 10px;border-radius: 8px;background-color: #f8f8f8;transition: transform 0.3s ease;cursor: pointer;}
.chapterbox .recommend-item:hover {transform: translateY(-2px);box-shadow: 0 2px 8px rgba(0,0,0,0.1);}
.chapterbox .recommend-cover {width: 60px;height: 84px;flex-shrink: 0;overflow: hidden;border-radius: 4px;}
.chapterbox .cover-img {width: 100%;height: 100%;object-fit: cover;transition: transform 0.3s ease;}
.chapterbox .recommend-item:hover .cover-img {transform: scale(1.05);}
.chapterbox .recommend-info {flex: 1;display: flex;flex-direction: column;justify-content: space-between;}
.chapterbox .recommend-title {font-size: 14px;font-weight: 500;color: #333;margin: 0 0 4px 0;}
.chapterbox .recommend-desc {font-size: 12px;color: #666;margin: 0 0 4px 0;line-height: 1.3;}
.chapterbox .recommend-status {font-size: 11px;color: #ff6b6b;background-color: #ffe5e5;padding: 2px 6px;border-radius: 3px;align-self: flex-start;}
/* 侧边栏遮罩 */
.chapterbox .sidebar-overlay {position: fixed;top: 0;left: 0;width: 100vw;height: 100vh;background-color: rgba(0,0,0,0.5);z-index: 999;display: none;transition: opacity 0.3s ease;}
.chapterbox .sidebar-overlay.show {display: block;}
/* 响应式设计 */
@media (max-width: 768px) {
    .chapterbox .reader-header {padding: 10px 15px;}
    .chapterbox .comic-title {font-size: 16px;}
    .chapterbox .chapter-title {font-size: 12px;}
    .chapterbox .btn-icon {padding: 6px 10px;font-size: 12px;}
    .chapterbox .menu-btn, .settings-btn {width: 32px;height: 32px;font-size: 16px;}
    .chapterbox .reader-header-left, .reader-header-right {gap: 10px;}
    .chapterbox .comic-pages {padding: 0 10px;}
    .chapterbox .comic-page {margin-bottom: 15px;}
    .chapterbox .settings-panel {width: calc(100vw - 40px);right: 20px;}
    /* 底部功能栏响应式 */
    .chapterbox .footer-content {flex-wrap: wrap;}
    .chapterbox .footer-left, .footer-right {gap: 8px;}
    .chapterbox .footer-btn {padding: 6px 10px;font-size: 12px;}
    .chapterbox .footer-btn .text {display: none;}
    .chapterbox .reading-progress {order: 3;width: 100%;margin-top: 10px;}
    /* 侧边栏响应式 */
    .chapterbox .reader-sidebar {width: 100%;right: -100%;}
    .chapterbox .sidebar-content {padding: 15px;}
}
@media (max-width: 480px) {
    .chapterbox .btn-icon span {display: none;}
    .chapterbox .btn-icon {width: 36px;height: 36px;border-radius: 50%;padding: 0;justify-content: center;}
    .chapterbox .footer-btn {gap: 4px;}
    .chapterbox .footer-btn .icon {font-size: 16px;}
}
/* 阅读模式下的标准头部和底部样式调整 */
body.night-mode .header,
body.night-mode .footer {
    background-color: #333;
    border-color: #555;
}

body.night-mode .nav-link,
body.night-mode .user-link,
body.night-mode .footer-col h4,
body.night-mode .footer-col ul li a,
body.night-mode .app-download p,
body.night-mode .footer-links a {
    color: #ccc;
}

body.night-mode .download-link,
body.night-mode .copyright {
    color: #999;
}

body.sepia-mode .header,
body.sepia-mode .footer {
    background-color: #f4ecd8;
    border-color: #e6d7b8;
}
/* 阅读模式样式 */
body.night-mode {
    background-color: #222;
}

body.night-mode .reader-header {
    background-color: #333;
    border-color: #555;
}

body.night-mode .comic-title {
    color: #fff;
}

body.night-mode .chapter-title {
    color: #ccc;
}

body.night-mode .btn-icon {
    background-color: #555;
    border-color: #666;
    color: #fff;
}

body.night-mode .menu-btn, body.night-mode .settings-btn {
    background-color: #555;
    color: #fff;
}

body.night-mode .settings-panel {
    background-color: #333;
    border-color: #555;
}

body.night-mode .setting-label {
    color: #fff;
}

body.night-mode .mode-btn {
    background-color: #555;
    border-color: #666;
    color: #fff;
}

body.night-mode .reader-content {
    background-color: #222;
}

body.night-mode .comic-page {
    background-color: #1a1a1a;
}

body.sepia-mode .reader-content {
    background-color: #f4ecd8;
}

body.sepia-mode .comic-page {
    background-color: #f8f0d9;
}
/* 弹窗基础样式 */
.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);}
.about-content {padding: var(--spacing-xl) 0;background-color: var(--light-gray);position: relative;}
.about-content::before {content: '';position: absolute;top: 0;left: 0;width: 100%;height: 100px;background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);clip-path: polygon(0 0, 100% 0, 100% 70%, 0 100%);opacity: 0.05;z-index: 0;}
.about-content .page-header {text-align: center;margin-bottom: var(--spacing-xxl);position: relative;padding: var(--spacing-lg) 0;background-color: var(--white);border-radius: var(--border-radius);box-shadow: var(--shadow);margin-top: -var(--spacing-lg);position: relative;z-index: 1;}
.about-content .page-title {font-size: 3.2rem;color: var(--text-primary);margin-bottom: var(--spacing-xs);font-weight: 700;position: relative;display: inline-block;letter-spacing: -0.5px;line-height: 1.2;}
.about-content .page-title::after {content: '';position: absolute;bottom: -15px;left: 50%;transform: translateX(-50%);width: 100px;height: 4px;background-color: var(--primary-color);border-radius: 2px;}
.about-content .page-subtitle {font-size: 1.2rem;color: var(--text-secondary);margin-top: var(--spacing-lg);max-width: 800px;margin-left: auto;margin-right: auto;line-height: 1.6;}
.about-content .section-title {font-size: 2.4rem;margin-bottom: var(--spacing-lg);padding-bottom: var(--spacing-md);border-bottom: 3px solid var(--medium-gray);color: var(--text-primary);font-weight: 600;position: relative;line-height: 1.3;letter-spacing: -0.5px;}
.about-content .section-title::after {content: '';position: absolute;bottom: -3px;left: 0;width: 100px;height: 3px;background-color: var(--primary-color);}
.about-content .animate-fade-in-up {animation: fadeInUp var(--transition-slow) ease-out forwards;}
.about-content .animate-fade-in {animation: fadeIn var(--transition-normal) ease-out forwards;}
.about-content .animate-slide-in-left {animation: slideInLeft var(--transition-slow) ease-out forwards;}
.about-content .animate-pulse {animation: pulse 2s ease-in-out infinite;}
.about-content .animate-float {animation: float 3s ease-in-out infinite;}
.about-content .about-section {margin-bottom: var(--spacing-xxl);background-color: var(--white);border-radius: var(--border-radius);padding: var(--spacing-xl);box-shadow: var(--shadow);transition: all var(--transition-normal);position: relative;overflow: hidden;}
.about-content .about-section:hover {box-shadow: var(--shadow-hover);transform: translateY(-3px);}
.about-content .page-header {animation: fadeInUp var(--transition-slow) ease-out 0.2s forwards;}
.about-content .about-section:nth-child(1) {animation: fadeInUp var(--transition-slow) ease-out 0.4s forwards;}
.about-content .about-section:nth-child(2) {animation: fadeInUp var(--transition-slow) ease-out 0.6s forwards;}
.about-content .about-section:nth-child(3) {animation: fadeInUp var(--transition-slow) ease-out 0.8s forwards;}
.about-content .about-section:nth-child(1)::before {content: '';position: absolute;left: 0;top: 0;bottom: 0;width: 6px;background: linear-gradient(to bottom, var(--primary-color), var(--primary-dark));}
.about-content .about-section:nth-child(2)::before {content: '';position: absolute;left: 0;top: 0;bottom: 0;width: 6px;background: linear-gradient(to bottom, var(--secondary-color), #0abde3);}
.about-content .about-section:nth-child(3)::before {content: '';position: absolute;left: 0;top: 0;bottom: 0;width: 6px;background: linear-gradient(to bottom, var(--accent-color), #10ac84);}
.about-content .story-content,.about-content .history-content {line-height: 1.8;margin-bottom: var(--spacing-lg);color: var(--text-secondary);font-size: 1.1rem;}
.about-content .story-content p,.about-content .history-content p {margin-bottom: var(--spacing-md);text-align: justify;line-height: 1.8;}
.about-content .story-content p:last-child,.about-content .history-content p:last-child {margin-bottom: 0;}
.about-content .story-section h3,.about-content .history-section h3,.about-content .team-section h3 {font-size: 1.8rem;color: var(--text-primary);margin-bottom: var(--spacing-lg);margin-top: var(--spacing-xl);font-weight: 600;position: relative;padding-left: var(--spacing-md);}
.about-content .story-section h3::before,.about-content .history-section h3::before,.about-content .team-section h3::before {content: '';position: absolute;left: 0;top: 50%;transform: translateY(-50%);width: 4px;height: 70%;background-color: var(--primary-color);border-radius: 2px;}
.about-content .history-item {display: flex;margin-bottom: 30px;padding-left: 50px;position: relative;padding-bottom: 30px;}
.about-content .history-item::before {content: '';position: absolute;left: 15px;top: 8px;width: 16px;height: 16px;border-radius: 50%;background-color: var(--primary-color);box-shadow: 0 0 0 5px rgba(255, 107, 107, 0.15);z-index: 1;}
.about-content .history-item::after {content: '';position: absolute;left: 22px;top: 28px;width: 2px;height: calc(100% - 10px);background-color: var(--medium-gray);}
.about-content .history-item:last-child::after {display: none;}
.about-content .history-year {font-weight: bold;color: var(--primary-dark);min-width: 100px;font-size: 1.1rem;margin-right: 20px;}
.about-content .history-desc {flex: 1;font-size: 1.05rem;line-height: 1.7;color: var(--text-secondary);}
.about-content .team-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));gap: var(--spacing-lg);margin-top: var(--spacing-xl);}
.about-content .team-member {text-align: center;padding: var(--spacing-lg);background-color: var(--white);border-radius: var(--border-radius);box-shadow: var(--shadow);transition: all var(--transition-normal);border: 1px solid transparent;animation: fadeInUp var(--transition-slow) ease-out forwards;position: relative;overflow: hidden;}
.about-content .team-member:nth-child(1) { animation-delay: 0.2s; }
.about-content .team-member:nth-child(2) { animation-delay: 0.4s; }
.about-content .team-member:nth-child(3) { animation-delay: 0.6s; }
.about-content .team-member:nth-child(4) { animation-delay: 0.8s; }
.about-content .team-member:hover {transform: translateY(-10px) scale(1.02);box-shadow: var(--shadow-hover);border-color: var(--primary-color);}
.about-content .team-member::before {content: '';position: absolute;top: 0;left: -100%;width: 100%;height: 100%;background: linear-gradient(90deg, transparent, rgba(255, 107, 107, 0.05), transparent);transition: left 0.5s ease;}
.about-content .team-member:hover::before {left: 100%;}
.about-content .team-avatar {width: 140px;height: 140px;border-radius: 50%;margin: 0 auto var(--spacing-md);object-fit: cover;border: 5px solid var(--light-gray);transition: all var(--transition-normal);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);}
.about-content .team-member:hover .team-avatar {border-color: var(--primary-color);transform: scale(1.05);box-shadow: 0 10px 25px rgba(255, 107, 107, 0.3);}
.about-content .team-name {font-size: 1.3rem;font-weight: 600;margin-bottom: var(--spacing-xs);color: var(--text-primary);transition: color var(--transition-fast);}
.about-content .team-member:hover .team-name {color: var(--primary-color);}
.about-content .team-position {color: var(--primary-color);margin-bottom: var(--spacing-md);font-size: 1.05rem;font-weight: 500;transition: color var(--transition-fast);}
.about-content .team-member:hover .team-position {color: var(--primary-dark);}
.about-content .team-desc {font-size: 1rem;color: var(--text-secondary);line-height: 1.7;transition: color var(--transition-fast);}
.about-content .contact-info {display: flex;flex-wrap: wrap;gap: var(--spacing-md);justify-content: space-between;}
.about-content .contact-item {flex: 1;min-width: 280px;padding: var(--spacing-lg);background-color: var(--white);border-radius: var(--border-radius);box-shadow: var(--shadow);transition: all var(--transition-normal);border-top: 4px solid var(--primary-color);animation: fadeInUp var(--transition-slow) ease-out forwards;position: relative;overflow: hidden;}
.about-content .contact-item:nth-child(1) { animation-delay: 0.3s; border-top-color: var(--primary-color); }
.about-content .contact-item:nth-child(2) { animation-delay: 0.5s; border-top-color: var(--secondary-color); }
.about-content .contact-item:nth-child(3) { animation-delay: 0.7s; border-top-color: var(--accent-color); }
.about-content .contact-item:hover {transform: translateY(-8px) scale(1.02);box-shadow: var(--shadow-hover);}
.about-content .contact-item::before {content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: linear-gradient(90deg, transparent, currentColor, transparent);animation: slideGradient 3s ease-in-out infinite;}
.about-content .contact-item:nth-child(1) { color: var(--primary-color); }
.about-content .contact-item:nth-child(2) { color: var(--secondary-color); }
.about-content .contact-item:nth-child(3) { color: var(--accent-color); }
@keyframes slideGradient {0%, 100% { background-position: 0% 50%; }50% { background-position: 100% 50%; }
}
.about-content .contact-item h4 {font-size: 1.4rem;margin-bottom: var(--spacing-md);color: var(--text-primary);font-weight: 600;transition: color var(--transition-fast);}
.about-content .contact-item:hover h4 {color: currentColor;}
.about-content .contact-item p {margin-bottom: var(--spacing-md);line-height: 1.7;color: var(--text-secondary);font-size: 1.05rem;transition: color var(--transition-fast);}
.about-content .contact-item a {color: var(--primary-color);text-decoration: none;transition: all var(--transition-fast);font-weight: 500;position: relative;}
.about-content .contact-item a:hover {color: var(--primary-dark);}
.about-content .contact-item a::after {content: '';position: absolute;bottom: -2px;left: 0;width: 0;height: 2px;background-color: currentColor;transition: width var(--transition-fast);}
.about-content .contact-item a:hover::after {width: 100%;}
.about-content .social-links {display: flex;gap: var(--spacing-sm);margin-top: var(--spacing-md);justify-content: center;}
.about-content .social-link {display: inline-flex;align-items: center;justify-content: center;width: 45px;height: 45px;background-color: var(--text-primary);color: white;border-radius: 50%;transition: all var(--transition-normal);font-size: 1.2rem;box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);position: relative;overflow: hidden;}
.about-content .social-link:hover {background-color: currentColor;transform: translateY(-5px) scale(1.1);box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);}
.about-content .social-link:nth-child(1):hover { color: #1da1f2; } /* 微博蓝 */
.about-content .social-link:nth-child(2):hover { color: #07c160; } /* 微信绿 */
.about-content .social-link:nth-child(3):hover { color: #ff0050; } /* 抖音红 */
.about-content .social-link:nth-child(4):hover { color: #fb7299; } /* B站粉 */
.about-content .social-link::after {content: '';position: absolute;top: 50%;left: 50%;width: 0;height: 0;border-radius: 50%;background-color: rgba(255, 255, 255, 0.3);transform: translate(-50%, -50%);transition: width 0.6s, height 0.6s;}
.about-content .social-link:hover::after {width: 300px;height: 300px;}
.about-content .terms-section {background-color: var(--white);padding: 40px;border-radius: 12px;text-align: center;box-shadow: var(--shadow);border: 1px solid var(--medium-gray);}
.about-content .terms-section a {color: var(--text-secondary);text-decoration: none;margin: 0 20px;font-size: 1.1rem;font-weight: 500;transition: all 0.3s ease;position: relative;padding: 8px 0;}
.about-content .terms-section a::after {content: '';position: absolute;bottom: 0;left: 0;width: 0;height: 2px;background-color: var(--primary-color);transition: width 0.3s ease;}
.about-content .terms-section a:hover {color: var(--primary-color);}
.about-content .terms-section a:hover::after {width: 100%;}
@media (max-width: 1200px) {
.about-content .page-header {padding: var(--spacing-xl) var(--spacing-lg);}
.about-content .about-section {padding: var(--spacing-lg);}
}
@media (max-width: 992px) {
.about-content .page-title {font-size: 2.5rem;}
.about-content .section-title {font-size: 1.8rem;}
.about-content .history-item {padding-left: 90px;}
.about-content .history-year {min-width: 80px;font-size: 1rem;}
.about-content .team-member {padding: var(--spacing-md);}
.about-content .team-avatar {width: 120px;height: 120px;}
}
@media (max-width: 768px) {
body {font-size: 15px;}
.about-content {padding: 0;}
.about-content .page-header {padding: var(--spacing-lg) var(--spacing-md);}
.about-content .page-title {font-size: 2rem;margin-bottom: var(--spacing-md);}
.about-content .page-subtitle {font-size: 1.1rem;}
.about-content .about-section {padding: var(--spacing-md);margin-bottom: var(--spacing-lg);}
.about-content .section-title {font-size: 1.6rem;margin-bottom: var(--spacing-md);padding-bottom: var(--spacing-sm);}
.about-content .history-item {padding-left: 70px;padding-bottom: var(--spacing-md);}
.about-content .history-year {min-width: 60px;font-size: 0.9rem;}
.about-content .contact-info {flex-direction: column;gap: var(--spacing-sm);}
.about-content .contact-item {padding: var(--spacing-md);min-width: auto;}
.about-content .contact-item h4 {font-size: 1.3rem;margin-bottom: var(--spacing-sm);}
.about-content .team-grid {gap: var(--spacing-md);margin-top: var(--spacing-lg);}
.about-content .team-member {padding: var(--spacing-md);}
.about-content .team-avatar {width: 100px;height: 100px;margin-bottom: var(--spacing-sm);}
.about-content .team-name {font-size: 1.2rem;}
.about-content .social-links {gap: var(--spacing-xs);}
.about-content .social-link {width: 40px;height: 40px;font-size: 1.1rem;}
.about-content .terms-section {padding: 30px 15px;}
.about-content .terms-section a {display: block;margin: 15px 0;
}
@media (max-width: 480px) {
.about-content .page-title {font-size: 1.8rem;}
.about-content .page-subtitle {font-size: 1rem;}
.about-content .history-item {padding-left: 60px;}
.about-content .history-year {min-width: 50px;font-size: 0.85rem;}
.about-content .social-link {width: 38px;height: 38px;font-size: 1rem;}
.about-content h2 {margin-bottom: var(--spacing-sm);}
.about-content p {margin-bottom: var(--spacing-sm);}
}
@media (hover: none) and (pointer: coarse) {
.about-content .team-member,.about-content .contact-item,.about-content .social-link,.about-content .about-section {transition: all 0.2s ease;}
.about-content .social-link {width: 48px;height: 48px;}
.about-content .team-member:active,.about-content .contact-item:active {transform: scale(0.98);}
.about-content .social-link:active {transform: scale(0.95);}
}