:root {
				--primary: #4a90d9;
				--primary-dark: #357abd;
				--primary-light: #e8f0fe;
				--primary-bg: #e8f0fe;
				--white: #ffffff;
				--text: #2c3e50;
				--text-light: #5a6c7d;
				--text-lighter: #8899aa;
				--shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
				--shadow-hover: 0 12px 32px rgba(0, 0, 0, 0.10);
				--radius: 16px;
				--radius-sm: 10px;
				--border: #eef2f7;
				--success: #27ae60;
				--warning: #f39c12;
				--danger: #e74c3c;
				--vip: #7c3aed;
				--vip-light: #f5f0ff;
				--vip-dark: #6d28d9;
				--gradient-hero: linear-gradient(135deg, #1a3a5c 0%, #1a5276 25%, #2471a3 50%, #2e86c1 75%, #3498db 100%);
				--gradient-card: linear-gradient(180deg, #ffffff 0%, #fafcfd 100%);
			}

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

			body {
				font-family: "Microsoft YaHei", "PingFang SC", -apple-system, sans-serif;
				background: #f0f4f8;
				min-height: 100vh;
				color: var(--text);
				line-height: 1.7;
				background-image:
					radial-gradient(ellipse at 15% 20%, rgba(74, 144, 217, 0.04) 0%, transparent 60%),
					radial-gradient(ellipse at 85% 60%, rgba(124, 58, 237, 0.03) 0%, transparent 60%),
					radial-gradient(ellipse at 50% 80%, rgba(39, 174, 96, 0.02) 0%, transparent 50%);
			}

			/* ========== 导航栏 ========== */
			.navbar {
				background: rgba(255, 255, 255, 0.85);
				backdrop-filter: blur(16px);
				-webkit-backdrop-filter: blur(16px);
				box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 16px rgba(0, 0, 0, 0.03);
				position: sticky;
				top: 0;
				z-index: 100;
				border-bottom: 1px solid rgba(0, 0, 0, 0.04);
			}

			.navbar-inner {
				max-width: 1240px;
				margin: 0 auto;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 32px;
				height: 68px;
			}

			.logo {
				display: flex;
				align-items: center;
				gap: 12px;
				text-decoration: none;
			}

			/* Logo 图标 - CSS绘制盾牌哨兵 */
			/* ========== Logo - 云中哨兵 ========== */
			.logo-icon-css {
				width: 46px;
				height: 46px;
				position: relative;
				flex-shrink: 0;
			}

			/* 云朵 */
			.cloud-body {
				position: absolute;
				width: 46px;
				height: 28px;
				background: linear-gradient(180deg, #ffffff 0%, #e8f0fe 100%);
				border-radius: 28px;
				bottom: 4px;
				left: 0;
				box-shadow:
					0 2px 8px rgba(74, 144, 217, 0.25),
					inset 0 1px 0 rgba(255, 255, 255, 0.8);
				z-index: 2;
			}

			/* 云朵的蓬松凸起 */
			.cloud-body::before {
				content: "";
				position: absolute;
				width: 20px;
				height: 20px;
				background: #fff;
				border-radius: 50%;
				top: -10px;
				left: 6px;
				box-shadow: 0 1px 3px rgba(74, 144, 217, 0.15);
			}

			.cloud-body::after {
				content: "";
				position: absolute;
				width: 18px;
				height: 18px;
				background: linear-gradient(180deg, #fff 0%, #eaf2ff 100%);
				border-radius: 50%;
				top: -8px;
				right: 8px;
				box-shadow: 0 1px 3px rgba(74, 144, 217, 0.15);
			}

			/* 哨兵 - 头部 */
			.sentinel {
				position: absolute;
				z-index: 3;
				bottom: 9px;
				left: 50%;
				transform: translateX(-50%);
			}

			.sentinel-head {
				width: 10px;
				height: 10px;
				background: #4a90d9;
				border-radius: 50%;
				margin: 0 auto 1px;
				position: relative;
			}

			/* 头盔高光 */
			.sentinel-head::after {
				content: "";
				position: absolute;
				width: 4px;
				height: 3px;
				background: rgba(255, 255, 255, 0.6);
				border-radius: 50%;
				top: 1px;
				left: 3px;
			}

			/* 哨兵 - 身体 */
			.sentinel-body {
				width: 14px;
				height: 11px;
				background: linear-gradient(180deg, #357abd 0%, #4a90d9 100%);
				clip-path: polygon(30% 0%, 70% 0%, 90% 100%, 10% 100%);
				margin: 0 auto;
				position: relative;
			}

			/* 哨兵 - 手中的盾牌 */
			.sentinel-shield {
				position: absolute;
				width: 8px;
				height: 9px;
				background: linear-gradient(135deg, #2ecc71, #27ae60);
				clip-path: polygon(50% 0%, 100% 20%, 100% 60%, 75% 80%, 50% 95%, 25% 80%, 0% 60%, 0% 20%);
				left: 50%;
				transform: translateX(-50%);
				top: 2px;
				box-shadow: 0 0 4px rgba(46, 204, 113, 0.5);
			}

			/* 信号波 */
			.signal-wave {
				position: absolute;
				width: 10px;
				height: 3px;
				background: #4a90d9;
				border-radius: 3px;
				z-index: 1;
				right: 0px;
				top: 18px;
				opacity: 0.7;
				animation: wavePulse 2s ease-in-out infinite;
			}

			.signal-wave.wave2 {
				right: -6px;
				top: 12px;
				width: 14px;
				opacity: 0.4;
				animation-delay: 0.5s;
			}

			/* 信号波 - 第三个在云左边 */
			.signal-wave::before {
				content: "";
				position: absolute;
				left: -16px;
				top: -4px;
				width: 10px;
				height: 3px;
				background: #4a90d9;
				border-radius: 3px;
				opacity: 0.5;
				animation: wavePulse 2s ease-in-out infinite;
				animation-delay: 1s;
			}

			@keyframes wavePulse {

				0%,
				100% {
					opacity: 0.3;
					transform: scaleX(1);
				}

				50% {
					opacity: 0.8;
					transform: scaleX(1.3);
				}
			}

			.logo-text {
				font-size: 20px;
				font-weight: 700;
				color: var(--text);
				letter-spacing: 0.5px;
			}

			.logo-text span {
				color: var(--primary);
			}

			.nav-links {
				display: flex;
				align-items: center;
				gap: 4px;
				list-style: none;
			}

			.nav-links li a {
				text-decoration: none;
				color: var(--text-light);
				font-size: 14.5px;
				padding: 8px 16px;
				border-radius: 8px;
				transition: all 0.2s;
				font-weight: 500;
			}

			.nav-links li a:hover {
				color: var(--primary);
				background: var(--primary-light);
			}

			.btn-login {
				background: var(--primary) !important;
				color: #fff !important;
				padding: 10px 28px !important;
				border-radius: 10px !important;
				font-weight: 600 !important;
				box-shadow: 0 4px 16px rgba(74, 144, 217, 0.35);
				transition: all 0.25s;
			}

			.btn-login:hover {
				background: var(--primary-dark) !important;
				box-shadow: 0 6px 22px rgba(74, 144, 217, 0.5);
				transform: translateY(-2px);
			}

			/* 心跳监控图标 - 心电图脉冲 */
			.monitor-icon-css.heartbeat {
				background: linear-gradient(135deg, #ffe8f0, #ffd4e4);
			}

			.monitor-icon-css.heartbeat::after {
				content: "";
				width: 28px;
				height: 28px;
				background: radial-gradient(circle, #e74c3c 3px, transparent 4px),
					linear-gradient(90deg, #e74c3c 2px, transparent 2px),
					linear-gradient(0deg, #e74c3c 2px, transparent 2px);
				background-repeat: no-repeat;
				background-position: center;
				background-size: 20px 20px;
				mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e74c3c'%3E%3Cpath d='M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z'/%3E%3C/svg%3E") no-repeat center;
				mask-size: contain;
				background-color: #e74c3c;
			}

			/* 增强兼容：使用伪元素绘制简单心电图标 */
			.monitor-icon-css.heartbeat::before {
				content: "❤️";
				font-size: 28px;
				line-height: 1;
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				opacity: 0.8;
			}

			.monitor-icon-css.heartbeat::after {
				display: none;
			}

			/* ========== 主容器 ========== */
			.main-container {
				max-width: 1240px;
				margin: 0 auto;
				padding: 40px 32px;
			}

			/* ========== Hero - 深色科技感背景 ========== */
			.hero {
				background: var(--gradient-hero);
				border-radius: 20px;
				padding: 60px 56px;
				color: #fff;
				margin-bottom: 40px;
				box-shadow: 0 16px 48px rgba(26, 58, 92, 0.4);
				position: relative;
				overflow: hidden;
			}

			/* 背景几何装饰 */
			.hero-bg-grid {
				position: absolute;
				inset: 0;
				opacity: 0.06;
				background-image:
					linear-gradient(rgba(255, 255, 255, 0.3) 1px, transparent 1px),
					linear-gradient(90deg, rgba(255, 255, 255, 0.3) 1px, transparent 1px);
				background-size: 60px 60px;
				mask-image: radial-gradient(ellipse at 70% 30%, black 40%, transparent 70%);
				-webkit-mask-image: radial-gradient(ellipse at 70% 30%, black 40%, transparent 70%);
			}

			.hero-glow {
				position: absolute;
				width: 500px;
				height: 500px;
				border-radius: 50%;
				filter: blur(100px);
				opacity: 0.25;
			}

			.hero-glow.g1 {
				background: #4a90d9;
				right: -120px;
				top: -200px;
			}

			.hero-glow.g2 {
				background: #2ecc71;
				left: -150px;
				bottom: -250px;
				opacity: 0.15;
			}

			/* 雷达扫描动画 */
			.hero-radar {
				position: absolute;
				right: 80px;
				top: 50%;
				transform: translateY(-50%);
				width: 200px;
				height: 200px;
				opacity: 0.5;
			}

			.radar-circle {
				position: absolute;
				inset: 0;
				border-radius: 50%;
				border: 1px solid rgba(255, 255, 255, 0.2);
			}

			.radar-circle:nth-child(1) {
				inset: 0;
			}

			.radar-circle:nth-child(2) {
				inset: 25px;
			}

			.radar-circle:nth-child(3) {
				inset: 50px;
			}

			.radar-circle:nth-child(4) {
				inset: 75px;
			}

			.radar-sweep {
				position: absolute;
				inset: 0;
				border-radius: 50%;
				background: conic-gradient(from 0deg, rgba(255, 255, 255, 0.25) 0deg, rgba(255, 255, 255, 0) 40deg, rgba(255, 255, 255, 0) 360deg);
				animation: radarSpin 4s linear infinite;
			}

			/* 监控大屏预览区 */
			.dashboard-preview {
				display: flex;
				align-items: center;
				gap: 36px;
				background: var(--white);
				border-radius: var(--radius);
				padding: 32px;
				margin-bottom: 36px;
				box-shadow: var(--shadow);
				border: 1px solid #f0f3f6;
				transition: transform 0.2s, box-shadow 0.2s;
			}

			.dashboard-preview:hover {
				transform: translateY(-3px);
				box-shadow: var(--shadow-hover);
			}

			.preview-image {
				flex: 1;
				max-width: 500px;
				border-radius: 12px;
				overflow: hidden;
				box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
			}

			.preview-image img {
				width: 100%;
				height: auto;
				display: block;
			}

			.preview-text {
				flex: 1;
			}

			.preview-text h2 {
				font-size: 26px;
				font-weight: 700;
				margin-bottom: 10px;
				color: var(--text);
			}

			.preview-text p {
				font-size: 14px;
				color: var(--text-light);
				line-height: 1.7;
				margin-bottom: 8px;
			}

			.preview-tip {
				color: var(--vip) !important;
				font-weight: 500;
			}

			.preview-btn {
				display: inline-block;
				margin-top: 12px;
				background: var(--primary);
				color: #fff;
				padding: 12px 30px;
				border-radius: 8px;
				text-decoration: none;
				font-weight: 600;
				font-size: 14px;
				transition: background 0.2s;
			}

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

			/* 响应式：小屏上下排列 */
			@media (max-width: 768px) {
				.dashboard-preview {
					flex-direction: column;
				}

				.preview-image {
					max-width: 100%;
				}
			}

			@keyframes radarSpin {
				from {
					transform: rotate(0deg);
				}

				to {
					transform: rotate(360deg);
				}
			}

			.radar-dot {
				position: absolute;
				width: 6px;
				height: 6px;
				background: #2ecc71;
				border-radius: 50%;
				box-shadow: 0 0 12px #2ecc71, 0 0 24px #2ecc71;
				animation: dotPulse 2s ease-in-out infinite;
			}

			.radar-dot:nth-child(6) {
				right: 40px;
				top: 50px;
				animation-delay: 0s;
			}

			.radar-dot:nth-child(7) {
				right: 70px;
				bottom: 55px;
				animation-delay: 0.6s;
			}

			.radar-dot:nth-child(8) {
				left: 50px;
				bottom: 40px;
				animation-delay: 1.2s;
			}

			@keyframes dotPulse {

				0%,
				100% {
					opacity: 0.4;
					transform: scale(1);
				}

				50% {
					opacity: 1;
					transform: scale(1.8);
				}
			}

			.hero-content {
				position: relative;
				z-index: 2;
				max-width: 620px;
			}

			.hero-badge {
				display: inline-block;
				background: rgba(255, 255, 255, 0.12);
				border: 1px solid rgba(255, 255, 255, 0.2);
				padding: 6px 18px;
				border-radius: 24px;
				font-size: 13px;
				margin-bottom: 20px;
				backdrop-filter: blur(10px);
				letter-spacing: 1px;
			}

			.hero h1 {
				font-size: 40px;
				font-weight: 800;
				margin-bottom: 16px;
				letter-spacing: -0.5px;
				line-height: 1.2;
			}

			.hero h1 span {
				background: linear-gradient(135deg, #74b9ff, #a0d8ef);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
				background-clip: text;
			}

			.hero p {
				font-size: 16px;
				opacity: 0.85;
				line-height: 1.8;
				margin-bottom: 28px;
			}

			.hero-buttons {
				display: flex;
				gap: 14px;
				flex-wrap: wrap;
			}

			.hero-btn-primary {
				background: #fff;
				color: #1a3a5c;
				padding: 13px 32px;
				border-radius: 10px;
				text-decoration: none;
				font-weight: 700;
				font-size: 15px;
				transition: all 0.25s;
				box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
				display: inline-flex;
				align-items: center;
				gap: 8px;
			}

			.hero-btn-primary:hover {
				transform: translateY(-3px);
				box-shadow: 0 8px 28px rgba(0, 0, 0, 0.25);
			}

			.hero-btn-secondary {
				background: rgba(255, 255, 255, 0.1);
				color: #fff;
				padding: 13px 32px;
				border-radius: 10px;
				text-decoration: none;
				font-weight: 600;
				font-size: 15px;
				transition: all 0.25s;
				backdrop-filter: blur(10px);
				border: 1px solid rgba(255, 255, 255, 0.25);
				display: inline-flex;
				align-items: center;
				gap: 8px;
			}

			.hero-btn-secondary:hover {
				background: rgba(255, 255, 255, 0.2);
				border-color: rgba(255, 255, 255, 0.4);
			}

			/* ========== 统计条 ========== */
			.stats-bar {
				display: grid;
				grid-template-columns: repeat(5, 1fr);
				gap: 16px;
				margin-bottom: 40px;
			}

			.stat-item {
				background: var(--white);
				border-radius: var(--radius);
				padding: 26px 16px;
				text-align: center;
				box-shadow: var(--shadow);
				transition: all 0.3s;
				border: 1px solid transparent;
			}

			.stat-item:hover {
				transform: translateY(-4px);
				box-shadow: var(--shadow-hover);
				border-color: #e8ecf0;
			}

			/* 统计图标 - CSS绘制 */
			.stat-icon-css {
				width: 48px;
				height: 48px;
				margin: 0 auto 12px;
				border-radius: 14px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.stat-icon-css.monitor {
				background: linear-gradient(135deg, #e8f0fe, #d4e4fc);
			}

			.stat-icon-css.monitor::after {
				content: "";
				width: 20px;
				height: 20px;
				border: 2.5px solid #4a90d9;
				border-radius: 50%;
				box-shadow: 2px 2px 0 #4a90d9;
			}

			.stat-icon-css.speed {
				background: linear-gradient(135deg, #fff3e0, #ffe0b2);
			}

			.stat-icon-css.speed::after {
				content: "";
				width: 4px;
				height: 18px;
				background: #f39c12;
				border-radius: 2px;
				box-shadow: 6px 6px 0 #f39c12, 12px 0px 0 #f39c12;
			}

			.stat-icon-css.notify {
				background: linear-gradient(135deg, #e8f8f0, #d0f0e0);
			}

			.stat-icon-css.notify::after {
				content: "";
				width: 16px;
				height: 12px;
				border: 2.5px solid #27ae60;
				border-radius: 3px;
				box-shadow: 0 -6px 0 #27ae60;
			}

			.stat-icon-css.free {
				background: linear-gradient(135deg, #fef3e8, #ffe8d4);
			}

			.stat-icon-css.free::after {
				content: "";
				width: 18px;
				height: 18px;
				background: #e67e22;
				border-radius: 50%;
				box-shadow: inset -3px -3px 0 rgba(0, 0, 0, 0.1);
			}

			.stat-icon-css.vip-s {
				background: linear-gradient(135deg, #f5f0ff, #ede0ff);
			}

			.stat-icon-css.vip-s::after {
				content: "";
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-bottom: 18px solid #7c3aed;
				filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.15));
			}

			.stat-number {
				font-size: 26px;
				font-weight: 700;
				color: var(--primary);
			}

			.stat-number.vip-color {
				color: var(--vip);
			}

			.stat-label {
				font-size: 12px;
				color: var(--text-lighter);
				margin-top: 4px;
			}

			/* ========== 通用标题 ========== */
			.section-header {
				text-align: center;
				margin-bottom: 36px;
			}

			.section-title {
				font-size: 28px;
				font-weight: 700;
				color: var(--text);
				margin-bottom: 10px;
			}

			.section-subtitle {
				font-size: 14px;
				color: var(--text-lighter);
			}

			.section-title-left {
				font-size: 22px;
				font-weight: 700;
				color: var(--text);
				margin-bottom: 24px;
				padding-left: 16px;
				border-left: 4px solid var(--primary);
			}

			/* ========== 卡片布局 ========== */
			.card-grid {
				display: grid;
				gap: 24px;
			}

			.card-grid-2 {
				grid-template-columns: 1fr 1fr;
			}

			.card-grid-3 {
				grid-template-columns: repeat(3, 1fr);
			}

			.card-grid-5 {
				grid-template-columns: repeat(5, 1fr);
			}

			/* 6 列网格布局（大屏） */
			.card-grid-6 {
				grid-template-columns: repeat(6, 1fr);
			}

			@media (max-width: 1100px) {
				.card-grid-6 {
					grid-template-columns: repeat(3, 1fr);
				}
			}

			@media (max-width: 768px) {
				.card-grid-6 {
					grid-template-columns: repeat(2, 1fr);
				}
			}

			@media (max-width: 500px) {
				.card-grid-6 {
					grid-template-columns: 1fr;
				}
			}

			.card {
				background: var(--white);
				border-radius: var(--radius);
				padding: 28px;
				box-shadow: var(--shadow);
				transition: all 0.3s;
				border: 1px solid #f0f3f6;
			}

			.card:hover {
				transform: translateY(-3px);
				box-shadow: var(--shadow-hover);
				border-color: #e0e5ea;
			}

			/* ========== 监控类型卡片 - 自定义图标 ========== */
			.monitor-card {
				text-align: center;
				border: 2px solid transparent;
				transition: all 0.35s;
				position: relative;
				overflow: hidden;
				padding-top: 32px;
			}

			.monitor-card:hover {
				border-color: var(--primary);
			}

			.monitor-card.vip-only {
				border-color: #e8dff8;
				background: linear-gradient(180deg, #ffffff 0%, #fdfbff 100%);
			}

			.monitor-card.vip-only:hover {
				border-color: var(--vip);
			}

			/* 会员角标 */
			.vip-ribbon {
				position: absolute;
				top: 16px;
				right: -32px;
				background: linear-gradient(135deg, #7c3aed, #6d28d9);
				color: #fff;
				padding: 3px 34px;
				font-size: 10px;
				font-weight: 700;
				transform: rotate(45deg);
				z-index: 1;
				letter-spacing: 1px;
				box-shadow: 0 2px 8px rgba(124, 58, 237, 0.3);
			}

			/* 监控图标 - CSS绘制 */
			.monitor-icon-css {
				width: 64px;
				height: 64px;
				margin: 0 auto 16px;
				border-radius: 18px;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
			}

			/* API 图标 - 地球 */
			.monitor-icon-css.api {
				background: linear-gradient(135deg, #dbeafe, #bfdbfe);
			}

			.monitor-icon-css.api::after {
				content: "";
				width: 32px;
				height: 32px;
				border: 3px solid #4a90d9;
				border-radius: 50%;
				background: radial-gradient(circle at 35% 35%, #4a90d9 3px, transparent 3px);
				box-shadow: 8px 4px 0 -6px #4a90d9;
			}

			/* 端口图标 - 插头 */
			.monitor-icon-css.port {
				background: linear-gradient(135deg, #e0f2e9, #c8e6d0);
			}

			.monitor-icon-css.port::after {
				content: "";
				width: 12px;
				height: 22px;
				border: 3px solid #27ae60;
				border-radius: 4px 4px 0 0;
				border-bottom: none;
				box-shadow: 8px 0 0 -3px #27ae60;
				margin-right: -8px;
			}

			/* SSL 图标 - 锁 */
			.monitor-icon-css.ssl {
				background: linear-gradient(135deg, #fef3e8, #ffe0cc);
			}

			.monitor-icon-css.ssl::after {
				content: "";
				width: 16px;
				height: 14px;
				border: 3px solid #e67e22;
				border-radius: 3px;
				position: relative;
			}

			.monitor-icon-css.ssl::before {
				content: "";
				width: 10px;
				height: 8px;
				border: 3px solid #e67e22;
				border-radius: 6px 6px 0 0;
				border-bottom: none;
				position: absolute;
				top: 12px;
				z-index: 1;
			}

			/* 网站内容图标 - 文档 */
			.monitor-icon-css.content {
				background: linear-gradient(135deg, #e8f0fe, #d4e4fc);
			}

			.monitor-icon-css.content::after {
				content: "";
				width: 18px;
				height: 24px;
				border: 3px solid #4a90d9;
				border-radius: 3px;
				background: linear-gradient(180deg, transparent 20%, #4a90d9 20%, #4a90d9 32%, transparent 32%, transparent 52%, #4a90d9 52%, #4a90d9 64%, transparent 64%, transparent 84%, #4a90d9 84%);
			}

			/* 业务流程图标 - 节点链路 */
			.monitor-icon-css.workflow {
				background: linear-gradient(135deg, #f5f0ff, #ede0ff);
			}

			.monitor-icon-css.workflow::after {
				content: "";
				width: 28px;
				height: 4px;
				background: linear-gradient(90deg, #7c3aed, #a78bfa);
				border-radius: 2px;
				box-shadow: -10px -8px 0 #7c3aed, 10px 8px 0 #a78bfa;
			}

			.monitor-card h3 {
				font-size: 16px;
				margin-bottom: 8px;
				font-weight: 700;
			}

			.monitor-card h3 .vip-icon {
				display: inline-block;
				font-size: 11px;
				background: var(--vip-light);
				color: var(--vip);
				padding: 2px 8px;
				border-radius: 8px;
				margin-left: 6px;
				vertical-align: middle;
				font-weight: 600;
			}

			.monitor-card p {
				font-size: 12.5px;
				color: var(--text-light);
				line-height: 1.6;
			}

			.monitor-tags {
				display: flex;
				flex-wrap: wrap;
				gap: 6px;
				justify-content: center;
				margin-top: 12px;
			}

			.monitor-tag {
				font-size: 10.5px;
				padding: 3px 10px;
				border-radius: 10px;
				background: var(--primary-light);
				color: var(--primary);
				font-weight: 500;
			}

			.monitor-tag.warn {
				background: #fff8e1;
				color: #e67e22;
			}

			.monitor-tag.vip-tag {
				background: var(--vip-light);
				color: var(--vip);
			}

			/* ========== 通知公告 ========== */
			.notice-item {
				display: flex;
				align-items: center;
				padding: 14px 4px;
				border-bottom: 1px solid #f2f4f7;
				cursor: pointer;
				transition: all 0.2s;
				border-radius: 6px;
			}

			.notice-item:last-child {
				border-bottom: none;
			}

			.notice-item:hover {
				background: #fafcfd;
				padding-left: 12px;
			}

			.notice-tag {
				font-size: 11px;
				padding: 3px 10px;
				border-radius: 10px;
				margin-right: 10px;
				font-weight: 600;
				flex-shrink: 0;
			}

			.notice-tag.urgent {
				background: #ffeaea;
				color: var(--danger);
			}

			.notice-tag.important {
				background: #fff8e1;
				color: var(--warning);
			}

			.notice-tag.normal {
				background: var(--primary-light);
				color: var(--primary);
			}

			.notice-tag.new {
				background: var(--vip-light);
				color: var(--vip);
			}

			.notice-text {
				flex: 1;
				font-size: 14px;
			}

			.notice-date {
				color: var(--text-lighter);
				font-size: 12px;
				flex-shrink: 0;
				margin-left: 12px;
			}

			.more-link {
				display: block;
				text-align: right;
				margin-top: 16px;
				color: var(--primary);
				text-decoration: none;
				font-size: 13px;
				font-weight: 600;
				transition: all 0.2s;
			}

			.more-link:hover {
				gap: 4px;
				color: var(--primary-dark);
			}

			/* ========== 通知方式 ========== */
			.notify-cards {
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				gap: 10px;
			}

			.notify-card {
				background: var(--white);
				border-radius: var(--radius-sm);
				padding: 18px 14px;
				text-align: center;
				box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
				transition: all 0.2s;
				border: 2px solid transparent;
			}

			.notify-card.recommended {
				border-color: #d4f0e0;
				background: #f9fdf9;
			}

			.notify-card:hover {
				transform: translateY(-3px);
				box-shadow: 0 6px 16px rgba(0, 0, 0, 0.06);
			}

			/* 通知图标 CSS */
			.notify-icon-css {
				width: 44px;
				height: 44px;
				margin: 0 auto 10px;
				border-radius: 12px;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.notify-icon-css.wecom {
				background: linear-gradient(135deg, #e8f8e8, #d0f0d0);
			}

			.notify-icon-css.wecom::after {
				content: "";
				width: 18px;
				height: 14px;
				background: #27ae60;
				border-radius: 3px;
				box-shadow: 0 -8px 0 #27ae60;
			}

			.notify-icon-css.dingtalk {
				background: linear-gradient(135deg, #e8f0ff, #d0e0ff);
			}

			.notify-icon-css.dingtalk::after {
				content: "";
				width: 20px;
				height: 20px;
				background: #4a90d9;
				border-radius: 50%;
				box-shadow: -6px -6px 0 #4a90d9;
			}

			.notify-icon-css.feishu {
				background: linear-gradient(135deg, #e8f4ff, #d0ecff);
			}

			.notify-icon-css.feishu::after {
				content: "";
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-bottom: 18px solid #3498db;
			}

			.notify-icon-css.email {
				background: linear-gradient(135deg, #fef3e8, #ffe8d4);
			}

			.notify-icon-css.email::after {
				content: "";
				width: 20px;
				height: 14px;
				border: 2.5px solid #e67e22;
				border-radius: 2px;
				clip-path: polygon(0 0, 50% 50%, 100% 0, 100% 100%, 0 100%);
			}

			.notify-card h4 {
				font-size: 14px;
				margin-bottom: 4px;
				font-weight: 600;
			}

			.notify-card .rec-badge {
				display: inline-block;
				background: var(--success);
				color: #fff;
				font-size: 10px;
				padding: 2px 10px;
				border-radius: 8px;
				margin-top: 4px;
				font-weight: 600;
			}

			.notify-card p {
				font-size: 11px;
				color: var(--text-lighter);
				margin-top: 4px;
				line-height: 1.5;
			}

			/* ========== 套餐卡片 ========== */
			.plan-card {
				text-align: center;
				position: relative;
				border: 2px solid #eef2f7;
				transition: all 0.3s;
				padding: 32px 28px;
			}

			.plan-card.featured {
				border-color: var(--primary);
				box-shadow: 0 12px 36px rgba(74, 144, 217, 0.12);
			}

			.plan-card.featured::before {
				content: "推荐";
				position: absolute;
				top: 18px;
				right: -34px;
				background: linear-gradient(135deg, #4a90d9, #357abd);
				color: #fff;
				padding: 4px 40px;
				font-size: 11px;
				font-weight: 700;
				transform: rotate(45deg);
				z-index: 1;
				letter-spacing: 1px;
			}

			.plan-card.vip-plan {
				border-color: #e0d8f0;
				box-shadow: 0 8px 32px rgba(124, 58, 237, 0.08);
			}

			.plan-badge {
				display: inline-block;
				padding: 5px 16px;
				border-radius: 14px;
				font-size: 13px;
				font-weight: 600;
				margin-bottom: 14px;
				letter-spacing: 0.5px;
			}

			.plan-badge.free {
				background: linear-gradient(135deg, #e8f0fe, #dce8fa);
				color: #4a90d9;
			}

			.plan-badge.paid {
				background: linear-gradient(135deg, #fff8e1, #fff3cd);
				color: #e67e22;
			}

			.plan-badge.vip {
				background: linear-gradient(135deg, #f5f0ff, #ede0ff);
				color: #7c3aed;
			}

			.plan-name {
				font-size: 22px;
				font-weight: 700;
				margin-bottom: 6px;
			}

			.plan-desc {
				font-size: 13px;
				color: var(--text-lighter);
				margin-bottom: 18px;
			}

			.plan-price {
				font-size: 40px;
				font-weight: 800;
				color: var(--primary);
				margin-bottom: 4px;
			}

			.plan-price.vip-price {
				color: var(--vip);
				font-size: 20px;
			}

			.plan-price .unit {
				font-size: 15px;
				font-weight: 400;
				color: var(--text-lighter);
			}

			.plan-features {
				list-style: none;
				text-align: left;
				margin: 22px 0;
				padding: 0;
			}

			.plan-features li {
				padding: 8px 0;
				font-size: 13.5px;
				color: var(--text-light);
				border-bottom: 1px solid #f6f8fa;
			}

			.plan-features li::before {
				content: "";
				display: inline-block;
				width: 6px;
				height: 6px;
				border-radius: 50%;
				background: var(--success);
				margin-right: 10px;
				vertical-align: middle;
			}

			.plan-features li.vip-feature::before {
				background: var(--vip);
			}

			.plan-features li:last-child {
				border-bottom: none;
			}

			.btn-plan {
				display: block;
				width: 100%;
				padding: 13px;
				border-radius: 10px;
				font-size: 14px;
				font-weight: 600;
				text-decoration: none;
				cursor: pointer;
				border: none;
				transition: all 0.25s;
				text-align: center;
				letter-spacing: 0.5px;
			}

			.btn-plan-primary {
				background: var(--primary);
				color: #fff;
				box-shadow: 0 4px 16px rgba(74, 144, 217, 0.3);
			}

			.btn-plan-primary:hover {
				background: var(--primary-dark);
				box-shadow: 0 6px 22px rgba(74, 144, 217, 0.45);
				transform: translateY(-2px);
			}

			.btn-plan-outline {
				background: transparent;
				border: 2px solid #dce4f0;
				color: var(--text);
			}

			.btn-plan-outline:hover {
				border-color: var(--primary);
				color: var(--primary);
				background: #fafcfd;
			}

			.btn-plan-vip {
				background: var(--vip);
				color: #fff;
				box-shadow: 0 4px 16px rgba(124, 58, 237, 0.3);
			}

			.btn-plan-vip:hover {
				background: var(--vip-dark);
				box-shadow: 0 6px 22px rgba(124, 58, 237, 0.45);
				transform: translateY(-2px);
			}

			/* ========== 业务流程亮点 ========== */
			.workflow-highlight {
				background: linear-gradient(135deg, #faf8ff 0%, #f3f0ff 100%);
				border: 2px solid #e8dff8;
				border-radius: var(--radius);
				padding: 32px;
				text-align: center;
			}

			.workflow-highlight h3 {
				color: var(--vip);
				font-size: 20px;
				margin-bottom: 10px;
				font-weight: 700;
			}

			.workflow-highlight>p {
				color: var(--text-light);
				font-size: 14px;
				margin-bottom: 20px;
			}

			.workflow-steps {
				display: flex;
				justify-content: center;
				align-items: center;
				gap: 6px;
				flex-wrap: wrap;
			}

			.workflow-step {
				background: var(--white);
				border-radius: 10px;
				padding: 14px 20px;
				font-size: 13px;
				font-weight: 600;
				color: var(--vip);
				box-shadow: 0 2px 8px rgba(124, 58, 237, 0.06);
				border: 1px solid #ede0ff;
				display: flex;
				align-items: center;
				gap: 8px;
			}

			.workflow-step-icon {
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: var(--vip);
				box-shadow: 0 0 8px rgba(124, 58, 237, 0.4);
				animation: dotPulse 2s ease-in-out infinite;
			}

			.workflow-arrow {
				color: #b8a0e0;
				font-size: 18px;
				font-weight: bold;
			}

			/* ========== 对比表格 ========== */
			.compare-table-wrap {
				overflow-x: auto;
				margin-bottom: 40px;
				border-radius: var(--radius);
				box-shadow: var(--shadow);
			}

			.compare-table {
				width: 100%;
				border-collapse: collapse;
				background: var(--white);
			}

			.compare-table th,
			.compare-table td {
				padding: 15px 20px;
				text-align: center;
				font-size: 13.5px;
			}

			.compare-table thead th {
				background: #f8fafc;
				font-weight: 700;
				color: var(--text);
				border-bottom: 2px solid #eef2f7;
				font-size: 14px;
			}

			.compare-table tbody td {
				border-bottom: 1px solid #f4f6f9;
				color: var(--text-light);
			}

			.compare-table tbody tr:hover {
				background: #fbfdfe;
			}

			.compare-table .col-label {
				text-align: left;
				font-weight: 600;
				color: var(--text);
				width: 24%;
			}

			.badge-yes {
				color: var(--success);
				font-weight: 700;
			}

			.badge-no {
				color: #d0d5db;
			}

			.badge-vip {
				color: var(--vip);
				font-weight: 700;
			}

			/* ========== 提示框 ========== */
			.alert {
				padding: 18px 22px;
				border-radius: var(--radius-sm);
				margin-bottom: 24px;
				font-size: 14px;
				line-height: 1.8;
			}

			.alert-info {
				background: #f0f7ff;
				border-left: 4px solid var(--primary);
				color: #2c5f8a;
			}

			.alert-warning {
				background: #fffdf5;
				border-left: 4px solid var(--warning);
				color: #7a6218;
			}

			.alert-vip {
				background: #fdfbff;
				border-left: 4px solid var(--vip);
				color: #4a2d80;
			}

			/* ========== 底部 ========== */
			.footer {
				background: var(--white);
				text-align: center;
				padding: 30px;
				color: var(--text-lighter);
				font-size: 13px;
				margin-top: 52px;
				box-shadow: 0 -1px 0 rgba(0, 0, 0, 0.03);
				line-height: 2;
				border-top: 1px solid #f0f3f6;
			}

			.footer a {
				color: var(--primary);
				text-decoration: none;
				font-weight: 500;
			}

			.footer a:hover {
				text-decoration: underline;
			}

			/* ========== 响应式 ========== */
			@media (max-width: 1100px) {
				.card-grid-5 {
					grid-template-columns: repeat(3, 1fr);
				}

				.stats-bar {
					grid-template-columns: repeat(3, 1fr);
				}

				.hero-radar {
					display: none;
				}
			}

			@media (max-width: 768px) {

				.card-grid-2,
				.card-grid-3,
				.card-grid-5 {
					grid-template-columns: 1fr 1fr;
				}

				.stats-bar {
					grid-template-columns: 1fr 1fr;
				}

				.notify-cards {
					grid-template-columns: 1fr 1fr;
				}

				.hero {
					padding: 36px 28px;
				}

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

				.workflow-steps {
					flex-direction: column;
					gap: 4px;
				}

				.workflow-arrow {
					transform: rotate(90deg);
				}
			}

			.logo-icon {
				height: 60px;
				width: 60px;
				margin-top: 8px;
				margin-right: -15px;
			}

			@media (max-width: 500px) {

				.card-grid-2,
				.card-grid-3,
				.card-grid-5 {
					grid-template-columns: 1fr;
				}

				.nav-links li:not(:last-child) {
					display: none;
				}

				.hero-content {
					text-align: center;
				}

				.hero-buttons {
					justify-content: center;
				}
			}