/* 时间：2026-09-12 详细注释：新增“新版 HTML 首页”专用样式表，目的与旧版图片首页（welcome.css/bootstrap 体系）完全解耦，避免互相影响；影响范围仅 Views/Welcome/IndexHtml.cshtml 引用本文件，不修改 welcome.css，旧版首页样式不受任何影响；视觉语言参考 meterhelper.cn 的深色主题、卡片式软件下载区。 */

* { box-sizing: border-box; }

.ah-body {
	margin: 0;
	background: #0b0e1a;
	color: #e7e9f3;
	font-family: "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
	line-height: 1.6;
	width: 100%;
	max-width: 100%;
	overflow-x: hidden;
}

main {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-x: hidden;
}

.ah-container {
	max-width: 1080px;
	margin: 0 auto;
	padding: 0 24px;
}

/* 顶部导航 */
.ah-nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 18px 24px;
	border-bottom: 1px solid rgba(255,255,255,0.06);
}
.ah-nav .ah-logo {
	font-size: 18px;
	font-weight: 700;
	color: #fff;
	letter-spacing: 0.5px;
}
.ah-nav .ah-logo span { color: #7c8cff; }
.ah-nav a.ah-nav-link {
	color: #b7bcd6;
	text-decoration: none;
	margin-left: 24px;
	font-size: 14px;
}
.ah-nav a.ah-nav-link:hover { color: #fff; }

/* Hero 区 */
.ah-hero {
	text-align: center;
	padding: 72px 24px 56px;
}
.ah-hero .ah-badge {
	display: inline-block;
	padding: 6px 14px;
	border-radius: 999px;
	background: rgba(124,140,255,0.12);
	color: #93a1ff;
	font-size: 13px;
	margin-bottom: 18px;
}
.ah-hero h1 {
	font-size: 40px;
	color: #fff;
	margin: 0 0 16px;
	font-weight: 800;
}
.ah-hero p.ah-sub {
	color: #a8adc7;
	font-size: 15px;
	max-width: 640px;
	margin: 0 auto;
}
.ah-hero .ah-cta {
	margin-top: 32px;
}
.ah-btn {
	display: inline-block;
	padding: 11px 26px;
	border-radius: 8px;
	background: linear-gradient(135deg,#6c7bff,#8a5bff);
	color: #fff;
	text-decoration: none;
	font-size: 14px;
	font-weight: 600;
	margin: 0 8px;
	border: none;
	cursor: pointer;
}
.ah-btn.ah-btn-ghost {
	background: transparent;
	border: 1px solid rgba(255,255,255,0.18);
	color: #e7e9f3;
}
.ah-btn[disabled], .ah-btn.ah-btn-disabled {
	opacity: 0.4;
	cursor: not-allowed;
	filter: grayscale(0.4);
}

/* 分节标题 */
.ah-section { padding: 56px 24px; }
.ah-section-head { text-align: center; margin-bottom: 36px; }
.ah-section-head .ah-eyebrow {
	color: #7c8cff;
	font-size: 13px;
	letter-spacing: 1px;
	text-transform: uppercase;
}
.ah-section-head h2 {
	color: #fff;
	font-size: 28px;
	margin: 8px 0 10px;
}
.ah-section-head p {
	color: #9297b3;
	font-size: 14px;
	max-width: 620px;
	margin: 0 auto;
}

/* 软件下载卡片 */
.ah-cards {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 16px;
	max-width: 1080px;
	margin: 0 auto;
}
@media (max-width: 900px) {
	.ah-cards { grid-template-columns: repeat(2, 1fr); }
}
.ah-card {
	background: #121629;
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 14px;
	padding: 24px 18px;
	text-align: center;
}
.ah-card .ah-card-icon { font-size: 30px; margin-bottom: 10px; }
.ah-card h3 { color: #fff; margin: 0 0 6px; font-size: 17px; }
.ah-card .ah-card-meta { color: #8890ac; font-size: 13px; margin-bottom: 4px; min-height: 18px; }
.ah-card .ah-card-note { color: #6b7290; font-size: 12px; margin-bottom: 14px; min-height: 16px; }

/* 系统流程架构图 */
.ah-flow-diagram { width: 100%; max-width: 980px; margin: 0 auto; display: block; }
.ah-flow-steps {
	max-width: 860px;
	margin: 32px auto 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 14px;
}
@media (max-width: 900px) {
	.ah-flow-steps { grid-template-columns: 1fr; }
}
.ah-flow-step {
	background: #121629;
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 12px;
	padding: 16px;
}
.ah-flow-step .ah-flow-step-num {
	display: inline-block;
	width: 22px; height: 22px;
	border-radius: 50%;
	background: #6c7bff;
	color: #fff;
	font-size: 12px;
	text-align: center;
	line-height: 22px;
	margin-bottom: 8px;
}
.ah-flow-step h4 { color: #fff; font-size: 14px; margin: 0 0 6px; }
.ah-flow-step p { color: #9297b3; font-size: 13px; margin: 0; }
.ah-flow-step .ah-flow-highlight { color: #93a1ff; }

/* 架构图内高亮动画：四个阶段依次高亮，帮助理解数据流向 */
@keyframes ahPulse {
	0%, 92%, 100% { opacity: 0.18; }
	4%, 20% { opacity: 1; }
}
.ah-stage-glow {
	animation: ahPulse 8s infinite;
}
.ah-stage-glow.ah-stage-1 { animation-delay: 0s; }
.ah-stage-glow.ah-stage-2 { animation-delay: 2s; }
.ah-stage-glow.ah-stage-3 { animation-delay: 4s; }
.ah-stage-glow.ah-stage-4 { animation-delay: 6s; }

@keyframes ahArrowFlow {
	0%, 92%, 100% { stroke-dashoffset: 24; opacity: 0.25; }
	4%, 20% { stroke-dashoffset: 0; opacity: 1; }
}
.ah-arrow-flow {
	stroke-dasharray: 6 6;
	animation: ahArrowFlow 8s infinite;
}
.ah-arrow-1 { animation-delay: 0.4s; }
.ah-arrow-2 { animation-delay: 2.4s; }
.ah-arrow-3 { animation-delay: 4.4s; }

/* 页脚 */
.ah-footer {
	border-top: 1px solid rgba(255,255,255,0.06);
	padding: 32px 24px;
	text-align: center;
	color: #7d8299;
	font-size: 13px;
}
.ah-footer .ah-footer-contacts {
	display: flex;
	justify-content: center;
	gap: 28px;
	margin-bottom: 12px;
	flex-wrap: wrap;
}
.ah-footer a { color: #93a1ff; text-decoration: none; }

/* 时间：2026-09-13 详细注释：最终合并版补充外置架构 SVG、循环动画与首页导航/下载卡片细节样式，目的吸收独立 CSS 的可维护性，同时复用单独 SVG 资源表达更完整的局域网/广域网分支；影响范围仅新版 HTML 首页。 */
.ah-nav-actions { display:flex; align-items:center; flex-wrap:wrap; justify-content:flex-end; }
.ah-nav a.ah-nav-admin { color:#93a1ff; }
.ah-mini-flow {
	max-width: 980px;
	margin: 42px auto 0;
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 10px;
}
.ah-mini-flow div {
	padding: 14px 10px;
	border-radius: 12px;
	border: 1px solid rgba(255,255,255,0.08);
	background: rgba(255,255,255,0.03);
	color: #b7bcd6;
	font-size: 12px;
}
.ah-mini-flow b { display:block; color:#fff; font-size:13px; margin-bottom:4px; }
.ah-mini-flow span { display:block; }
.ah-card-primary { display:block; margin:0; width:100%; text-align:center; }
.ah-card-link { display:inline-block; margin-top:12px; color:#93a1ff; text-decoration:none; font-size:12px; }
.ah-publish-note { text-align:center; color:#7d8299; font-size:13px; margin:18px auto 0; max-width:820px; }
.ah-visual {
	max-width: 1080px;
	margin: 0 auto;
	padding: 16px;
	border: 1px solid rgba(255,255,255,0.06);
	border-radius: 16px;
	background: #0d1323;
	overflow: hidden;
}
.ah-architecture-img, .ah-demo-img { display:block; width:100%; height:auto; border-radius:12px; }
/* 时间：2026-09-13 详细注释：根据 Animated Walkthrough 视觉审计，对该区域做统一化收敛；目标是复用首页现有 section/head/visual 体系，弱化独立卡片语言，减小流程图字体，并确保只有流程图容器自身可横向滚动。 */
.ah-demo-section {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	overflow-x: hidden;
	overflow-x: clip;
	padding-left: 24px;
	padding-right: 24px;
}
.ah-demo-section .ah-section-head {
	margin-bottom: 34px;
}
.ah-demo-section .ah-section-head strong {
	color: #fff;
}
.ah-demo-list {
	width: 100%;
	max-width: 1080px;
	min-width: 0;
	margin: 0 auto;
	display: grid;
	gap: 32px;
}
.ah-demo-scene {
	margin: 0;
}
.ah-demo-scene-head {
	margin: 0 0 16px;
	text-align: center;
}
.ah-demo-scene-head h3 {
	margin: 0;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}
.ah-demo-scene-head p {
	margin: 6px auto 0;
	max-width: 620px;
	color: #9297b3;
	font-size: 13px;
	line-height: 1.75;
}
.ah-demo-visual {
	max-width: 1080px;
	padding: 14px 18px;
}
.ah-demo-scroll {
	width: 100%;
	max-width: 920px;
	min-width: 0;
	margin: 0 auto;
	overflow-x: auto;
	overflow-y: hidden;
	padding: 0;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-inline: contain;
	border-radius: 12px;
}
.ah-demo-scroll:focus-visible {
	outline: 2px solid #7c8cff;
	outline-offset: 2px;
}
.ah-demo-img {
	display: block;
	width: 100%;
	max-width: 100%;
	height: auto;
	border-radius: 12px;
}
.ah-demo-mobile-hint {
	display: none;
	max-width: 620px;
	margin: 14px auto 0;
	color: #737b98;
	font-size: 12px;
	line-height: 1.7;
	text-align: center;
}
@media (max-width: 900px) {
	.ah-mini-flow { grid-template-columns: 1fr; }
	.ah-demo-list { gap: 26px; }
}
@media (max-width: 640px) {
	.ah-nav { align-items:flex-start; gap:12px; flex-direction:column; }
	.ah-nav-actions { justify-content:flex-start; gap:10px 16px; }
	.ah-nav a.ah-nav-link { margin-left:0; }
	.ah-hero { padding:52px 18px 42px; }
	.ah-hero h1 { font-size:32px; }
	.ah-section { padding:44px 18px; }
	.ah-cards { grid-template-columns: 1fr; }
	.ah-flow-steps { grid-template-columns: 1fr; }
	.ah-visual { padding:8px; }
	.ah-demo-section { padding-left:18px; padding-right:18px; }
	.ah-demo-scene-head { margin-bottom: 12px; }
	.ah-demo-scene-head p { max-width: 100%; }
	.ah-demo-visual { padding: 8px; }
	.ah-demo-scroll { max-width: 100%; }
	.ah-demo-img { width: 680px; max-width: none; }
	.ah-demo-mobile-hint { display:block; }
}
@media (prefers-reduced-motion: reduce) {
	.ah-stage-glow, .ah-arrow-flow { animation:none !important; }
}