﻿/**
 * 趣游旅行 - PC端首页样式
 * 14大板块完整样式，类名与 index.htm HTML 一致
 * 所有规则统一放在 #pc-index 作用域内，避免影响其他页面
 */

/* ====== 阿里巴巴妈妈数黑体 ====== */
@font-face {
	font-family: 'AlimamaShuHeiTi';
	src: url('../fonts/AlimamaShuHeiTi-Bold.woff2') format('woff2'),
		 url('../fonts/AlimamaShuHeiTi-Bold.woff') format('woff');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

#pc-index {
	font-family: var(--ct-font);
	background: var(--ct-bg);
	color: var(--ct-text);
	line-height: 1.6;
	min-width: 320px;
}
#pc-index, #pc-index *:not(i):not(.fas):not(.far):not(.fab), #pc-index *::before, #pc-index *::after {
	box-sizing: border-box !important;
}
#pc-index img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
	border: none !important;
}
/* 覆盖旧框架的栅格系统，避免影响到我们的组件 */
#pc-index .container,
#pc-index .line-big,
#pc-index .xl12,
#pc-index .xm12,
#pc-index .xs12,
#pc-index .text-center { all: unset; }

/* 首页容器 */
#pc-index .pc-main {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
}

/* 区块通用 */
#pc-index .pc-sec { padding: 20px 0; }
#pc-index .pc-sec--tight { padding-top: 0; }
#pc-index .pc-sec__hd {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	margin-bottom: 28px;
	flex-wrap: wrap;
	gap: 12px;
}
#pc-index .pc-sec__title {
	font-size: 26px;
	font-weight: 700;
	color: var(--ct-text);
	letter-spacing: -.5px;
}
#pc-index .pc-sec__title b {
	color: var(--ct-primary);
	font-weight: 700;
}
#pc-index .pc-sec__sub {
	font-size: 14px;
	color: var(--ct-text-sub);
	margin-top: 2px;
}
#pc-index .pc-sec__more {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: 14px;
	color: var(--ct-text-sub);
	padding: 7px 18px;
	border-radius: 20px;
	background: #EDF2F7;
	transition: all .2s;
	white-space: nowrap;
	font-weight: 500;
	text-decoration: none;
}
#pc-index .pc-sec__more:hover {
	color: var(--ct-primary);
	background: var(--ct-primary-light);
}
#pc-index .pc-sec__more::after {
	content: '\203A';
	font-size: 18px;
	margin-left: 2px;
}

/* ====== 1.Banner ====== */
#pc-index .pc-ban {
	position: relative;
	overflow: hidden;
	background: #0B1622;
	user-select: none;
}
#pc-index .pc-ban__track {
	display: flex;
	transition: transform .6s cubic-bezier(.25, .8, .25, 1);
}
#pc-index .pc-ban__s {
	flex: 0 0 100%;
	position: relative;
	height: 480px;
	display: flex;
	align-items: center;
	justify-content: center;
}
#pc-index .pc-ban__s .bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#pc-index .pc-ban__s::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(11,22,34,.25) 0%, rgba(11,22,34,.05) 40%, rgba(11,22,34,.6) 100%);
	z-index: 1;
}
#pc-index .pc-ban__txt {
	position: relative;
	z-index: 2;
	text-align: center;
	color: #fff;
	padding: 0 32px;
	max-width: 720px;
}
#pc-index .pc-ban__txt h2 {
	font-size: 40px;
	font-weight: 700;
	text-shadow: 0 2px 12px rgba(0,0,0,.35);
	margin: 0;
}
#pc-index .pc-ban__txt p {
	font-size: 17px;
	opacity: .88;
	text-shadow: 0 1px 6px rgba(0,0,0,.3);
	margin: 10px 0 0;
}
#pc-index .pc-ban__dots {
	position: absolute;
	bottom: 28px;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
	z-index: 3;
}
#pc-index .pc-ban__d {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: rgba(255,255,255,.4);
	cursor: pointer;
	transition: all .3s;
	border: none;
	padding: 0;
}
#pc-index .pc-ban__d.act {
	background: #fff;
	width: 28px;
	border-radius: 5px;
}
#pc-index .pc-ban__ar {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 3;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: rgba(255,255,255,.15);
	backdrop-filter: blur(6px);
	border: none;
	color: #fff;
	font-size: 22px;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .2s;
	opacity: 0;
}
#pc-index .pc-ban:hover .pc-ban__ar { opacity: 1; }
#pc-index .pc-ban__ar:hover { background: rgba(255,255,255,.3); }
#pc-index .pc-ban__ar--l { left: 28px; }
#pc-index .pc-ban__ar--r { right: 28px; }

/* ====== 2.搜索 ====== */
#pc-index .pc-sch {
	margin: -38px auto 0;
	position: relative;
	z-index: 20;
	max-width: 640px;
}
#pc-index .pc-sch__form {
	display: flex;
	background: #fff;
	border-radius: 50px;
	box-shadow: 0 6px 36px rgba(0,0,0,.12);
	overflow: hidden;
}
#pc-index .pc-sch__inp {
	flex: 1;
	border: none;
	padding: 16px 24px;
	font-size: 15px;
	outline: none;
	color: var(--ct-text);
	min-width: 0;
}
#pc-index .pc-sch__inp::placeholder { color: var(--ct-text-light); }
#pc-index .pc-sch__btn {
	border: none;
	background: var(--ct-primary);
	color: #fff;
	padding: 0 32px;
	font-size: 15px;
	font-weight: 600;
	transition: background .2s;
	white-space: nowrap;
	cursor: pointer;
}
#pc-index .pc-sch__btn:hover { background: var(--ct-primary-dark); }

/* ====== 1B.携程风格主推区（左侧目的地 + 右侧Banner/4卡/提醒） ====== */
#pc-index .pc-cct {
	display: grid;
	grid-template-columns: 240px 1fr;
	gap: 14px;
	min-height: 460px;
}

/* ---- 左侧：目的地分组 ---- */
#pc-index .pc-cct__side {
	background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFB 100%);
	border-radius: var(--ct-radius);
	padding: 14px 16px 16px;
	box-shadow: var(--ct-shadow-sm);
	/* 与右侧等高、自身不出现滚动条 */
	overflow: hidden;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

#pc-index .pc-cct__grp {
	margin-bottom: 12px;
	padding: 4px 4px 6px;
	border-radius: 6px;
	cursor: pointer;
	transition: background .2s ease, transform .2s ease;
}
#pc-index .pc-cct__grp:last-child { margin-bottom: 0; }
/* 鼠标移到导航块自动触发特效（hover 即生效，与激活态共用样式） */
#pc-index .pc-cct__grp:hover,
#pc-index .pc-cct__grp--act {
	background: linear-gradient(90deg, rgba(255,123,71,.14) 0%, rgba(255,123,71,.04) 100%);
	transform: translateX(2px);
}
#pc-index .pc-cct__grp:hover .pc-cct__title,
#pc-index .pc-cct__grp--act .pc-cct__title { color: var(--ct-primary); }
#pc-index .pc-cct__grp:hover .pc-cct__list a,
#pc-index .pc-cct__grp--act .pc-cct__list a { color: var(--ct-text); }

#pc-index .pc-cct__title {
	display: flex;
	align-items: center;
	gap: 7px;
	font-size: 15px;
	font-weight: 700;
	color: var(--ct-text);
	margin-bottom: 6px;
	line-height: 1.4;
	transition: color .2s ease;
}

/* 左侧分组小图标（按板块 id 显示不同语义 SVG 图标） */
#pc-index .pc-cct__gico {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px; height: 22px;
	flex-shrink: 0;
	border-radius: 7px;
	background: #F1F4F9;
	position: relative;
	transition: transform .25s ease, background .25s ease;
}
#pc-index .pc-cct__gico::after {
	content: ''; width: 14px; height: 14px;
	background-repeat: no-repeat; background-position: center; background-size: contain;
}
/* 各板块语义图标（彩色描边 SVG） */
#pc-index .pc-cct__gico--hot { background: #FFF1E6; }
#pc-index .pc-cct__gico--hot::after {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF7B47' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2s4 4 4 8a4 4 0 0 1-8 0c0-1.5.8-3 1.5-4C10 8 12 6 12 2z'/><path d='M12 22a6 6 0 0 0 6-6c0-2-1-3.5-2-5'/><path d='M12 22a6 6 0 0 1-6-6c0-2 1-3.5 2-5'/></svg>");
}
#pc-index .pc-cct__gico--hb { background: #EAF2FF; }
#pc-index .pc-cct__gico--hb::after {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234D8DFD' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 21h18'/><path d='M5 21V8l7-4 7 4v13'/><path d='M9 21v-6h6v6'/></svg>");
}
#pc-index .pc-cct__gico--db { background: #E6FAF4; }
#pc-index .pc-cct__gico--db::after {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232BC4A0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 2v20'/><path d='M12 6c2 0 3-2 5-2s1 3-1 4'/><path d='M12 6c-2 0-3-2-5-2s-1 3 1 4'/><path d='M12 12c2 0 3-2 5-2s1 3-1 4'/><path d='M12 12c-2 0-3-2-5-2s-1 3 1 4'/></svg>");
}
#pc-index .pc-cct__gico--hd { background: #F1EAFF; }
#pc-index .pc-cct__gico--hd::after {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238A5CF6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 16c2-4 4-4 6 0s4 4 6 0 4-4 6 0'/><path d='M3 12c2-4 4-4 6 0s4 4 6 0 4-4 6 0'/><path d='M3 8c2-4 4-4 6 0s4 4 6 0 4-4 6 0'/></svg>");
}
#pc-index .pc-cct__gico--hn { background: #FFEAF0; }
#pc-index .pc-cct__gico--hn::after {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF5C7C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M12 21c4-4 7-7 7-11a7 7 0 0 0-14 0c0 4 3 7 7 11z'/><path d='M12 8v5M9.5 10.5h5'/></svg>");
}
#pc-index .pc-cct__gico--xn { background: #FFF3E0; }
#pc-index .pc-cct__gico--xn::after {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FF8A3D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M3 20h18'/><path d='M5 20l3-9 4 5 4-8 3 12'/><path d='M9 11l2-3 2 3'/></svg>");
}
/* hover 时图标轻微旋转脉冲 */
#pc-index .pc-cct__grp:hover .pc-cct__gico,
#pc-index .pc-cct__grp--act .pc-cct__gico { animation: pcCctIcoPulse .6s ease; }
/* 分组右侧小箭头（默认隐藏，hover/激活滑入） */
#pc-index .pc-cct__garrow {
	width: 0; height: 0; margin-left: auto;
	border-left: 5px solid currentColor;
	border-top: 4px solid transparent; border-bottom: 4px solid transparent;
	color: var(--ct-primary);
	opacity: 0; transform: translateX(-4px);
	transition: opacity .2s ease, transform .2s ease;
}
#pc-index .pc-cct__grp:hover .pc-cct__garrow,
#pc-index .pc-cct__grp--act .pc-cct__garrow { opacity: 1; transform: translateX(0); }

#pc-index .pc-cct__list {
	display: flex;
	flex-wrap: wrap;
	gap: 2px 4px;
	list-style: none;
	padding: 0;
	margin: 0;
}
#pc-index .pc-cct__list li { display: inline-block; }
#pc-index .pc-cct__list a {
	display: inline-block;
	padding: 3px 6px;
	font-size: 13px;
	color: var(--ct-text-light);
	border-radius: 4px;
	transition: all .2s ease;
	white-space: nowrap;
	line-height: 1.5;
}
#pc-index .pc-cct__list a:hover {
	color: var(--ct-primary);
	background: rgba(255,123,71,.08);
	transform: translateY(-1px);
}

/* ---- 右侧：主内容区 ---- */
#pc-index .pc-cct__main {
	position: relative;
	display: grid;
	grid-template-rows: minmax(310px, 42%) minmax(0, 1fr) auto;
	gap: 12px;
	min-width: 0;
	height: 100%;
}

/* ====== 主Banner：滚动幻灯片 ====== */
#pc-index .pc-cct__ban {
	position: relative;
	border-radius: var(--ct-radius);
	overflow: hidden;
	min-height: 310px;
	background: linear-gradient(135deg, #6EC5E9 0%, #6DC4DD 50%, #B9E4F0 100%);
	box-shadow: var(--ct-shadow-sm);
}
#pc-index .pc-cct__ban-track {
	position: absolute;
	inset: 0;
	display: flex;
	transition: transform .6s cubic-bezier(.25,.8,.25,1);
	will-change: transform;
}
#pc-index .pc-cct__ban-slide {
	position: relative;
	flex: 0 0 100%;
	min-width: 0;
	overflow: hidden;
}
#pc-index .pc-cct__ban-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
#pc-index .pc-cct__ban-shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(90deg, rgba(0,40,80,.45) 0%, rgba(0,40,80,.1) 60%, transparent 100%),
		linear-gradient(180deg, transparent 60%, rgba(0,40,80,.25) 100%);
	z-index: 1;
}
#pc-index .pc-cct__ban-text {
	position: absolute;
	left: 36px;
	right: 36px;
	bottom: 40px;
	z-index: 2;
}
#pc-index .pc-cct__ban-t1,
#pc-index .pc-cct__ban-t2 {
	width: 100%;
	max-width: 100%;
}
#pc-index .pc-cct__ban-t1 {
	font-size: 44px;
	font-weight: 900;
	margin: 0 0 6px;
	letter-spacing: 4px;
	color: #fff;
	text-shadow: 0 2px 16px rgba(0,20,50,.4);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
#pc-index .pc-cct__ban-t2 {
	font-size: 18px;
	font-weight: 500;
	margin: 0;
	color: rgba(255,255,255,.92);
	text-shadow: 0 1px 8px rgba(0,20,50,.35);
	letter-spacing: 1px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

/* ---- Banner 点位导航 ---- */
#pc-index .pc-cct__ban-dots {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	display: flex;
	gap: 8px;
}
#pc-index .pc-cct__ban-dots button {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	border: 1.5px solid rgba(255,255,255,.7);
	background: transparent;
	cursor: pointer;
	padding: 0;
	transition: all .3s ease;
}
#pc-index .pc-cct__ban-dots button.is-active,
#pc-index .pc-cct__ban-dots button:hover {
	background: #fff;
	border-color: #fff;
	transform: scale(1.25);
}

/* 4分类卡 */
#pc-index .pc-cct__cats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 10px;
	min-height: 0;
	height: 100%;
}
#pc-index .pc-cct__cat {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	border-radius: 12px;
	overflow: hidden;
	background: linear-gradient(180deg, #FFFFFF 0%, #F0F4F8 100%);
	box-shadow: var(--ct-shadow-sm);
	text-decoration: none;
	color: #fff;
	opacity: 0;
	transform: translateY(16px);
	animation: pcCctCatIn .55s cubic-bezier(.25,.8,.25,1) forwards;
	transition: transform .4s cubic-bezier(.25,.8,.25,1), box-shadow .4s ease;
	cursor: pointer;
}
@keyframes pcCctCatIn {
	to { opacity: 1; transform: translateY(0); }
}
/* 卡片鼠标移入：轻微放大 + 阴影加深 */
#pc-index .pc-cct__cat:hover {
	transform: translateY(-6px) scale(1.025);
	box-shadow: 0 18px 40px rgba(15,40,80,.22);
}
#pc-index .pc-cct__cat:hover .pc-cct__cat-bg { transform: scale(1.12); }
#pc-index .pc-cct__cat:hover .pc-cct__cat-mask { opacity: .72; }
#pc-index .pc-cct__cat:hover .pc-cct__cat-btn {
	border-color: #fff;
	color: #fff;
	box-shadow: 0 0 16px rgba(255,255,255,.35), 0 0 0 1px rgba(255,255,255,.5) inset;
}

#pc-index .pc-cct__cat-bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform .7s cubic-bezier(.25,.8,.25,1);
	z-index: 0;
}
/* 视频默认隐藏，加载成功后由 JS 显示 */
#pc-index .pc-cct__cat video.pc-cct__cat-bg {
	display: none;
}
#pc-index .pc-cct__cat-mask {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,30,60,.08) 0%, rgba(0,25,50,.58) 100%);
	z-index: 1;
	transition: opacity .4s ease;
}

/* ---- 卡片文字：上下布局，左对齐，阿里巴巴妈妈数黑体 ---- */
#pc-index .pc-cct__cat-info {
	position: relative;
	z-index: 2;
	padding: 0 20px 0 18px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
#pc-index .pc-cct__cat-t1 {
	font-family: 'AlimamaShuHeiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
	font-size: 28px;
	font-weight: 700;
	margin: 0 0 6px;
	text-shadow: 0 1px 8px rgba(0,25,50,.4);
	letter-spacing: 3px;
	line-height: 1.2;
}
#pc-index .pc-cct__cat-t2 {
	font-family: 'AlimamaShuHeiTi', 'PingFang SC', 'Microsoft YaHei', sans-serif;
	font-size: 14px;
	margin: 0;
	opacity: .88;
	text-shadow: 0 1px 4px rgba(0,25,50,.35);
	line-height: 1.5;
	letter-spacing: 1px;
}

/* ---- 卡片按钮：白色线条边框 + 右上角斜角 + 闪烁动画 ---- */
#pc-index .pc-cct__cat-btn {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin: 10px 0 20px 18px;
	padding: 6px 16px;
	border: 1.5px solid rgba(255,255,255,.65);
	border-radius: 3px;
	color: rgba(255,255,255,.85);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 1px;
	align-self: flex-start;
	transition: all .35s ease;
	backdrop-filter: blur(4px);
	clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 0 100%, 0 0);
	overflow: visible;
	animation: pcCctBtnGlow 2.6s ease-in-out infinite;
}
/* 按钮闪烁动画 */
@keyframes pcCctBtnGlow {
	0%, 100% { box-shadow: 0 0 0 rgba(255,255,255,0); border-color: rgba(255,255,255,.45); }
	50% { box-shadow: 0 0 12px rgba(255,255,255,.25), 0 0 0 1px rgba(255,255,255,.4) inset; border-color: rgba(255,255,255,.85); }
}
#pc-index .pc-cct__cat-btn i { font-size: 10px; }

/* 提醒条 */
#pc-index .pc-cct__tip {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 50px;
	padding: 0 18px;
	background: linear-gradient(90deg, #EEF6FF 0%, #F8FAFB 60%, #FFFFFF 100%);
	border-radius: var(--ct-radius);
	box-shadow: var(--ct-shadow-sm);
	text-decoration: none;
	color: var(--ct-text);
	transition: transform .25s ease, box-shadow .25s ease;
}
#pc-index .pc-cct__tip:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(15,40,80,.12);
}
#pc-index .pc-cct__tip-ico {
	width: 36px;
	height: 36px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #6EC5E9, #4FAFD9);
	color: #fff;
	border-radius: 50%;
	font-size: 16px;
	flex-shrink: 0;
	box-shadow: 0 2px 8px rgba(110,197,233,.35);
}
#pc-index .pc-cct__tip-info { flex: 1; min-width: 0; }
#pc-index .pc-cct__tip-info strong {
	font-size: 15px;
	color: var(--ct-primary);
	margin-right: 10px;
	font-weight: 700;
}
#pc-index .pc-cct__tip-info span {
	font-size: 13px;
	color: var(--ct-text-light);
}
#pc-index .pc-cct__tip-arr {
	color: var(--ct-text-light);
	font-size: 12px;
	transition: transform .25s ease, color .25s ease;
}
#pc-index .pc-cct__tip:hover .pc-cct__tip-arr {
	transform: translateX(3px);
	color: var(--ct-primary);
}

/* ---- 右侧 hover 弹出面板 ---- */
#pc-index .pc-cct__panel {
	position: absolute;
	inset: 0;
	background: #FFFFFF;
	border-radius: var(--ct-radius);
	box-shadow: 0 12px 36px rgba(15,40,80,.16);
	z-index: 20;
	overflow: hidden;
	animation: pcCctPanelIn .28s ease both;
	display: flex;
	flex-direction: column;
}
@keyframes pcCctPanelIn {
	from { opacity: 0; transform: translateX(8px); }
	to   { opacity: 1; transform: translateX(0); }
}
#pc-index .pc-cct__panel-inner {
	flex: 1;
	overflow-y: auto;
	padding: 18px 22px 20px;
	scrollbar-width: thin;
	scrollbar-color: transparent transparent;
	transition: scrollbar-color .3s;
}
#pc-index .pc-cct__panel-inner:hover,
#pc-index .pc-cct__panel-inner:active {
	scrollbar-color: rgba(15,40,80,.15) transparent;
}
#pc-index .pc-cct__panel-inner::-webkit-scrollbar { width: 5px; }
#pc-index .pc-cct__panel-inner::-webkit-scrollbar-thumb { background: transparent; border-radius: 3px; transition: background .3s; }
#pc-index .pc-cct__panel-inner::-webkit-scrollbar-track { background: transparent; }
#pc-index .pc-cct__panel-inner:hover::-webkit-scrollbar-thumb,
#pc-index .pc-cct__panel-inner:active::-webkit-scrollbar-thumb { background: rgba(15,40,80,.15); }

#pc-index .pc-cct__pb { margin-bottom: 16px; }
#pc-index .pc-cct__pb:last-child { margin-bottom: 0; }
#pc-index .pc-cct__pbt {
	font-size: 16px;
	font-weight: 700;
	color: var(--ct-text);
	margin: 0 0 10px;
	line-height: 1.2;
	display: flex;
	align-items: center;
	gap: 8px;
}

/* ---- 面板标题内联 SVG 图标 ---- */
#pc-index .pc-cct__pico-inline {
	display: inline-block;
	width:  20px;
	height: 20px;
	flex-shrink: 0;
}
/* 热门: 火焰脉冲 */
#pc-index .pc-cct__pico-inline--hot {
	color: #FF7B47;
	animation: pcCctPicoPulse 2.2s ease-in-out infinite;
}
/* 景点: 定位弹跳 */
#pc-index .pc-cct__pico-inline--spot {
	color: #4D8DFD;
	animation: pcCctPicoBounce 2.4s ease-in-out infinite;
}
/* 主题: 旋转渐变 */
#pc-index .pc-cct__pico-inline--theme {
	color: #8A5CF6;
	animation: pcCctPicoSpin 3s linear infinite;
}
/* 玩法: 心跳缩放 */
#pc-index .pc-cct__pico-inline--play {
	color: #FF4D4D;
	animation: pcCctPicoBeat 1.6s ease-in-out infinite;
}

@keyframes pcCctPicoPulse {
	0%, 100% { transform: scale(1); opacity: 1; }
	50% { transform: scale(1.15); opacity: .8; }
}
@keyframes pcCctPicoBounce {
	0%, 100% { transform: translateY(0); }
	30% { transform: translateY(-3px); }
	50% { transform: translateY(0); }
	70% { transform: translateY(-2px); }
}
@keyframes pcCctPicoSpin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}
@keyframes pcCctPicoBeat {
	0%, 100% { transform: scale(1); }
	15% { transform: scale(1.25); }
	30% { transform: scale(1); }
}

/* 板块 1：图片网格（6 列） */
#pc-index .pc-cct__pimg {
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 8px;
	list-style: none;
	padding: 0;
	margin: 0;
}
#pc-index .pc-cct__pimg li {
	animation: pcCctPimgIn .35s ease both;
}
@keyframes pcCctPimgIn {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}
@keyframes pcCctIcoPulse {
	0%   { transform: rotate(0) scale(1); }
	50%  { transform: rotate(-12deg) scale(1.18); }
	100% { transform: rotate(0) scale(1); }
}
@keyframes pcCctTagBounce {
	0%   { transform: translateY(0); }
	40%  { transform: translateY(-3px); }
	70%  { transform: translateY(1px); }
	100% { transform: translateY(-1px); }
}
@keyframes pcCctFloat {
	0%, 100% { transform: translateY(0) rotate(-4deg); }
	50%      { transform: translateY(-7px) rotate(4deg); }
}
#pc-index .pc-cct__pimg a {
	display: block;
	position: relative;
	border-radius: 6px;
	overflow: hidden;
	text-decoration: none;
}
#pc-index .pc-cct__pimg-pic {
	position: relative;
	width: 100%;
	height: 84px;
	background-size: cover;
	background-position: center;
	background-color: #E8EDF3;
	transition: transform .35s ease;
}
#pc-index .pc-cct__pimg-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
/* 视频默认隐藏，加载成功后由 JS 显示并设置 z-index */
#pc-index .pc-cct__pimg video.pc-cct__pimg-img {
	display: none;
}
#pc-index .pc-cct__pimg a:hover .pc-cct__pimg-pic { transform: scale(1.06); }
#pc-index .pc-cct__pimg-name {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 4px 6px;
	font-size: 12px;
	font-weight: 600;
	color: #FFFFFF;
	background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.55) 100%);
	text-align: center;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	z-index: 2;
}

/* 板块 2/3/4：文字标签 */
#pc-index .pc-cct__ptag {
	display: flex;
	flex-wrap: wrap;
	gap: 4px 6px;
	list-style: none;
	padding: 0;
	margin: 0;
}
#pc-index .pc-cct__ptag li { display: inline-block; }
#pc-index .pc-cct__ptag a {
	display: inline-block;
	padding: 4px 10px;
	font-size: 13px;
	color: var(--ct-text-light);
	background: #F4F7FA;
	border: 1px solid transparent;
	border-radius: 14px;
	transition: all .2s ease;
	white-space: nowrap;
	line-height: 1.4;
	text-decoration: none;
}
#pc-index .pc-cct__ptag a:hover {
	color: var(--ct-primary);
	background: rgba(255,123,71,.08);
	border-color: rgba(255,123,71,.3);
	transform: translateY(-1px);
}

/* 标签 hover 轻微弹跳微动画 */
#pc-index .pc-cct__ptag a {
	transition: color .2s ease, background .2s ease, border-color .2s ease, transform .2s ease;
}
#pc-index .pc-cct__ptag a:hover {
	animation: pcCctTagBounce .35s ease;
}

/* Banner 装饰图标漂浮微动画 */
#pc-index .pc-cct__ban-ico {
	position: absolute; right: 16px; bottom: 14px;
	font-size: 30px; line-height: 1;
	filter: drop-shadow(0 3px 5px rgba(0,0,0,.25));
	animation: pcCctFloat 3.2s ease-in-out infinite;
}

/* 板块 4：精选玩法（左右布局图文攻略列表） */
#pc-index .pc-cct__play {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
	list-style: none;
	padding: 0;
	margin: 0;
}
#pc-index .pc-cct__play li { animation: pcCctPimgIn .35s ease both; }
#pc-index .pc-cct__play a {
	display: flex;
	align-items: stretch;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 1px 4px rgba(20,40,80,.08);
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease;
}
#pc-index .pc-cct__play a:hover {
	transform: translateX(3px);
	box-shadow: 0 5px 16px rgba(20,40,80,.15);
}
#pc-index .pc-cct__play-pic {
	position: relative;
	flex: 0 0 96px;
	width: 96px;
	min-height: 72px;
	background-color: #E8EDF3;
	background-size: cover;
	background-position: center;
}
#pc-index .pc-cct__play-badge {
	position: absolute; left: 6px; top: 6px;
	font-size: 10px; line-height: 1; color: #fff;
	background: rgba(255,77,77,.92);
	padding: 3px 5px; border-radius: 4px;
	letter-spacing: .5px;
}
#pc-index .pc-cct__play-body {
	flex: 1 1 auto;
	min-width: 0;
	padding: 8px 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#pc-index .pc-cct__play-tit {
	font-size: 13px;
	font-weight: 600;
	color: var(--ct-title);
	line-height: 1.35;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
	overflow: hidden;
}
#pc-index .pc-cct__play-meta {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 6px;
	font-size: 11px;
	color: var(--ct-text-light);
}
#pc-index .pc-cct__play-meta span { display: inline-flex; align-items: center; }
#pc-index .pc-cct__play-dot { width: 3px; height: 3px; border-radius: 50%; background: #cfd8e3; }
#pc-index .pc-cct__play-read:hover, #pc-index .pc-cct__play-like:hover { color: var(--ct-primary); }
#pc-index .pc-cct__play-like { transition: color .2s ease; cursor: default; }
#pc-index .pc-cct__play-like:hover { color: #FF4D4D; }

/* 迷你小图标（阅读/点赞/作者） */
#pc-index .pc-cct__mini {
	display: inline-block;
	width: 12px; height: 12px;
	margin-right: 3px;
	vertical-align: -1px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	opacity: .7;
}
#pc-index .pc-cct__mini--author {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238a94a6'><circle cx='12' cy='8' r='4'/><path d='M4 20c0-4 4-6 8-6s8 2 8 6'/></svg>");
}
#pc-index .pc-cct__mini--read {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a94a6' stroke-width='2'><path d='M1 12s4-7 11-7 11 7 11 7-4 7-11 7S1 12 1 12z'/><circle cx='12' cy='12' r='3'/></svg>");
}
#pc-index .pc-cct__mini--like {
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FF4D4D'><path d='M12 21s-7-4.6-9.3-9C1 8.6 2.7 5 6 5c2 0 3.2 1.2 4 2.5C10.8 6.2 12 5 14 5c3.3 0 5 3.6 3.3 7-2.3 4.4-9.3 9-9.3 9z'/></svg>");
}
/* ====== 定制线路弹窗 ====== */
#pc-index .qu-custom-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0,0,0,.5);
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
	animation: quFadeIn .25s ease;
}
@keyframes quFadeIn { from { opacity: 0; } to { opacity: 1; } }

#pc-index .qu-custom-card {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 36px 32px 28px;
	width: 480px;
	max-width: 90vw;
	max-height: 90vh;
	overflow-y: auto;
	box-shadow: 0 24px 64px rgba(0,0,0,.18);
	animation: quSlideUp .35s cubic-bezier(.25,.8,.25,1);
}
@keyframes quSlideUp { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: translateY(0); } }

#pc-index .qu-custom-close {
	position: absolute;
	top: 12px;
	right: 16px;
	width: 32px;
	height: 32px;
	border: none;
	background: #f5f5f5;
	border-radius: 50%;
	font-size: 16px;
	color: #999;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all .25s ease;
	line-height: 1;
}
#pc-index .qu-custom-close:hover { background: #e8e8e8; color: #333; }

#pc-index .qu-custom-title {
	font-size: 22px;
	font-weight: 700;
	color: #1a1a2e;
	margin: 0 0 6px;
}
#pc-index .qu-custom-sub {
	font-size: 14px;
	color: #999;
	margin: 0 0 24px;
}

#pc-index .qu-custom-form { display: flex; flex-direction: column; gap: 14px; }

#pc-index .qu-custom-row { display: flex; gap: 12px; }

#pc-index .qu-custom-field {
	flex: 1;
	padding: 11px 14px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	font-size: 14px;
	outline: none;
	color: #333;
	background: #fafafa;
	transition: border-color .25s ease, box-shadow .25s ease;
}
#pc-index .qu-custom-field:focus {
	border-color: var(--ct-primary);
	box-shadow: 0 0 0 3px rgba(255,123,71,.12);
	background: #fff;
}
#pc-index .qu-custom-field::placeholder { color: #bbb; }

#pc-index .qu-custom-select {
	flex: 1;
	padding: 11px 14px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	font-size: 14px;
	color: #333;
	background: #fafafa;
	outline: none;
	cursor: pointer;
	appearance: auto;
}
#pc-index .qu-custom-textarea {
	padding: 11px 14px;
	border: 1px solid #e0e0e0;
	border-radius: 8px;
	font-size: 14px;
	outline: none;
	resize: vertical;
	color: #333;
	background: #fafafa;
	font-family: inherit;
	transition: border-color .25s ease, box-shadow .25s ease;
}
#pc-index .qu-custom-textarea:focus {
	border-color: var(--ct-primary);
	box-shadow: 0 0 0 3px rgba(255,123,71,.12);
	background: #fff;
}
#pc-index .qu-custom-textarea::placeholder { color: #bbb; }

#pc-index .qu-custom-submit {
	width: 100%;
	padding: 13px;
	background: var(--ct-primary);
	color: #fff;
	border: none;
	border-radius: 8px;
	font-size: 16px;
	font-weight: 600;
	cursor: pointer;
	transition: background .25s ease, transform .15s ease;
	margin-top: 4px;
	letter-spacing: 1px;
}
#pc-index .qu-custom-submit:hover { background: var(--ct-primary-dark); transform: translateY(-1px); }
#pc-index .qu-custom-submit:active { transform: translateY(0); }

#pc-index .qu-custom-tip {
	text-align: center;
	font-size: 12px;
	color: #aaa;
	margin-top: 12px;
}

/* 响应式 */
@media (max-width: 1180px) {
	#pc-index .pc-cct { grid-template-columns: 210px 1fr; }
	#pc-index .pc-cct__ban-t1 { font-size: 34px; letter-spacing: 2px; }
	#pc-index .pc-cct__ban-t2 { font-size: 15px; }
	#pc-index .pc-cct__cat { min-height: 140px; }
	#pc-index .pc-cct__cat-t1 { font-size: 22px; }
	#pc-index .pc-cct__cat-t2 { font-size: 13px; }
	#pc-index .pc-cct__pimg { grid-template-columns: repeat(5, 1fr); }
	#pc-index .pc-cct__pimg-pic { height: 76px; }
	#pc-index .pc-cct__pimg-img { height: 76px; }
	#pc-index .pc-cct__play { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 960px) {
	#pc-index .pc-cct { grid-template-columns: 1fr; }
	#pc-index .pc-cct__side {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 10px 16px;
		padding: 14px;
	}
	#pc-index .pc-cct__grp { margin-bottom: 0; }
	#pc-index .pc-cct__pimg { grid-template-columns: repeat(4, 1fr); }
	#pc-index .pc-cct__panel { display: none; }
}
@media (max-width: 640px) {
	#pc-index .pc-cct__side { grid-template-columns: repeat(2, 1fr); }
	#pc-index .pc-cct__main { grid-template-rows: 180px minmax(0, 1fr) 46px; gap: 10px; }
	#pc-index .pc-cct__ban { min-height: 180px; }
	#pc-index .pc-cct__ban-text { left: 20px; bottom: 20px; }
	#pc-index .pc-cct__ban-t1 { font-size: 26px; letter-spacing: 1px; }
	#pc-index .pc-cct__ban-t2 { font-size: 13px; }
	#pc-index .pc-cct__cats { grid-template-columns: repeat(2, 1fr); gap: 8px; }
	#pc-index .pc-cct__cat { min-height: 130px; }
	#pc-index .pc-cct__cat-t1 { font-size: 18px; }
	#pc-index .pc-cct__cat-t2 { font-size: 12px; }
	#pc-index .pc-cct__pimg { grid-template-columns: repeat(3, 1fr); }
	#pc-index .pc-cct__pimg-pic { height: 70px; }
	#pc-index .pc-cct__pimg-img { height: 70px; }
}

/* ====== 3.快捷导航 ====== */
#pc-index .pc-nav9 {
	display: grid;
	grid-template-columns: repeat(9, 1fr);
	gap: 14px;
}
#pc-index .pc-nav9__i {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
	padding: 22px 8px;
	border-radius: var(--ct-radius);
	background: var(--ct-card);
	box-shadow: var(--ct-shadow);
	cursor: pointer;
	transition: all .28s;
	text-align: center;
	text-decoration: none;
	color: inherit;
}
#pc-index .pc-nav9__i:hover {
	transform: translateY(-4px);
	box-shadow: var(--ct-shadow-lg);
}
#pc-index .pc-nav9__ico {
	width: 50px;
	height: 50px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	line-height: 1;
}
#pc-index .pc-nav9__lbl {
	font-size: 13px;
	font-weight: 600;
	color: var(--ct-text);
	line-height: 1.2;
}
#pc-index .pc-nav9__dsc {
	font-size: 11px;
	color: var(--ct-text-sub);
}
#pc-index .pc-nav9__ico.c1 { background: #FFF1F0; color: #FF4D4F; }
#pc-index .pc-nav9__ico.c2 { background: #FFF7E6; color: #FA8C16; }
#pc-index .pc-nav9__ico.c3 { background: #FFFBE6; color: #FAAD14; }
#pc-index .pc-nav9__ico.c4 { background: #F6FFED; color: #52C41A; }
#pc-index .pc-nav9__ico.c5 { background: #E6F7FF; color: #1890FF; }
#pc-index .pc-nav9__ico.c6 { background: #F9F0FF; color: #722ED1; }
#pc-index .pc-nav9__ico.c7 { background: #E6FFFB; color: #13C2C2; }
#pc-index .pc-nav9__ico.c8 { background: #FFF0F6; color: #EB2F96; }
#pc-index .pc-nav9__ico.c9 { background: #F0F5FF; color: #2F54EB; }

/* ====== 4.目的地地图 ====== */
#pc-index .pc-map {
	border-radius: var(--ct-radius);
	padding: 48px 32px 40px;
	text-align: center;
	background: linear-gradient(135deg, #163A5C 0%, #1F5990 35%, #2B7EC7 70%, #3D94E0 100%);
	overflow: hidden;
}
#pc-index .pc-map h3 {
	font-size: 22px;
	font-weight: 700;
	color: #fff;
	margin: 0;
}
#pc-index .pc-map .sub {
	font-size: 14px;
	color: rgba(255,255,255,.7);
	margin: 6px 0 28px;
}
#pc-index .pc-map__ps {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	justify-content: center;
	max-width: 860px;
	margin: 0 auto;
}
#pc-index .pc-map__p {
	padding: 9px 20px;
	border-radius: 20px;
	background: rgba(255,255,255,.12);
	color: rgba(255,255,255,.9);
	font-size: 14px;
	font-weight: 500;
	cursor: pointer;
	transition: all .25s;
	border: 1px solid rgba(255,255,255,.08);
	backdrop-filter: blur(2px);
	text-decoration: none;
	display: inline-block;
}
#pc-index .pc-map__p:hover {
	background: rgba(255,255,255,.24);
	transform: translateY(-2px);
	color: #fff;
}
#pc-index .pc-map__p.hot {
	background: var(--ct-accent);
	color: #fff;
	font-weight: 700;
	border-color: transparent;
}

/* ====== 5.头条新闻 ====== */
#pc-index .pc-news {
	display: flex;
	align-items: center;
	gap: 16px;
	background: var(--ct-card);
	border-radius: var(--ct-radius-sm);
	padding: 15px 22px;
	box-shadow: var(--ct-shadow);
}
#pc-index .pc-news__tag {
	flex-shrink: 0;
	padding: 4px 14px;
	border-radius: 4px;
	background: var(--ct-danger);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
}
#pc-index .pc-news__list {
	flex: 1;
	height: 24px;
	overflow: hidden;
}
#pc-index .pc-news__i {
	display: block;
	height: 24px;
	line-height: 24px;
	color: var(--ct-text-sub);
	font-size: 14px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	text-decoration: none;
}
#pc-index .pc-news__i:hover { color: var(--ct-primary); }

/* ====== 5.5 旅行月历 ====== */
.pc-month-calendar { padding-top: 0; margin-bottom: 50px; }

/* ---------- 月份Tab导航栏（渐变背景，等宽占满容器） ---------- */
#pc-index .pc-month__tabs {
  display: flex;
  align-items: stretch;
  justify-content: flex-start;
  padding: 10px 6px;
  margin-bottom: 14px;
  border-radius: 16px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 30%, #0f3460 60%, #533483 100%);
  background-size: 300% 300%;
  animation: monthGradient 8s ease infinite;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  scroll-behavior: smooth;
}
#pc-index .pc-month__tabs::-webkit-scrollbar { display: none; }

@keyframes monthGradient {
  0%, 100% { background-position: 0% 50%; }
  50%      { background-position: 100% 50%; }
}

/* ---------- 单个月份Tab（直立：上圆下文字，固定宽度，溢出时隐藏后面月份） ---------- */
#pc-index .pc-month__tab {
  position: relative;
  flex: 0 0 140px;
  min-width: 140px;
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  user-select: none;
  padding: 10px 0 8px;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 12px;
  margin: 0 2px;
}

#pc-index .pc-month__tab:hover {
  background: rgba(255,255,255,0.08);
}

/* 圆形数字 + 月字角标容器 */
#pc-index .pc-month__circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 月份数字 */
#pc-index .pc-month__num {
  font-size: 20px;
  font-weight: 800;
  color: rgba(255,255,255,0.65);
  line-height: 1;
  transition: all 0.35s;
  z-index: 1;
}

/* 月字角标：右上角（非激活态用冷色调） */
#pc-index .pc-month__yue {
  position: absolute;
  top: 2px;
  right: 2px;
  font-size: 10px;
  font-weight: 600;
  color: rgba(180,200,240,0.6);
  line-height: 1;
  transition: all 0.35s;
}

/* ---------- 激活状态：发光动画 + 白色月字 ---------- */
#pc-index .pc-month__tab.active {
  background: transparent;
}

@keyframes monthGlowPulse {
  0%, 100% {
    box-shadow: 0 0 0 4px rgba(255,215,0,0.35), 0 4px 20px rgba(255,165,0,0.35), 0 0 40px rgba(255,215,0,0.15);
  }
  50% {
    box-shadow: 0 0 0 8px rgba(255,215,0,0.15), 0 0 28px rgba(255,165,0,0.55), 0 0 60px rgba(255,215,0,0.3), 0 0 90px rgba(255,180,0,0.12);
  }
}

#pc-index .pc-month__tab.active .pc-month__circle {
  background: linear-gradient(135deg, #FFD700, #FFA500);
  transform: scale(1.1);
  animation: monthGlowPulse 2.2s ease-in-out infinite;
}

#pc-index .pc-month__tab.active .pc-month__num {
  color: #1a1a2e;
  font-weight: 900;
}

#pc-index .pc-month__tab.active .pc-month__yue {
  color: #fff;
  font-weight: 700;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

#pc-index .pc-month__tab.active:hover {
  background: transparent;
}

/* ---------- 月份Tab内嵌迷你滚动推荐（每个月份下方各自滚动） ---------- */
#pc-index .pc-month__mini-scroll {
  width: 100%;
  overflow: hidden;
  height: 30px;
  margin-top: 6px;
  position: relative;
  /* 上下渐变遮罩 */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 20%, #000 80%, transparent 100%);
}

#pc-index .pc-month__mini-track {
  animation: monthMiniScroll 10s linear infinite;
}

#pc-index .pc-month__mini-track:hover {
  animation-play-state: paused;
}

@keyframes monthMiniScroll {
  0%   { transform: translateY(0); }
  100% { transform: translateY(-50%); }
}

/* 迷你推荐条目：单行文字 */
#pc-index .pc-month__mini-item {
  display: block;
  height: 30px;
  line-height: 30px;
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.55);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 6px;
}

/* ---------- 内容区：双列布局，有图则图在右，无图展示标题+简介 ---------- */
#pc-index .pc-month__content {
  min-height: 160px;
}

#pc-index .pc-month__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

/* 列表项 */
#pc-index .pc-month__item {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px 14px 88px;
  border-radius: 8px;
  background: var(--ct-card, #fff);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  text-decoration: none;
  color: inherit;
  transition: transform 0.25s, box-shadow 0.25s;
  animation: itemSlideUp 0.4s ease-out both;
  min-height: 64px;
  overflow: hidden;
}

#pc-index .pc-month__item:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0,0,0,0.1);
}

/* 排名编号 */
#pc-index .pc-month__item-num {
  position: absolute;
  left: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: auto;
  height: auto;
  line-height: 1;
  font-size: 80px;
  font-weight: 700;
  font-style: italic;
  pointer-events: none;
  transition: opacity 0.2s;
  z-index: 0;
  overflow: hidden;
}
/* 光束划过 */
#pc-index .pc-month__item-num::after {
  content: '';
  position: absolute;
  top: -10%;
  left: -80%;
  width: 30%;
  height: 120%;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255,255,255,0.25) 40%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0.25) 60%,
    transparent 100%
  );
  transform: skewX(-20deg);
  animation: numBeam 3.5s ease-in-out infinite;
}
@keyframes numBeam {
  0%   { left: -80%; }
  100% { left: 130%; }
}
/* 前三名鲜艳 */
#pc-index .pc-month__item-num--top {
  color: rgba(59,130,246,0.35);
}
#pc-index .pc-month__item:hover .pc-month__item-num--top {
  color: rgba(59,130,246,0.52);
}
/* 4~10 灰色 */
#pc-index .pc-month__item-num--norm {
  color: rgba(148,163,184,0.45);
}
#pc-index .pc-month__item:hover .pc-month__item-num--norm {
  color: rgba(148,163,184,0.62);
}

@keyframes itemSlideUp {
  0%   { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* 文本主体 */
#pc-index .pc-month__item-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 1;
}

#pc-index .pc-month__item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ct-text, #1a1a2e);
  line-height: 1.5;
  margin: 0 0 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  transition: color 0.25s;
}

#pc-index .pc-month__item:hover .pc-month__item-title {
  color: var(--ct-primary, #764ba2);
}

#pc-index .pc-month__item-desc {
  font-size: 12px;
  color: var(--ct-text-sub, #888);
  line-height: 1.5;
  margin: 0 0 6px;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 元信息：作者 + 阅读量 */
#pc-index .pc-month__item-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  color: #999;
}

#pc-index .pc-month__item-author {
  color: #555;
  font-weight: 500;
}

#pc-index .pc-month__item-click::before {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-right: 3px;
  vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23999'%3E%3Cpath d='M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5C21.27 7.61 17 4.5 12 4.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* 缩略图：有图时固定在右侧 */
#pc-index .pc-month__item-thumb {
  flex-shrink: 0;
  width: 90px;
  height: 60px;
  margin-left: 14px;
  border-radius: 6px;
  overflow: hidden;
  background: var(--ct-bg-alt, #f5f5f5);
  position: relative;
  z-index: 1;
}

#pc-index .pc-month__item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

#pc-index .pc-month__item:hover .pc-month__item-img {
  transform: scale(1.06);
}

/* 无缩略图时：文字占满卡片，描述更突出 */
#pc-index .pc-month__item:not(.pc-month__item--hasimg) .pc-month__item-body {
  padding: 4px 0;
}
#pc-index .pc-month__item:not(.pc-month__item--hasimg) .pc-month__item-title {
  font-size: 15px;
  margin-bottom: 8px;
  -webkit-line-clamp: 2;
}
#pc-index .pc-month__item:not(.pc-month__item--hasimg) .pc-month__item-desc {
  font-size: 13px;
  color: var(--ct-text-sub, #666);
  -webkit-line-clamp: 3;
  margin-bottom: 10px;
}

/* ---------- 空状态 ---------- */
#pc-index .pc-month__empty {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 120px;
  color: var(--ct-text-sub);
  font-size: 15px;
  background: var(--ct-bg);
  border-radius: 12px;
}

/* ===================== 响应式 ===================== */
@media (max-width: 768px) {
  #pc-index .pc-month__tabs {
    padding: 8px 4px;
    border-radius: 12px;
  }
  #pc-index .pc-month__tab {
    flex: 0 0 72px;
    min-width: 72px;
    padding: 6px 0;
  }
  #pc-index .pc-month__circle {
    width: 36px;
    height: 36px;
  }
  #pc-index .pc-month__num { font-size: 16px; }
  #pc-index .pc-month__yue { font-size: 9px; top: 0; right: 0; }

  #pc-index .pc-month__item {
    padding: 14px 16px 14px 76px;
  }
  #pc-index .pc-month__item-num {
    font-size: 60px;
    left: 8px;
  }
  #pc-index .pc-month__item-title {
    font-size: 14px;
    margin-bottom: 6px;
  }
  #pc-index .pc-month__item-desc {
    font-size: 12px;
    margin-bottom: 8px;
  }
  #pc-index .pc-month__item-thumb {
    width: 90px;
    height: 60px;
    margin-left: 12px;
  }
  #pc-index .pc-month__mini-scroll {
    height: 24px;
  }
  #pc-index .pc-month__mini-item {
    height: 24px;
    line-height: 24px;
    font-size: 11px;
  }
}

@media (max-width: 480px) {
  #pc-index .pc-month__tabs {
    padding: 6px 2px;
    border-radius: 10px;
  }
  #pc-index .pc-month__tab {
    flex: 0 0 56px;
    min-width: 56px;
    padding: 4px 0;
    margin: 0 1px;
  }
  #pc-index .pc-month__circle {
    width: 30px;
    height: 30px;
  }
  #pc-index .pc-month__num { font-size: 14px; }
  #pc-index .pc-month__yue { font-size: 8px; top: -1px; right: -1px; }
  #pc-index .pc-month__tab.active .pc-month__circle {
    animation: none;
    box-shadow: 0 0 0 2px rgba(255,215,0,0.35), 0 2px 12px rgba(255,165,0,0.3);
  }

  #pc-index .pc-month__item {
    padding: 12px 14px 12px 66px;
  }
  #pc-index .pc-month__item-num {
    font-size: 50px;
    left: 6px;
  }
  #pc-index .pc-month__item-title {
    font-size: 13px;
    margin-bottom: 4px;
  }
  #pc-index .pc-month__item-desc {
    font-size: 11px;
    margin-bottom: 6px;
    -webkit-line-clamp: 1;
  }
  #pc-index .pc-month__item-thumb {
    width: 72px;
    height: 48px;
    margin-left: 10px;
  }
  #pc-index .pc-month__mini-scroll {
    height: 20px;
  }
  #pc-index .pc-month__mini-item {
    height: 20px;
    line-height: 20px;
    font-size: 10px;
  }
}

/* ====== 6.精选推荐（Tab切换） ====== */
#pc-index .pc-tabs {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	margin-bottom: 24px;
}
#pc-index .pc-tab {
	padding: 8px 22px;
	border-radius: 20px;
	font-size: 14px;
	font-weight: 600;
	border: none;
	background: #EDF2F7;
	color: var(--ct-text-sub);
	transition: all .2s;
	cursor: pointer;
}
#pc-index .pc-tab:hover {
	color: var(--ct-primary);
	background: var(--ct-primary-light);
}
#pc-index .pc-tab.act {
	background: var(--ct-primary);
	color: #fff;
}
#pc-index .pc-grid4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
#pc-index .pc-card {
	border-radius: var(--ct-radius);
	overflow: hidden;
	background: linear-gradient(180deg, #FFFFFF 0%, #F8FAFB 100%);
	box-shadow: var(--ct-shadow);
	transition: all .3s;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}
#pc-index .pc-card:hover {
	transform: translateY(-5px);
	box-shadow: var(--ct-shadow-lg);
}
#pc-index .pc-card__img {
	width: 100%;
	height: 210px;
	object-fit: cover;
	display: block;
	background: var(--ct-bg-alt);
}
#pc-index .pc-card__bd { padding: 14px 18px 18px; }
#pc-index .pc-card__tt {
	font-size: 15px;
	font-weight: 600;
	color: var(--ct-text);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 44px;
}
#pc-index .pc-card__mt {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 10px;
	font-size: 12px;
	color: var(--ct-text-sub);
}
#pc-index .pc-card__tag {
	padding: 3px 12px;
	border-radius: 10px;
	background: var(--ct-primary-light);
	color: var(--ct-primary);
	font-size: 11px;
	font-weight: 600;
}

/* ====== 7.权益卡 ====== */
#pc-index .pc-ben4 {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
#pc-index .pc-ben {
	border-radius: var(--ct-radius);
	background: linear-gradient(135deg, #FFFFFF 0%, #F2F4F9 100%);
	box-shadow: var(--ct-shadow);
	padding: 28px 24px 24px;
	transition: all .3s;
	cursor: pointer;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 14px;
	text-decoration: none;
	color: inherit;
}
#pc-index .pc-ben:hover {
	transform: translateY(-4px);
	box-shadow: var(--ct-shadow-lg);
}
#pc-index .pc-ben--vip {
	background: linear-gradient(135deg, #1E293B, #334155);
	color: #fff;
}
#pc-index .pc-ben--vip .pc-ben__tt,
#pc-index .pc-ben--vip .pc-ben__d {
	color: rgba(255,255,255,.9);
}
#pc-index .pc-ben__ico {
	width: 48px;
	height: 48px;
	border-radius: 14px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 22px;
}
#pc-index .pc-ben__ico.c1 { background: #FEF3C7; color: #D97706; }
#pc-index .pc-ben__ico.c2 { background: #E6F7FF; color: #1890FF; }
#pc-index .pc-ben__ico.c3 { background: #FFF7E6; color: #FA8C16; }
#pc-index .pc-ben__ico.c4 { background: #F6FFED; color: #52C41A; }
#pc-index .pc-ben__tt {
	font-size: 17px;
	font-weight: 700;
	margin-bottom: 4px;
	color: var(--ct-text);
}
#pc-index .pc-ben__d {
	font-size: 13px;
	color: var(--ct-text-sub);
	line-height: 1.6;
}
#pc-index .pc-ben__badge {
	position: absolute;
	top: 14px;
	right: 14px;
	padding: 3px 10px;
	border-radius: 4px;
	font-size: 10px;
	font-weight: 700;
	color: #fff;
}
#pc-index .pc-ben__badge--h { background: var(--ct-danger); }
#pc-index .pc-ben__badge--n { background: var(--ct-success); }

/* ====== 8.排行榜 ====== */
#pc-index .pc-rank3 {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
#pc-index .pc-rk {
	border-radius: var(--ct-radius);
	overflow: hidden;
	box-shadow: var(--ct-shadow);
	background: linear-gradient(180deg, #FFFFFF 0%, #F9FAFC 100%);
}
#pc-index .pc-rk__hd {
	position: relative;
	height: 90px;
}
#pc-index .pc-rk__hd .bg {
	position: absolute;
	inset: 0;
}
#pc-index .pc-rk__hd::after {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,.3);
}
#pc-index .pc-rk__tt {
	position: absolute;
	z-index: 1;
	bottom: 14px;
	left: 18px;
	color: #fff;
}
#pc-index .pc-rk__tt h3 {
	font-size: 16px;
	font-weight: 700;
	margin: 0;
}
#pc-index .pc-rk__tt p {
	font-size: 12px;
	opacity: .75;
	margin: 0;
}
#pc-index .pc-rk__list { padding: 8px 14px 14px; }
#pc-index .pc-rk-i {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 6px;
	transition: all .15s;
	border-radius: var(--ct-radius-sm);
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}
#pc-index .pc-rk-i:hover { background: var(--ct-bg); }
#pc-index .pc-rk-i__n {
	width: 26px;
	height: 26px;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 800;
	background: #EDF2F7;
	color: var(--ct-text-sub);
	flex-shrink: 0;
}
#pc-index .pc-rk-i__n.g { background: #FEF3C7; color: #B45309; }
#pc-index .pc-rk-i__n.s { background: #F3F4F6; color: #6B7280; }
#pc-index .pc-rk-i__n.b { background: #FFF7ED; color: #C2410C; }
#pc-index .pc-rk-i__n.o { background: #EDF2F7; color: var(--ct-text-sub); }
#pc-index .pc-rk-i__txt {
	flex: 1;
	font-size: 13px;
	font-weight: 600;
	color: var(--ct-text);
	min-width: 0;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#pc-index .pc-rk-i__val {
	flex-shrink: 0;
	font-size: 12px;
	color: var(--ct-text-light);
	font-weight: 600;
}

/* ====== 9.双卡片（预订/攻略） ====== */
#pc-index .pc-dual {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 20px;
}
#pc-index .pc-du {
	position: relative;
	border-radius: var(--ct-radius);
	overflow: hidden;
	height: 210px;
	display: block;
	transition: all .3s;
	text-decoration: none;
	color: inherit;
}
#pc-index .pc-du:hover {
	transform: translateY(-3px);
	box-shadow: var(--ct-shadow-lg);
}
#pc-index .pc-du__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .6s;
	background: linear-gradient(135deg, #1e40af, #3b82f6);
}
#pc-index .pc-du:hover .pc-du__bg { transform: scale(1.05); }
#pc-index .pc-du::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.1) 100%);
	z-index: 1;
}
#pc-index .pc-du__info {
	position: relative;
	z-index: 2;
	padding: 36px;
	color: #fff;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
}
#pc-index .pc-du__tag {
	display: inline-block;
	padding: 5px 14px;
	border-radius: 4px;
	font-size: 12px;
	font-weight: 700;
	margin-bottom: 14px;
	width: fit-content;
}
#pc-index .pc-du__tag--book { background: var(--ct-accent); }
#pc-index .pc-du__tag--guide { background: var(--ct-success); }
#pc-index .pc-du__title {
	font-size: 24px;
	font-weight: 800;
	margin: 0;
}
#pc-index .pc-du__d {
	font-size: 14px;
	opacity: .85;
	margin: 6px 0 0;
}

/* ====== 10.问答 ====== */
#pc-index .pc-qa2 {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px;
}
#pc-index .pc-qa-i {
	background: linear-gradient(90deg, #FDFEFF 0%, #F5F7FC 100%);
	border-radius: var(--ct-radius-sm);
	padding: 20px 22px;
	box-shadow: var(--ct-shadow);
	cursor: pointer;
	transition: all .2s;
	display: flex;
	align-items: flex-start;
	gap: 14px;
	text-decoration: none;
	color: inherit;
}
#pc-index .pc-qa-i:hover { box-shadow: var(--ct-shadow-md); }
#pc-index .pc-qa-i__av {
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--ct-primary-light);
	color: var(--ct-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 17px;
	flex-shrink: 0;
	font-weight: 700;
}
#pc-index .pc-qa-i__ct { flex: 1; min-width: 0; }
#pc-index .pc-qa-i__q {
	font-size: 15px;
	font-weight: 700;
	color: var(--ct-text);
	margin: 0 0 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#pc-index .pc-qa-i__a {
	font-size: 13px;
	color: var(--ct-text-sub);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0 0 10px;
}
#pc-index .pc-qa-i__ft {
	display: flex;
	gap: 14px;
	font-size: 12px;
	color: var(--ct-text-light);
}

/* ====== 11+13.横向滚动卡片(定制师/行程) ====== */
#pc-index .pc-scroll {
	display: flex;
	gap: 18px;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 8px;
}
#pc-index .pc-scroll::-webkit-scrollbar { height: 5px; }
#pc-index .pc-scroll::-webkit-scrollbar-thumb {
	background: var(--ct-border);
	border-radius: 3px;
}
#pc-index .pc-cm {
	flex: 0 0 260px;
	border-radius: var(--ct-radius);
	overflow: hidden;
	background: linear-gradient(180deg, #FFFFFF 0%, #FCFAF7 100%);
	box-shadow: var(--ct-shadow);
	scroll-snap-align: start;
	transition: all .25s;
	text-decoration: none;
	color: inherit;
}
#pc-index .pc-cm:hover {
	transform: translateY(-4px);
	box-shadow: var(--ct-shadow-lg);
}
#pc-index .pc-cm__img {
	width: 100%;
	height: 165px;
	object-fit: cover;
	background: var(--ct-bg-alt);
	display: block;
}
#pc-index .pc-cm__bd { padding: 16px 18px 18px; }
#pc-index .pc-cm__name {
	font-size: 15px;
	font-weight: 700;
	color: var(--ct-text);
	display: flex;
	align-items: center;
	gap: 6px;
}
#pc-index .pc-cm__vf {
	font-size: 11px;
	color: var(--ct-success);
	font-weight: 600;
}
#pc-index .pc-cm__tags {
	display: flex;
	gap: 6px;
	margin-top: 8px;
	flex-wrap: wrap;
}
#pc-index .pc-cm__t {
	padding: 3px 10px;
	border-radius: 10px;
	font-size: 11px;
	font-weight: 600;
	background: var(--ct-primary-light);
	color: var(--ct-primary);
}
#pc-index .pc-cm__stats {
	display: flex;
	gap: 16px;
	margin-top: 10px;
	font-size: 12px;
	color: var(--ct-text-light);
}

/* ====== 12.产品 ====== */
#pc-index .pc-prod {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
#pc-index .pc-pro {
	border-radius: var(--ct-radius);
	overflow: hidden;
	background: linear-gradient(180deg, #FFFFFF 0%, #F8FAF6 100%);
	box-shadow: var(--ct-shadow);
	transition: all .3s;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}
#pc-index .pc-pro:hover {
	transform: translateY(-5px);
	box-shadow: var(--ct-shadow-lg);
}
#pc-index .pc-pro__img {
	width: 100%;
	height: 190px;
	object-fit: cover;
	background: var(--ct-bg-alt);
	display: block;
}
#pc-index .pc-pro__bd { padding: 14px 16px 18px; }
#pc-index .pc-pro__tt {
	font-size: 14px;
	font-weight: 600;
	color: var(--ct-text);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 42px;
}
#pc-index .pc-pro__pr {
	margin-top: 12px;
	display: flex;
	align-items: baseline;
	gap: 8px;
}
#pc-index .pc-pro__pr-n {
	font-size: 22px;
	font-weight: 800;
	color: var(--ct-danger);
}
#pc-index .pc-pro__pr-n::before {
	content: '¥';
	font-size: 14px;
	font-weight: 600;
}
#pc-index .pc-pro__pr-o {
	font-size: 13px;
	color: var(--ct-text-light);
	text-decoration: line-through;
}
#pc-index .pc-pro__pr-o::before { content: '¥'; }

/* ====== 14.攻略 ====== */
#pc-index .pc-arts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}
#pc-index .pc-art {
	border-radius: var(--ct-radius);
	overflow: hidden;
	background: linear-gradient(180deg, #FFFFFF 0%, #F9F8FC 100%);
	box-shadow: var(--ct-shadow);
	transition: all .3s;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}
#pc-index .pc-art:hover {
	transform: translateY(-4px);
	box-shadow: var(--ct-shadow-lg);
}
#pc-index .pc-art__img {
	width: 100%;
	height: 190px;
	object-fit: cover;
	background: var(--ct-bg-alt);
	display: block;
}
#pc-index .pc-art__bd { padding: 16px 20px 20px; }
#pc-index .pc-art__cat {
	display: inline-block;
	padding: 4px 12px;
	border-radius: 4px;
	font-size: 11px;
	font-weight: 700;
	margin-bottom: 10px;
	background: var(--ct-primary-light);
	color: var(--ct-primary);
}
#pc-index .pc-art__tt {
	font-size: 16px;
	font-weight: 700;
	color: var(--ct-text);
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#pc-index .pc-art__ft {
	display: flex;
	align-items: center;
	gap: 14px;
	margin-top: 12px;
	font-size: 12px;
	color: var(--ct-text-light);
}

/* 无缩略图纯文字卡片：标题+描述占满整个卡片 */
#pc-index .pc-art--notext {
	min-height: 200px;
	display: flex;
	align-items: stretch;
}
#pc-index .pc-art__bd--full {
	padding: 20px 22px 22px;
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
#pc-index .pc-art__desc {
	font-size: 13px;
	line-height: 1.7;
	color: var(--ct-text-sub, #666);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 12px 0 4px;
	flex: 1;
}  

/* ==================================================================
   必去榜单 (#bl-app) — 基于原始 styles.css 映射 bl- 前缀
================================================================== */

/* ---- CSS 变量（作用域内） ---- */
#bl-app {
	--bl-primary: #6366f1;
	--bl-primary-dark: #4f46e5;
	--bl-primary-light: #a5b4fc;
	--bl-secondary: #8b5cf6;
	--bl-accent: #ec4899;
	--bl-gradient-primary: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);
	--bl-gradient-banner: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
	--bl-gradient-gold: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
	--bl-gradient-silver: linear-gradient(135deg, #e5e7eb 0%, #9ca3af 100%);
	--bl-gradient-bronze: linear-gradient(135deg, #fdba74 0%, #ea580c 100%);
	--bl-bg: #f8fafc;
	--bl-bg-card: #ffffff;
	--bl-bg-hover: #f1f5f9;
	--bl-text: #1e293b;
	--bl-text-secondary: #64748b;
	--bl-text-muted: #94a3b8;
	--bl-border: #e2e8f0;
	--bl-border-light: #f1f5f9;
	--bl-success: #10b981;
	--bl-warning: #f59e0b;
	--bl-danger: #ef4444;
	--bl-info: #3b82f6;
	--bl-radius: 12px;
	--bl-radius-lg: 16px;
	--bl-radius-xl: 20px;
	--bl-shadow-sm: 0 1px 2px rgba(0,0,0,.05);
	--bl-shadow: 0 4px 6px -1px rgba(0,0,0,.1), 0 2px 4px -2px rgba(0,0,0,.1);
	--bl-shadow-lg: 0 10px 15px -3px rgba(0,0,0,.1), 0 4px 6px -4px rgba(0,0,0,.1);
	--bl-shadow-xl: 0 20px 25px -5px rgba(0,0,0,.1), 0 8px 10px -6px rgba(0,0,0,.1);
	--bl-transition: all .3s cubic-bezier(.4,0,.2,1);
	--bl-transition-fast: all .15s ease;
}

/* ---- Banner 运营区 ---- */
#bl-app .bl-banner {
	margin-top: 0;
	background: 
		linear-gradient(135deg, rgba(26,26,46,.88) 0%, rgba(22,33,62,.88) 50%, rgba(15,51,96,.88) 100%),
		var(--bl-banner-img, none) center / cover no-repeat;
	padding: 64px 24px 56px;
	position: relative;
	overflow: hidden;
	border-radius: 0;
}
#bl-app .bl-banner::before {
	content: '';
	position: absolute;
	top: -50%; right: -20%;
	width: 600px; height: 600px;
	background: radial-gradient(circle, rgba(99,102,241,.3) 0%, transparent 70%);
	border-radius: 50%;
}
#bl-app .bl-banner::after {
	content: '';
	position: absolute;
	bottom: -30%; left: -10%;
	width: 400px; height: 400px;
	background: radial-gradient(circle, rgba(236,72,153,.2) 0%, transparent 70%);
	border-radius: 50%;
}

#bl-app .bl-banner-content {
	max-width: 1440px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
	text-align: center;
}
#bl-app .bl-banner h1 {
	font-size: 2.75rem;
	font-weight: 800;
	color: #fff;
	margin-bottom: 16px;
	letter-spacing: -1px;
}
#bl-app .bl-banner p {
	font-size: 1.05rem;
	color: rgba(255,255,255,.65);
	margin-bottom: 28px;
}

#bl-app .bl-banner-tags {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}
#bl-app .bl-hot-tag {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 6px 16px;
	border-radius: 20px;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.15);
	color: rgba(255,255,255,.85);
	font-size: .82rem;
	cursor: pointer;
	transition: var(--bl-transition-fast);
}
#bl-app .bl-hot-tag:hover {
	background: rgba(255,255,255,.2);
	transform: translateY(-2px);
}

#bl-app .bl-banner-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 13px 32px;
	border-radius: 10px;
	background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #8b5cf6 100%);
	color: #fff;
	font-size: .95rem;
	font-weight: 600;
	transition: var(--bl-transition);
	box-shadow: 0 4px 15px rgba(79,70,229,.35);
	cursor: pointer;
	border: none;
}
#bl-app .bl-banner-cta:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 25px rgba(99,102,241,.5);
	animation: none;
}
@keyframes bl-cta-pulse {
	0%   { box-shadow: 0 0 0 0 rgba(99,102,241,.5); }
	70%  { box-shadow: 0 0 0 14px rgba(99,102,241,0); }
	100% { box-shadow: 0 0 0 0 rgba(99,102,241,0); }
}
#bl-app .bl-banner-cta {
	animation: bl-cta-pulse 2s infinite;
}

#bl-app .bl-banner-stats {
	max-width: 1440px;
	margin: 40px auto 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 24px;
	position: relative;
	z-index: 1;
}
#bl-app .bl-stat-item {
	text-align: center;
	padding: 22px 16px;
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 14px;
}
#bl-app .bl-stat-num {
	font-size: 2rem;
	font-weight: 800;
	color: #fff;
	background: linear-gradient(135deg, #818cf8 0%, #a78bfa 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}
#bl-app .bl-stat-label {
	font-size: .85rem;
	color: rgba(255,255,255,.6);
	margin-top: 4px;
}

/* ---- Tab 切换 & 筛选栏 ---- */
#bl-app .bl-filter-bar {
	background: #fff;
	border-bottom: 1px solid var(--bl-border);
	position: sticky;
	top: 36px;
	z-index: 100;
	box-shadow: var(--bl-shadow-sm);
}
#bl-app .bl-filter-inner {
	max-width: 1440px;
	margin: 0 auto;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
}

#bl-app .bl-tab-group {
	display: flex;
	gap: 24px;
	background: transparent;
	border-radius: 0;
	padding: 0;
}
#bl-app .bl-tab-btn {
	padding: 8px 0;
	border-radius: 0;
	font-size: .9rem;
	font-weight: 500;
	color: var(--bl-text-secondary);
	transition: var(--bl-transition-fast);
	cursor: pointer;
	border: none;
	background: transparent;
	position: relative;
}
#bl-app .bl-tab-btn:hover { color: var(--bl-text); }
#bl-app .bl-tab-btn.active {
	background: transparent;
	color: var(--bl-primary);
	font-weight: 700;
}
#bl-app .bl-tab-btn.active::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--bl-primary);
	border-radius: 1px;
}

#bl-app .bl-filter-group {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}
#bl-app .bl-filter-select {
	padding: 8px 32px 8px 14px;
	border: 1px solid var(--bl-border);
	border-radius: 8px;
	font-size: .85rem;
	color: var(--bl-text);
	background: var(--bl-bg-card);
	cursor: pointer;
	outline: none;
	transition: var(--bl-transition-fast);
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%236b7280' d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}
#bl-app .bl-filter-select:hover { border-color: var(--bl-primary-light); }
#bl-app .bl-filter-select:focus { border-color: var(--bl-primary); box-shadow: 0 0 0 3px rgba(99,102,241,.1); }

#bl-app .bl-view-toggle {
	display: flex;
	gap: 8px;
	background: transparent;
	border-radius: 0;
	padding: 0;
}
#bl-app .bl-view-btn {
	width: 34px; height: 34px;
	border-radius: 6px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bl-text-secondary);
	transition: var(--bl-transition-fast);
	cursor: pointer;
	border: 1px solid transparent;
	background: transparent;
}
#bl-app .bl-view-btn:hover { color: var(--bl-text); border-color: var(--bl-border); }
#bl-app .bl-view-btn.active {
	background: var(--bl-bg-hover);
	color: var(--bl-primary);
	border-color: var(--bl-primary-light);
}

/* ---- 主体三栏布局 ---- */
#bl-app .bl-main-content {
	max-width: 1440px;
	margin: 0 auto;
	padding: 24px;
	display: grid;
	grid-template-columns: 240px 1fr 300px;
	gap: 24px;
	align-items: start;
}

/* ---- 左侧栏 ---- */
#bl-app .bl-sidebar-left {
	position: sticky;
	top: 96px;
	background: var(--bl-bg-card);
	border-radius: var(--bl-radius-lg);
	padding: 20px;
	box-shadow: var(--bl-shadow-sm);
	border: 1px solid var(--bl-border-light);
}

#bl-app .bl-sidebar-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .9rem;
	font-weight: 700;
	color: var(--bl-text);
	margin-bottom: 12px;
	text-transform: uppercase;
	letter-spacing: .5px;
}
#bl-app .bl-sidebar-title i { color: var(--bl-primary); font-size: .85rem; }

#bl-app .bl-category-tree { margin-bottom: 8px; }
#bl-app .bl-cat-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 10px 12px;
	border-radius: 8px;
	font-size: .88rem;
	color: var(--bl-text-secondary);
	cursor: pointer;
	transition: var(--bl-transition-fast);
	margin-bottom: 2px;
}
#bl-app .bl-cat-item:hover { background: var(--bl-bg-hover); color: var(--bl-text); }
#bl-app .bl-cat-item.active {
	background: linear-gradient(135deg, rgba(99,102,241,.1), rgba(139,92,246,.1));
	color: var(--bl-primary);
	font-weight: 600;
}
#bl-app .bl-cat-item i { width: 18px; text-align: center; font-size: .85rem; }
#bl-app .bl-badge {
	margin-left: auto;
	background: var(--bl-bg-hover);
	color: var(--bl-text-muted);
	font-size: .72rem;
	padding: 2px 8px;
	border-radius: 10px;
	font-weight: 600;
}
#bl-app .bl-cat-item.active .bl-badge {
	background: var(--bl-primary);
	color: #fff;
}

#bl-app .bl-sidebar-divider {
	height: 1px;
	background: var(--bl-border);
	margin: 16px 0;
}

#bl-app .bl-favorite-list { display: flex; flex-direction: column; gap: 10px; }
#bl-app .bl-fav-item {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 8px;
	border-radius: 8px;
	transition: var(--bl-transition-fast);
	cursor: pointer;
}
#bl-app .bl-fav-item:hover { background: var(--bl-bg-hover); }
#bl-app .bl-fav-item img {
	width: 42px; height: 42px;
	border-radius: 8px;
	object-fit: cover;
}
#bl-app .bl-fav-name { font-size: .82rem; font-weight: 600; color: var(--bl-text); }
#bl-app .bl-fav-city { font-size: .75rem; color: var(--bl-text-muted); margin-top: 2px; }

/* ---- 中间内容区 ---- */
#bl-app .bl-content-center { min-width: 0; }

/* TOP3 卡片 */
#bl-app .bl-top3-section { margin-bottom: 32px; }
#bl-app .bl-top3-title {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 1.2rem;
	font-weight: 800;
	color: var(--bl-text);
	margin-bottom: 20px;
}
#bl-app .bl-top3-title i { color: #f59e0b; font-size: 1.3rem; }

#bl-app .bl-top3-cards {
	display: grid;
	grid-template-columns: 1fr 1.18fr 1fr;
	gap: 22px;
	align-items: end;
}

#bl-app .bl-top-card {
	background: var(--bl-bg-card);
	border-radius: var(--bl-radius-lg);
	overflow: hidden;
	box-shadow: var(--bl-shadow);
	transition: var(--bl-transition);
	position: relative;
	display: flex;
	flex-direction: column;
	cursor: pointer;
	border: 1px solid var(--bl-border-light);
}
#bl-app .bl-top-card:hover {
	transform: translateY(-6px);
	box-shadow: var(--bl-shadow-xl);
}

#bl-app .bl-top-card.bl-top-1 {
	border: 2px solid #fbbf24;
	box-shadow: 0 12px 40px rgba(251,191,36,.28);
	transform: scale(1.04);
	z-index: 2;
}
#bl-app .bl-top-card.bl-top-1:hover { transform: scale(1.04) translateY(-6px); }

#bl-app .bl-top-card.bl-top-2,
#bl-app .bl-top-card.bl-top-3 { border: 1px solid var(--bl-border); }

/* 皇冠动画 */
@keyframes bl-crown-pulse {
	0%, 100% { transform: translateX(-50%) scale(1); }
	50% { transform: translateX(-50%) scale(1.15); }
}
@keyframes bl-crown-shine {
	0%, 100% { opacity: .5; transform: translateX(-50%) rotate(-5deg); }
	50% { opacity: 1; transform: translateX(-50%) rotate(5deg); }
}
#bl-app .bl-top-crown {
	position: absolute;
	top: 12px; left: 50%;
	transform: translateX(-50%);
	z-index: 3;
	font-size: 1.6rem;
	color: #fbbf24;
	filter: drop-shadow(0 2px 4px rgba(0,0,0,.35));
}
/* 第1名皇冠：大号 + 脉冲动画 + 光晕 */
#bl-app .bl-top-1 .bl-top-crown {
	font-size: 1.9rem; top: 14px;
	animation: bl-crown-pulse 2s ease-in-out infinite;
}
#bl-app .bl-top-1 .bl-top-crown::after {
	content: '';
	position: absolute;
	top: 2px; left: 50%;
	transform: translateX(-50%);
	width: 12px; height: 12px;
	background: radial-gradient(circle, rgba(251,191,36,.8) 0%, transparent 70%);
	border-radius: 50%;
	animation: bl-crown-shine 1.6s ease-in-out infinite;
}

/* 排名圆圈：三色增强，带发光 */
#bl-app .bl-top-rank {
	position: absolute;
	top: 12px; left: 12px;
	z-index: 3;
	width: 34px; height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	font-size: .95rem;
	color: #fff;
	box-shadow: 0 3px 12px rgba(0,0,0,.3);
	border: 2px solid rgba(255,255,255,.3);
}
/* 第1名：金色 */
#bl-app .bl-top-1 .bl-top-rank {
	background: linear-gradient(135deg, #ffd700 0%, #f59e0b 40%, #d97706 100%);
	width: 38px; height: 38px;
	font-size: 1.05rem;
	top: 14px; left: 14px;
	box-shadow: 0 3px 16px rgba(245,158,11,.45);
}
/* 第2名：银色 */
#bl-app .bl-top-2 .bl-top-rank {
	background: linear-gradient(135deg, #e8e8e8 0%, #9ca3af 40%, #6b7280 100%);
	color: #374151;
	box-shadow: 0 3px 12px rgba(156,163,175,.4);
}
/* 第3名：铜色 */
#bl-app .bl-top-3 .bl-top-rank {
	background: linear-gradient(135deg, #fda4af 0%, #f97316 40%, #c2410c 100%);
	box-shadow: 0 3px 12px rgba(249,115,22,.4);
}

#bl-app .bl-top-card-img {
	position: relative;
	height: 190px;
	overflow: hidden;
}
#bl-app .bl-top-1 .bl-top-card-img { height: 260px; }
#bl-app .bl-top-card-img img {
	width: 100%; height: 100%;
	object-fit: cover;
	transition: var(--bl-transition);
}
#bl-app .bl-top-card:hover .bl-top-card-img img { transform: scale(1.05); }

#bl-app .bl-top-card-overlay {
	position: absolute;
	bottom: 0; left: 0; right: 0;
	padding: 20px 16px 12px;
	background: linear-gradient(to top, rgba(0,0,0,.7), transparent);
}
#bl-app .bl-card-city {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #fff;
	font-size: .8rem;
	font-weight: 600;
}

#bl-app .bl-top-card-body {
	padding: 16px;
	flex: 1;
	display: flex;
	flex-direction: column;
}
#bl-app .bl-top-1 .bl-top-card-body { padding: 18px 18px 20px; }
#bl-app .bl-top-card-body h3 {
	font-size: 1.05rem;
	font-weight: 700;
	margin-bottom: 8px;
	color: var(--bl-text);
}
#bl-app .bl-top-1 .bl-top-card-body h3 { font-size: 1.2rem; margin-bottom: 10px; }
#bl-app .bl-top-card-meta {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 10px;
	flex-wrap: wrap;
}
#bl-app .bl-rating {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: .82rem;
	font-weight: 700;
	color: #f59e0b;
}
#bl-app .bl-rating i { font-size: .75rem; }
#bl-app .bl-cat-tag {
	font-size: .72rem;
	padding: 2px 8px;
	border-radius: 4px;
	background: rgba(99,102,241,.1);
	color: var(--bl-primary);
	font-weight: 600;
}
#bl-app .bl-trend {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	font-size: .75rem;
	font-weight: 600;
}
#bl-app .bl-trend.up { color: var(--bl-success); }
#bl-app .bl-trend.down { color: var(--bl-danger); }

#bl-app .bl-top-card-desc {
	font-size: .82rem;
	color: var(--bl-text-secondary);
	line-height: 1.5;
	margin-bottom: 14px;
	flex: 1;
}

#bl-app .bl-top-card-actions {
	display: flex;
	gap: 6px;
	padding-top: 12px;
	border-top: 1px solid var(--bl-border-light);
	flex-wrap: nowrap;
}
#bl-app .bl-action-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	border-radius: 20px;
	font-size: .76rem;
	color: var(--bl-text-secondary);
	background: var(--bl-bg-hover);
	transition: all .2s ease;
	font-weight: 500;
	cursor: pointer;
	border: none;
	white-space: nowrap;
	flex-shrink: 0;
	min-width: 0;
}
#bl-app .bl-action-btn:hover { background: #6366f1; color: #fff; box-shadow: 0 4px 12px rgba(99,102,241,.35); transform: translateY(-1px); }
#bl-app .bl-action-btn.liked { color: #ef4444; }

/* 榜单列表 - 列表视图 */
#bl-app .bl-ranking-section {
	background: var(--bl-bg-card);
	border-radius: var(--bl-radius-lg);
	padding: 24px;
	box-shadow: var(--bl-shadow-sm);
	border: 1px solid var(--bl-border-light);
}
#bl-app .bl-ranking-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
#bl-app .bl-ranking-header h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 1.15rem;
	font-weight: 800;
}
#bl-app .bl-ranking-header h2 i { color: var(--bl-primary); }
#bl-app .bl-ranking-count { font-size: .85rem; color: var(--bl-text-muted); }
#bl-app .bl-ranking-count strong { color: var(--bl-primary); font-weight: 700; }

#bl-app .bl-ranking-list.list-view {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
#bl-app .bl-ranking-list.list-view .bl-ranking-item {
	display: grid;
	grid-template-columns: 56px 88px 1fr auto auto auto auto;
	align-items: center;
	gap: 18px;
	padding: 16px;
	background: var(--bl-bg-card);
	border-radius: var(--bl-radius-lg);
	box-shadow: var(--bl-shadow-sm);
	border: 1px solid var(--bl-border-light);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	cursor: pointer;
}
#bl-app .bl-ranking-list.list-view .bl-ranking-item:hover {
	transform: translateY(-3px);
	box-shadow: var(--bl-shadow-lg);
	border-color: var(--bl-primary-light);
}
#bl-app .bl-ranking-list.list-view .bl-ranking-item:hover .bl-ranking-img {
	transform: scale(1.08);
}
#bl-app .bl-ranking-list.list-view .bl-ranking-item:nth-child(even) { background: var(--bl-bg-card); }
#bl-app .bl-ranking-list.list-view .bl-ranking-item:nth-child(even):hover { background: var(--bl-bg-card); }

#bl-app .bl-ranking-num {
	font-size: 1.5rem;
	font-weight: 800;
	text-align: center;
	color: #cbd5e1;
	line-height: 1;
}
#bl-app .bl-ranking-num.top { color: var(--bl-primary); }
#bl-app .bl-ranking-num.top-gold { color: #f59e0b; }

#bl-app .bl-ranking-img {
	width: 84px; height: 64px;
	border-radius: 12px;
	object-fit: cover;
	flex-shrink: 0;
	transition: transform .3s ease;
}

#bl-app .bl-ranking-info { min-width: 0; }
#bl-app .bl-ranking-name {
	font-size: 1rem;
	font-weight: 700;
	color: var(--bl-text);
	margin-bottom: 6px;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#bl-app .bl-ranking-desc {
	font-size: .8rem;
	color: var(--bl-text-muted);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

#bl-app .bl-ranking-score {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: .9rem;
	font-weight: 700;
	color: #f59e0b;
	white-space: nowrap;
}
#bl-app .bl-ranking-city {
	font-size: .82rem;
	color: var(--bl-text-secondary);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
#bl-app .bl-ranking-tag {
	font-size: .72rem;
	padding: 4px 12px;
	border-radius: 20px;
	background: rgba(99,102,241,.08);
	color: var(--bl-primary);
	font-weight: 600;
	white-space: nowrap;
}

#bl-app .bl-ranking-actions {
	display: flex;
	align-items: center;
	gap: 8px;
}
#bl-app .bl-ranking-btn {
	width: 34px; height: 34px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--bl-text-muted);
	background: var(--bl-bg-hover);
	transition: var(--bl-transition-fast);
	font-size: .85rem;
	cursor: pointer;
	border: none;
}
#bl-app .bl-ranking-btn:hover { background: var(--bl-primary); color: #fff; }
#bl-app .bl-ranking-btn.liked { color: #ef4444; background: #fef2f2; }
#bl-app .bl-ranking-btn.liked:hover { background: #ef4444; color: #fff; }

/* 趋势 */
#bl-app .bl-ranking-trend {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-size: .78rem;
	font-weight: 600;
}
#bl-app .bl-ranking-trend.up { color: var(--bl-success); }
#bl-app .bl-ranking-trend.down { color: var(--bl-danger); }
#bl-app .bl-ranking-list.list-view .bl-ranking-trend { display: none; }

/* 卡片视图 */
#bl-app .bl-ranking-list.card-view {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
#bl-app .bl-ranking-list.card-view .bl-ranking-item {
	display: block;
	padding: 0;
	background: var(--bl-bg-card);
	border-radius: var(--bl-radius-lg);
	overflow: hidden;
	border: 1px solid var(--bl-border-light);
	box-shadow: var(--bl-shadow-sm);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
	position: relative;
}
#bl-app .bl-ranking-list.card-view .bl-ranking-item:hover {
	transform: translateY(-4px);
	box-shadow: var(--bl-shadow-lg);
	border-color: var(--bl-primary-light);
}
#bl-app .bl-ranking-list.card-view .bl-ranking-item:hover .bl-ranking-img {
	transform: scale(1.06);
}
#bl-app .bl-ranking-list.card-view .bl-ranking-img {
	width: 100%;
	height: 180px;
	object-fit: cover;
	border-radius: 0;
	transition: transform .35s ease;
}
#bl-app .bl-ranking-list.card-view .bl-ranking-info {
	padding: 14px 14px 4px;
}
#bl-app .bl-ranking-list.card-view .bl-ranking-name {
	font-size: 1.05rem;
	margin-bottom: 6px;
}
#bl-app .bl-ranking-list.card-view .bl-ranking-desc {
	margin-bottom: 10px;
}
#bl-app .bl-ranking-list.card-view .bl-ranking-num {
	position: absolute;
	top: 12px; left: 12px;
	width: 30px; height: 30px;
	background: rgba(0,0,0,.65);
	color: #fff;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: .85rem;
	font-weight: 700;
	text-align: center;
}
#bl-app .bl-ranking-list.card-view .bl-ranking-score,
#bl-app .bl-ranking-list.card-view .bl-ranking-city,
#bl-app .bl-ranking-list.card-view .bl-ranking-tag,
#bl-app .bl-ranking-list.card-view .bl-ranking-trend {
	display: inline-flex;
	align-items: center;
	margin: 0 10px 14px 0;
}
#bl-app .bl-ranking-list.card-view .bl-ranking-tag {
	background: var(--bl-primary);
	color: #fff;
}
#bl-app .bl-ranking-list.card-view .bl-ranking-actions { display: none; }

/* 骨架屏 */
#bl-app .bl-skeleton-container {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 16px;
}
#bl-app .bl-skeleton-item {
	display: grid;
	grid-template-columns: 50px 80px 1fr;
	gap: 16px;
	align-items: center;
	padding: 14px 16px;
	border-radius: 10px;
	background: var(--bl-bg-hover);
}
#bl-app .bl-skeleton-rank, #bl-app .bl-skeleton-img {
	background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
	background-size: 200% 100%;
	animation: bl-skeleton-loading 1.5s infinite;
	border-radius: 6px;
}
#bl-app .bl-skeleton-rank { width: 36px; height: 36px; border-radius: 50%; }
#bl-app .bl-skeleton-img { width: 72px; height: 56px; border-radius: 8px; }
#bl-app .bl-skeleton-text { display: flex; flex-direction: column; gap: 8px; }
#bl-app .bl-skeleton-line {
	height: 12px;
	background: linear-gradient(90deg, #e2e8f0 25%, #f1f5f9 50%, #e2e8f0 75%);
	background-size: 200% 100%;
	animation: bl-skeleton-loading 1.5s infinite;
	border-radius: 4px;
}
@keyframes bl-skeleton-loading {
	0% { background-position: 200% 0; }
	100% { background-position: -200% 0; }
}

/* 列表项入场动画 */
#bl-app .bl-anim-up {
	opacity: 0;
	transform: translateY(30px);
	animation: blAnimUp .45s cubic-bezier(.25,.8,.25,1) forwards;
}
@keyframes blAnimUp {
	0%   { opacity: 0; transform: translateY(30px); }
	100% { opacity: 1; transform: translateY(0); }
}
#bl-app .bl-anim-up:nth-child(1)  { animation-delay: .02s; }
#bl-app .bl-anim-up:nth-child(2)  { animation-delay: .06s; }
#bl-app .bl-anim-up:nth-child(3)  { animation-delay: .1s;  }
#bl-app .bl-anim-up:nth-child(4)  { animation-delay: .14s; }
#bl-app .bl-anim-up:nth-child(5)  { animation-delay: .18s; }
#bl-app .bl-anim-up:nth-child(6)  { animation-delay: .22s; }
#bl-app .bl-anim-up:nth-child(7)  { animation-delay: .26s; }
#bl-app .bl-anim-up:nth-child(8)  { animation-delay: .3s;  }
#bl-app .bl-anim-up:nth-child(9)  { animation-delay: .34s; }
#bl-app .bl-anim-up:nth-child(10) { animation-delay: .38s; }

/* 加载更多 */
#bl-app .bl-load-more {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	padding: 24px;
	color: var(--bl-text-muted);
	font-size: .88rem;
}
#bl-app .bl-loading-spinner {
	width: 20px; height: 20px;
	border: 3px solid var(--bl-border);
	border-top-color: var(--bl-primary);
	border-radius: 50%;
	animation: bl-spin .8s linear infinite;
}
@keyframes bl-spin { to { transform: rotate(360deg); } }

/* ---- 右侧栏 ---- */
#bl-app .bl-sidebar-right {
	display: flex;
	flex-direction: column;
	gap: 20px;
	position: sticky;
	top: 96px;
}

#bl-app .bl-widget {
	background: var(--bl-bg-card);
	border-radius: var(--bl-radius-lg);
	padding: 20px;
	box-shadow: var(--bl-shadow-sm);
	border: 1px solid var(--bl-border-light);
}
#bl-app .bl-widget-title {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: .92rem;
	font-weight: 700;
	color: var(--bl-text);
	margin-bottom: 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--bl-border-light);
}
#bl-app .bl-widget-title i { color: var(--bl-primary); font-size: .85rem; }

/* 数据卡片 */
#bl-app .bl-data-cards {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
#bl-app .bl-data-card {
	padding: 14px 12px;
	border-radius: 10px;
	background: var(--bl-bg-hover);
	position: relative;
	overflow: hidden;
	transition: var(--bl-transition-fast);
}
#bl-app .bl-data-card::before {
	content: '';
	position: absolute;
	left: 0; top: 0; bottom: 0;
	width: 3px;
	background: var(--accent);
	border-radius: 3px 0 0 3px;
}
#bl-app .bl-data-card:hover { transform: translateY(-2px); box-shadow: var(--bl-shadow); }
#bl-app .bl-data-value {
	font-size: 1.3rem;
	font-weight: 800;
	color: var(--bl-text);
	margin-bottom: 2px;
}
#bl-app .bl-data-label {
	font-size: .72rem;
	color: var(--bl-text-muted);
	margin-bottom: 4px;
}
#bl-app .bl-data-trend {
	font-size: .72rem;
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 2px;
}
#bl-app .bl-data-trend.up { color: var(--bl-success); }
#bl-app .bl-data-trend.down { color: var(--bl-danger); }

/* 标签云 */
#bl-app .bl-tag-cloud {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}
#bl-app .bl-cloud-tag {
	font-size: var(--size, .85rem);
	padding: 6px 14px;
	border-radius: 999px;
	background: #fff;
	border: 1px solid var(--color, var(--bl-primary));
	color: var(--color, var(--bl-primary));
	cursor: pointer;
	transition: var(--bl-transition-fast);
	font-weight: 500;
}
#bl-app .bl-cloud-tag:hover {
	background: var(--color, var(--bl-primary));
	color: #fff;
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,.12);
}

/* 编辑精选 */
#bl-app .bl-editor-picks { display: flex; flex-direction: column; gap: 12px; }
#bl-app .bl-pick-item {
	display: flex;
	gap: 12px;
	padding: 8px;
	border-radius: 10px;
	transition: var(--bl-transition-fast);
	cursor: pointer;
}
#bl-app .bl-pick-item:hover { background: var(--bl-bg-hover); }
#bl-app .bl-pick-item img {
	width: 80px; height: 60px;
	border-radius: 8px;
	object-fit: cover;
	flex-shrink: 0;
}
#bl-app .bl-pick-title {
	font-size: .82rem;
	font-weight: 600;
	color: var(--bl-text);
	line-height: 1.4;
	margin-bottom: 6px;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
#bl-app .bl-pick-meta {
	display: flex;
	gap: 12px;
	font-size: .72rem;
	color: var(--bl-text-muted);
}
#bl-app .bl-pick-meta span { display: inline-flex; align-items: center; gap: 3px; }

/* Toast 通知 */
#bl-app .bl-toast-container {
	position: fixed;
	top: 80px;
	right: 24px;
	z-index: 9999;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
#bl-app .bl-toast {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 12px 20px;
	border-radius: 10px;
	background: var(--bl-bg-card);
	box-shadow: var(--bl-shadow-lg);
	border-left: 4px solid var(--bl-primary);
	font-size: .88rem;
	font-weight: 500;
	color: var(--bl-text);
	animation: bl-toast-in .3s ease, bl-toast-out .3s ease 2.7s forwards;
	min-width: 240px;
}
#bl-app .bl-toast i { color: var(--bl-primary); font-size: 1rem; }
#bl-app .bl-toast.success { border-left-color: var(--bl-success); }
#bl-app .bl-toast.success i { color: var(--bl-success); }
#bl-app .bl-toast.error { border-left-color: var(--bl-danger); }
#bl-app .bl-toast.error i { color: var(--bl-danger); }
@keyframes bl-toast-in {
	from { opacity: 0; transform: translateX(60px); }
	to { opacity: 1; transform: translateX(0); }
}
@keyframes bl-toast-out {
	from { opacity: 1; }
	to { opacity: 0; transform: translateX(60px); }
}

/* ---- 响应式 ---- */
@media (max-width: 1200px) {
	#bl-app .bl-main-content {
		grid-template-columns: 220px 1fr;
	}
	#bl-app .bl-sidebar-right { display: none; }
	#bl-app .bl-top3-cards { grid-template-columns: 1fr 1.1fr 1fr; }
}

@media (max-width: 900px) {
	#bl-app .bl-main-content {
		grid-template-columns: 1fr;
	}
	#bl-app .bl-sidebar-left { display: none; }
	#bl-app .bl-banner h1 { font-size: 2rem; }
	#bl-app .bl-banner-stats { grid-template-columns: repeat(2, 1fr); }
	#bl-app .bl-ranking-list.list-view .bl-ranking-item {
		grid-template-columns: 40px 60px 1fr;
		gap: 10px;
	}
	#bl-app .bl-ranking-score, #bl-app .bl-ranking-city, #bl-app .bl-ranking-tag, #bl-app .bl-ranking-actions { display: none; }
	#bl-app .bl-top3-cards { grid-template-columns: 1fr; }
	#bl-app .bl-top-card.bl-top-1 { transform: none; }
}
