:root {
	--bg: #f4f7f8;
	--card: #ffffff;
	--text: #163c45;
	--muted: #6d7a7d;
	--line: #e4ebec;
	--primary: #0e8c7a;
	--primary-dark: #0a6f61;
	--warn-bg: #fdecec;
	--warn: #c0392b;
}

* {
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	margin: 0;
	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
	line-height: 1.6;
}

#app {
	width: 100%;
}

a {
	color: var(--primary);
}

.wrap {
	max-width: 1040px;
	margin: 0 auto;
	padding: 0 18px;
}

.empty {
	padding: 48px 0;
	text-align: center;
	color: var(--muted);
}

.todo {
	color: #b08300;
	background: #fff8e1;
	border-radius: 4px;
	padding: 0 4px;
	font-size: 0.92em;
}

/* 顶部导航 */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--line);
}

.header-inner {
	display: flex;
	align-items: center;
	gap: 16px;
	height: 60px;
}

.brand {
	display: flex;
	align-items: center;
	gap: 9px;
	text-decoration: none;
	color: var(--text);
	font-weight: 700;
}

.brand-icon {
	width: 30px;
	height: 30px;
	border-radius: 8px;
	object-fit: cover;
}

.brand-name {
	font-size: 17px;
}

.site-nav {
	display: flex;
	gap: 20px;
	margin-left: auto;
}

.site-nav a {
	color: var(--muted);
	text-decoration: none;
	font-size: 14px;
}

.site-nav a:hover {
	color: var(--primary);
}

.header-cta {
	flex: none;
}

/* 按钮 */
.btn {
	display: inline-block;
	padding: 12px 22px;
	border: none;
	border-radius: 10px;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.btn-sm {
	padding: 8px 16px;
	font-size: 14px;
}

.btn-primary {
	background: var(--primary);
	color: #fff;
}

.btn-primary:active {
	background: var(--primary-dark);
}

.btn-ghost {
	background: rgba(14, 140, 122, 0.1);
	color: var(--primary-dark);
}

/* 首屏 */
.hero {
	padding: 54px 0 40px;
	background: linear-gradient(160deg, #e9f6f3 0%, #f4f7f8 62%);
}

.hero-inner {
	display: flex;
	align-items: center;
	gap: 36px;
	flex-wrap: wrap;
}

.hero-copy {
	flex: 1 1 420px;
	min-width: 280px;
}

.hero-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 20px;
	background: rgba(14, 140, 122, 0.12);
	color: var(--primary-dark);
	font-size: 12px;
	font-weight: 600;
}

.hero-logo {
	display: block;
	width: 92px;
	height: 92px;
	margin-bottom: 18px;
	border-radius: 20px;
	box-shadow: 0 10px 30px rgba(14, 70, 62, 0.16);
}

.hero-title {
	margin: 14px 0 6px;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: 1px;
}

.hero-slogan {
	margin: 0;
	color: var(--primary-dark);
	font-size: 16px;
	font-weight: 600;
}

.hero-desc {
	margin: 14px 0 0;
	color: #415255;
	font-size: 15px;
	line-height: 1.8;
	max-width: 620px;
}

.hero-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 22px;
}

.hero-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
	margin: 20px 0 0;
	padding: 0;
	list-style: none;
	color: var(--muted);
	font-size: 13px;
}

.hero-side {
	flex: 0 0 auto;
}

.qr-card {
	width: 190px;
	padding: 16px;
	border-radius: 14px;
	background: #fff;
	box-shadow: 0 10px 30px rgba(14, 70, 62, 0.1);
	text-align: center;
}

.qr-img {
	width: 100%;
	border-radius: 8px;
}

.qr-tip {
	margin: 10px 0 0;
	color: var(--muted);
	font-size: 12px;
}

/* 通用板块 */
.section {
	padding: 40px 0;
}

.section-title {
	margin: 0 0 16px;
	font-size: 22px;
	font-weight: 700;
}

.section-sub {
	margin: -8px 0 18px;
	color: var(--muted);
	font-size: 14px;
}

/* 功能亮点 */
.features {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.feature {
	padding: 18px;
	border-radius: 12px;
	background: var(--card);
	border: 1px solid var(--line);
}

.feature-title {
	font-size: 15px;
	font-weight: 700;
}

.feature-desc {
	margin-top: 6px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.6;
}

/* 应用截图 */
.shots {
	display: flex;
	gap: 14px;
	overflow-x: auto;
	padding-bottom: 8px;
}

.shot {
	height: 360px;
	border-radius: 12px;
	border: 1px solid var(--line);
	background: #fff;
	flex: 0 0 auto;
}

/* 版本卡片 */
.card {
	margin-bottom: 16px;
	padding: 20px;
	border-radius: 12px;
	background: var(--card);
	border: 1px solid var(--line);
}

.card-head {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
}

.card-head h2,
.card-head h3 {
	margin: 0;
	font-size: 18px;
	font-weight: 700;
}

.badge {
	padding: 2px 8px;
	border-radius: 10px;
	background: #e6f6f2;
	color: var(--primary-dark);
	font-size: 12px;
	font-weight: 600;
}

.badge-warn {
	background: var(--warn-bg);
	color: var(--warn);
}

.meta {
	margin: 8px 0 0;
	color: var(--muted);
	font-size: 13px;
}

.artifacts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 16px;
}

.download-btn {
	display: inline-block;
	padding: 12px 18px;
	border: none;
	border-radius: 10px;
	background: var(--primary);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
}

.download-btn:active {
	background: var(--primary-dark);
}

.artifacts .download-btn {
	width: auto;
	padding: 10px 16px;
	font-size: 14px;
}

.changes {
	margin-top: 12px;
}

.changes-title {
	font-size: 13px;
	font-weight: 600;
	color: #415255;
}

.changes ul {
	margin: 6px 0 0;
	padding-left: 18px;
	color: #415255;
	font-size: 14px;
	line-height: 1.7;
}

.empty-change {
	margin: 10px 0 0;
	color: #8a9698;
	font-size: 13px;
}

/* 下载引导 / 支持平台 */
.device-guide {
	margin: 4px 0 8px;
}

.device-guide-title,
.releases-title {
	margin: 0 0 12px;
	font-size: 17px;
	font-weight: 700;
}

.releases-title {
	margin-top: 28px;
}

.platforms {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 14px;
}

.platform {
	padding: 18px;
	border-radius: 12px;
	background: var(--card);
	border: 1px solid var(--line);
	display: flex;
	flex-direction: column;
}

.platform.is-current {
	border-color: var(--primary);
	box-shadow: 0 0 0 3px rgba(14, 140, 122, 0.12);
}

.platform-name {
	font-size: 16px;
	font-weight: 700;
}

.platform-req {
	margin-top: 8px;
	color: var(--muted);
	font-size: 13px;
}

.platform-usage {
	margin-top: 6px;
	color: var(--muted);
	font-size: 13px;
	line-height: 1.6;
}

.platform-action {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
	margin-top: auto;
	padding-top: 12px;
	font-size: 13px;
}

.platform-btn {
	width: auto;
}

.platform-backup {
	color: var(--primary-dark);
	font-size: 13px;
	text-decoration: underline;
}

.apk-warning {
	margin-top: 14px;
	padding: 10px 14px;
	border-radius: 9px;
	background: #fff8e1;
	border: 1px solid #f0d68a;
	color: #8a6d1a;
	font-size: 12.5px;
	line-height: 1.7;
}

/* 常见问题 */
.faq {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.faq-item {
	border: 1px solid var(--line);
	border-radius: 10px;
	background: var(--card);
	overflow: hidden;
}

.faq-item > summary {
	padding: 14px 16px;
	cursor: pointer;
	font-size: 15px;
	font-weight: 600;
	list-style: none;
}

.faq-item > summary::-webkit-details-marker {
	display: none;
}

.faq-item > summary::before {
	content: "▸";
	margin-right: 8px;
	color: var(--primary);
}

.faq-item[open] > summary::before {
	content: "▾";
}

.faq-body {
	padding: 0 16px 16px;
	color: #415255;
	font-size: 14px;
	line-height: 1.8;
	border-top: 1px dashed var(--line);
	margin-top: 2px;
	padding-top: 12px;
}

/* 关于我们 */
.about-desc {
	margin: 0 0 16px;
	color: #415255;
	font-size: 15px;
	line-height: 1.8;
	max-width: 720px;
}

.kv {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 10px;
}

.kv li {
	display: flex;
	gap: 10px;
	padding: 12px 16px;
	border-radius: 10px;
	background: var(--card);
	border: 1px solid var(--line);
	font-size: 14px;
}

.kv-k {
	flex: none;
	width: 72px;
	color: var(--muted);
}

.kv-v {
	word-break: break-all;
}

/* 页脚 */
.site-footer {
	margin-top: 20px;
	padding: 32px 0 40px;
	background: #0f2b2a;
	color: #c9d8d5;
}

.footer-links {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	padding-bottom: 18px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-links a {
	color: #d8e7e4;
	text-decoration: none;
	font-size: 13px;
}

.footer-links a:hover {
	color: #fff;
}

.footer-links .todo {
	color: #ffd97a;
	background: rgba(255, 217, 122, 0.12);
}

.footer-legal {
	padding-top: 16px;
	font-size: 12.5px;
	line-height: 2;
	color: #9fb3b0;
}

.footer-legal a {
	color: #bcd0cd;
}

.beian-link {
	display: inline-flex;
	align-items: center;
	white-space: nowrap;
}

.beian-icon {
	height: 16px;
	width: auto;
	margin-right: 4px;
	vertical-align: -3px;
}

.footer-legal p {
	margin: 0;
}

.footer-note {
	color: #8aa09c;
}

/* 邀请落地页 */
.landing {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 48px 18px 64px;
	text-align: center;
}

.landing-logo {
	width: 84px;
	height: 84px;
	margin-bottom: 18px;
	border-radius: 18px;
	box-shadow: 0 8px 24px rgba(14, 70, 62, 0.16);
}

.landing-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
}

.landing-desc {
	margin: 10px 0 28px;
	color: var(--muted);
	font-size: 14px;
}

.landing-actions {
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 100%;
	max-width: 360px;
}

.link-btn {
	margin-top: 24px;
	border: none;
	background: transparent;
	color: var(--primary);
	font-size: 14px;
	cursor: pointer;
}

.landing-hint {
	margin-top: 16px;
	min-height: 20px;
	color: var(--muted);
	font-size: 13px;
}

@media (max-width: 820px) {
	.features,
	.platforms {
		grid-template-columns: 1fr 1fr;
	}

	.kv {
		grid-template-columns: 1fr;
	}

	.site-nav {
		display: none;
	}

	.hero-title {
		font-size: 28px;
	}
}

@media (max-width: 520px) {
	.features,
	.platforms {
		grid-template-columns: 1fr;
	}

	.hero {
		padding: 36px 0 28px;
	}

	.header-cta {
		margin-left: auto;
	}
}