/* 重置样式 */
			* {
				margin: 0;
				padding: 0;
				box-sizing: border-box;
			}

			body {
				font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
				overflow: hidden;
			}

			/* 工具类样式 */
			.flex {
				display: flex;
			}

			.flex-center {
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.flex-sub {
				flex: 1;
			}

			.grid {
				display: grid;
			}

			.col-4 {
				grid-template-columns: repeat(4, 1fr);
			}

			.margin {
				margin: 1em;
			}

			.margin-lr {
				margin-left: 1em;
				margin-right: 1em;
			}

			.margin-tb-sm {
				margin-top: 0.5em;
				margin-bottom: 0.5em;
			}

			.margin-top {
				margin-top: 1em;
			}

			.margin-top-sm {
				margin-top: 0.5em;
			}

			.margin-bottom {
				margin-bottom: 1em;
			}

			.padding-lr {
				padding-left: 1em;
				padding-right: 1em;
			}

			.padding-tb-xs {
				padding-top: 0.25em;
				padding-bottom: 0.25em;
			}

			.padding-tb-sm {
				padding-top: 0.5em;
				padding-bottom: 0.5em;
			}

			.text-center {
				text-align: center;
			}

			.text-lg {
				font-size: 1.2em;
			}

			.text-xxl {
				font-size: 2em;
			}

			.text-bold {
				font-weight: bold;
			}

			.text-white {
				color: white;
			}

			.text-olive {
				color: olive;
			}

			.text-cut {
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}

			.text-w-xs {
				letter-spacing: 0.1em;;
			}

			.text-w-lg {
				letter-spacing: 0.25em;;
			}

			.l-h-df {
				line-height: 1.6;
			}

			.radius {
				border-radius: 4px;
			}

			.light {
				background-color: rgba(255, 255, 255, 0.1);
			}

			.over-hidden {
				overflow: hidden;
			}

			/* 自定义样式 */
			.bg-imgs {
				background-size: 100% 100%;
				background-repeat: no-repeat;
			}

			.bg-imgs p {
				margin: 0.6em 0;
				text-indent: 2em;
			}

			.bg-imgs p img {
				width: calc(100% - 4em);
				height: calc(40vh - 8em);
				object-fit: cover;
			}

			.gradient-text-vertical {
				font-size: 4em;
				font-weight: bold;
				background: linear-gradient(to bottom, #28dce1, #15969a, #053559);
				-webkit-background-clip: text;
				background-clip: text;
				color: transparent;
			}

			.header-box {
				display: inline-block;
				background-color: rgba(230, 247, 255, 0.066);
				/* border-radius: .6em; */
				padding: .1em 1.6em .2em 1.6em;
				box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
				position: relative;
			}

			.header-text {
				font-weight: bold;
				position: relative;
			}

			.header-box::before,
			.header-box::after {
				content: "";
				position: absolute;
				left: 0;
				right: 0;
				height: .12em;
				background: repeating-linear-gradient(45deg,
						transparent,
						transparent .15em,
						#91d5ff .15em,
						#91d5ff .3em);
			}

			.header-box::before {
				top: 0;
			}

			.header-box::after {
				bottom: 0;
			}

			.scroll-container {
				position: relative;
				overflow: hidden;
				display: flex;
				flex-direction: column;
			}

			.header-row {
				flex-shrink: 0;
				padding-right: 17px;
				margin-right: -17px;
			}

			.program-list-container {
				flex: 1;
				overflow-y: auto;
				overflow-x: hidden;
				scrollbar-width: none;
				-ms-overflow-style: none;
			}

			.program-list-container::-webkit-scrollbar {
				display: none;
			}

			.program-item {
				flex-shrink: 0;
			}

			.auto-scroll-container {
				overflow: hidden;
				position: relative;
			}

			.scroll-content {
				position: absolute;
				width: 100%;
				animation: scroll 30s linear infinite;
			}

			@keyframes scroll {
				0% {
					transform: translateY(0);
				}

				100% {
					transform: translateY(-50%);
				}
			}

			.scroll-paused {
				animation-play-state: paused;
			}

			.auto-scroll-container::-webkit-scrollbar {
				width: 6px;
			}

			.auto-scroll-container::-webkit-scrollbar-thumb {
				background: rgba(255, 255, 255, 0.3);
				border-radius: 3px;
			}

			/* 水波纹进度球样式 */
			.water-progress-circle {
				position: relative;
				width: 80px;
				height: 80px;
				border-radius: 50%;
				overflow: hidden;
				background: #f0f0f0;
			}

			.water-progress-circle .water {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				background: linear-gradient(360deg, #0055ff 0%, #33d6ff 100%);
				transition: height 0.5s ease;
			}

			.water-progress-circle .text {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #333;
				font-weight: bold;
				z-index: 2;
			}

			.progress-circle-container {
				display: inline-block;
				text-align: center;
				margin: 0.75em;
			}

			.circle-wrapper {
				width: max-content;
				padding: 0.2em;
				background: var(--wrapper-gradient, linear-gradient(360deg, #0055ff 0%, #33eeff 100%));
				border-radius: 50%;
				transition: all 0.3s ease;
			}

			.the-circle {
				position: relative;
				width: var(--circle-size, 106px);
				height: var(--circle-size, 106px);
				box-sizing: border-box;
				border-radius: 50%;
				overflow: hidden;
				cursor: pointer;
				transition: all 0.3s ease;
			}

			.water-layer {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background: var(--water-gradient, linear-gradient(360deg, #0055ff 0%, #33d6ff 100%));
				border-radius: 50%;
				overflow: hidden;
				z-index: 1;
				transition: all 0.5s ease;
			}

			.water-layer::after {
				content: '';
				position: absolute;
				top: var(--after-top, 0%);
				left: 50%;
				width: 162%;
				height: 162%;
				border-radius: 40%;
				background-color: rgb(4, 24, 57);
				animation: waterReal 5s linear infinite;
				transform: translate(-50%, -66%) rotate(0deg);
				transition: top 0.8s ease;
			}

			.water-layer::before {
				content: '';
				position: absolute;
				top: var(--before-top, 0%);
				left: 50%;
				width: 150%;
				height: 150%;
				border-radius: 42%;
				background: var(--water-before-gradient, linear-gradient(360deg, #a3c0ff 0%, #acecff 100%));
				opacity: 1;
				animation: waterVirtual 8s linear infinite;
				transform: translate(-50%, -60%) scale(1) rotate(0deg);
				transition: top 0.8s ease;
			}

			.centered-text {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				color: #fff;
				font-weight: bold;
				font-size: calc(var(--circle-size, 106px) * 0.12);
				text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
				z-index: 2;
				line-height: 1.3;
				text-align: center;
			}

			@keyframes waterReal {
				0% {
					transform: translate(-50%, -66%) rotate(0deg);
				}

				100% {
					transform: translate(-50%, -66%) rotate(360deg);
				}
			}

			@keyframes waterVirtual {
				0% {
					transform: translate(-50%, -60%) scale(1) rotate(0deg);
				}

				100% {
					transform: translate(-50%, -60%) scale(1) rotate(360deg);
				}
			}

			@media (max-width: 768px) {
/* 				.progress-circle-container {
					margin: 8px;
				}

				.the-circle {
					width: 80px;
					height: 80px;
				}

				.centered-text {
					font-size: calc(var(--circle-size, 80px) * 0.12);
				} */
			}

			/* 过渡动画样式 */
			.fade-enter-active,
			.fade-leave-active {
				transition: all 0.8s ease;
				position: absolute;
				width: 100%;
				height: 100%;
			}

			.fade-enter-from,
			.fade-leave-to {
				opacity: 0;
				transform: translateY(20px);
			}

			.fade-enter-to,
			.fade-leave-from {
				opacity: 1;
				transform: translateY(0);
			}

			/* 或者使用更平滑的淡入淡出 */
			.slide-fade-enter-active {
				transition: all 0.6s ease-out;
			}

			.slide-fade-leave-active {
				transition: all 0.3s ease-in;
			}

			.slide-fade-enter-from,
			.slide-fade-leave-to {
				opacity: 0;
				transform: translateY(30px);
			}

			/* 加载动画优化 */
			.loading-container {
				background: rgba(5, 53, 89);
				position: fixed;
				top: 0;
				left: 0;
				width: 100%;
				height: 100vh;
				z-index: 1000;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				transition: opacity 0.5s ease;
			}

			.loading-spinner {
				width: 60px;
				height: 60px;
				border: 4px solid rgba(255, 255, 255, 0.3);
				border-top: 4px solid #fff;
				border-radius: 50%;
				animation: spin 1.2s linear infinite;
				margin-bottom: 20px;
			}

			.loading-text {
				color: #fff;
				font-size: 18px;
				font-weight: 300;
				letter-spacing: 1px;
			}

			@keyframes spin {
				0% {
					transform: rotate(0deg);
				}

				100% {
					transform: rotate(360deg);
				}
			}

			/* 内容区域过渡 */
			.content-enter-active {
				transition: all 0.8s ease;
				animation: contentAppear 0.8s ease;
			}

			@keyframes contentAppear {
				0% {
					opacity: 0;
					filter: blur(10px);
				}

				100% {
					opacity: 1;
					filter: blur(0);
				}
			}