:root {
	--bg: #0F172A;
	--primary: #38BDF8;
	--primary-alt: #6366F1;
	--accent: #22D3EE;
	--text: #F8FAFC;
	--text-muted: #94A3B8;
	--card-glass: rgba(15, 23, 42, 0.85);
	--border-subtle: rgba(34, 211, 238, 0.18);
	--nav-height: 80px;
	--nav-height-compact: 60px;
	--content-width: 1440px;
	--transition-fast: 0.2s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-smooth: 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

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

body {
	background-color: var(--bg);
	color: var(--text);
	font-family: 'Inter', 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	/* min-height: 200vh; */
	/* 用于演示滚动效果 */
	;
}

/* 公共页面模块容器统一使用 1440 宽度，个人中心页面未引入该文件，不受影响。 */
.max-w-7xl {
	max-width: var(--content-width) !important;
}

/* AI 数据导航前置动效，供所有公共页面复用 */
.nav-ai-loader {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	flex: 0 0 28px;
	perspective: 180px;
	pointer-events: none;
}

.nav-ai-loader__container {
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	width: 28px;
	height: 28px;
	transform-style: preserve-3d;
}

.nav-ai-loader__ring {
	position: absolute;
	width: 100%;
	height: 100%;
	border: 2px solid transparent;
	border-radius: 50%;
	filter: drop-shadow(0 0 6px rgba(34, 211, 238, 0.22));
}

.nav-ai-loader__ring:nth-child(1) {
	border-bottom-color: rgb(255, 141, 249);
	animation: navAiSpinOne 2s linear infinite;
}

.nav-ai-loader__ring:nth-child(2) {
	border-bottom-color: rgb(255, 65, 106);
	animation: navAiSpinTwo 2s linear infinite;
}

.nav-ai-loader__ring:nth-child(3) {
	border-bottom-color: rgb(0, 255, 255);
	animation: navAiSpinThree 2s linear infinite;
}

.nav-ai-loader__ring:nth-child(4) {
	border-bottom-color: rgb(252, 183, 55);
	animation: navAiSpinFour 2s linear infinite;
}

.nav-ai-loader__core {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 14px;
	height: 14px;
	padding: 0 1px;
	font-size: 8px;
	font-weight: 700;
	line-height: 1;
	letter-spacing: 0;
	color: transparent;
	background: linear-gradient(90deg, #7EA6FF 0%, #8B5CFF 46%, #E84EBA 100%);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	filter: drop-shadow(0 0 8px rgba(139, 92, 255, 0.45));
}

.navbar-nav > li[data-nav-key="ai-data"] > a {
	gap: 10px;
}

.navbar-nav > li[data-nav-key="ai-data"] > a > span[data-i18n="nav.docs"] {
	font-weight: 800;
	background: linear-gradient(90deg, #7EA6FF 0%, #8B5CFF 48%, #E84EBA 100%);
	background-clip: text;
	-webkit-background-clip: text;
	color: transparent;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 0 18px rgba(139, 92, 255, 0.22);
}

@keyframes navAiSpinOne {
	from {
		transform: rotateX(50deg) rotateZ(110deg);
	}

	to {
		transform: rotateX(50deg) rotateZ(470deg);
	}
}

@keyframes navAiSpinTwo {
	from {
		transform: rotateX(20deg) rotateY(50deg) rotateZ(20deg);
	}

	to {
		transform: rotateX(20deg) rotateY(50deg) rotateZ(380deg);
	}
}

@keyframes navAiSpinThree {
	from {
		transform: rotateX(40deg) rotateY(130deg) rotateZ(450deg);
	}

	to {
		transform: rotateX(40deg) rotateY(130deg) rotateZ(90deg);
	}
}

@keyframes navAiSpinFour {
	from {
		transform: rotateX(70deg) rotateZ(270deg);
	}

	to {
		transform: rotateX(70deg) rotateZ(630deg);
	}
}


/* 设置整个滚动条的宽度 */
::-webkit-scrollbar {
	width: 10px;
	/* display: none; */
}

/* 设置滚动条轨道的样式 */
::-webkit-scrollbar-track {
	background: #f0f0f0;
	/* border-radius: 6px; */
}

/* 设置滚动条滑块的样式 */
::-webkit-scrollbar-thumb {
	background: #72f9fb;
	/* border-radius: 6px; */
}

/* 设置滚动条滑块在悬停时的样式 */
::-webkit-scrollbar-thumb:hover {
	background: #72f9fb;
}

/* 设置滚动条角落的样式 */
::-webkit-scrollbar-corner {
	background: #f0f0f0;
}