/* =========================================================================
   MeteorLive Design System — theme.css
   深空暗色 · 精致化设计系统。加载于 style.css 之后，统一全站视觉。
   原则：低饱和冷色、克制的辉光、清晰的字体层级、玻璃拟态面板。
   ========================================================================= */

/* ---------- 1. Design Tokens ---------- */
:root {
	/* 基底 */
	--ml-bg-0: #04060b;
	--ml-bg-1: #090d17;
	--ml-bg-2: #0e1424;
	--ml-ink: #e9eef8;
	--ml-ink-dim: #97a4bb;
	--ml-ink-faint: #66738c;

	/* 强调色（低饱和冷色系） */
	--ml-accent: #5fd0f2;          /* 柔和青 */
	--ml-accent-deep: #3ba6d8;
	--ml-violet: #8e93f5;          /* 长春花紫 */
	--ml-warm: #ffb46e;            /* 火流星琥珀（替代高饱和金） */
	--ml-mint: #4ade9f;            /* 台站绿 */

	/* 线与面 */
	--ml-line: rgba(151, 168, 200, 0.14);
	--ml-line-strong: rgba(151, 168, 200, 0.28);
	--ml-glass: rgba(10, 15, 26, 0.72);
	--ml-glass-heavy: rgba(8, 12, 21, 0.86);

	/* 渐变 */
	--ml-grad-title: linear-gradient(115deg, #f4f9ff 20%, #9fdcf5 55%, #8e93f5 90%);
	--ml-grad-accent: linear-gradient(120deg, var(--ml-accent), var(--ml-violet));
	--ml-grad-hairline: linear-gradient(90deg, transparent, rgba(95, 208, 242, 0.5), transparent);

	/* 阴影与辉光 */
	--ml-shadow-1: 0 2px 8px rgba(0, 0, 0, 0.35);
	--ml-shadow-2: 0 12px 40px rgba(0, 0, 0, 0.45);
	--ml-glow-accent: 0 0 24px rgba(95, 208, 242, 0.18);

	/* 圆角与节奏 */
	--ml-r-sm: 8px;
	--ml-r-md: 14px;
	--ml-r-lg: 20px;
	--ml-r-pill: 999px;

	/* 字体（大陆可用，无外部字体依赖） */
	--ml-font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI",
		"PingFang SC", "HarmonyOS Sans SC", "MiSans", "Microsoft YaHei", "Noto Sans SC", sans-serif;
	--ml-font-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code",
		Consolas, "Liberation Mono", monospace;

	/* ---- 覆写 style.css 旧 token：全站即刻换色 ---- */
	--bg-dark: var(--ml-bg-0);
	--panel-bg: var(--ml-glass);
	--panel-border: var(--ml-line-strong);
	--primary-blue: var(--ml-accent);
	--primary-glow: rgba(95, 208, 242, 0.3);
	--secondary-gold: var(--ml-warm);
	--text-main: var(--ml-ink);
	--text-dim: var(--ml-ink-dim);
	--font-heading: var(--ml-font-sans);
	--font-mono: var(--ml-font-mono);
}

/* ---------- 2. Base ---------- */
html {
	font-family: var(--ml-font-sans);
}

body {
	font-family: var(--ml-font-sans);
	color: var(--ml-ink);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: rgba(95, 208, 242, 0.28);
	color: #f4f9ff;
}

:focus-visible {
	outline: 2px solid rgba(95, 208, 242, 0.65);
	outline-offset: 2px;
	border-radius: 4px;
}

/* 精致滚动条（内容页） */
.allow-scroll::-webkit-scrollbar,
.allow-scroll *::-webkit-scrollbar {
	width: 10px;
	height: 10px;
	display: block;
}

.allow-scroll::-webkit-scrollbar-thumb,
.allow-scroll *::-webkit-scrollbar-thumb {
	background: rgba(151, 168, 200, 0.22);
	border-radius: 999px;
	border: 3px solid transparent;
	background-clip: content-box;
}

.allow-scroll::-webkit-scrollbar-thumb:hover,
.allow-scroll *::-webkit-scrollbar-thumb:hover {
	background: rgba(151, 168, 200, 0.4);
	border: 3px solid transparent;
	background-clip: content-box;
}

.allow-scroll::-webkit-scrollbar-track,
.allow-scroll *::-webkit-scrollbar-track {
	background: transparent;
}

/* ---------- 3. 顶部导航精修 ---------- */
.premium-nav-top {
	height: 72px;
	/* 性能：不用 backdrop-filter（全宽模糊是弱 GPU 滚动掉帧大户），
	   用高不透明度渐变达到近似视觉效果 */
	background: linear-gradient(180deg, rgba(7, 10, 18, 0.97), rgba(7, 10, 18, 0.88));
	border-bottom: 1px solid var(--ml-line);
}

.premium-nav-top::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	height: 1px;
	background: var(--ml-grad-hairline);
	opacity: 0.35;
	pointer-events: none;
}

.brand-logo {
	filter: drop-shadow(0 0 8px rgba(95, 208, 242, 0.28));
}

.brand-text .cn {
	font-size: 1.12rem;
	letter-spacing: 2px;
}

.brand-text .en {
	color: var(--ml-accent);
	font-size: 0.7rem;
	letter-spacing: 4px;
	opacity: 0.85;
}

.nav-menu {
	gap: 34px;
}

.nav-link .link-en {
	font-size: 0.84rem;
	font-weight: 600;
	letter-spacing: 1.4px;
	color: var(--ml-ink);
	transition: color 0.25s ease;
}

.nav-link .link-cn {
	font-size: 0.72rem;
	color: var(--ml-ink-dim);
}

.nav-link::after {
	height: 1.5px;
	background: var(--ml-grad-accent);
	box-shadow: 0 0 10px rgba(95, 208, 242, 0.45);
}

.nav-link:hover .link-en {
	color: #fff;
}

.nav-link.active .link-en {
	color: var(--ml-accent);
	text-shadow: 0 0 12px rgba(95, 208, 242, 0.4);
}

.action-btn {
	border: 1px solid rgba(95, 208, 242, 0.45);
	background: rgba(95, 208, 242, 0.06);
	color: var(--ml-accent);
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-btn:hover {
	background: rgba(95, 208, 242, 0.92);
	border-color: transparent;
	color: #04121a;
	box-shadow: 0 4px 24px rgba(95, 208, 242, 0.35);
	transform: translateY(-1px);
}

.action-btn.active {
	background: var(--ml-grad-accent);
	border-color: transparent;
	color: #04121a;
}

/* ---------- 4. 页脚 ---------- */
.site-footer {
	position: relative;
	padding: 28px 6vw 34px;
	text-align: center;
	color: var(--ml-ink-faint);
	font-size: 0.82rem;
	letter-spacing: 0.4px;
}

.site-footer::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: min(560px, 70%);
	height: 1px;
	background: var(--ml-grad-hairline);
	opacity: 0.4;
}

/* ---------- 5. 通用组件 ---------- */

/* 玻璃面板 */
.glass-panel {
	background: var(--ml-glass);
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-md);
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	box-shadow: var(--ml-shadow-2), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* 小标签（章节眉） */
.section-kicker {
	font-family: var(--ml-font-mono);
	font-size: 0.7rem;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: var(--ml-accent);
	border: 1px solid rgba(95, 208, 242, 0.28);
	background: rgba(95, 208, 242, 0.06);
	padding: 6px 14px;
	border-radius: var(--ml-r-pill);
}

/* 标准按钮 */
.ml-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 28px;
	border-radius: var(--ml-r-pill);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 1.5px;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	border: 1px solid transparent;
}

.ml-btn-primary {
	background: var(--ml-grad-accent);
	color: #04121a;
	box-shadow: 0 4px 20px rgba(95, 208, 242, 0.25);
}

.ml-btn-primary:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 32px rgba(95, 208, 242, 0.4);
}

.ml-btn-ghost {
	border-color: rgba(151, 168, 200, 0.35);
	color: var(--ml-ink);
	background: rgba(151, 168, 200, 0.06);
}

.ml-btn-ghost:hover {
	border-color: rgba(95, 208, 242, 0.55);
	color: var(--ml-accent);
	background: rgba(95, 208, 242, 0.08);
	transform: translateY(-2px);
}

/* 卡片 */
.ml-card {
	background: linear-gradient(165deg, rgba(18, 25, 43, 0.6), rgba(10, 15, 26, 0.75));
	border: 1px solid var(--ml-line);
	border-radius: var(--ml-r-lg);
	padding: 26px 28px;
	transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.ml-card:hover {
	transform: translateY(-3px);
	border-color: rgba(95, 208, 242, 0.35);
	box-shadow: var(--ml-shadow-2), var(--ml-glow-accent);
}

/* 数据数值（等宽） */
.ml-num {
	font-family: var(--ml-font-mono);
	font-variant-numeric: tabular-nums;
}

/* ---------- 6. 动效礼仪 ---------- */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}