/* ============================================================
   wandou 模板首页视觉升级层（beauty.css）
   仅在 style.css / media.css 之后引入，覆盖式美化，不改动原样式与页面结构。
   原则：只改视觉（配色/圆角/阴影/间距/字体层次/按钮标签/响应式），
        不改变功能、数据结构与核心布局。
   ============================================================ */

/* ---------- 1. 页面基调：更清爽的浅色背景层次 ---------- */
body {
	background: var(--colors-gray500);
}

.main {
	background: linear-gradient(180deg, var(--colors-gray250) 0%, var(--colors-gray500) 100%);
	padding-bottom: 60px;
}

body[theme="dark"] .main {
	background: linear-gradient(180deg, var(--colors-gray501) 0%, var(--colors-gray500) 100%);
}

/* ---------- 2. 顶部装饰条：加一层淡色渐变，增强纵深感 ---------- */
.main .c-ftTHlS {
	background: linear-gradient(180deg, rgba(120, 193, 75, 0.10) 0%, rgba(120, 193, 75, 0) 100%);
}

/* ---------- 3. 导航栏：柔化底色、加深层次，hover 状态点缀 ---------- */
body[theme="light"] .header {
	background: rgba(255, 255, 255, 0.92);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
}

body[theme="dark"] .header {
	background: rgba(9, 11, 24, 0.88);
	-webkit-backdrop-filter: saturate(180%) blur(12px);
	backdrop-filter: saturate(180%) blur(12px);
}

.header .nav .nav_item {
	transition: color 0.2s ease;
}

.header .nav .nav_item:hover {
	color: var(--colors-green61);
}

.header .nav .nav_item .icon {
	transition: opacity 0.2s ease;
}

.header .nav .nav_item:hover .icon {
	opacity: 1;
	color: var(--colors-green61);
}

.header .logo a span {
	font-weight: 600;
	letter-spacing: 0.5px;
}

/* ---------- 4. 轮播区：更大圆角、更柔阴影、按钮细节 ---------- */
.main .video_swiper {
	filter: drop-shadow(rgba(33, 72, 96, 0.18) 0px 18px 38px);
}

.main .video_swiper .bgpost_swiper .c-XAYOE,
.main .video_swiper .bgpost_swiper .c-hIgYfd {
	border-radius: 20px;
}

.main .video_swiper .bgpost_swiper .c-chcddb .right .btn {
	box-shadow: rgba(62, 122, 250, 0.35) 0px 8px 18px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.main .video_swiper .bgpost_swiper .c-chcddb .right .btn:hover {
	transform: translateY(-2px);
	box-shadow: rgba(62, 122, 250, 0.45) 0px 12px 24px;
}

.main .video_swiper .bgpost_swiper .c-chcddb .left .title {
	letter-spacing: 0.24em;
}

/* ---------- 5. 板块标题：更清晰的字体层次 ---------- */
.main .c-lhZwLp .c-fghrzJ .c-jPFaa .c-gTklbv {
	font-size: var(--fontSizes-5);
	font-weight: 700;
	letter-spacing: 0.4px;
}

.main .c-lhZwLp .c-fghrzJ .c-jPFaa .c-cfQzMB .icon {
	color: var(--colors-green61);
	font-size: 26px;
}

/* 更多按钮：胶囊化 + hover 反馈 */
.main .c-lhZwLp .c-fghrzJ .c-gHLiek {
	border: 1px solid var(--colors-gray239);
	background: var(--colors-white);
	border-radius: 38px;
	height: 28px;
	line-height: 26px;
	padding: 0 14px 0 16px;
	transition: all 0.2s ease;
}

.main .c-lhZwLp .c-fghrzJ .c-gHLiek:hover {
	background: var(--colors-green61);
	border-color: var(--colors-green61);
	color: var(--colors-white2);
}

.main .c-lhZwLp .c-fghrzJ .c-gHLiek:hover .icon {
	color: var(--colors-white2);
	opacity: 1;
}

/* ---------- 6. 卡片区容器：圆角 + 柔和阴影 + 舒适留白 ---------- */
.main .c-lhZwLp .c-fKqoRS {
	background: var(--colors-white1);
	border-radius: 18px;
	box-shadow: rgba(33, 72, 96, 0.06) 0px 12px 32px;
	padding: 30px 24px;
	gap: 18px 16px;
}

/* ---------- 7. 横版视频卡：圆角、常态阴影、hover 上浮 + 图片缓动 ---------- */
.main .c-jqBdEa {
	border-radius: 14px;
	box-shadow: rgba(33, 72, 96, 0.08) 0px 4px 14px;
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.main .c-jqBdEa:hover {
	box-shadow: rgba(21, 36, 58, 0.20) 0px 18px 34px;
	transform: translateY(-4px);
}

.main .c-jqBdEa img {
	transition: transform 0.4s ease;
}

.main .c-jqBdEa:hover img {
	transform: scale(1.08);
}

.main .c-jqBdEa .info {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.55) 100%);
	border-bottom-left-radius: 14px;
	border-bottom-right-radius: 14px;
}

.main .c-jqBdEa .info>.icon {
	background-color: rgba(0, 0, 0, 0.28);
}

.main .c-jqBdEa .info {
	font-weight: 500;
	letter-spacing: 0.2px;
}

/* ---------- 8. 竖版卡片（bINpoh）：圆角 + 悬浮阴影 ---------- */
.main .c-lhZwLp .c-fKqoRS .c-bINpoh {
	border-radius: 12px;
}

.main .c-lhZwLp .c-fKqoRS .c-bINpoh .preview {
	border-radius: 10px;
	border-color: rgba(0, 0, 0, 0.05);
	box-shadow: rgba(33, 72, 96, 0.06) 0px 6px 16px;
}

.main .c-lhZwLp .c-fKqoRS .c-bINpoh:hover {
	transform: scale(1.06);
	box-shadow: rgba(21, 36, 58, 0.16) 0px 16px 28px;
}

.main .c-lhZwLp .c-fKqoRS .c-bINpoh .detail .title {
	font-weight: 500;
}

/* ---------- 9. 标签（如"更新"）：圆角胶囊 + 柔和色调 ---------- */
.main .c-hDImTG {
	border-radius: 6px;
	letter-spacing: 0.5px;
	background: var(--colors-green164);
}

/* ---------- 10. 返回顶部：圆角 + 阴影 ---------- */
.c-dQPNaV {
	border-radius: 12px;
	box-shadow: rgba(21, 36, 58, 0.12) 0px 8px 20px;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.c-dQPNaV:hover {
	transform: translateY(-3px);
	box-shadow: rgba(21, 36, 58, 0.18) 0px 12px 28px;
}

.c-fLfNfc-bRhKQi-show-true {
	box-shadow: rgba(21, 36, 58, 0.16) 0px 8px 20px;
}

/* ---------- 11. footer：留白与文字层次 ---------- */
.footer .c-eyLInG .c-cbZoWK {
	padding: 24px 0px 28px;
	min-height: 84px;
}

.footer .c-eyLInG .c-cbZoWK .c-hLafYK>p {
	line-height: 1.7;
	opacity: 0.8;
}

/* ============================================================
   响应式细节（沿用 media.css 断点）
   ============================================================ */

/* 移动端（< 1025px） */
@media (min-width: 330px) and (max-width: 1025px) {
	.main {
		padding-bottom: 48px;
	}

	.main .video_swiper .bgpost_swiper .c-XAYOE,
	.main .video_swiper .bgpost_swiper .c-hIgYfd {
		border-radius: 16px;
	}

	.main .c-fKqoRS,
	.main .c-lhZwLp .c-fKqoRS {
		border-radius: 16px;
		background: var(--colors-white1);
		box-shadow: rgba(33, 72, 96, 0.05) 0px 10px 26px;
		padding: 14px 14px;
		gap: 8px 10px;
	}

	.main .c-fKqoRS .c-jqBdEa {
		border-radius: 14px;
		box-shadow: rgba(33, 72, 96, 0.06) 0px 4px 12px;
	}

	.main .c-fKqoRS .c-jqBdEa .info {
		border-bottom-left-radius: 14px;
		border-bottom-right-radius: 14px;
		background: linear-gradient(180deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.55) 100%);
	}

	.main .c-lhZwLp .c-fghrzJ .c-jPFaa .c-gTklbv {
		font-size: var(--fontSizes-4);
		font-weight: 700;
	}

	.main .c-lhZwLp .c-fghrzJ .c-gHLiek {
		height: 26px;
		line-height: 24px;
		padding: 0 12px 0 14px;
	}

	.main .c-lhZwLp {
		margin-bottom: 32px;
	}

	.main .video_swiper {
		margin: 24px auto 70px;
	}

	/* ===== 移动端专项修复（beauty.css v2） ===== */
	/* 列表/分类页：两行筛选栏 fixed 定位会遮挡首屏卡片，抬升内容起始位置 */
	.category_main {
		padding-top: 200px;
	}

	/* 播放列表按钮：窄屏三列挤压，缩字号并强制单行省略 */
	.stui-content .hl-plays-list li a,
	.stui-content .hl-plays-list .hl-show-div a {
		font-size: 12px;
		line-height: 34px;
		padding: 0 4px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 列表卡片标题：单行省略，避免长片名换行挤压底部条 */
	.c-bqWfUu .content .c-geToYD .c-ffeBOn .detail .name {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	/* 移动端顶部固定头与 body 起始位对齐，避免 2px 遮挡 */
	body {
		padding-top: 106px;
	}

	/* 兜底：杜绝 100vw 元素造成的横向滚动 */
	html,
	body {
		overflow-x: hidden;
	}
}

/* 平板/窄屏补充（456-1025px）：详情页相关推荐卡 preview 固定 120px 宽会溢出 6 列卡片 */
@media (min-width: 456px) and (max-width: 1025px) {
	.detail_main .c-fKqoRS .c-bINpoh .preview {
		width: 100%;
	}
}

/* 平板横屏窄屏补充（768-1024px） */
@media (min-width: 768px) and (max-width: 1024px) {
	.main .c-lhZwLp .c-fKqoRS {
		gap: 16px 14px;
		padding: 24px 18px;
	}
}