* {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

body {
	font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	background-color: #fcf5de; /* Cream background */
	color: #333;
	overflow-x: hidden; /* 防止横向滚动 */
}

/* Header */
.main-header {
	background-color: #ff8c00; /* Orange */
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 10px 15px;
	position: sticky;
	top: 0;
	z-index: 100;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.header-icon img {
	width: 24px;
	height: 24px;
	display: block;
}

.header-logo img {
	height: 40px;
	display: block;
}

/* Main Content */
main {
	padding: 15px;
	max-width: 1200px; /* Increased from 600px to allow wider layouts */
	margin: 0 auto;
	width: 100%;
}

/* Video Feed */
.video-feed {
	display: grid;
	grid-template-columns: minmax(0, 1fr); /* Fix for grid overflow */
	gap: 15px;
}

@media (min-width: 768px) {
	.video-feed {
		grid-template-columns: repeat(3, minmax(0, 1fr)); /* Desktop/Tablet: 3 columns */
		gap: 20px;
	}
}

/* 768-1120px 范围内的卡片高度优化 */
@media (min-width: 768px) and (max-width: 1120px) {
	.video-thumb {
		min-height: 180px;
	}
}

/* Ad Card - 跨越所有列 */
.ad-card {
	grid-column: 1 / -1;
	width: 100%;
}

.video-card {
	background: #fff;
	border-radius: 15px;
	overflow: hidden;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	position: relative;
	transition: transform 0.2s;
	display: block;
	text-decoration: none;
	color: inherit;
	width: 100%;
	max-width: 100%;
}

.video-card:hover {
	transform: translateY(-5px);
}

.video-thumb-container {
	width: 100%;
	position: relative;
	isolation: isolate;
}

.video-thumb {
	width: 100%;
	height: auto;
	display: block;
	aspect-ratio: 16/9;
	object-fit: cover;
}

/* Play Button */
.play_button {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 60px; /* Default smaller for mobile list view if needed, or keep 88px but scale */
	height: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	/* Orange-red solid background */
	background: #ff5722;
	/* White outer ring */
	border: 3px solid #fff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.25);
	transition: all 0.3s ease;
	z-index: 2;
	cursor: pointer;
	animation: jello-horizontal 2s ease-in-out infinite;
	-webkit-animation: jello-horizontal 2s ease-in-out infinite;
}

@media (min-width: 768px) {
	.play_button {
		width: 88px;
		height: 88px;
		border-width: 4px;
	}
}

.play_button .play_icon {
	display: block;
	width: 0;
	height: 0;
	margin-left: 5px;
	border-style: solid;
	border-width: 12px 0 12px 20px;
	border-color: transparent transparent transparent #fff;
}

@media (min-width: 768px) {
	.play_button .play_icon {
		margin-left: 7px;
		border-width: 17px 0 17px 29px;
	}
}

/* Popular Play Button - 特殊样式 */
.play_button_popular {
	/* 绝对居中 */
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	margin: auto;
	width: 150px;
	height: 150px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	border: none;
	box-shadow: 0 4px 20px rgba(0, 200, 150, 0.4);
	z-index: 2;
	cursor: pointer;
	/* 禁用抖动动画 */
	animation: none;
	-webkit-animation: none;
}

/* 普通按钮（移动端备用）- 默认隐藏 */
.play_button_normal {
	display: none;
}

/* 768px以下：控制按钮显示逻辑 */
@media (max-width: 768px) {
	/* 隐藏第2、3个视频的特效按钮 */
	.play_button_popular[data-index="1"],
	.play_button_popular[data-index="2"] {
		display: none !important;
	}

	/* 显示第2、3个视频的普通按钮 */
	.play_button_normal[data-index="1"],
	.play_button_normal[data-index="2"] {
		display: flex;
	}

	/* 隐藏第2、3个视频的 HOT 标签 */
	.popular_tag[data-index="1"],
	.popular_tag[data-index="2"] {
		display: none !important;
	}
}

/* 彩虹渐变圆环 - 使用伪元素 */
.play_button_popular::before {
	content: "";
	position: absolute;
	top: -8px;
	left: -8px;
	right: -8px;
	bottom: -8px;
	border-radius: 50%;
	background: conic-gradient(
		from 0deg,
		#ff0000,
		#ff8000,
		#ffff00,
		#80ff00,
		#00ff00,
		#00ff80,
		#00ffff,
		#0080ff,
		#0000ff,
		#8000ff,
		#ff00ff,
		#ff0080,
		#ff0000
	);
	z-index: -1;
	animation: rainbow_ring_rotate 3s linear infinite;
	-webkit-animation: rainbow_ring_rotate 3s linear infinite;
}

/* 内圈 - 五彩斑斓旋转 + 半透明 */
.play_button_popular::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	border-radius: 50%;
	background: conic-gradient(
		from 180deg,
		rgba(255, 0, 0, 0.9),
		rgba(255, 128, 0, 0.9),
		rgba(255, 255, 0, 0.9),
		rgba(128, 255, 0, 0.9),
		rgba(0, 255, 0, 0.9),
		rgba(0, 255, 128, 0.9),
		rgba(0, 255, 255, 0.9),
		rgba(0, 128, 255, 0.9),
		rgba(0, 0, 255, 0.9),
		rgba(128, 0, 255, 0.9),
		rgba(255, 0, 255, 0.9),
		rgba(255, 0, 128, 0.9),
		rgba(255, 0, 0, 0.9)
	);
	z-index: 0;
	border: 3px solid rgba(244, 244, 14, 1);
}

/* 隐藏旧的彩虹圈元素 */
.play_button_popular .rainbow_ring {
	display: none;
}

/* 星星容器 */
.play_button_popular .stars {
	position: absolute;
	top: -15px;
	left: -15px;
	right: -15px;
	bottom: -15px;
	pointer-events: none;
	z-index: 5;
}

/* 单个星星 - 四角星形状 ✦ */
.play_button_popular .star {
	position: absolute;
	width: 28px;
	height: 28px;
	background: linear-gradient(135deg, #ffe55c 0%, #ffd700 50%, #ffc800 100%);
	clip-path: polygon(50% 0%, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0% 50%, 38% 38%);
	animation: star_twinkle 1.2s ease-in-out infinite;
	-webkit-animation: star_twinkle 1.2s ease-in-out infinite;
	filter: drop-shadow(0 0 6px #ffd700);
}

.play_button_popular .star:nth-child(1) {
	top: 0;
	right: 15%;
	animation-delay: 0s;
}

.play_button_popular .star:nth-child(2) {
	top: 25%;
	right: -5px;
	animation-delay: 0.2s;
}

.play_button_popular .star:nth-child(3) {
	bottom: 10%;
	right: 5%;
	animation-delay: 0.4s;
}

.play_button_popular .star:nth-child(4) {
	bottom: 0;
	left: 25%;
	animation-delay: 0.6s;
}

.play_button_popular .star:nth-child(5) {
	bottom: 25%;
	left: -5px;
	animation-delay: 0.8s;
}

.play_button_popular .star:nth-child(6) {
	top: 5%;
	left: 10%;
	animation-delay: 1s;
}

/* Play Icon for Popular Button */
.play_button_popular .play_icon {
	position: relative;
	z-index: 3;
	width: 0;
	height: 0;
	display: block;
	border-style: solid;
	border-width: 42px 0 42px 72px;
	margin-left: 15px;
	border-color: transparent transparent transparent #fff;
	filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.2));
}

/* Responsive for Popular Button */
@media screen and (max-width: 768px) {
	.play_button_popular {
		width: 120px;
		height: 120px;
	}

	.play_button_popular::before {
		top: -6px;
		left: -6px;
		right: -6px;
		bottom: -6px;
	}

	.play_button_popular .stars {
		top: -12px;
		left: -12px;
		right: -12px;
		bottom: -12px;
	}

	.play_button_popular .star {
		width: 22px;
		height: 22px;
	}

	.play_button_popular .play_icon {
		border-width: 33px 0 33px 57px;
		margin-left: 12px;
	}
}

@media screen and (max-width: 480px) {
	.play_button_popular {
		width: 100px;
		height: 100px;
	}

	.play_button_popular::before {
		top: -5px;
		left: -5px;
		right: -5px;
		bottom: -5px;
	}

	.play_button_popular .stars {
		top: -10px;
		left: -10px;
		right: -10px;
		bottom: -10px;
	}

	.play_button_popular .star {
		width: 18px;
		height: 18px;
	}

	.play_button_popular .play_icon {
		border-width: 27px 0 27px 48px;
		margin-left: 10px;
	}
}

/* Popular HOT Tag - 特殊样式 */
.popular_tag {
	position: absolute;
	top: 0;
	right: 0;
	width: 75px;
	height: 75px;
	z-index: 10;
	animation: hot_swing 3s ease-in-out infinite;
	transform-origin: top right;
	overflow: visible;
}

/* 四分之一圆 + 弧形锯齿 */
.popular_tag::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: #f94d1c;
	/* 四分之一圆，弧边带锯齿效果 */
	clip-path: polygon(
		100% 0%,
		100% 100%,
		/* 弧形锯齿 - 沿着圆弧从下往左上 */ 96% 96%,
		90% 100%,
		84% 96%,
		78% 99%,
		72% 94%,
		66% 97%,
		60% 90%,
		54% 93%,
		48% 84%,
		42% 87%,
		36% 76%,
		30% 79%,
		24% 66%,
		18% 69%,
		14% 54%,
		10% 57%,
		6% 42%,
		3% 45%,
		1% 30%,
		0% 33%,
		0% 18%,
		1% 14%,
		0% 6%,
		1% 3%,
		0% 0%
	);
	z-index: -1;
}

.popular_tag .hot_text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%) rotate(45deg);
	-webkit-transform: translate(-50%, -50%) rotate(45deg);
	-moz-transform: translate(-50%, -50%) rotate(45deg);
	-ms-transform: translate(-50%, -50%) rotate(45deg);
	-o-transform: translate(-50%, -50%) rotate(45deg);
	transform-origin: center center;
	color: #fff;
	font-size: 20px;
	font-weight: 900;
	letter-spacing: 3px;
	text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.3);
	z-index: 2;
}

.popular_tag .popular_icon {
	z-index: 1;
}

@media screen and (max-width: 768px) {
	.popular_tag {
		width: 75px;
		height: 75px;
	}

	.popular_tag .hot_text {
		font-size: 14px;
		letter-spacing: 1px;
	}
}

/* HOT Swing Animation */
@keyframes hot_swing {
	0%,
	100% {
		transform: rotate(0deg);
	}
	10% {
		transform: rotate(5deg);
	}
	30% {
		transform: rotate(-5deg);
	}
	50% {
		transform: rotate(3deg);
	}
	70% {
		transform: rotate(-3deg);
	}
	90% {
		transform: rotate(0deg);
	}
}

/* ... existing animations ... */

/* Category Section */
.category-section {
	margin-top: 25px;
}

/* ... existing category header ... */

.category-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}

@media (min-width: 768px) {
	.category-grid {
		grid-template-columns: repeat(4, 1fr); /* Desktop: 4 columns */
		gap: 20px;
	}
}

/* Animations */
@keyframes jello-horizontal {
	0% {
		transform: scale3d(1, 1, 1);
	}
	30% {
		transform: scale3d(1.25, 0.75, 1);
	}
	40% {
		transform: scale3d(0.75, 1.25, 1);
	}
	50% {
		transform: scale3d(1.15, 0.85, 1);
	}
	65% {
		transform: scale3d(0.95, 1.05, 1);
	}
	75% {
		transform: scale3d(1.05, 0.95, 1);
	}
	100% {
		transform: scale3d(1, 1, 1);
	}
}

@keyframes star_twinkle {
	0%,
	100% {
		opacity: 0.4;
		transform: scale(0.6);
	}
	50% {
		opacity: 1;
		transform: scale(1.3);
	}
}

@keyframes rainbow_ring_rotate {
	0% {
		transform: rotate(0deg);
	}
	100% {
		transform: rotate(360deg);
	}
}

.duration-badge {
	position: absolute;
	bottom: 10px;
	right: 10px;
	background: rgba(0, 0, 0, 0.7);
	color: #fff;
	padding: 2px 6px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: bold;
}

.hot-ribbon {
	position: absolute;
	top: 0;
	right: 0;
	background: #ff4500;
	color: white;
	font-size: 10px;
	font-weight: bold;
	padding: 5px 10px;
	border-bottom-left-radius: 10px;
	z-index: 10;
}

/* Category Section */
/* Category Section */
.category_list {
	width: 100%;
	margin-top: 25px;
}

.category_header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 20px;
}

.category_title {
	display: flex;
	align-items: center;
	gap: 8px;
}

.category_title .icon {
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

.category_title .icon img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.category_title .title_text {
	font-size: 24px;
	font-weight: 700;
	color: #333;
}

.more_link {
	font-size: 16px;
	font-weight: 600;
	color: #5b9bff;
	text-decoration: none;
	cursor: pointer;
	transition: color 0.3s ease;
}

.more_link:hover {
	color: #3d7fe0;
}

.category_grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.category_card {
	border-radius: 16px;
	cursor: pointer;
	transition: all 0.3s ease;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
	text-decoration: none;
	background-color: #ffffff;
}

.category_card:hover {
	transform: translateY(-4px);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.category_card .card_image {
	position: relative;
	width: 100%;
	height: 140px;
	overflow: hidden;
}

.category_card .card_image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.category_card .card_info {
	padding: 16px;
	text-align: left;
	background-color: #ffffff;
}

.category_card .card_info .category_name {
	font-size: 16px;
	font-weight: 700;
	color: #333333;
	margin: 0 0 4px 0;
	line-height: 1.3;
}

.category_card .card_info .video_count {
	font-size: 13px;
	color: #666666;
	margin: 0;
}

/* Responsive */
@media (max-width: 1132px) {
	.category_grid {
		grid-template-columns: repeat(3, 1fr);
		gap: 14px;
	}
	.category_card .card_image {
		height: 120px;
	}
	.category_card .card_info {
		padding: 14px;
	}
	.category_card .card_info .category_name {
		font-size: 15px;
	}
	.category_card .card_info .video_count {
		font-size: 12px;
	}
}

@media (max-width: 750px) {
	.category_header {
		margin-bottom: 16px;
	}
	.category_title .icon {
		width: 20px;
		height: 20px;
	}
	.category_title .title_text {
		font-size: 20px;
	}
	.more_link {
		font-size: 14px;
	}
	.category_grid {
		grid-template-columns: repeat(2, 1fr);
		gap: 12px;
	}
	.category_card {
		border-radius: 12px;
	}
	.category_card .card_image {
		height: 100px;
	}
	.category_card .card_info {
		padding: 12px;
	}
	.category_card .card_info .category_name {
		font-size: 14px;
		line-height: 1.3;
	}
	.category_card .card_info .video_count {
		font-size: 11px;
	}
}

@media (max-width: 480px) {
	.category_card .card_image {
		height: 90px;
	}
	.category_card .card_info {
		padding: 10px;
	}
	.category_card .card_info .category_name {
		font-size: 13px;
	}
	.category_card .card_info .video_count {
		font-size: 10px;
	}
}

/* Footer */
.footer {
	background: linear-gradient(180deg, #0052cc 0%, #0066ff 100%);
	padding: 60px 20px 40px;
	color: #ffffff;
	margin-top: 30px;
}

.footer .footer_content {
	max-width: 800px;
	margin: 0 auto;
	text-align: center;
}

.footer .footer_content .footer_logo {
	margin-bottom: 30px;
}

.footer .footer_content .footer_logo img {
	width: 200px;
	height: auto;
}

.footer .footer_content .footer_description {
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 20px;
	padding: 0 20px;
	font-weight: 400;
}

.footer .footer_content .footer_buttons {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 15px;
	margin-top: 40px;
	flex-wrap: wrap;
}

.footer .footer_content .footer_buttons .footer_button {
	display: inline-block;
	padding: 12px 30px;
	font-size: 16px;
	font-weight: 600;
	border: none;
	border-radius: 25px;
	cursor: pointer;
	transition: all 0.3s ease;
	color: #ffffff;
	min-width: 130px;
	text-decoration: none;
	text-align: center;
}

.footer .footer_content .footer_buttons .footer_button:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.footer .footer_content .footer_buttons .footer_button:active {
	transform: translateY(0);
}

.footer .footer_content .footer_buttons .footer_button.button_blue {
	background-color: #4169e1;
}

.footer .footer_content .footer_buttons .footer_button.button_orange {
	background-color: #ff8c00;
}

.footer .footer_content .footer_buttons .footer_button.button_pink {
	background-color: #ff69b4;
}

/* Responsive Footer */
@media (max-width: 768px) {
	.footer {
		padding: 20px 15px 20px;
	}

	.footer .footer_content .footer_logo {
		margin-bottom: 25px;
	}

	.footer .footer_content .footer_logo img {
		width: 150px;
	}

	.footer .footer_content .footer_description {
		font-size: 15px;
		margin-bottom: 18px;
		padding: 0 10px;
	}

	.footer .footer_content .footer_buttons {
		gap: 12px;
		margin-top: 30px;
	}

	.footer .footer_content .footer_buttons .footer_button {
		padding: 10px 25px;
		font-size: 15px;
		min-width: 110px;
	}
}

@media (max-width: 480px) {
	.footer .footer_content .footer_logo img {
		width: 130px;
	}

	.footer .footer_content .footer_description {
		font-size: 14px;
	}

	.footer .footer_content .footer_buttons .footer_button {
		padding: 10px 20px;
		font-size: 14px;
		min-width: 100px;
	}
}

/* Header */
.main-header {
	position: relative;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9;
	height: auto;
	box-sizing: border-box;
	transition: 0.5s;
	background: transparent; /* Moved background to header_content */
	padding: 0;
	display: flex;
	flex-direction: column;
}

.main-header .header_content {
	padding: 0 20px;
	width: 100%;
	box-sizing: border-box;
	background: #fc772e; /* Orange background for top part */
}

.main-header .header_box {
	max-width: 1820px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: 0 auto;
	width: 100%;
}

@media (max-width: 1870px) {
	.main-header .header_box {
		max-width: 1451px;
	}
}
@media (max-width: 1501px) {
	.main-header .header_box {
		max-width: 1082px;
	}
}
@media (max-width: 1132px) {
	.main-header .header_box {
		max-width: 713px;
	}
}
@media (max-width: 750px) {
	.main-header .header_box {
		max-width: 100%;
	}
}

.header-logo img {
	display: block;
	height: 50px;
	width: auto;
}

.back_home {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: 15px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
}

.back_home img {
	width: 25px;
	height: 25px;
	object-fit: contain;
}

/* Search Icon Wrapper */
.search_icon_wrapper {
	cursor: pointer;
	transition: transform 0.2s ease;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 36px;
	height: 36px;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.2);
	border-radius: 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	-ms-border-radius: 5px;
	-o-border-radius: 5px;
}

.search_icon_wrapper:hover {
	transform: scale(1.1);
}

.search_icon_wrapper:active {
	transform: scale(0.95);
}

.search_icon_wrapper img {
	width: 25px;
	height: 25px;
	object-fit: contain;
}

/* Header Category Bar */
.categories_bar {
	background: #fff8e7;
	padding: 15px 0;
	animation: slideDown 0.3s ease-out;
	width: 100%;
	display: none; /* Hidden by default */
	/* Removed absolute positioning to occupy space */
	/* position: absolute; */
	/* top: 100%; */
	/* left: 0; */
	/* z-index: 99; */
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.categories_bar.active {
	display: block;
}

.categories_bar .categories_container {
	display: flex;
	justify-content: space-around; /* Distribute space evenly */
	align-items: center;
	gap: 10px;
	padding: 0 20px;
	flex-wrap: nowrap;
	width: 100%;
	max-width: 100%;
	overflow: hidden; /* Prevent scrolling */
}

.categories_bar .categories_container .category_item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	flex: 1; /* Allow items to grow/shrink */
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.2s ease;
	min-width: 0; /* Allow shrinking below content size if needed */
}

.categories_bar .categories_container .category_item:hover {
	transform: translateY(-4px);
}

.categories_bar .categories_container .category_item:hover .category_icon img {
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.categories_bar .categories_container .category_item .category_icon {
	width: 55px;
	height: 55px;
	border-radius: 50%;
	overflow: hidden;
	background: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: box-shadow 0.2s ease;
}

.categories_bar .categories_container .category_item .category_icon img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.categories_bar .categories_container .category_item .category_name {
	font-size: 12px;
	font-weight: 500;
	color: #333;
	text-align: center;
	max-width: 70px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

@keyframes slideDown {
	from {
		opacity: 0;
		transform: translateY(-10px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Responsive adjustments for Header and Category Bar */
@media screen and (min-width: 601px) {
	.main-header .header_content {
		padding: 12px 40px;
	}

	.main-header .header_box .header-logo img {
		width: 120px;
		height: 65px;
	}

	.back_home {
		width: 60px;
		height: 60px;
		padding: 10px;
	}

	.back_home img {
		width: 40px;
		height: 40px;
	}

	.search_icon_wrapper {
		width: 60px;
		height: 60px;
	}

	.search_icon_wrapper img {
		width: 40px;
		height: 40px;
	}

	.categories_bar {
		margin-left: -40px;
		margin-right: -40px;
		width: calc(100% + 80px);
	}

	.categories_bar .categories_container {
		max-width: 100%;
		margin: 0 auto;
		padding: 0 40px;
		gap: 30px;
		justify-content: center;
	}

	.categories_bar .categories_container .category_item .category_icon {
		width: 70px;
		height: 70px;
	}

	.categories_bar .categories_container .category_item .category_name {
		font-size: 14px;
		max-width: 90px;
	}
}

/* Welcome Banner */
.welcome-banner {
	/* background-color: #FFF8E1; Removed to show body bg */
	padding: 15px 20px;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	box-sizing: border-box;
}

/* Detail Page Styles */
.detail-container {
	max-width: 1000px; /* Narrower container for detail view */
	margin: 0 auto;
	padding: 20px;
}

/* Video Player */
.video-player-container {
	width: 100%;
	aspect-ratio: 16/9;
	background: #000;
	border-radius: 20px;
	overflow: hidden;
	margin-bottom: 20px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
	position: relative;
}

.video-player-container iframe {
	width: 100%;
	height: 100%;
	border: none;
}

/* 视频播放按钮覆盖层 */
.video-overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	z-index: 2;
	transition: background-color 0.3s ease;
	border-radius: 20px;
}

.video-overlay:hover {
	background-color: rgba(0, 0, 0, 0.1);
}

/* 自定义播放按钮 */
.custom-play-button {
	position: relative;
	width: 96px;
	height: 68px;
	background: linear-gradient(45deg, #ff0066, #ff3300, #ff6600);
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
	animation: pulse 1.2s ease-in-out infinite;
	cursor: pointer;
	box-shadow: 0 0 20px rgba(255, 0, 100, 0.6), 0 0 40px rgba(255, 50, 150, 0.4), 0 4px 20px rgba(255, 0, 0, 0.5);
	border: 2px solid rgba(255, 255, 255, 0.3);
}

.custom-play-button:hover {
	background: linear-gradient(45deg, #ff00ff, #ff0066, #ff3300, #ffaa00);
	transform: scale(1.25);
	box-shadow: 0 0 50px rgba(255, 0, 255, 1), 0 0 100px rgba(255, 100, 255, 0.8), 0 10px 50px rgba(255, 50, 150, 1);
	border: 2px solid rgba(255, 255, 255, 0.8);
	animation-play-state: paused;
}

.custom-play-button:hover .play-icon::before {
	border-left-color: rgba(255, 255, 255, 1);
	transform: translateX(4px) scale(1.1);
	animation-play-state: paused;
	filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
}

/* 播放图标 (CSS 三角形) */
.play-icon {
	display: flex;
	align-items: center;
	justify-content: center;
}

.play-icon::before {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-left: 28px solid rgba(255, 255, 255, 0.8);
	border-top: 18px solid transparent;
	border-bottom: 18px solid transparent;
	margin-left: 7px;
	transition: all 0.3s ease;
	animation: trianglePulse 1.2s ease-in-out infinite;
	filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
}

/* 播放按钮脉冲动画 */
@keyframes pulse {
	0%,
	100% {
		box-shadow: 0 0 20px rgba(255, 0, 100, 0.6), 0 0 40px rgba(255, 50, 150, 0.4), 0 4px 20px rgba(255, 0, 0, 0.5);
	}
	50% {
		box-shadow: 0 0 30px rgba(255, 0, 100, 0.8), 0 0 60px rgba(255, 50, 150, 0.6), 0 6px 30px rgba(255, 0, 0, 0.7);
	}
}

/* 三角形脉冲动画 */
@keyframes trianglePulse {
	0%,
	100% {
		filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.5));
	}
	50% {
		filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.8));
	}
}

/* 移动端适配 */
@media (max-width: 768px) {
	.custom-play-button {
		width: 72px;
		height: 50px;
		border-radius: 9px;
		background: linear-gradient(45deg, #ff0066, #ff3300, #ff6600);
		box-shadow: 0 0 15px rgba(255, 0, 100, 0.6), 0 0 30px rgba(255, 50, 150, 0.4), 0 3px 15px rgba(255, 0, 0, 0.5);
		border: 1.5px solid rgba(255, 255, 255, 0.3);
		animation: pulse 1.2s ease-in-out infinite;
	}

	.play-icon::before {
		display: block;
		border-left: 22px solid rgba(255, 255, 255, 0.8);
		border-top: 14px solid transparent;
		border-bottom: 14px solid transparent;
		margin-left: 5px;
		animation: trianglePulse 1.2s ease-in-out infinite;
		filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.5));
	}

	.custom-play-button:hover {
		background: linear-gradient(45deg, #ff00ff, #ff0066, #ff3300, #ffaa00);
		transform: scale(1.2);
		box-shadow: 0 0 30px rgba(255, 0, 255, 1), 0 0 60px rgba(255, 100, 255, 0.8), 0 6px 30px rgba(255, 50, 150, 1);
		border: 1.5px solid rgba(255, 255, 255, 0.8);
		animation-play-state: paused;
	}

	.custom-play-button:hover .play-icon::before {
		border-left-color: rgba(255, 255, 255, 1);
		transform: translateX(3px) scale(1.1);
		animation-play-state: paused;
		filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.8));
	}
}

/* Recommend Row */
.recommend-row {
	display: flex;
	gap: 10px; /* Reduced gap */
	margin-bottom: 20px;
	/* overflow-x: auto; Removed scrolling */
	padding-bottom: 0; /* Removed padding for scrollbar */
	flex-wrap: wrap; /* Allow wrapping if needed, though we limit to 4 */
}

.recommend-item {
	flex: 1; /* Distribute space evenly */
	height: auto; /* Allow height to adjust */
	aspect-ratio: 16/9; /* Maintain aspect ratio */
	border-radius: 12px;
	overflow: hidden;
	position: relative;
	cursor: pointer;
	border: 4px solid #ff6b35; /* Updated border */
	transition: all 0.2s;
	max-width: calc(25% - 8px); /* Ensure 4 items fit */
	display: block; /* For anchor tag */
}

/* ... existing recommend-item styles ... */

.recommend-item:hover {
	border-color: #ff8c00;
	transform: scale(1.05);
}

.recommend-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.recommend-item .mini-play-btn {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 30px;
	height: 30px;
	background: rgba(255, 87, 34, 0.9);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 2px solid #fff;
}

.recommend-item .mini-play-btn::after {
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 0 6px 10px;
	border-color: transparent transparent transparent #fff;
	margin-left: 2px;
}

/* Sticky Info Bar */
.sticky-info-bar {
	background: #87ceeb; /* Light blue based on screenshot */
	border-radius: 12px;
	padding: 10px 15px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
	color: #fff;
	background: linear-gradient(90deg, #5ca0f2 0%, #5ca0f2 100%);
}

.sticky-info-left {
	display: flex;
	align-items: center;
	gap: 10px;
	overflow: hidden;
}

.sticky-thumb {
	width: 40px;
	height: 40px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}

.sticky-title {
	font-size: 14px;
	font-weight: 600;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 200px;
}

.sticky-heart {
	font-size: 24px;
	cursor: pointer;
	transition: transform 0.2s;
	user-select: none;
}

.sticky-heart:active {
	transform: scale(1.2);
}

.sticky-heart.active {
	/* We will change content in JS to ❤️, or filter here if needed. 
       Let's assume JS handles the content change for emoji. */
}

/* Video Info Card */
.video-info-card {
	background: #6ca6f5; /* Blue background based on screenshot */
	border-radius: 20px;
	padding: 20px;
	color: #fff;
	box-shadow: 0 4px 15px rgba(92, 160, 242, 0.3);
}

.info-header {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	margin-bottom: 15px;
}

.info-title-row {
	display: flex;
	align-items: center;
	gap: 10px;
	flex-wrap: wrap;
}

.info-title {
	font-size: 20px;
	font-weight: 700;
	line-height: 1.4;
}

.category-badge {
	background: #e91e63; /* Pink/Red badge */
	padding: 4px 12px;
	border-radius: 20px;
	font-size: 12px;
	font-weight: 600;
	white-space: nowrap;
}

.info-stats {
	display: flex;
	gap: 15px;
	font-size: 13px;
	opacity: 0.9;
	margin-bottom: 15px;
	flex-wrap: wrap;
}

.stat-item {
	display: flex;
	align-items: center;
	gap: 5px;
}

.info-description {
	font-size: 14px;
	line-height: 1.6;
	margin-bottom: 15px;
	opacity: 0.95;
}

.show-more {
	color: #fff;
	font-weight: 600;
	cursor: pointer;
	text-decoration: underline;
	font-size: 13px;
	display: block; /* Own line */
	margin-top: 8px; /* Spacing */
	text-align: right; /* Align right or left? Let's keep default or right. User didn't specify, but block usually implies left. Let's try right for "action" feel or just block. */
}

.info-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 15px;
}

.tag {
	background: rgba(255, 255, 255, 0.2);
	padding: 4px 10px;
	border-radius: 6px;
	font-size: 12px;
}

.amazon-link {
	display: flex;
	align-items: center;
	gap: 5px;
	color: #fff;
	text-decoration: none;
	margin-top: 10px;
	font-size: 13px;
	background: rgba(0, 0, 0, 0.1);
	padding: 8px;
	border-radius: 8px;
}

@media (max-width: 768px) {
	.detail-container {
		padding: 15px;
	}

	.recommend-item {
		flex: 0 0 100px;
		height: 70px;
	}

	.info-title {
		font-size: 18px;
	}
}

.welcome-content {
	display: flex;
	align-items: center;
	gap: 15px;
	max-width: 1200px;
	width: 100%;
	justify-content: flex-start;
}

@media (max-width: 768px) {
	.welcome-content {
		justify-content: center;
	}
}

.welcome-banner img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	background-color: #fff;
	border: 2px solid #fff;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.welcome-banner p {
	color: #333;
	font-size: 16px;
	font-weight: 500;
	margin: 0;
	line-height: 1.4;
}

/* Popular List Section */
.popular-list-section h2 {
	font-size: 24px !important;
	font-weight: 800 !important;
	margin-bottom: 25px !important;
	background: linear-gradient(45deg, #ff5722, #ffc107);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	display: inline-block;
	position: relative;
	padding-left: 35px;
}

.popular-list-section h2::before {
	content: "🔥";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 24px;
	-webkit-text-fill-color: initial; /* Reset for emoji */
	animation: fire-pulse 1.5s infinite;
}

.popular-list-section h2::after {
	content: "";
	position: absolute;
	bottom: -5px;
	left: 35px;
	width: 60px;
	height: 4px;
	background: linear-gradient(90deg, #ff5722, #ffc107);
	border-radius: 2px;
}

@keyframes fire-pulse {
	0% {
		transform: translateY(-50%) scale(1);
	}
	50% {
		transform: translateY(-50%) scale(1.2);
	}
	100% {
		transform: translateY(-50%) scale(1);
	}
}