/* ------------------------------------
 * panlearn Theme CSS
 *
 * @author  hygd0813
 * @link  https://www.panlearn.cn
 * @update  2025-09-03
 * --------------------------------- */

/* ------------------
 * Global style
 * --------------- */
body {
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&display=swap');
        
        * {
            font-family: 'Noto Sans SC', sans-serif;
        }
}

/* ------------------
 * Index style
 * --------------- */
        .gradient-bg {
            background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%);
        }
        
        .card-hover {
            transition: all 0.3s ease;
        }
        
        .card-hover:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
        }
        
        .nav-item {
            position: relative;
            overflow: hidden;
        }
        
        .nav-item::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            height: 2px;
            width: 0;
            background: #f59e0b;
            transition: width 0.3s ease;
        }
        
        .nav-item:hover::after,
        .nav-item.active::after {
            width: 100%;
        }
        
        .category-card {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .scroll-container {
            scrollbar-width: thin;
            scrollbar-color: #4b5563 #1f2937;
        }
        
        .scroll-container::-webkit-scrollbar {
            height: 6px;
        }
        
        .scroll-container::-webkit-scrollbar-track {
            background: #1f2937;
        }
        
        .scroll-container::-webkit-scrollbar-thumb {
            background: #4b5563;
            border-radius: 3px;
        }
        
        .badge-new {
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
            }
            70% {
                box-shadow: 0 0 0 10px rgba(239, 68, 68, 0);
            }
            100% {
                box-shadow: 0 0 0 0 rgba(239, 68, 68, 0);
            }
        }
        
		/* 在CSS中添加 */
		#film, #tv, #photo-film, #video, #dragon, #music {
		    scroll-margin-top: 80px;
		}
		
		
		
/* ------------------
* category style
* --------------- */
        .glass-effect {
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.1);
        }
        
        .hover-scale {
            transition: transform 0.3s ease;
        }
        
        .hover-scale:hover {
            transform: scale(1.05);
        }
        
        .nav-link {
            position: relative;
            transition: color 0.3s ease;
        }
        
        .nav-link::after {
            content: '';
            position: absolute;
            bottom: -5px;
            left: 0;
            width: 0;
            height: 2px;
            background: #667eea;
            transition: width 0.3s ease;
        }
        
        .nav-link:hover::after,
        .nav-link.active::after {
            width: 100%;
        }
        
        .card {
            opacity: 0;
            transform: translateY(20px);
            transition: all 0.3s ease;
        }
        
        .card.show {
            opacity: 1;
            transform: translateY(0);
        }
        
        .filter-btn {
            transition: all 0.3s ease;
        }
        
        .filter-btn.active {
            background: #667eea;
            color: white;
        }
        
        .rating-star {
            color: #fbbf24;
        }
        
        .tag {
            transition: all 0.3s ease;
        }
        
        .tag:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
        }
        
        .scroll-smooth {
            scroll-behavior: smooth;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .fade-in {
            animation: fadeIn 0.6s ease forwards;
        }

/* ------------------
* post style
* --------------- */

.post-content p {margin-top:.75rem;margin-bottom:.75rem;}
.post-content a {margin: 0 .5rem;color: #2E8B57;}
.post-content a:hover {margin: 0 .5rem;color: orange;}
/* 合并相同样式并添加美化效果 */
.post-content h1, .post-content h2 {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 20px;
    font-weight: 900;
    color: #2E8B57; /* 使用更柔和的海绿色 */
    position: relative;
    padding-bottom: 0.5rem;
    border-bottom: 2px solid rgba(46, 139, 87, 0.3); /* 添加下划线 */
    transition: all 0.3s ease; /* 添加过渡效果 */
}

.post-content h3, .post-content h4 {
    margin-top: 1rem;
    margin-bottom: 1rem;
    font-size: 18px;
    color: #2E8B57;
    position: relative;
    padding-left: 1rem; /* 添加左边距 */
    transition: all 0.3s ease;
}

/* 分别设置不同字重 */
.post-content h1 { font-weight: 900; }
.post-content h2 { font-weight: 800; }
.post-content h3 { font-weight: 700; }
.post-content h4 { font-weight: 600; }

/* 添加伪元素作为装饰 */
.post-content h3::before, .post-content h4::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 4px;
    height: 70%;
    background-color: #2E8B57;
    border-radius: 2px;
}

/* 添加悬停效果 */
.post-content h1:hover, .post-content h2:hover {
    color: #1E5F3F; /* 悬停时颜色加深 */
    border-bottom-color: #1E5F3F;
}

.post-content h3:hover, .post-content h4:hover {
    color: #1E5F3F;
    padding-left: 1.2rem; /* 悬停时轻微向右移动 */
}


/* ------------------
* 分页自定义样式
* --------------- */
.page-navigator {
  list-style: none;margin: 1.5rem 0;padding: 0;text-align: center;}
.page-navigator li {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    display: inline-block;
    FONT-WEIGHT: bold; MARGIN: .25rem; COLOR: #fff;
    border-radius: 0.25rem;TEXT-ALIGN: center;
    --tw-bg-opacity: 1;
    background-color: rgb(31 41 55 / var(--tw-bg-opacity, 1));
}
.page-navigator a {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  FONT-WEIGHT: bold; COLOR: #fff;TEXT-DECORATION: none;border-radius: 0.25rem;
}
.page-navigator a:hover {
  COLOR: #fff; --tw-bg-opacity: 1;background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.page-navigator a:active {
  COLOR: #666;  --tw-bg-opacity: 1;background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}
.page-navigator .current a {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    padding-right: 1rem;
  FONT-WEIGHT: bold; COLOR: #fff;
    border-radius: 0.25rem;
    --tw-bg-opacity: 1;background-color: rgb(147 51 234 / var(--tw-bg-opacity, 1));
}

/* 赞踩评级 */
.p_star{ width: 100px; position: absolute;display: inline;}
.product-star10 { background: url(../../panlearn/img/rating/star10.png) no-repeat 0px center; height: 24px; background-size: 90px; }
.product-star9 { background: url(../../panlearn/img/rating/star9.png) no-repeat 0px center; height: 24px; background-size: 90px; }
.product-star8 { background: url(../../panlearn/img/rating/star8.png) no-repeat 0px center; height: 24px; background-size: 90px; }
.product-star7 { background: url(../../panlearn/img/rating/star7.png) no-repeat 0px center; height: 24px; background-size: 90px; }
.product-star6 { background: url(../../panlearn/img/rating/star6.png) no-repeat 0px center; height: 24px; background-size: 90px; }
.product-star5 { background: url(../../panlearn/img/rating/star5.png) no-repeat 0px center; height: 24px; background-size: 90px; }
.product-star4 { background: url(../../panlearn/img/rating/star4.png) no-repeat 0px center; height: 24px; background-size: 90px; }
.product-star3 { background: url(../../panlearn/img/rating/star3.png) no-repeat 0px center; height: 24px; background-size: 90px; }
.product-star2 { background: url(../../panlearn/img/rating/star2.png) no-repeat 0px center; height: 24px; background-size: 90px; }
.product-star1 { background: url(../../panlearn/img/rating/star1.png) no-repeat 0px center; height: 24px; background-size: 90px; }
.product-star0 { background: url(../../panlearn/img/rating/star0.png) no-repeat 0px center; height: 24px; background-size: 90px; }

/* tooltip提示框 */
.tooltip {
	position: relative;
}

.tooltip:hover::before {
	white-space: nowrap;
	line-height: 20px;
	content: attr(data-msg);
	position: absolute;
	padding: 5px 10px;
	display: block;
	color: #ffffff;
	background: #656565;
	border-radius: 6px;
	font-size: 14px;
	top: -37px;
	left: 50%;
	transform: translateX(-50%);
}

.tooltip:hover::after {
	content: "";
	position: absolute;
	top: -8px;
	left: 50%;
	transform: translateX(-50%);
	border: 6px solid transparent;
	border-top: 6px solid #656565;
}