/* 自定义样式：确保选中态的悬停样式正确，并让按钮等宽占满 */
.number-btn {
	width: 50px;
	height: 50px;
}

/* 选中态基础样式 - 使用!important确保覆盖所有情况 */
.number-btn.selected {
	background-color: #3b82f6 !important;
	/* bg-blue-500 */
	border-color: #2563eb !important;
	/* border-blue-600 */
	color: white !important;
	transform: scale(1.05);
	box-shadow: 0 8px 16px -6px rgba(37, 99, 235, 0.5);
}

/* 选中态悬停样式 - 更深蓝，确保文字依然白色可见 */
.number-btn.selected:hover {
	background-color: #2563eb !important;
	/* bg-blue-600 */
	border-color: #1d4ed8 !important;
	/* border-blue-700 */
	color: white !important;
	transform: scale(1.05);
	box-shadow: 0 8px 20px -6px rgba(37, 99, 235, 0.7);
}

/* 非选中悬停样式（默认） */
.number-btn:not(.selected):hover {
	background-color: #eff6ff;
	/* bg-blue-50 */
	border-color: #93c5fd;
	/* border-blue-300 */
}

/* 焦点样式 */
.number-btn:focus-visible {
	outline: 2px solid #3b82f6;
	outline-offset: 2px;
}


* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
	background: #f5f9ff;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	background: linear-gradient(145deg, #f0f4fa 0%, #e6ecf5 100%);
	min-width: 1024px;
}

/* ===== 通用页头样式 ===== */
.site-header {
	width: 100%;
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 4px 20px -10px rgba(30, 60, 100, 0.15);
	position: sticky;
	top: 0;
	z-index: 10;
}

.header-container {
	max-width: 1300px;
	margin: 0 auto;
	padding: 0.8rem 2rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem 2rem;
}

.logo-area {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

.logo-icon {
	font-size: 2rem;
	line-height: 1;
	filter: drop-shadow(0 2px 4px rgba(33, 94, 169, 0.2));
}

.logo-text {
	font-weight: 600;
	font-size: 1.5rem;
	letter-spacing: -0.02em;
	color: #153e62;
}

.logo-text span {
	font-weight: 350;
	color: #3b6a96;
	font-size: 1rem;
	margin-left: 0.3rem;
}

.nav-links {
	display: flex;
	gap: 0.3rem;
	flex-wrap: wrap;
}

.nav-item {
	padding: 0.5rem 1.2rem;
	border-radius: 40px;
	font-weight: 480;
	color: #1d446b;
	text-decoration: none;
	font-size: 1rem;
	transition: all 0.15s;
	border: 1px solid transparent;
}

.nav-item:hover {
	background: rgba(255, 255, 255, 0.8);
	border-color: rgba(125, 175, 235, 0.5);
	box-shadow: 0 4px 10px -4px #b0ccee;
	color: #0d2d4a;
}

.nav-item.active {
	background: white;
	border-color: #c7dcf5;
	box-shadow: 0 4px 10px -4px #adc6e7;
	color: #0e3c66;
	font-weight: 520;
}

.user-area {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.avatar {
	width: 38px;
	height: 38px;
	border-radius: 40px;
	background: #d0e2fa;
	border: 2px solid white;
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03);
}

/* ===== 主容器 ===== */
.main-container {
	max-width: 1300px;
	width: 100%;
	padding: 2rem 2rem 0rem 2rem;
}

/* ===== 二维码区域 ===== */
.qrcode-section {
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 42px;
	padding: 1.2rem 2rem;
	margin-bottom: 2rem;
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 8px 14px -12px #1f417070;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem 2rem;
}

.qrcode-content {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	flex-wrap: wrap;
}

.qrcode-placeholder {
	//width: 84px;
	//height: 84px;
	background: white;
	border-radius: 24px;
	padding: 8px;
	box-shadow: 0 4px 14px rgba(0, 30, 60, 0.15);
	border: 1px solid rgba(255, 255, 255, 0.8);
}

.qrcode-svg {
	width: 100%;
	height: 100%;
	display: block;
}

.qrcode-text h3 {
	font-weight: 550;
	font-size: 1.6rem;
	letter-spacing: -0.01em;
	color: #173e62;
	line-height: 1.2;
}

.qrcode-text p {
	color: #35648d;
	font-size: 1rem;
	background: rgba(255, 255, 255, 0.4);
	padding: 0.3rem 1rem;
	border-radius: 30px;
	border: 1px solid white;
	margin-top: 0.3rem;
}

.qrcode-badge {
	background: rgba(255, 255, 255, 0.8);
	border-radius: 100px;
	padding: 0.5rem 1.5rem;
	font-weight: 480;
	color: #0d3c68;
	border: 1px solid #c3dbfa;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.02);
}

.qrcode-badge:hover {
	box-shadow: 0 4px 10px -4px #b0ccee;
	text-decoration: none;
}

.qrcode-badge a {
	color: #1d446b;
	text-decoration: none;
}

/* ===== 新闻列表双模块 ===== */
.news-row {
	display: flex;
	gap: 1.8rem;
	margin-bottom: 2.5rem;
	flex-wrap: wrap;
}

.news-card {
	flex: 1 1 280px;
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 32px;
	padding: 1.4rem 1.6rem;
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 8px 12px -14px #1f4170;
	transition: transform 0.15s;
}

.news-card:hover {
	transform: translateY(-4px);
	background: rgba(255, 255, 255, 0.8);
}

.news-header {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	margin-bottom: 1.2rem;
	border-bottom: 2px solid rgba(125, 165, 215, 0.3);
	padding-bottom: 0.6rem;
}

.news-icon {
	font-size: 1.8rem;
}

.news-header h2 {
	font-weight: 540;
	font-size: 1.3rem;
	color: #194267;
}

.news-list {
	list-style: none;
}

.news-list li {
	display: flex;
	align-items: center;
	gap: 0.7rem;
	padding: 0.6rem 0;
	border-bottom: 1px dashed rgba(150, 180, 220, 0.4);
	font-size: 0.95rem;
}

.news-list li:last-child {
	border-bottom: none;
}

.news-badge {
	background: #cfe1f7;
	color: #1b3d62;
	border-radius: 30px;
	padding: 0.15rem 0.9rem;
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.3px;
	white-space: nowrap;
	border: 1px solid white;
}

.news-link {
	color: #1d4b7c;
	text-decoration: none;
	flex: 1;
	transition: color 0.1s;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.news-link:hover {
	color: #0a2942;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.news-date {
	color: #54779c;
	font-size: 0.75rem;
	background: rgba(255, 255, 255, 0.5);
	padding: 0.2rem 0.7rem;
	border-radius: 20px;
	border: 1px solid white;
}

/* ===== 字体下载大模块 (阴影减轻) ===== */
.font-download-section {
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-radius: 48px;
	padding: 2rem 2rem 2.2rem 2rem;
	border: 1px solid rgba(255, 255, 255, 0.9);
	/* 阴影大幅减轻 */
	box-shadow: 0 8px 18px -12px rgba(30, 65, 110, 0.2);
	margin-bottom: 1.5rem;
}

.section-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 1.8rem;
	padding: 0 0.5rem;
}

.section-header h2 {
	font-size: 1.9rem;
	font-weight: 550;
	color: #113753;
	letter-spacing: -0.02em;
	display: flex;
	align-items: center;
	gap: 0.8rem;
}

.section-header h2 span {
	background: #d0e5ff;
	border-radius: 60px;
	padding: 0.2rem 1.2rem;
	font-size: 1rem;
	font-weight: 450;
	color: #1a4470;
	border: 1px solid white;
}

.section-count {
	background: rgba(255, 255, 255, 0.7);
	border-radius: 30px;
	padding: 0.4rem 1.2rem;
	font-size: 0.9rem;
	color: #16466f;
	border: 1px solid rgba(255, 255, 255, 0.9);
}

/* 卡片网格 (内部) */
.card-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
	gap: 2rem;
	justify-content: center;
}

.glyph-card {
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(8px);
	border-radius: 32px;
	padding: 1.6rem 1.4rem 1.4rem 1.4rem;
	box-shadow: 0 18px 30px -14px rgba(20, 50, 80, 0.25),
		0 2px 4px rgba(255, 255, 255, 0.8) inset;
	border: 1px solid rgba(255, 255, 255, 0.8);
	transition: all 0.2s ease;
	display: flex;
	flex-direction: column;
}

.glyph-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 25px 35px -16px #1e4170b0, 0 2px 6px rgba(255, 255, 255, 0.8) inset;
	background: rgba(255, 255, 255, 0.85);
}

.thumbnail-wrap {
	display: flex;
	justify-content: center;
	margin-bottom: 1.1rem;
}

.thumbnail {
	border-radius: 5px;
	background: #ffffff;
	box-shadow: 0 8px 18px -8px rgba(0, 30, 60, 0.2);
	overflow: hidden;
	border: 1px solid #eee;
	padding: 5px;
}

.thumbnail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.card-content {
	flex: 1;
	display: flex;
	flex-direction: column;
}

.title-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 0.6rem;
}

.glyph-name {
	font-weight: 600;
	font-size: 1.2rem;
	color: #123456;
}

.glyph-type {
	background: #e6effa;
	border-radius: 30px;
	padding: 0.2rem 0.9rem;
	font-size: 0.7rem;
	font-weight: 600;
	color: #1b4970;
	border: 1px solid white;
	text-transform: uppercase;
}

.description {
	color: #2f4e72;
	font-size: 0.9rem;
	line-height: 1.4;
	margin-bottom: 0.8rem;
	background: rgba(255, 255, 255, 0.5);
	padding: 0.3rem 0.7rem;
	border-radius: 18px;
	border: 1px solid rgba(255, 255, 255, 0.6);
}

.meta-list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	background: rgba(245, 250, 255, 0.5);
	border-radius: 22px;
	padding: 0.7rem 1rem;
	margin-bottom: 1.2rem;
	border: 1px solid rgba(255, 255, 255, 0.7);
	font-size: 0.85rem;
}

.meta-item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	color: #1f4468;
}

.meta-item .label {
	font-weight: 350;
	opacity: 0.75;
}

.meta-item .value {
	font-weight: 520;
	background: white;
	padding: 0.15rem 0.7rem;
	border-radius: 40px;
	color: #10345a;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02);
}

.download-btn {
	background: white;
	border: none;
	padding: 0.75rem 0.5rem;
	border-radius: 40px;
	font-size: 1rem;
	font-weight: 530;
	color: #144a77;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	box-shadow: 0 4px 12px -5px #2f5f8f60, 0 0 0 1px rgba(255, 255, 255, 0.9) inset;
	transition: 0.15s;
	border: 1px solid rgba(150, 190, 240, 0.5);
	margin-top: 0.4rem;
}

.download-btn:hover {
	background: #ecf3fd;
	box-shadow: 0 10px 18px -8px #1d4b7c;
	color: #0b3458;
}

.btn-icon {
	font-size: 1.2rem;
}

.footer-note {
	margin-top: 2rem;
	color: #45729b;
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(4px);
	padding: 0.7rem 2.2rem;
	border-radius: 60px;
	font-size: 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.8);
	text-align: center;
}

/* ===== 右下侧浮动快捷图标 ===== */
.float-tools {
	position: fixed;
	bottom: 40px;
	right: 30px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	z-index: 999;
}

.float-icon {
	width: 52px;
	height: 52px;
	background: white;
	border-radius: 30px;
	box-shadow: 0 8px 18px -6px rgba(30, 70, 120, 0.25), 0 0 0 1px rgba(255, 255, 255, 0.8) inset;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.8rem;
	cursor: pointer;
	transition: all 0.2s;
	position: relative;
	color: #235a88;
	border: 1px solid rgba(120, 170, 230, 0.4);
	backdrop-filter: blur(4px);
}

.float-icon:hover {
	background: #edf5ff;
	box-shadow: 0 12px 22px -10px #1d4b7c;
	color: #0d3455;
}

/* 提示/二维码浮层 */
.icon-tooltip {
	position: absolute;
	right: 70px;
	top: 50%;
	transform: translateY(-50%);
	background: white;
	padding: 1rem 1rem;
	border-radius: 30px;
	font-size: 0.9rem;
	color: #123e64;
	white-space: nowrap;
	box-shadow: 0 8px 16px -10px #1f4170;
	border: 1px solid rgba(255, 255, 255, 0.9);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
	background: rgba(255, 255, 255, 0.9);
}

.float-icon:hover .icon-tooltip {
	opacity: 1;
}

/* 微信二维码卡片 (较大) */
.wechat-qr {
	position: absolute;
	right: 70px;
	top: 50%;
	transform: translateY(-50%);
	background: white;
	padding: 0.8rem;
	border-radius: 20px;
	box-shadow: 0 12px 24px -12px #1f3f6b;
	border: 1px solid rgba(255, 255, 255, 0.9);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.2s;
	width: 140px;
	text-align: center;
}

.float-icon:hover .wechat-qr {
	opacity: 1;
}

.qr-code-sim {
	width: 100%;
	height: auto;
	background: #ecf5ff;
	border-radius: 12px;
	padding: 8px;
}

.qr-code-sim svg {
	width: 100%;
	height: auto;
}

.wechat-qr span {
	font-size: 0.7rem;
	color: #1e4974;
	display: block;
	margin-top: 4px;
}

/* ===== 两列布局 ===== */
.two-column {
	display: flex;
	gap: 2rem;
	flex-wrap: wrap;
}

/* 左侧 25% */
.left-panel {
	flex: 1 1 250px;
	max-width: 25%;
	min-width: 240px;
}

/* 右侧 75% */
.right-panel {
	flex: 3 1 600px;
	max-width: 75%;
	min-width: 300px;
}

/* ===== 左侧说明卡片 ===== */
.info-card {
	background: rgba(255, 255, 255, 0.6);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	border-radius: 32px;
	padding: 1.8rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 8px 18px -12px rgba(30, 65, 110, 0.2);
	transition: transform 0.2s;
	height: 706px;
}

.info-title {
	font-size: 1.6rem;
	font-weight: 550;
	color: #113753;
	margin-bottom: 1.2rem;
	display: flex;
	align-items: center;
	gap: 0.6rem;
	border-bottom: 2px solid rgba(65, 120, 190, 0.2);
	padding-bottom: 0.8rem;
}

.info-title i {
	color: #2b6a9c;
	font-size: 1.8rem;
}

.info-section {
	margin-bottom: 1.8rem;
}

.info-section h3 {
	font-weight: 600;
	font-size: 1.1rem;
	color: #1e4b77;
	margin-bottom: 0.5rem;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.info-section p {
	color: #2f4e72;
	font-size: 0.95rem;
	line-height: 1.6;
	background: rgba(255, 255, 255, 0.4);
	padding: 0.8rem 1rem;
	border-radius: 20px;
	border: 1px solid rgba(255, 255, 255, 0.7);
}

.info-list {
	list-style: none;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 22px;
	padding: 0.8rem 1rem;
	border: 1px solid rgba(255, 255, 255, 0.7);
}

.info-list li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.5rem 0;
	border-bottom: 1px dashed rgba(120, 160, 210, 0.3);
	color: #1e4b77;
	font-size: 0.95rem;
}

.info-list li:last-child {
	border-bottom: none;
}

.info-list i {
	color: #2b6a9c;
	width: 1.4rem;
	font-size: 1rem;
}

.highlight-badge {
	background: #d4e4fc;
	border-radius: 30px;
	padding: 0.15rem 0.8rem;
	font-size: 0.7rem;
	font-weight: 600;
	color: #14437c;
	margin-left: 0.5rem;
	border: 1px solid white;
}

/* ===== 固件下载大模块 (新增) ===== */
.firmware-section {
	background: rgba(255, 255, 255, 0.5);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border-radius: 48px;
	padding: 2rem 2rem 2.2rem 2rem;
	border: 1px solid rgba(255, 255, 255, 0.9);
	box-shadow: 0 8px 18px -12px rgba(30, 65, 110, 0.2);
	margin-bottom: 1.5rem;
	color: #173e62;
}

.firmware-section i {
	color: #54779c;
}

.firmware-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 2rem;
	padding: 0 0.5rem;
	flex-wrap: wrap;
	gap: 1rem;
}

.firmware-header h2 {
	font-weight: 540;
	font-size: 1.3rem;
	color: #194267;
}

.firmware-header h2 span {
	background: #d0e5ff;
	border-radius: 60px;
	padding: 0.2rem 1.2rem;
	font-size: 1rem;
	font-weight: 450;
	border: 1px solid white;
}

.firmware-tag {
	background: rgba(255, 255, 255, 0.7);
	border-radius: 30px;
	padding: 0.4rem 1.2rem;
	font-size: 0.9rem;
	border: 1px solid rgba(255, 255, 255, 0.9);
}

.firmware-tag i {
	margin-right: 0.3rem;
}

/* 固件卡片网格 */
.firmware-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.8rem;
	margin-bottom: 2rem;
}

.firmware-card {
	background: rgba(255, 255, 255, 0.75);
	backdrop-filter: blur(8px);
	border-radius: 32px;
	padding: 1.6rem;
	border: 1px solid rgba(255, 255, 255, 0.8);
	box-shadow: 0 12px 24px -14px rgba(20, 50, 80, 0.2);
	transition: all 0.2s ease;
	display: flex;
	flex-direction: column;
}

.firmware-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 20px 30px -16px #1e4170b0;
	background: rgba(255, 255, 255, 0.85);
}

.firmware-card-header {
	display: flex;
	align-items: center;
	gap: 1rem;
	margin-bottom: 1.2rem;
}

.firmware-icon {
	width: 56px;
	height: 56px;
	background: linear-gradient(135deg, #e6f0ff, #d4e4fc);
	border-radius: 20px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2rem;
	border: 1px solid rgba(255, 255, 255, 0.8);
}

.firmware-info {
	flex: 1;
}

.firmware-version {
	font-weight: 700;
	font-size: 1.3rem;
	margin-bottom: 0.2rem;
}

.firmware-device {
	font-size: 0.85rem;
	display: flex;
	align-items: center;
	gap: 0.3rem;
}

.firmware-device i {
	font-size: 0.8rem;
}

.firmware-features {
	list-style: none;
	margin: 1rem 0 1.2rem 0;
	padding: 0.8rem 1rem;
	background: rgba(255, 255, 255, 0.4);
	border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, 0.6);
}

.firmware-features li {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	padding: 0.4rem 0;
	font-size: 0.9rem;
}

.firmware-features li i {
	font-size: 0.85rem;
	width: 1.2rem;
}

.firmware-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem 1.2rem;
	margin-bottom: 1.2rem;
	padding: 0.8rem;
	background: rgba(245, 250, 255, 1);
	border-radius: 22px;
	border: 1px solid rgba(255, 255, 255, 0.5);
}

.firmware-meta-item {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.85rem;
}

.firmware-meta-item i {
	width: 1rem;
}

.firmware-download-btn {
	background: rgba(245, 250, 255, 0.7);
	border: none;
	padding: 0.9rem 0.5rem;
	border-radius: 40px;
	font-size: 1rem;
	font-weight: 600;
	color: #54779c;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.6rem;
	transition: all 0.2s;
	border: 1px solid #c3dbfa;
	margin-top: auto;
}

.firmware-download-btn:hover {
	background: rgba(245, 250, 255, 1);
	border-color: #54779c;
	transform: translateY(-2px);
}

.firmware-download-btn i {
	font-size: 1.2rem;
}

.firmware-note {
	display: flex;
	align-items: center;
	gap: 1rem;
	background: rgba(255, 255, 255, 0.3);
	border-radius: 60px;
	padding: 1rem 1.5rem;
	border: 1px solid rgba(255, 255, 255, 0.7);
	color: #54779c;
}

.firmware-note i {
	font-size: 1.5rem;
	color: #f59e0b;
}

.maincolor {
	color: #1d446b;
}