/* ==========================================================================
   WKK THEME  —  暗夜 · 粉紫渐变皮肤
   MacCMS v10 / template: default
   载入顺序：必须放在所有其它样式表之后（public/include.html 末尾）
   覆盖层策略：
     1) 重定义 --tpl-* 设计令牌（模板内部大量规则引用这些变量）
     2) 针对历史硬编码色值做定点覆盖
     3) 组件级精修：头部 / 轮播 / 卡片 / 分页 / 详情 / 播放 / 会员 / 页脚
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌
   -------------------------------------------------------------------------- */
:root,
html body,
html body.bstem {
	/* 品牌渐变 */
	--wkk-pink: #ff3d9a;
	--wkk-pink-deep: #ff1f7f;
	--wkk-magenta: #d926d9;
	--wkk-violet: #8b5cf6;
	--wkk-purple: #6d3bf5;
	--wkk-blue: #2b7fff;
	--wkk-grad: linear-gradient(135deg, #ff3d9a 0%, #d926d9 48%, #8b5cf6 100%);
	--wkk-grad-rev: linear-gradient(135deg, #8b5cf6 0%, #d926d9 52%, #ff3d9a 100%);
	--wkk-grad-soft: linear-gradient(135deg, rgba(255, 61, 154, .18) 0%, rgba(139, 92, 246, .18) 100%);
	--wkk-grad-line: linear-gradient(135deg, #ff3d9a 0%, #8b5cf6 100%);
	--wkk-glow: 0 10px 28px -6px rgba(255, 61, 154, .55);
	--wkk-glow-soft: 0 8px 24px -10px rgba(139, 92, 246, .55);

	/* 暗色表面层级 */
	--wkk-bg: #08080e;
	--wkk-bg-2: #0c0c14;
	--wkk-surface: #12121c;
	--wkk-surface-2: #171724;
	--wkk-surface-3: #1e1e2e;
	--wkk-line: rgba(255, 255, 255, .08);
	--wkk-line-strong: rgba(255, 255, 255, .16);

	/* 文字层级 */
	--wkk-text: #ececf5;
	--wkk-text-2: #b6b6c9;
	--wkk-text-3: #82829a;

	/* 圆角 / 阴影 */
	--wkk-radius-s: 10px;
	--wkk-radius: 14px;
	--wkk-radius-l: 20px;
	--wkk-radius-xl: 26px;
	--wkk-shadow: 0 18px 44px -20px rgba(0, 0, 0, .95);
	--wkk-shadow-soft: 0 10px 30px -18px rgba(0, 0, 0, .9);

	/* 覆盖模板令牌，让引用变量的旧规则自动跟随 */
	--tpl-accent: #ff3d9a;
	--tpl-accent-hover: #ff1f7f;
	--tpl-accent-muted: rgba(255, 61, 154, .24);
	--tpl-text: #c3c3d6;
	--tpl-text-strong: #f4f4fb;
	--tpl-text-muted: #a6a6bc;
	--tpl-text-subtle: #82829a;
	--tpl-social-name: #b0a7ff;
	--tpl-text-on-inverse: #ffffff;
	--tpl-border: rgba(255, 255, 255, .10);
	--tpl-border-soft: rgba(255, 255, 255, .06);
	--tpl-bg-base: #08080e;
	--tpl-bg-muted: #0f0f18;
	--tpl-bg-login: #0d0d16;
	--tpl-radius: 18px;
	--tpl-radius-cover: 14px;
	--tpl-radius-nav-bottom: 12px;
}

/* 即使切到"浅色"模式也保持暗夜底（本皮肤为 dark-only） */
html,
html body,
html body.bstem,
body.member-wrap,
body.home-index-body {
	background-color: var(--wkk-bg);
	color: var(--wkk-text-2);
}

/* 全站底层光晕：粉 / 紫两团极光 */
html body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(900px 520px at 12% -8%, rgba(255, 61, 154, .16), transparent 62%),
		radial-gradient(820px 520px at 88% 2%, rgba(139, 92, 246, .17), transparent 60%),
		radial-gradient(700px 600px at 50% 108%, rgba(217, 38, 217, .09), transparent 65%);
	background-color: var(--wkk-bg);
}

/* 文字 / 链接基础 */
html body,
html body input,
html body textarea,
html body select,
html body button {
	font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", "Hiragino Sans GB", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html body a,
html body a:link,
html body a:visited {
	color: var(--wkk-text-2);
	transition: color .18s ease;
}

html body a:hover {
	color: var(--wkk-pink);
}

html body ::selection {
	background: rgba(255, 61, 154, .35);
	color: #fff;
}

/* 滚动条 */
html body ::-webkit-scrollbar {
	width: 10px;
	height: 10px;
}

html body ::-webkit-scrollbar-track {
	background: #0a0a12;
}

html body ::-webkit-scrollbar-thumb {
	background: linear-gradient(180deg, #ff3d9a, #8b5cf6);
	border-radius: 999px;
	border: 2px solid #0a0a12;
}

html body ::-webkit-scrollbar-thumb:hover {
	background: linear-gradient(180deg, #ff5aa8, #9d74ff);
}

/* 表单控件统一暗色 */
html body input,
html body textarea,
html body select {
	background-color: var(--wkk-surface);
	border-color: var(--wkk-line);
	color: var(--wkk-text);
}

html body input::placeholder,
html body textarea::placeholder {
	color: var(--wkk-text-3);
}

html body input:focus,
html body textarea:focus,
html body select:focus {
	border-color: rgba(255, 61, 154, .55);
	box-shadow: 0 0 0 3px rgba(255, 61, 154, .14);
	outline: none;
}

/* --------------------------------------------------------------------------
   2. 顶栏
   -------------------------------------------------------------------------- */
html body .site-head-wrap,
html body .head_box,
html body .head_box.nav_top,
html body .listnow.nav_fixed,
html body .head_box .header {
	background: rgba(8, 8, 14, .78) !important;
	background-image: none !important;
	border-bottom: 1px solid var(--wkk-line) !important;
	box-shadow: 0 10px 30px -22px rgba(0, 0, 0, .95);
}

html body .head_box .header:after {
	border-bottom-color: var(--wkk-line) !important;
}

/* 导航项 */
html body .top_nav > li > a,
html body .head_menu_a a,
html body .head_menu_b a.menu {
	position: relative;
	color: var(--wkk-text-2) !important;
	font-weight: 500;
	transition: color .18s ease;
}

html body .top_nav > li > a:hover,
html body .top_nav > li.active > a,
html body .head_menu_a a:hover,
html body .head_menu_b a.menu:hover {
	color: #ffffff !important;
}

/* 激活项：粉紫渐变下划线 + 柔光 */
html body .top_nav > li > a::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -8px;
	width: 0;
	height: 3px;
	border-radius: 999px;
	background: var(--wkk-grad-line);
	transform: translateX(-50%);
	transition: width .24s ease;
	opacity: 0;
}

html body .top_nav > li:hover > a::after,
html body .top_nav > li.active > a::after {
	width: 22px;
	opacity: 1;
	box-shadow: 0 0 12px rgba(255, 61, 154, .8);
}

/* 顶栏图标按钮 */
html body .head_user a,
html body .head_user li a,
html body .head_user li .user a.mac_user_n,
html body .top_ico a.top_link {
	color: var(--wkk-text-2) !important;
}

html body .head_user a:hover,
html body .top_ico a.top_link:hover {
	color: var(--wkk-pink) !important;
}

/* 搜索胶囊 */
html body .head_search_capsule,
html body .head_search_capsule_field,
html body .head_search_inner,
html body .head_search_drop {
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid var(--wkk-line) !important;
	border-radius: 999px !important;
}

html body .head_search_capsule_field input.mac_wd,
html body #topnav input#txt {
	background: transparent !important;
	border: 0 !important;
	color: var(--wkk-text) !important;
	box-shadow: none !important;
}

html body .head_search_capsule_submit,
html body .head_search_btn {
	background: var(--wkk-grad) !important;
	border: 0 !important;
	border-radius: 999px !important;
	color: #fff !important;
	box-shadow: 0 6px 18px -8px rgba(255, 61, 154, .9);
}

html body .head_search_capsule_submit:hover,
html body .head_search_btn:hover {
	filter: brightness(1.08);
	box-shadow: 0 8px 22px -8px rgba(255, 61, 154, 1);
}

/* 更多导航浮层 */
html body .top_nav_overlay,
html body .all_menu_box,
html body .mac-pop .pop_box,
html body .mac_pop {
	background: var(--wkk-surface-2) !important;
	border: 1px solid var(--wkk-line) !important;
	box-shadow: var(--wkk-shadow);
}

html body .top_nav_overlay_item:hover,
html body .top_nav_overlay_btn_all {
	color: #fff !important;
	background-image: var(--wkk-grad-soft) !important;
}

/* --------------------------------------------------------------------------
   3. 按钮体系（核心：粉紫渐变）
   -------------------------------------------------------------------------- */
html body .banstem_btn_play,
html body .playbtn,
html body .play_btn,
html body .btn_primary,
html body .btn.btn_fav,
html body .btn.btn_share,
html body .home-refresh-btn,
html body .page_jump_btn,
html body .user-buy-btn,
html body .upgrade-btn,
html body button[type="submit"].btn {
	position: relative;
	background: var(--wkk-grad) !important;
	border: 0 !important;
	color: #fff !important;
	border-radius: 999px !important;
	box-shadow: var(--wkk-glow);
	transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
	overflow: hidden;
}

html body .banstem_btn_play::after,
html body .playbtn::after,
html body .btn.btn_fav::after,
html body .btn.btn_share::after,
html body .home-refresh-btn::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(120deg, rgba(255, 255, 255, .34), transparent 42%);
	opacity: .75;
	pointer-events: none;
}

html body .banstem_btn_play:hover,
html body .playbtn:hover,
html body .play_btn:hover,
html body .btn.btn_fav:hover,
html body .btn.btn_share:hover,
html body .home-refresh-btn:hover,
html body .page_jump_btn:hover {
	transform: translateY(-2px);
	filter: brightness(1.06);
	box-shadow: 0 14px 34px -8px rgba(255, 61, 154, .7);
	color: #fff !important;
}

html body .banstem_btn_play:active,
html body .playbtn:active,
html body .btn.btn_fav:active {
	transform: translateY(0);
}

/* 次级按钮（收藏 / 分享 / 更多 / 换一换） */
html body .banstem_btn_fav,
html body .banstem_btn_info,
html body .pc_more,
html body .btn.btn_fav.o_fav,
html body .mac_ulog.vod_fav {
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid var(--wkk-line-strong) !important;
	color: var(--wkk-text) !important;
	border-radius: 999px !important;
	transition: all .18s ease;
}

html body .banstem_btn_fav:hover,
html body .banstem_btn_info:hover,
html body .pc_more:hover {
	background-image: var(--wkk-grad) !important;
	background-color: transparent !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 10px 26px -12px rgba(255, 61, 154, .8);
}

/* 图标 / 文字随渐变按钮 */
html body .banstem_btn_play .iconfont,
html body .banstem_btn_play span,
html body .playbtn .iconfont,
html body .playbtn span {
	color: #fff !important;
}

/* "更多" 链接：渐变文字 */
html body .pc_more,
html body .hu-section-head .pc_more {
	background: rgba(255, 61, 154, .10);
	border: 1px solid rgba(255, 61, 154, .28);
	color: #ffb3d6 !important;
	padding: 6px 14px;
	line-height: 1.6;
}

html body .pc_more:hover {
	color: #fff !important;
}

/* --------------------------------------------------------------------------
   4. 首页轮播 / Banner
   -------------------------------------------------------------------------- */
html body .banstem .bgi {
	filter: saturate(118%) brightness(.82);
}

html body .banstem .bgfd {
	background: linear-gradient(180deg, rgba(8, 8, 14, .18) 0%, rgba(8, 8, 14, .55) 55%, var(--wkk-bg) 100%) !important;
}

html body .banstem_title {
	color: #fff !important;
	font-weight: 800 !important;
	letter-spacing: -.01em;
	text-shadow: 0 8px 32px rgba(0, 0, 0, .8);
}

html body .banstem_desc {
	color: rgba(255, 255, 255, .74) !important;
}

html body .banstem_score_num {
	background: var(--wkk-grad) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent;
	color: var(--wkk-pink) !important;
	font-weight: 800;
}

html body .banstem_star {
	color: var(--wkk-pink) !important;
}

html body .banstem_score_meta {
	color: rgba(255, 255, 255, .62) !important;
}

html body .swiper-pagination-bullet {
	background: rgba(255, 255, 255, .32) !important;
	opacity: 1;
	transition: all .2s ease;
}

html body .swiper-pagination-bullet-active {
	background: var(--wkk-grad) !important;
	width: 26px;
	border-radius: 999px;
	box-shadow: 0 0 14px rgba(255, 61, 154, .8);
}

html body .swiper-button-next,
html body .swiper-button-prev {
	background: rgba(12, 12, 20, .62) !important;
	border: 1px solid var(--wkk-line-strong);
	border-radius: 50%;
	color: #fff !important;
}

html body .swiper-button-next:hover,
html body .swiper-button-prev:hover {
	background: var(--wkk-grad) !important;
	border-color: transparent;
	box-shadow: 0 8px 22px -8px rgba(255, 61, 154, .9);
}

/* --------------------------------------------------------------------------
   5. 标签页 / 分类筛选
   -------------------------------------------------------------------------- */
html body .latest-tab-nav,
html body .latest-tab-nav ul {
	background: rgba(255, 255, 255, .04) !important;
	border: 1px solid var(--wkk-line) !important;
	border-radius: var(--wkk-radius) !important;
}

html body .latest-tab-nav li {
	background: transparent !important;
	color: var(--wkk-text-3) !important;
	border-radius: var(--wkk-radius-s) !important;
	transition: color .18s ease;
}

html body .latest-tab-nav li:not(:last-child):after {
	background: var(--wkk-line) !important;
}

html body .latest-tab-nav li:hover {
	color: #fff !important;
}

html body .latest-tab-nav li.current {
	background: var(--wkk-grad) !important;
	color: #fff !important;
	box-shadow: var(--wkk-glow);
}

html body .latest-tab-nav li.current span,
html body .latest-tab-nav li.current a {
	color: #fff !important;
}

/* 筛选行 / 分类条 */
html body .screen_list,
html body .screen_list li,
html body .mac-cat-filter-item,
html body .mac-catalog-filter-wrap {
	background: transparent !important;
	border-color: var(--wkk-line) !important;
}

html body .mac-cat-filter-item.is-active,
html body .screen_list li a:hover,
html body .screen_list li.on a {
	background: var(--wkk-grad) !important;
	color: #fff !important;
	border-color: transparent !important;
	border-radius: 999px !important;
}

/* --------------------------------------------------------------------------
   6. 卡片 / 列表
   -------------------------------------------------------------------------- */
html body .vodlist_item,
html body .balist_item {
	transition: transform .22s ease;
}

html body .vodlist_thumb {
	position: relative;
	border-radius: var(--wkk-radius) !important;
	overflow: hidden;
	background-color: var(--wkk-surface-2);
	box-shadow: var(--wkk-shadow-soft);
	transition: box-shadow .24s ease, transform .24s ease;
}

html body .vodlist_thumb:before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	border: 1px solid rgba(255, 255, 255, .07);
	z-index: 3;
	pointer-events: none;
	transition: border-color .24s ease;
}

html body .vodlist_thumb:after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(180deg, transparent 42%, rgba(4, 4, 10, .78) 100%);
	z-index: 2;
	pointer-events: none;
	opacity: .9;
}

html body .vodlist_item:hover .vodlist_thumb {
	transform: translateY(-4px);
	box-shadow: 0 22px 40px -22px rgba(255, 61, 154, .65), 0 0 0 1px rgba(255, 61, 154, .35);
}

html body .vodlist_item:hover .vodlist_thumb:before {
	border-color: transparent;
}

html body .vodlist_item:hover .vodlist_thumb:after {
	background: linear-gradient(135deg, rgba(255, 61, 154, .30) 0%, rgba(139, 92, 246, .34) 100%);
	opacity: 1;
}

html body .vodlist_title a {
	color: var(--wkk-text) !important;
	font-weight: 600;
}

html body .vodlist_item:hover .vodlist_title a,
html body .vodlist_title a:hover {
	color: var(--wkk-pink) !important;
}

html body .vodlist_sub,
html body .vodlist_sub a,
html body .vodlist_titbox .vodlist_sub {
	color: var(--wkk-text-3) !important;
}

/* 角标：容器本身是 left/right 都设置了的全宽 flex，先收缩成自适应宽度，避免出现整条色带 */
html body .mac_badge_top_right,
html body .mac_badge_bottom_right {
	left: auto !important;
	right: 8px !important;
	width: auto;
	min-width: 0;
	color: #fff !important;
	font-weight: 600;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .85);
	z-index: 4;
}

html body .mac_badge_top_right,
html body .vodlist_item:hover .mac_badge_top_right {
	top: 8px !important;
	background-image: var(--wkk-grad) !important;
	background-color: transparent !important;
	border: 0 !important;
	border-radius: 999px !important;
	padding: 2px 9px !important;
	box-shadow: 0 6px 16px -6px rgba(255, 61, 154, .8);
	z-index: 4;
}

html body .mac_badge_bottom_right {
	bottom: 8px !important;
	background: rgba(8, 8, 14, .62) !important;
	border: 1px solid rgba(255, 255, 255, .16) !important;
	border-radius: 999px !important;
	padding: 2px 9px !important;
}

html body .vodlist_thumb .pic_text,
html body .vodlist_thumb .note {
	background: rgba(8, 8, 14, .62) !important;
	border: 1px solid rgba(255, 255, 255, .16);
	color: #fff !important;
	border-radius: 999px !important;
	z-index: 4;
}

/* 播放遮罩 */
html body .vod_info_wrap,
html body .vod_info {
	background: transparent !important;
}

html body .play_img {
	filter: drop-shadow(0 0 12px rgba(255, 61, 154, .9));
	z-index: 5;
}

html body .mac_ulog.vod_fav {
	z-index: 6;
	background: rgba(8, 8, 14, .55) !important;
}

/* 区块标题 */
html body .hu-section-head,
html body .home-unified-section-head,
html body .title,
html body .index_title,
html body .box .title {
	background: transparent !important;
	background-image: none !important;
	border: 0 !important;
	box-shadow: none !important;
	padding-left: 0;
}

/* 模板里有 .latest-tab-box{background-color:var(--tpl-text-on-inverse)} 这类白底容器，
   暗色下会变成刺眼白条，统一透明化 */
html body .latest-tab-box,
html body .home-unified .latest-tab-box,
html body .box,
html body .home-detail,
html body .latest-item {
	background-color: transparent !important;
}

html body .box .title h2,
html body .box .title h2 a,
html body .box .title a.pc_more {
	color: var(--wkk-text) !important;
}

html body .hu-section-head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 0 16px !important;
	border-bottom: 1px solid var(--wkk-line) !important;
	margin-bottom: 6px;
}

html body .hu-section-head h2,
html body .home-unified-section-head h2 {
	position: relative;
	color: var(--wkk-text) !important;
	font-weight: 800 !important;
	letter-spacing: .01em;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding-left: 14px;
}

html body .hu-section-head h2::before,
html body .home-unified-section-head h2::before,
html body .index_title h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: 50%;
	transform: translateY(-50%);
	width: 4px;
	height: 18px;
	border-radius: 999px;
	background: var(--wkk-grad-line);
	box-shadow: 0 0 14px rgba(255, 61, 154, .8);
}

html body .hu-section-head h2 span,
html body .hu-section-head h2 a {
	color: var(--wkk-text) !important;
}

html body .hu-section-head h2 em,
html body .hu-section-head h2 .sub {
	color: var(--wkk-text-3) !important;
	font-weight: 400;
}

/* --------------------------------------------------------------------------
   7. 分页
   -------------------------------------------------------------------------- */
html body .mac-paging .page li a,
html body .page li .num,
html body .page li span {
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid var(--wkk-line) !important;
	color: var(--wkk-text-2) !important;
	border-radius: 999px !important;
	transition: all .18s ease;
}

html body .page li a:hover {
	background: rgba(255, 61, 154, .16) !important;
	border-color: rgba(255, 61, 154, .42) !important;
	color: #fff !important;
}

html body .page li.active a,
html body .page li.on a,
html body .page li .num.on,
html body .page li.active span {
	background: var(--wkk-grad) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: var(--wkk-glow);
}

html body .mac-paging .page li.btns_disad a,
html body .mac-paging .page li.btns_disad span {
	opacity: .38;
}

html body .page_jump_input {
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid var(--wkk-line) !important;
	border-radius: 999px !important;
	color: var(--wkk-text) !important;
}

/* --------------------------------------------------------------------------
   8. 详情页
   -------------------------------------------------------------------------- */
html body .hot_banner,
html body .detail_list_box,
html body .detail_list,
html body .content_box {
	background-color: transparent !important;
}

html body .detail-wrap .hot_banner,
html body .vod-detail-hero-box {
	position: relative;
	background: linear-gradient(180deg, rgba(255, 255, 255, .045) 0%, rgba(255, 255, 255, .015) 100%) !important;
	border: 1px solid var(--wkk-line) !important;
	border-radius: var(--wkk-radius-l) !important;
	box-shadow: var(--wkk-shadow);
	overflow: hidden;
}

html body .pannel_head .title,
html body .content_detail .title,
html body h1.title {
	color: #fff !important;
	font-weight: 800 !important;
}

html body .content_detail .data,
html body .content_detail .data li,
html body .content_detail .data a {
	color: var(--wkk-text-2) !important;
}

html body .content_detail .data .left,
html body .text_muted {
	color: var(--wkk-text-3) !important;
}

html body .content_detail .desc,
html body .content_detail .desc span {
	color: var(--wkk-text-2) !important;
	line-height: 1.9;
}

html body .content_detail .data a:hover,
html body .content_detail .desc a {
	color: var(--wkk-pink) !important;
}

/* 评分进度 */
html body .layui-progress {
	background: rgba(255, 255, 255, .07) !important;
	border-radius: 999px !important;
	overflow: hidden;
	height: 6px;
}

html body .layui-progress-bar {
	background: var(--wkk-grad) !important;
	border-radius: 999px !important;
	box-shadow: 0 0 14px rgba(255, 61, 154, .65);
}

html body .progress_item .p_title,
html body .progress_item .p_title span {
	color: var(--wkk-text-3) !important;
}

html body .progress_item .p_title em {
	color: var(--wkk-pink) !important;
	font-weight: 700;
}

/* 详情页按钮组 */
html body .playbtn.o_fav,
html body .playbtn.o_share {
	background: transparent !important;
}

html body .playbtn.o_fav .btn,
html body .playbtn.o_share .btn,
html body .content_btn .btn {
	min-width: 108px;
	justify-content: center;
}

/* 剧集 / 播放列表 */
html body .play_list,
html body .playlist,
html body .play_list_box,
html body .stui-content__playlist {
	background: transparent !important;
}

html body .play_list li a,
html body .playlist li a,
html body .stui-content__playlist li a,
html body .play_list li,
html body .eplist li a {
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid var(--wkk-line) !important;
	color: var(--wkk-text-2) !important;
	border-radius: 10px !important;
	transition: all .16s ease;
}

html body .play_list li a:hover,
html body .playlist li a:hover,
html body .stui-content__playlist li a:hover {
	background: rgba(255, 61, 154, .16) !important;
	border-color: rgba(255, 61, 154, .42) !important;
	color: #fff !important;
}

html body .play_list li.on a,
html body .play_list li.active a,
html body .playlist li.on a,
html body .playlist li.active a,
html body .stui-content__playlist li.on a,
html body .stui-content__playlist li.active a,
html body .eplist li.on a {
	background: var(--wkk-grad) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 8px 20px -10px rgba(255, 61, 154, .9);
}

/* --------------------------------------------------------------------------
   9. 播放页
   -------------------------------------------------------------------------- */
html body .play_boxbg,
html body .play_box,
html body #play_page {
	background: transparent !important;
}

html body .player_video,
html body .play_video,
html body .embed-responsive {
	background: #05050a !important;
	border: 1px solid var(--wkk-line) !important;
	border-radius: var(--wkk-radius-l) !important;
	overflow: hidden;
	box-shadow: var(--wkk-shadow);
}

html body .play-but-bar,
html body .play-but-wrap,
html body .play_but {
	background: rgba(255, 255, 255, .035) !important;
	border: 1px solid var(--wkk-line) !important;
	border-radius: var(--wkk-radius) !important;
}

html body .play-but-item {
	background: rgba(255, 255, 255, .05) !important;
	border: 1px solid var(--wkk-line) !important;
	color: var(--wkk-text-2) !important;
	border-radius: 999px !important;
	transition: all .16s ease;
}

html body .play-but-item:hover {
	background: rgba(255, 61, 154, .16) !important;
	border-color: rgba(255, 61, 154, .42) !important;
	color: #fff !important;
}

html body .play-but-item.active,
html body .play-but-item.on {
	background: var(--wkk-grad) !important;
	border-color: transparent !important;
	color: #fff !important;
	box-shadow: 0 8px 20px -10px rgba(255, 61, 154, .9);
}

html body .play_tips,
html body .lock_tipe_box {
	background: rgba(255, 61, 154, .10) !important;
	border: 1px solid rgba(255, 61, 154, .26) !important;
	color: #ffc4e0 !important;
	border-radius: var(--wkk-radius) !important;
}

/* --------------------------------------------------------------------------
   10. 会员中心 / 弹层 / 通知
   -------------------------------------------------------------------------- */
html body .user-left-nav,
html body .left_nav,
html body .user_info_box,
html body .user_box,
html body .user-content,
html body .member_box,
html body .mac-pop .pop,
html body .mac-pop-sheet,
html body .notify-panel,
html body .notify-list {
	background: rgba(255, 255, 255, .035) !important;
	border: 1px solid var(--wkk-line) !important;
	border-radius: var(--wkk-radius-l) !important;
	box-shadow: var(--wkk-shadow-soft);
}

html body .user-left-nav li a:hover,
html body .left_nav li a:hover,
html body .user-left-nav li.on a,
html body .left_nav li.on a,
html body .left_nav li.active a {
	background: rgba(255, 61, 154, .14) !important;
	color: #fff !important;
	border-radius: 10px;
}

html body .user-left-nav li.on a,
html body .left_nav li.on a {
	background-image: var(--wkk-grad-soft) !important;
	box-shadow: inset 2px 0 0 var(--wkk-pink);
}

html body .mac-pop .pop_top h2,
html body .notify-panel h3 {
	color: var(--wkk-text) !important;
}

html body .recharge_modal,
html body .mac-pop-sheet,
html body .modal-content {
	background: var(--wkk-surface-2) !important;
	border: 1px solid var(--wkk-line) !important;
	color: var(--wkk-text-2) !important;
}

/* 通知气泡 */
html body .notify-bell-dot,
html body .notify_bell_dot,
html body .social-unread-dot {
	background: var(--wkk-grad) !important;
	box-shadow: 0 0 10px rgba(255, 61, 154, .9);
}

/* --------------------------------------------------------------------------
   11. 页脚
   -------------------------------------------------------------------------- */
html body .foot,
html body .foot_nav,
html body .foot-wrap,
html body .theme-foot-text {
	background: transparent !important;
	color: var(--wkk-text-3) !important;
	border-top: 1px solid var(--wkk-line);
}

html body .foot {
	margin-top: 46px;
	padding-top: 8px;
}

html body .foot a,
html body .fo_t a,
html body .fo_t a.color {
	color: var(--wkk-text-3) !important;
}

html body .foot a:hover,
html body .fo_t a:hover {
	color: var(--wkk-pink) !important;
}

html body .foot_mnav,
html body .foot_mnav a {
	background: rgba(8, 8, 14, .9) !important;
	border-color: var(--wkk-line) !important;
	color: var(--wkk-text-3) !important;
}

html body .foot_mnav a.on,
html body .foot_mnav a.active {
	color: var(--wkk-pink) !important;
}

/* --------------------------------------------------------------------------
   12. 杂项：加载态 / 占位 / 弹窗遮罩
   -------------------------------------------------------------------------- */
html body .home-skeleton-card,
html body .home-skeleton-card .thumb,
html body .home-skeleton-line,
html body .home-skeleton-banner-item,
html body .lazyload-placeholder {
	background-color: var(--wkk-surface-2) !important;
	background-image: linear-gradient(100deg, rgba(255, 255, 255, .04) 20%, rgba(255, 255, 255, .10) 42%, rgba(255, 255, 255, .04) 64%) !important;
}

html body .mac_layer,
html body .layui-layer-shade,
html body .mac-pop-mask {
	background-color: rgba(4, 4, 8, .72) !important;
}

html body .layui-layer,
html body .layui-layer-content {
	background: var(--wkk-surface-2) !important;
	border: 1px solid var(--wkk-line) !important;
	color: var(--wkk-text-2) !important;
	border-radius: var(--wkk-radius-l) !important;
}

/* 星级 */
html body .mac_fav_star,
html body .star_on,
html body .banstem_star {
	color: var(--wkk-pink) !important;
}

/* 热门 / 排行榜数字 */
html body .rank_num,
html body .rank_box .num,
html body .hot_num {
	background: var(--wkk-grad) !important;
	-webkit-background-clip: text !important;
	background-clip: text !important;
	-webkit-text-fill-color: transparent;
	font-weight: 800;
}

/* --------------------------------------------------------------------------
   13. Logo 尺寸微调
   -------------------------------------------------------------------------- */
html body .mac-logo img,
html body .head_logo .logo img,
html body .logo img {
	max-height: 40px;
	width: auto;
	filter: drop-shadow(0 4px 16px rgba(139, 92, 246, .45));
}

html body .mac-logo--foot img,
html body .foot .logo img {
	max-height: 34px;
	opacity: .92;
}

/* 隐藏明暗切换（本皮肤固定暗夜） */
html body .mycolor,
html body #black.mycolor,
html body #white.mycolor {
	display: none !important;
}

/* --------------------------------------------------------------------------
   14. 响应式
   -------------------------------------------------------------------------- */
@media (max-width: 820px) {
	html body .head_box,
	html body .site-head-wrap {
		background: rgba(8, 8, 14, .92) !important;
	}

	html body .hu-section-head h2 {
		font-size: 16px;
	}

	html body .latest-tab-nav li {
		font-size: 13px;
	}

	html body .mac-logo img {
		max-height: 30px;
	}
}