/* =========================================
MIGRATED CSS FROM MOBILE (REM -> PX)
Base Scale: 1rem = 100px
========================================= */

/* Global Resets & Base Styles */:root { --primary: #00bfa5; --primary-bg: #e0f2f1; --text-main: #111827; --text-sub: #4b5563; }
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; outline: none; }
body { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; background-color: #f3f4f6; color: var(--text-main); line-height: 1.5; font-size: 28px; /* 0.28rem */ overflow-x: hidden; }

/* Navbar 对齐修复 */
.navbar { display: flex; align-items: center; }
.navbar .container { max-width: 1200px; width: 100%; height: 100%; display: flex; align-items: center; }
.navbar .btn-shiyong { margin-top: 0; height: 40px; line-height: 1; }

/* Hero 区域修复 */
.hero-tech-tcm { background: linear-gradient(rgb(224, 242, 241) 0%, rgb(255, 255, 255) 100%); }
.hero-tech-tcm .hero-text { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.hero-tech-tcm .hero-right-content { width: 100%; }
.hero-tech-tcm .data-bar-right { display: flex; align-items: center; gap: 12px; margin-top: 18px; width: 100%; max-width: 560px; }
.hero-tech-tcm .data-bar-right .data-card { padding: 14px 10px; border-radius: 10px; box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05); }
.hero-tech-tcm .data-bar-right .data-card .num { font-size: 20px; margin-bottom: 4px; }
.hero-tech-tcm .data-bar-right .data-card .lbl { font-size: 12px; font-weight: 600; }
.hero-tech-tcm .tag-row { display: flex; align-items: center; justify-content: flex-start; gap: 10px; margin-bottom: 14px; opacity: 1; animation: none; width: 100%; }
.hero-tech-tcm .tag-badge { font-size: 12px; line-height: 1; padding: 6px 10px; border-radius: 6px; white-space: nowrap; }
.hero-tech-tcm .tag-text { font-size: 13px; line-height: 1.2; color: #64748b; font-weight: 600; white-space: nowrap; }
.hero-tech-tcm .hero-title { font-size: clamp(36px, 3.6vw, 48px); line-height: 1.12; letter-spacing: -0.6px; margin-bottom: 14px; }
.hero-tech-tcm .hero-title .hero-title-main { display: inline-block; white-space: nowrap; }
.hero-tech-tcm .hero-title .text-gradient { display: inline-block; font-size: 0.88em; white-space: nowrap; }
.hero-tech-tcm .hero-desc { font-size: 16px; line-height: 1.65; margin-bottom: 26px; max-width: 680px; }
.hero-tech-tcm .btn-group { display: flex; align-items: center; gap: 16px; }
.hero-tech-tcm .btn-link { font-size: 14px; font-weight: 600; color: #1e293b; display: inline-flex; align-items: center; gap: 8px; }
.hero-tech-tcm .btn-link .play-icon { width: 24px; height: 24px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; border: 1px solid #cbd5e1; background: #fff; color: #0f172a; box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08); }
.hero-tech-tcm .hero-image-wrapper { position: relative; border-radius: 16px; overflow: hidden; }
.hero-tech-tcm .play-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(15, 23, 42, 0.1); transition: background 0.24s ease; border-radius: inherit; z-index: 2; }
.hero-tech-tcm .hero-image-wrapper:hover .play-overlay { background: rgba(15, 23, 42, 0.18); }
.hero-tech-tcm .play-circle { width: 62px; height: 62px; border-radius: 50%; background: rgba(255, 255, 255, 0.94); display: flex; align-items: center; justify-content: center; box-shadow: 0 10px 24px rgba(15, 23, 42, 0.16); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); transition: transform 0.24s ease; }
.hero-tech-tcm .hero-image-wrapper:hover .play-circle { transform: scale(1.06); }
.hero-tech-tcm .play-triangle { font-size: 22px; color: #0f766e; line-height: 1; margin-left: 3px; }
.video-modal { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; background: rgba(2, 6, 23, 0.82); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); opacity: 0; transition: opacity 0.28s ease; }
.video-modal.show { display: flex; opacity: 1; }
.video-modal-content { position: relative; width: min(90vw, 420px); height: min(80vh, 760px); background: #000; border-radius: 16px; overflow: hidden; box-shadow: 0 24px 60px rgba(2, 6, 23, 0.5); transform: scale(0.96); transition: transform 0.28s ease; }
.video-modal.show .video-modal-content { transform: scale(1); }
.video-close-btn { position: absolute; top: -40px; right: 0; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, 0.92); font-size: 28px; line-height: 1; cursor: pointer; background: rgba(15, 23, 42, 0.45); border: 1px solid rgba(255, 255, 255, 0.2); transition: background 0.2s ease, transform 0.2s ease; }
.video-close-btn:hover { background: rgba(15, 23, 42, 0.72); transform: scale(1.05); }

@media (max-width:768px) {
	.hero-tech-tcm .hero-text { align-items: center; text-align: center; }
	.hero-tech-tcm { background: linear-gradient(rgb(224, 242, 241) 0%, rgb(255, 255, 255) 100%); }
	.hero-tech-tcm .data-bar-right { gap: 8px; margin-top: 14px; max-width: 100%; }
	.hero-tech-tcm .data-bar-right .data-card { padding: 12px 8px; }
	.hero-tech-tcm .data-bar-right .data-card .num { font-size: 18px; }
	.hero-tech-tcm .data-bar-right .data-card .lbl { font-size: 11px; }
	.hero-tech-tcm .tag-row { justify-content: center; flex-wrap: wrap; }
	.hero-tech-tcm .tag-text { white-space: normal; }
	.hero-tech-tcm .hero-title { font-size: 30px; line-height: 1.15; }
	.hero-tech-tcm .hero-title .hero-title-main { white-space: normal; }
	.hero-tech-tcm .hero-title .text-gradient { white-space: normal; font-size: 0.9em; }
	.hero-tech-tcm .btn-link { font-size: 13px; }
	.hero-tech-tcm .play-circle { width: 54px; height: 54px; }
	.hero-tech-tcm .play-triangle { font-size: 19px; }
	.video-modal-content { width: 100vw; height: 100vh; max-width: 100vw; max-height: 100vh; border-radius: 0; }
	.video-close-btn { top: 18px; right: 18px; width: 36px; height: 36px; font-size: 24px; z-index: 3; }
}

/* 核心价值模块 (Mobile First - Immersive Design) */
.section-values { padding: 120px 32px; /* 1.2rem 0.32rem */ background: #ffffff; position: relative; overflow: hidden; }

/* 增加底部波浪分割 */
.section-values::after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 80px; /* 0.8rem */ background: linear-gradient(180deg, transparent 0%, rgba(248, 250, 252, 1) 100%); pointer-events: none; }

/* 背景装饰 */
.section-values::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: radial-gradient(circle at 100% 0%, rgba(0, 191, 165, 0.05) 0%, transparent 40%), radial-gradient(circle at 0% 100%, rgba(124, 58, 237, 0.05) 0%, transparent 40%); pointer-events: none; }
.values-header { margin-bottom: 80px; /* 0.8rem */ padding: 0 16px; /* 0 0.16rem */ text-align: center; }
.section-tag { display: inline-block; font-size: 24px; /* 0.24rem */ color: var(--primary); font-weight: 700; margin-bottom: 24px; /* 0.24rem */ letter-spacing: 1px; text-transform: uppercase; background: rgba(0, 191, 165, 0.1); padding: 8px 20px; /* 0.08rem 0.2rem */ border-radius: 8px; /* 0.08rem */ }
.section-title { font-size: 56px; /* 0.56rem */ font-weight: 800; color: var(--text-main); line-height: 1.3; margin-bottom: 32px; /* 0.32rem */ }
.section-title span { display: block; font-size: 36px; /* 0.36rem */ font-weight: 600; color: var(--text-sub); margin-top: 16px; /* 0.16rem */ opacity: 0.8; }
.values-list { display: flex; flex-direction: column; gap: 80px; /* 0.8rem */ max-width: 800px; margin: 0 auto; }
.v-card { position: relative; border-radius: 48px; /* 0.48rem */ overflow: hidden; box-shadow: 0 40px 120px rgba(0, 0, 0, 0.08); /* 0.4rem 1.2rem */ background: #fff; transform: translateZ(0); transition: transform 0.3s; }
.v-card:hover { transform: translateY(-5px); }

/* 卡片头部 */
.v-card-header { padding: 64px 56px 40px; /* 0.64rem 0.56rem 0.4rem */ position: relative; z-index: 2; }
.v-step { font-size: 120px; /* 1.2rem */ font-weight: 900; position: absolute; top: 20px; /* 0.2rem */ right: 40px; /* 0.4rem */ opacity: 0.06; font-family: "Arial", sans-serif; line-height: 1; pointer-events: none; }
.v-icon-wrapper { width: 100px; /* 1rem */ height: 100px; /* 1rem */ border-radius: 24px; /* 0.24rem */ display: flex; align-items: center; justify-content: center; margin-bottom: 40px; /* 0.4rem */ font-size: 48px; /* 0.48rem */ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); /* 0.1rem 0.3rem */ }
.v-card-title { font-size: 44px; /* 0.44rem */ font-weight: 800; color: var(--text-main); margin-bottom: 24px; /* 0.24rem */ line-height: 1.2; }
.v-card-desc { font-size: 30px; /* 0.3rem */ color: var(--text-sub); line-height: 1.6; opacity: 0.9; font-weight: 400; }

/* 卡片底部：媒体演示区 */
.v-card-media { position: relative; height: 480px; /* 4.8rem */ width: 100%; overflow: hidden; margin-top: 20px; /* 0.2rem */ display: flex; align-items: flex-end; justify-content: center; padding-bottom: 0; }

/* 玻璃拟态视窗 */
.mock-window { width: 85%; height: 90%; background: rgba(255, 255, 255, 0.9); border-radius: 24px 24px 0 0; /* 0.24rem */ box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.12); /* -0.2rem 0.6rem */ display: flex; flex-direction: column; position: relative; backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.6); overflow: hidden; }
.mock-header { height: 48px; /* 0.48rem */ background: rgba(241, 245, 249, 0.8); border-bottom: 1px solid rgba(226, 232, 240, 0.8); display: flex; align-items: center; padding: 0 20px; /* 0.2rem */ gap: 10px; /* 0.1rem */ }
.mock-dot { width: 14px; /* 0.14rem */ height: 14px; /* 0.14rem */ border-radius: 50%; background: #cbd5e1; }
.mock-dot.active { background: #94a3b8; }
.mock-body { flex: 1; padding: 32px; /* 0.32rem */ position: relative; background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%); }
.header-left { display: flex; align-items: center; gap: 0.12rem; }
.header-title { font-size: 0.2rem; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 0.08rem; }
.header-status { font-size: 0.16rem; padding: 0.02rem 0.06rem; background: #e0f2fe; color: #0284c7; border-radius: 0.06rem; font-weight: 600; }
.header-dots { display: flex; gap: 0.06rem; }
.dot { width: 0.1rem; height: 0.1rem; border-radius: 50%; }
.dot.red { background: #ff5f57; border: 1px solid #e0443e; }
.dot.yellow { background: #ffbd2e; border: 1px solid #dea123; }
.dot.green { background: #28c840; border: 1px solid #1aab29; }

/* Card 1: 绿色/标准 */
.card-style-1 { background: linear-gradient(160deg, #f0fdfa 0%, #ffffff 60%); }
.card-style-1 .v-icon-wrapper { background: #ccfbf1; color: #0f766e; }
.card-style-1 .v-step { color: #0f766e; }
.card-style-1 .mock-window { border-top: 4px solid #0d9488; }

/* Card 2: 紫色/数据 */
.card-style-2 { background: linear-gradient(160deg, #f5f3ff 0%, #ffffff 60%); }
.card-style-2 .v-icon-wrapper { background: #ddd6fe; color: #7c3aed; }
.card-style-2 .v-step { color: #7c3aed; }
.card-style-2 .mock-window { border-top: 4px solid #7c3aed; }

/* Card 3: 橙色/满意度 */
.card-style-3 { background: linear-gradient(160deg, #fff7ed 0%, #ffffff 60%); }
.card-style-3 .v-icon-wrapper { background: #ffedd5; color: #c2410c; }
.card-style-3 .v-step { color: #c2410c; }
.card-style-3 .mock-window { border-top: 4px solid #f97316; }

/* =========================================
安全防线模块 (Risk Control & Safety)
========================================= */
.section-safety { padding: 120px 32px; /* 1.2rem 0.32rem */ background: #f1f5f9; position: relative; overflow: hidden; clip-path: polygon(0 0, 100% 5px, 100% 100%, 0 100%); margin-top: -5px; }
.section-safety::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 20px; /* 0.2rem */ background: linear-gradient(180deg, rgba(0, 0, 0, 0.03) 0%, transparent 100%); pointer-events: none; }

/* Card 4: 红色/禁忌拦截 */
.card-style-4 { background: linear-gradient(160deg, #fef2f2 0%, #ffffff 60%); }
.card-style-4 .v-icon-wrapper { background: #fee2e2; color: #ef4444; }
.card-style-4 .v-step { color: #ef4444; }
.card-style-4 .mock-window { width: 85%; max-width: 640px; /* 6.4rem */ height: 90%; margin: 0 auto; background: rgba(255, 255, 255, 0.95); border-radius: 16px; /* 0.16rem */ box-shadow: 0 40px 120px rgba(239, 68, 68, 0.15); display: flex !important; flex-direction: column !important; overflow: hidden; border-top: 6px solid #ef4444; backdrop-filter: blur(10px); }
.card-style-4 .window-header { height: 48px; min-height: 48px; padding: 0 16px; background: #ffffff !important; border-bottom: 1px solid #f1f5f9; display: flex; align-items: center; justify-content: space-between; z-index: 10; position: relative; flex-shrink: 0; }
.card-style-4 .header-left, .card-style-4 .header-dots { display: flex; align-items: center; gap: 8px; }
.card-style-4 .header-title { font-size: 20px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 8px; }
.card-style-4 .dot { width: 10px; height: 10px; border-radius: 50%; }
.card-style-4 .dot.red { background: #ff5f57; }
.card-style-4 .dot.yellow { background: #ffbd2e; }
.card-style-4 .dot.green { background: #28c840; }
.card-style-4 .window-content { flex: 1; display: flex; flex-direction: column; padding: 0; background: #f8fafc; overflow: hidden; position: relative; z-index: 1; }

/* 浮动装饰球 */
.v-blob { position: absolute; border-radius: 50%; filter: blur(40px); z-index: 1; opacity: 0.5; pointer-events: none; }
.blob-1 { width: 300px; height: 300px; background: rgba(13, 148, 136, 0.2); top: -100px; right: -100px; }
.blob-2 { width: 300px; height: 300px; background: rgba(124, 58, 237, 0.2); bottom: -100px; left: -100px; }

/* Desktop Adaptation Overrides */
@media (min-width:768px) {
	.values-list { max-width: 1000px; margin: 0 auto; }
	.v-card-media { height: 500px; }
}

/* =========================================
Bento Style News Hub (Aurora & Glass)
========================================= */
.section-news-hub { position: relative; padding: 100px 0 120px; background: #F8FAFC; overflow: hidden; }

        /* Aurora Background Animation */
.section-news-hub::before, .section-news-hub::after { content: ''; position: absolute; width: 600px; height: 600px; border-radius: 50%; filter: blur(80px); opacity: 0.4; z-index: 0; animation: auroraMove 20s infinite alternate; }
.section-news-hub::before { background: #4FD1C5; /* Teal */ top: -10%; left: -10%; }
.section-news-hub::after { background: #818CF8; /* Indigo */ bottom: -10%; right: -10%; animation-delay: -5s; }
@keyframes auroraMove {
	0% { transform: translate(0, 0) scale(1); }
	100% { transform: translate(100px, 50px) scale(1.1); }
}
.hub-container { position: relative; z-index: 2; max-width: 1200px; margin: 0 auto; padding: 0 24px; }

        /* Header */
.hub-header { text-align: center; margin-bottom: 60px; }
.hub-header h2 { font-size: 36px; font-weight: 800; color: #1E293B; margin-bottom: 16px; letter-spacing: -0.5px; }
.hub-header p { font-size: 16px; color: #64748B; max-width: 600px; margin: 0 auto; }

        /* Bento Grid */
.hub-bento-grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-template-rows: auto; gap: 24px; }

        /* Glass Card Common Styles */
.bento-card { background: rgba(255, 255, 255, 0.65); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 24px; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.02), 0 10px 15px -3px rgba(0, 0, 0, 0.03), inset 0 0 0 1px rgba(255, 255, 255, 0.5); padding: 24px; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); display: flex; flex-direction: column; overflow: hidden; }
.bento-card:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.05), 0 8px 10px -6px rgba(0, 0, 0, 0.01);            /* background: rgba(255, 255, 255, 0.85); */ }

        /* Card Specific Layouts */
.card-policy { grid-column: span 4; }
.card-news { grid-column: span 4; }
.card-know { grid-column: span 4; }

        /* Card 2.2: Insurance Audit */
.audit-scene-v2 { position: relative; width: 100%; height: 100%; background: #f8fafc; padding: 12px; box-sizing: border-box; display: flex; flex-direction: column; overflow: hidden; }
.scene-exec { animation: exec-fade 10s infinite; width: 100%; height: 100%; position: absolute; top: 0; left: 0; padding: 12px; box-sizing: border-box; }
.scene-pop { animation: pop-show 10s infinite; display: flex; align-items: center; justify-content: center; z-index: 20; background: rgba(0, 0, 0, 0.1); backdrop-filter: blur(2px); position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
@keyframes exec-fade {
	0%, 30% { opacity: 1; filter: blur(0); }
	35% { opacity: 1; filter: blur(2px); }
	90% { opacity: 1; filter: blur(2px); }
	95%, 100% { opacity: 1; filter: blur(0); }
}
@keyframes pop-show {
	0%, 30% { opacity: 0; transform: scale(0.9); visibility: hidden; }
	32% { opacity: 1; transform: scale(1.05); visibility: visible; }
	35% { transform: scale(1); }
	88% { opacity: 1; transform: scale(1); }
	90%, 100% { opacity: 0; transform: scale(0.9); visibility: hidden; }
}
.exec-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 12px; box-shadow: 0 4px 12px rgba(0, 190, 219, 0.05); margin-top: 16px; }
.exec-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; padding-bottom: 6px; border-bottom: 1px solid #f1f5f9; }
.exec-title { font-size: 13px; font-weight: 700; color: #0f172a; }
.exec-tag { background: #e0f2fe; color: #00bedb; font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.exec-info { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.exec-icon { width: 32px; height: 32px; background: #e0f2fe; color: #00bedb; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.exec-detail h4 { margin: 0; font-size: 12px; color: #334155; font-weight: 600; }
.exec-detail p { margin: 0; font-size: 10px; color: #64748b; margin-top: 2px; }
.exec-btn-primary { width: 100%; background: #00bedb; color: #fff; border: none; padding: 8px; border-radius: 6px; font-size: 12px; font-weight: 600; cursor: pointer; box-shadow: 0 4px 10px rgba(0, 190, 219, 0.2); display: flex; justify-content: center; align-items: center; gap: 6px; }
.hand-cursor-3 { position: absolute; width: 24px; height: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.9 19.3L4.8 12.2a2.3 2.3 0 0 1 0-3.3l.9-.9a2.3 2.3 0 0 1 3.3 0l2.3 2.3V3.5a1.5 1.5 0 0 1 3 0v4h.5a1.5 1.5 0 0 1 1.5 1.5v.5l-2.2 9.8h-2.2z' fill='%23fff'/%3E%3C/svg%3E%3C/svg%3E"); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); z-index: 10; bottom: 20px; right: 30px; opacity: 0; animation: click-anim-3 10s infinite; }
@keyframes click-anim-3 {
	0% { opacity: 0; transform: translate(20px, 20px); }
	15% { opacity: 1; transform: translate(20px, 20px); }
	25% { transform: translate(-60px, -40px); }
	
	 /* To Button */
	28% { transform: translate(-60px, -40px) scale(0.9); }
	
	 /* Click */
	32% { transform: translate(-60px, -40px) scale(1); opacity: 1; }
	35%, 100% { opacity: 0; }
}
.ins-modal { width: 90%; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 8px 24px rgba(0, 190, 219, 0.25); border: 1px solid #cffafe; animation: bounceIn 0.5s; }
.ins-header { background: #ecfeff; padding: 10px 12px; display: flex; align-items: center; gap: 6px; color: #00bedb; font-weight: 700; font-size: 12px; border-bottom: 1px solid #cffafe; }
.ins-body { padding: 16px 12px; text-align: center; }
.ins-icon { font-size: 28px; color: #f59e0b; margin-bottom: 8px; display: inline-block; animation: warn-pulse 2s infinite; }
.ins-text { font-size: 11px; color: #334155; line-height: 1.5; }
.ins-highlight { color: #00bedb; font-weight: 700; background: #ecfeff; padding: 0 4px; border-radius: 4px; }

/* Card 2.3: SOP Standard */
.auth-section { background: #fff; border: 1px solid #e0e7ff; border-radius: 8px; padding: 12px; display: flex; flex-direction: column; align-items: center; position: relative; overflow: hidden; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.05); margin-bottom: 8px; }
.scan-line { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #6366f1; box-shadow: 0 0 8px #6366f1; animation: scan-down 3s infinite; opacity: 0.8; z-index: 5; }
@keyframes scan-down {
	0% { top: -10%; opacity: 0; }
	10% { opacity: 1; }
	90% { top: 110%; opacity: 1; }
	100% { top: 110%; opacity: 0; }
}
.user-avatar { width: 40px; height: 40px; background: #e0e7ff; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #6366f1; margin-bottom: 6px; }
.auth-info { text-align: center; margin-bottom: 6px; }
.auth-name { font-size: 13px; font-weight: 700; color: #1e293b; }
.auth-role { font-size: 10px; color: #64748b; }
.auth-badge { display: flex; align-items: center; gap: 4px; background: #ecfdf5; color: #10b981; font-size: 10px; padding: 2px 8px; border-radius: 12px; font-weight: 600; border: 1px solid #d1fae5; }
.flow-connector { height: 16px; display: flex; align-items: center; justify-content: center; position: relative; margin: 4px 0; }
.flow-line-bg { position: absolute; width: 2px; height: 100%; background: #e2e8f0; }
.flow-arrow { width: 16px; height: 16px; background: #fff; border: 1px solid #e2e8f0; border-radius: 50%; z-index: 2; display: flex; align-items: center; justify-content: center; color: #94a3b8; font-size: 10px; }
.perm-section { background: #fff; border: 1px solid #e0e7ff; border-radius: 8px; padding: 12px; flex: 1; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 2px 8px rgba(99, 102, 241, 0.05); overflow: hidden; }
.section-header { display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #64748b; font-weight: 600; padding-bottom: 6px; border-bottom: 1px solid #f1f5f9; }
.header-tag { background: #e0e7ff; color: #6366f1; padding: 1px 6px; border-radius: 4px; font-size: 9px; }
.tech-block { display: flex; align-items: center; gap: 8px; padding: 8px; border-radius: 6px; background: #f8fafc; border: 1px solid #f1f5f9; transition: all 0.3s; opacity: 0; animation: slide-in-right 0.5s forwards; }
.tech-block:nth-child(2) { animation-delay: 0.2s; }
.tech-block:nth-child(3) { animation-delay: 0.4s; }
.tech-block:nth-child(4) { animation-delay: 0.6s; }
@keyframes slide-in-right {
	from { opacity: 0; transform: translateX(20px); }
	to { opacity: 1; transform: translateX(0); }
}
.tech-block.active { border-color: #c7d2fe; background: #eef2ff; }
.tech-icon { width: 24px; height: 24px; background: #fff; border-radius: 6px; display: flex; align-items: center; justify-content: center; color: #6366f1; font-size: 14px; border: 1px solid #e0e7ff; }
.tech-content { flex: 1; }
.tech-title { font-size: 12px; font-weight: 700; color: #1e293b; }
.tech-desc { font-size: 9px; color: #64748b; }
.tech-status { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; font-size: 14px; }

/* Responsive */
@media (max-width:1024px) {
	.card-policy { grid-column: span 6; }
	.card-news { grid-column: span 6; }
	.card-know { grid-column: span 12; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
}
@media (max-width:768px) {
	.hub-bento-grid { display: flex; flex-direction: column; }
	.card-know { display: flex; flex-direction: column; }
}

        /* Card Header */
.bento-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; padding-bottom: 16px; border-bottom: 1px solid rgba(0, 0, 0, 0.04); }
.bh-title { font-size: 18px; font-weight: 700; color: #334155; display: flex; align-items: center; gap: 10px; }
.bh-more { font-size: 13px; color: #94A3B8; font-weight: 500; display: flex; align-items: center; gap: 4px; transition: color 0.2s; }
.bh-more:hover { color: var(--primary); }

        /* Policy Content */
.policy-hero { background: linear-gradient(135deg, var(--primary) 0%, #00796B 100%); border-radius: 16px; padding: 20px; color: #fff; margin-bottom: 16px; position: relative; overflow: hidden; flex-shrink: 0; }
.policy-hero::after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: radial-gradient(circle at top right, rgba(255, 255, 255, 0.2), transparent 70%); }
.ph-badge { display: inline-block; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(4px); font-size: 11px; padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; }
.ph-title { font-size: 16px; font-weight: 600; line-height: 1.5; margin-bottom: 8px; display: block; color: #fff; }
.ph-date { font-size: 12px; opacity: 0.8; }
.policy-list { display: flex; flex-direction: column; gap: 8px; flex: 1; justify-content: space-between; }
.pl-item { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 12px; transition: background 0.2s; color: #475569; }
.pl-item:hover { background: rgba(255, 255, 255, 0.5); color: var(--primary); }
.pl-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: #F1F5F9; border-radius: 8px; color: #64748B; font-size: 16px; }
.pl-text { flex: 1; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-date { font-size: 12px; color: #94A3B8; }

        /* News Feed */
.news-stack { display: flex; flex-direction: column; gap: 12px; flex: 1; justify-content: space-between; }
.ns-item { display: flex; gap: 16px; padding-bottom: 12px; border-bottom: 1px dashed rgba(0, 0, 0, 0.05); align-items: center; }
.ns-item:last-child { border-bottom: none; padding-bottom: 0; }
.ns-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 50px; height: 54px; background: #F8FAFC; border-radius: 12px; border: 1px solid #E2E8F0; flex-shrink: 0; }
.ns-d-day { font-size: 18px; font-weight: 700; color: #334155; line-height: 1; }
.ns-d-mo { font-size: 10px; color: #94A3B8; text-transform: uppercase; margin-top: 2px; }
.ns-info { flex: 1; min-width: 0; }
.ns-title { display: block; font-size: 15px; font-weight: 600; color: #334155; margin-bottom: 6px;            /* white-space: nowrap;
	overflow: hidden;
text-overflow: ellipsis; */ }
.ns-desc { font-size: 13px; color: #64748B; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

        /* Knowledge List */
.know-grid { display: flex; flex-direction: column; gap: 12px; flex: 1; justify-content: space-between; }
.kg-item { display: flex; align-items: center; gap: 14px; background: #FFF7ED; border: 1px solid #FFEDD5; border-radius: 12px; padding: 12px 16px; transition: all 0.3s; }
.kg-item:hover { background: #FFF; border-color: #FDBA74; transform: translateX(4px); box-shadow: 0 4px 12px rgba(249, 115, 22, 0.1); }
.kg-icon { width: 38px; height: 38px; background: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; color: #F97316; flex-shrink: 0; box-shadow: 0 2px 4px rgba(249, 115, 22, 0.1); }
.kg-icon iconify-icon { font-size: 20px; }
.kg-content { flex: 1; min-width: 0; display: flex; flex-direction: column; justify-content: center; }
.kg-title { font-size: 14px; font-weight: 600; color: #431407; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-bottom: 4px; }
.kg-tag { font-size: 10px; color: #9A3412; background: rgba(249, 115, 22, 0.1); padding: 2px 6px; border-radius: 4px; display: inline-block; width: fit-content; }
.hub-col-card:hover { transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); border-color: rgba(0, 150, 136, 0.2); }

        /* 卡片头部 */
.col-head { padding: 20px 24px; border-bottom: 1px solid #F8FAFC; display: flex; justify-content: space-between; align-items: center; }
.col-title { font-size: 18px; font-weight: 700; color: #1E293B; display: flex; align-items: center; gap: 8px; }
.col-more { font-size: 13px; color: #94A3B8; font-weight: 500; display: flex; align-items: center; gap: 4px; transition: color 0.2s; text-decoration: none; }
.col-more:hover { color: #009688; }

        /* --- Column 1: Policy (政策) --- */
.policy-featured-item { background: linear-gradient(135deg, #009688 0%, #00796B 100%); padding: 24px; color: #fff; position: relative; }
.pf-badge { position: absolute; top: 20px; right: 20px; background: rgba(255, 255, 255, 0.2); backdrop-filter: blur(4px); padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 600; color: #fff; }
.pf-meta { font-size: 13px; opacity: 0.8; margin-top: 10px; font-family: monospace; color: rgba(255, 255, 255, 0.9); }
.pf-link { font-size: 18px; font-weight: 700; line-height: 1.5; display: block; color: #fff; margin-bottom: 0; text-decoration: none; }
.pf-link:hover { text-decoration: underline; }
.policy-simple-list { padding: 10px 0; }
.ps-item { display: flex; align-items: center; gap: 12px; padding: 14px 24px; color: #475569; border-bottom: 1px dashed #F1F5F9; transition: 0.2s; text-decoration: none; }
.ps-item:last-child { border-bottom: none; }
.ps-item:hover { background: #F8FAFC; color: #009688; }
.ps-icon { color: #CBD5E1; font-size: 18px; flex-shrink: 0; }
.ps-item:hover .ps-icon { color: #009688; }
.ps-title { font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; flex: 1; }
.ps-date { font-size: 12px; color: #94A3B8; font-family: monospace; flex-shrink: 0; }

        /* --- Column 2: News (动态) --- */
.news-feed { padding: 10px 24px; }
.nf-item { display: flex; gap: 16px; padding: 20px 0; border-bottom: 1px solid #F1F5F9; }
.nf-item:last-child { border-bottom: none; }
.nf-date { text-align: center; background: #F8FAFC; border-radius: 8px; padding: 8px 12px; min-width: 64px; height: fit-content; flex-shrink: 0; }
.nf-d-day { font-size: 20px; font-weight: 700; color: #1E293B; line-height: 1; }
.nf-d-ym { font-size: 12px; color: #94A3B8; margin-top: 4px; }
.nf-content { flex: 1; min-width: 0; }
.nf-title { font-size: 16px; font-weight: 600; color: #1E293B; margin-bottom: 8px; line-height: 1.4; display: block; transition: 0.2s; text-decoration: none; }
.nf-title:hover { color: #009688; }
.nf-desc { font-size: 14px; color: #64748B; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

        /* --- Column 3: Knowledge (知识) --- */
.knowledge-card { background: #F0FDF4; /* 浅绿色背景 */ border-color: #DCFCE7; }
.knowledge-stack { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ks-item { background: #fff; border-radius: 12px; padding: 16px; display: flex; align-items: center; gap: 12px; box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03); transition: 0.2s; text-decoration: none; }
.ks-item:hover { transform: translateX(-3px); box-shadow: 0 4px 12px rgba(0, 150, 136, 0.1); }
.ks-icon-box { width: 36px; height: 36px; border-radius: 8px; background: #E0F2F1; color: #009688; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.ks-info { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ks-title { font-size: 14px; font-weight: 600; color: #1E293B; line-height: 1.4; }
.ks-tag { font-size: 11px; color: #64748B; background: #F1F5F9; padding: 2px 6px; border-radius: 4px; width: fit-content; }

        /* 响应式 */
@media (max-width:1024px) {
	.hub-grid { grid-template-columns: 1fr 1fr; }
	.knowledge-card { grid-column: span 2; display: block; height: auto; }
	.knowledge-stack { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width:768px) {
	.hub-grid { grid-template-columns: 1fr; }
	.knowledge-card { grid-column: auto; }
	.knowledge-stack { display: flex; flex-direction: column; }
	.policy-featured-item .pf-badge { display: none; }
	.hub-header h2 { font-size: 24px; }
}

/* =========================================
Bento Values Section (New Design)
========================================= */
.section-values { padding: 80px 24px; background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%); position: relative; overflow: hidden; }

/* Override existing header styles if needed, or rely on cascade */
.values-header { text-align: center; max-width: 620px; margin: 0 auto 24px; padding: 0 10px; position: relative; z-index: 2; }
.values-header::before { content: ""; position: absolute; width: 280px; height: 120px; left: 50%; top: -40px; transform: translateX(-50%); background: radial-gradient(ellipse at center, rgba(45, 212, 191, 0.24) 0%, rgba(14, 165, 233, 0.14) 42%, rgba(255, 255, 255, 0) 76%); filter: blur(18px); pointer-events: none; }
.values-header::after { content: ""; display: block; width: 120px; height: 2px; margin: 12px auto 0; border-radius: 999px; background: linear-gradient(90deg, rgba(20, 184, 166, 0.1) 0%, rgba(20, 184, 166, 0.92) 50%, rgba(20, 184, 166, 0.1) 100%); }
.values-header .section-tag { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: 1.6px; margin-bottom: 8px; padding: 0; color: #0f766e; text-transform: uppercase; background: transparent; border: none; }
.values-header .section-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: radial-gradient(circle, #2dd4bf 0%, #0ea5e9 100%); box-shadow: 0 0 10px rgba(45, 212, 191, 0.65); }
.section-title { position: relative; z-index: 1; font-size: clamp(24px, 2.4vw, 34px); font-weight: 800; color: #1e293b; line-height: 1.18; margin-bottom: 0; letter-spacing: -0.45px; background: linear-gradient(135deg, #0f172a 0%, #334155 40%, #0f766e 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.section-title span { display: block; margin-top: 6px; font-size: clamp(15px, 1.35vw, 19px); font-weight: 650; line-height: 1.35; background: linear-gradient(135deg, #0d9488 0%, #0f766e 60%, #0369a1 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; opacity: 0.96; }
.values-bento-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto; padding: 0 16px; position: relative; z-index: 2; }
.bento-card { border-radius: 24px; overflow: hidden; position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; display: flex; flex-direction: column; border: 1px solid rgba(255, 255, 255, 0.5); }
.bento-card:hover { transform: translateY(-4px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08); }
.bento-large { grid-column: span 2; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); min-height: 420px; }
.bento-small { grid-column: span 1; min-height: auto; /* Allow content to dictate height */ }
.bento-orange { background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%); }
.bento-green { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); }
.bento-blue { background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%); }
.bento-yellow { background: linear-gradient(135deg, #fffbeb 0%, #fef3c7 100%); }
.bento-red { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); }
.bento-cyan { background: linear-gradient(135deg, #ecfeff 0%, #cffafe 100%); }
.bento-indigo { background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%); }

/* Wide Bento Layout */
.bento-wide { grid-column: span 2; min-height: 380px; flex-direction: row; align-items: stretch; }
.bento-wide .bc-content { width: 35%; padding: 40px; display: flex; flex-direction: column; justify-content: center; flex-shrink: 0; }
.bento-wide .bc-visual { flex: 1; width: 65%; padding: 20px 20px 0 0; /* 右侧和顶部留白，模拟窗口悬浮 */ display: flex; align-items: flex-end; /* 窗口沉底 */ }

/* Card Content Layout - More Compact */
.bc-content { padding: 24px 0 24px; flex-shrink: 0; }
.bc-title { font-size: 20px; font-weight: 800; color: #1e293b; margin-bottom: 8px; line-height: 1.3; }
.bc-desc { font-size: 14px; color: #64748b; line-height: 1.5; max-width: 100%; }
.bc-visual { flex: 1; position: relative; overflow: hidden; display: flex; justify-content: center; align-items: flex-end; padding: 0; }
.bento-research-compact .bc-content { padding: 20px 22px 10px; }
.bento-research-compact .bc-visual { min-height: 360px; max-height: 360px; }

/* =========================================
Mock Window & Common Styles (Refined)
========================================= */
.mock-window { width: 100%; height: 100%; background: #fff; border-radius: 16px 16px 0 0; overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 -20px 60px rgba(0, 0, 0, 0.08); border: 1px solid rgba(255, 255, 255, 0.6); border-bottom: none; backdrop-filter: blur(10px); }
.window-header { height: 44px; background: rgba(255, 255, 255, 0.9); border-bottom: 1px solid rgba(226, 232, 240, 0.6); display: flex; align-items: center; justify-content: space-between; padding: 0 16px; flex-shrink: 0; }
.header-left { display: flex; align-items: center; gap: 12px; }
.header-dots { display: flex; gap: 6px; }
.dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.1); }
.dot.red { background: #ef4444; border: 1px solid #dc2626; }
.dot.yellow { background: #f59e0b; border: 1px solid #d97706; }
.dot.green { background: #22c55e; border: 1px solid #16a34a; }
.header-title { font-size: 13px; font-weight: 600; color: #475569; display: flex; align-items: center; gap: 6px; background: rgba(241, 245, 249, 0.5); padding: 4px 10px; border-radius: 6px; }
.header-status { font-size: 10px; padding: 2px 6px; background: #e0f2fe; color: #0284c7; border-radius: 4px; font-weight: 600; }
.window-content { flex: 1; position: relative; overflow: hidden; }

/* Card 1: AI (ai-demo-box) */
.ai-demo-box { position: relative; width: 100%; height: 100%; background: #f8fafc; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.ai-scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.scene-1 { animation: scene1-loop 12s infinite; }
.scene-2 { animation: scene2-loop 12s infinite; }
.scene-3 { animation: scene3-loop 12s infinite; }
@keyframes scene1-loop {
	0%, 25% { opacity: 1; transform: scale(1); }
	30%, 95% { opacity: 0; transform: scale(0.95); }
	100% { opacity: 1; transform: scale(1); }
}
@keyframes scene2-loop {
	0%, 25% { opacity: 0; transform: scale(1.05); }
	30%, 45% { opacity: 1; transform: scale(1); }
	50%, 100% { opacity: 0; transform: scale(0.95); }
}
@keyframes scene3-loop {
	0%, 45% { opacity: 0; transform: translateY(10px); }
	50%, 90% { opacity: 1; transform: translateY(0); }
	95%, 100% { opacity: 0; transform: translateY(-10px); }
}
.symptom-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; padding: 12px 20px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); margin-bottom: 16px; display: flex; align-items: center; gap: 10px; transform-origin: center; width: 80%; max-width: 400px; }
.symptom-icon { width: 32px; height: 32px; background: #f0fdfa; color: #0d9488; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; }
.symptom-info h4 { margin: 0; font-size: 14px; color: #64748b; font-weight: normal; }
.symptom-info h3 { margin: 0; font-size: 16px; color: #0f172a; font-weight: bold; }
.ai-trigger-btn { background: linear-gradient(135deg, #0d9488, #115e59); color: #fff; border: none; padding: 10px 24px; border-radius: 99px; font-size: 14px; font-weight: 500; display: flex; align-items: center; gap: 6px; box-shadow: 0 4px 6px rgba(13, 148, 136, 0.3); animation: btn-press 12s infinite; }
@keyframes btn-press {
	0%, 15% { transform: scale(1); }
	18% { transform: scale(0.95); }
	21%, 100% { transform: scale(1); }
}
.hand-cursor { position: absolute; width: 32px; height: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.9 19.3L4.8 12.2a2.3 2.3 0 0 1 0-3.3l.9-.9a2.3 2.3 0 0 1 3.3 0l2.3 2.3V3.5a1.5 1.5 0 0 1 3 0v4h.5a1.5 1.5 0 0 1 1.5 1.5v.5l-2.2 9.8h-2.2z' fill='%23fff'/%3E%3C/svg%3E"); top: 50%; left: 50%; margin-left: 20px; margin-top: 20px; opacity: 0; animation: cursor-move 12s infinite; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); z-index: 10; }
@keyframes cursor-move {
	0%, 5% { opacity: 0; transform: translate(40px, 40px); }
	10% { opacity: 1; transform: translate(40px, 40px); }
	15% { transform: translate(0, 0); }
	18% { transform: scale(0.9) translate(0, 0); }
	22% { opacity: 1; transform: translate(0, 0); }
	25%, 100% { opacity: 0; }
}
.ai-scan-ring { width: 60px; height: 60px; border: 3px solid #ccfbf1; border-top-color: #0d9488; border-radius: 50%; animation: spin 1s linear infinite; margin-bottom: 12px; }
.ai-text { font-size: 14px; color: #0d9488; font-weight: 600; letter-spacing: 1px; }
@keyframes spin {
	100% { transform: rotate(360deg); }
}
.result-card { width: 80%; max-width: 400px; background: #fff; border-radius: 12px; padding: 16px; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); border: 1px solid #f0fdfa; }
.result-header { display: flex; align-items: center; gap: 6px; color: #0d9488; font-weight: bold; font-size: 14px; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid #f1f5f9; }
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.r-item { display: flex; flex-direction: column; }
.r-label { font-size: 12px; color: #94a3b8; margin-bottom: 2px; }
.r-val { font-size: 13px; color: #334155; font-weight: 600; }
.r-full { grid-column: span 2; }
.r-tag { display: inline-block; background: #f0fdfa; color: #0d9488; padding: 2px 6px; border-radius: 4px; font-size: 12px; margin-right: 4px; }
.result-footer { border-top: 1px dotted #94a3b8; margin-top: 12px; padding-top: 12px; font-size: 12px; color: #94a3b8; }

/* Card 2: Face/Tongue */
.face-scan-wrapper { display: flex; gap: 10px; height: 100%; padding: 20px; width: 100%; box-sizing: border-box; }
.scan-panel { flex: 1; background: #f8fafc; border-radius: 8px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #e2e8f0; }
.scan-target { font-size: 48px; color: #cbd5e1; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; }
.scan-tag { font-size: 10px; color: #fff; background: rgba(0, 0, 0, 0.5); padding: 2px 6px; border-radius: 4px; position: absolute; bottom: 8px; z-index: 2; }
.scan-beam { position: absolute; top: 0; left: 0; width: 100%; height: 2px; background: #f97316; box-shadow: 0 0 8px #f97316; animation: beam-scan 2s infinite; z-index: 1; }
@keyframes beam-scan {
	0% { top: 0; opacity: 0; }
	10% { opacity: 1; }
	90% { opacity: 1; }
	100% { top: 100%; opacity: 0; }
}
.scan-result-tag { position: absolute; top: 8px; right: 8px; background: #fff7ed; color: #ea580c; font-size: 10px; padding: 2px 4px; border-radius: 4px; border: 1px solid #ffedd5; font-weight: bold; opacity: 0; animation: fade-in 0.5s forwards 1s; }
@keyframes fade-in {
	to { opacity: 1; }
}

/* Card 3: Acupoints (Enhanced with Reasoning) */
.acu-layout { display: flex; height: 100%; width: 100%; overflow: hidden; }
.acu-visual { flex: 1; background: #f0fdf4; position: relative; display: flex; align-items: center; justify-content: center; }
.acu-info-panel { width: 45%; background: #fff; border-left: 1px solid #dcfce7; padding: 16px; display: flex; flex-direction: column; gap: 12px; overflow-y: auto; z-index: 2; box-shadow: -4px 0 12px rgba(0, 0, 0, 0.02); }
.acu-tag-group { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.acu-tag { font-size: 10px; padding: 3px 8px; border-radius: 6px; background: #f1f5f9; color: #475569; font-weight: 600; }
.acu-tag.syndrome { background: #fee2e2; color: #991b1b; }
.acu-tag.point { background: #dcfce7; color: #166534; }
.acu-reason-card { background: #f8fafc; border-radius: 8px; padding: 12px; border: 1px solid #f1f5f9; position: relative; animation: slideInRight 0.5s ease-out backwards; }
.acu-reason-card:nth-child(2) { animation-delay: 0.2s; }
.acu-reason-card:nth-child(3) { animation-delay: 0.4s; }
.acu-reason-card::before { content: ''; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; background: #cbd5e1; border-radius: 0 4px 4px 0; }
.acu-reason-card.highlight::before { background: #16a34a; }
.acu-reason-card.highlight { background: #f0fdf4; border-color: #dcfce7; }
.reason-title { font-size: 12px; font-weight: 700; color: #1e293b; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; }
.reason-text { font-size: 11px; color: #64748b; line-height: 1.5; text-align: justify; }
.body-outline-v2 { width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 400' fill='none' stroke='%2386efac' stroke-width='2'%3E%3Cpath d='M100 40 C 120 40 135 55 135 80 C 135 100 120 115 100 115 C 80 115 65 100 65 80 C 65 55 80 40 100 40 Z M 65 115 C 40 130 30 160 30 220 L 30 350 M 135 115 C 160 130 170 160 170 220 L 170 350' stroke-opacity='0.4' /%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; position: relative; }
.acu-point { width: 12px; height: 12px; background: #16a34a; border-radius: 50%; position: absolute; box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.2); animation: pulse-green 2s infinite; cursor: pointer; z-index: 10; }
.acu-point::after { content: ''; position: absolute; top: 50%; left: 50%; width: 40px; height: 40px; border: 1px solid #16a34a; border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; animation: ripple 2s infinite; }
@keyframes ripple {
	0% { width: 12px; height: 12px; opacity: 0.8; }
	100% { width: 60px; height: 60px; opacity: 0; }
}
.ap-yintang { top: 20%; left: 50%; transform: translate(-50%, -50%); }
.ap-taichong { top: 75%; left: 35%; }
.acu-connect-line { position: absolute; height: 1px; background: #16a34a; transform-origin: left center; opacity: 0; animation: drawLine 1s forwards 0.5s; }
@keyframes slideInRight {
	from { opacity: 0; transform: translateX(20px); }
	to { opacity: 1; transform: translateX(0); }
}

/* Card 4: Tracking & Assessment (Report Style) */
.report-layout { padding: 0; background: #f1f5f9; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.report-paper { margin: 16px; background: #fff; flex: 1; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); border: 1px solid #e2e8f0; display: flex; flex-direction: column; overflow: hidden; position: relative; animation: slideUp 0.6s ease-out; }
@keyframes slideUp {
	from { opacity: 0; transform: translateY(20px); }
	to { opacity: 1; transform: translateY(0); }
}
.report-header { padding: 10px 16px; border-bottom: 1px solid #f1f5f9; display: flex; justify-content: space-between; align-items: center; background: #fff; }
.rh-title { font-size: 12px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 6px; }
.rh-badge { font-size: 10px; background: #eff6ff; color: #3b82f6; padding: 2px 6px; border-radius: 4px; font-weight: 600; }
.report-body { padding: 16px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.chart-box { position: relative; height: 100px; width: auto; border-left: 1px solid #e2e8f0; border-bottom: 1px solid #e2e8f0; margin-left: 28px; margin-right: 10px; margin-bottom: 24px; margin-top: 16px; box-sizing: border-box; }
.chart-label-y { position: absolute; left: -28px; top: 0; font-size: 9px; color: #94a3b8; height: 100%; display: flex; flex-direction: column; justify-content: space-between; text-align: right; width: 20px; }
.chart-label-x { position: absolute; bottom: -22px; left: 0; width: 100%; display: flex; justify-content: space-between; font-size: 9px; color: #94a3b8; }
.vas-line-svg { width: 100%; height: 100%; overflow: visible; }
.vas-path { fill: none; stroke: #3b82f6; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; animation: drawLineLoop 8s infinite cubic-bezier(0.4, 0, 0.2, 1); }
.vas-area { fill: rgba(59, 130, 246, 0.1); stroke: none; opacity: 0; animation: fadeInLoop 8s infinite; }
.point-group { opacity: 0; cursor: pointer; animation: fadeInPointLoop 8s infinite; }
.point-group:hover circle { r: 6; stroke-width: 3; transition: all 0.2s; }
.point-group circle { fill: #fff; stroke: #3b82f6; stroke-width: 2; r: 4; transition: all 0.2s; }
.point-group text { font-size: 10px; fill: #1e293b; font-weight: bold; transform: translateY(-10px); }
.p1 { animation-delay: 0.5s; }
.p2 { animation-delay: 1.5s; }
.p3 { animation-delay: 2.5s; }
.report-conclusion { background: #ecfdf5; border: 1px solid #dcfce7; padding: 10px; border-radius: 6px; display: flex; align-items: center; gap: 12px; margin-top: auto; animation: slideUpLoop 8s infinite backwards; animation-delay: 3s; }
.rc-icon { width: 36px; height: 36px; background: #10b981; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.rc-text h4 { margin: 0; font-size: 13px; color: #065f46; font-weight: 700; margin-bottom: 2px; }
.rc-text p { margin: 0; font-size: 11px; color: #047857; opacity: 0.9; }

/* Missing Keyframes for Chart Animations */
@keyframes drawLineLoop {
	0% { stroke-dashoffset: 400; opacity: 1; }
	30% { stroke-dashoffset: 0; opacity: 1; }
	85% { stroke-dashoffset: 0; opacity: 1; }
	95% { stroke-dashoffset: 0; opacity: 0; }
	100% { stroke-dashoffset: 400; opacity: 0; }
}
@keyframes fadeInLoop {
	0%, 30% { opacity: 0; }
	40% { opacity: 1; }
	85% { opacity: 1; }
	95%, 100% { opacity: 0; }
}
@keyframes fadeInPointLoop {
	0% { opacity: 0; }
	10% { opacity: 1; }
	
	 /* Relative to delay */
	85% { opacity: 1; }
	95%, 100% { opacity: 0; }
}
@keyframes slideUpLoop {
	0% { opacity: 0; transform: translateY(10px); }
	10% { opacity: 1; transform: translateY(0); }
	85% { opacity: 1; transform: translateY(0); }
	95%, 100% { opacity: 0; transform: translateY(10px); }
}

/* Card 5: Satisfaction */
.sat-demo-box { position: relative; width: 100%; height: 100%; background: #f8fafc; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.sat-scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; padding: 20px; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; }
.scene-eval { animation: eval-in-out 10s infinite; z-index: 2; background: #f8fafc; }
.scene-data { animation: data-in-out 10s infinite; z-index: 1; background: #f0f9ff; }
@keyframes eval-in-out {
	0%, 45% { transform: translateY(0); opacity: 1; }
	50%, 95% { transform: translateY(-20px); opacity: 0; }
	100% { transform: translateY(0); opacity: 1; }
}
@keyframes data-in-out {
	0%, 45% { transform: translateY(20px); opacity: 0; }
	50%, 95% { transform: translateY(0); opacity: 1; }
	100% { transform: translateY(20px); opacity: 0; }
}
.eval-card { background: #fff; border-radius: 12px; padding: 20px; box-shadow: 0 4px 15px rgba(0, 190, 219, 0.08); text-align: center; border: 1px solid #e0f2fe; width: 100%; box-sizing: border-box; }
.nurse-avatar { width: 44px; height: 44px; background: #e0f2fe; color: #00bedb; border-radius: 50%; margin: 0 auto 10px; display: flex; align-items: center; justify-content: center; font-size: 24px; }
.eval-title { font-size: 15px; color: #334155; font-weight: 600; margin-bottom: 2px; }
.eval-sub { font-size: 12px; color: #94a3b8; margin-bottom: 16px; }
.star-row { display: flex; justify-content: center; gap: 6px; margin-bottom: 16px; }
.star-item { color: #e2e8f0; font-size: 24px; transition: color 0.3s; }
@keyframes star-fill-anim {
	0% { color: #e2e8f0; transform: scale(1); }
	20% { color: #fbbf24; transform: scale(1.2); }
	100% { color: #fbbf24; transform: scale(1); }
}
.s-1 { animation: star-fill-anim 10s infinite; animation-delay: 1.0s; }
.s-2 { animation: star-fill-anim 10s infinite; animation-delay: 1.1s; }
.s-3 { animation: star-fill-anim 10s infinite; animation-delay: 1.2s; }
.s-4 { animation: star-fill-anim 10s infinite; animation-delay: 1.3s; }
.s-5 { animation: star-fill-anim 10s infinite; animation-delay: 1.4s; }
.tag-row { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; opacity: 0; animation: fade-in-up 10s infinite 2.0s; }
.e-tag { font-size: 11px; padding: 4px 10px; background: #f1f5f9; color: #64748b; border-radius: 99px; }
.e-tag.highlight { background: #e0f2fe; color: #00bedb; }
.submit-btn-mock { margin-top: 16px; background: #00bedb; color: white; padding: 8px 0; width: 100%; border-radius: 6px; font-size: 13px; font-weight: 500; opacity: 0; animation: btn-show 10s infinite 2.5s; box-shadow: 0 4px 6px rgba(0, 190, 219, 0.2); }
.dashboard-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.d-card { background: #fff; padding: 12px; border-radius: 8px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.04); border: 1px solid #f1f5f9; }
.d-label { font-size: 11px; color: #64748b; display: block; margin-bottom: 2px; }
.d-val { font-size: 18px; font-weight: 700; color: #0f172a; display: flex; align-items: center; gap: 4px; }
.d-trend { font-size: 10px; color: #10b981; background: #ecfdf5; padding: 1px 4px; border-radius: 4px; }
.rank-box { background: linear-gradient(to bottom, #fff7ed, #ffffff); border-radius: 12px; padding: 16px; flex: 1; box-shadow: 0 4px 12px rgba(249, 115, 22, 0.06); border: 1px solid #ffedd5; display: flex; flex-direction: column; }
.rank-header { font-size: 14px; font-weight: 700; color: #9a3412; margin-bottom: 20px; display: flex; justify-content: space-between; align-items: center; }
.rank-list-horiz { display: flex; justify-content: space-between; align-items: flex-end; gap: 10px; flex: 1; padding-bottom: 4px; }
.r-card { flex: 1; display: flex; flex-direction: column; align-items: center; background: #fff; border-radius: 10px; padding: 12px 4px; box-shadow: 0 2px 8px rgba(251, 146, 60, 0.08); border: 1px solid #fff7ed; position: relative; height: 80%; justify-content: center; }
.r-card.winner { height: 100%; background: linear-gradient(to bottom, #fff, #fff7ed); border-color: #fcd34d; box-shadow: 0 8px 16px rgba(251, 146, 60, 0.15); z-index: 1; }
.r-badge { width: 24px; height: 24px; font-size: 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; margin-bottom: 6px; color: #fff; position: absolute; top: -12px; }
.r-badge.rank-1 { background: linear-gradient(135deg, #fcd34d, #f59e0b); box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3); width: 28px; height: 28px; font-size: 14px; top: -14px; }
.r-badge.rank-2 { background: linear-gradient(135deg, #cbd5e1, #94a3b8); }
.r-badge.rank-3 { background: linear-gradient(135deg, #fdba74, #ea580c); }
.r-name { font-size: 12px; font-weight: 600; color: #431407; margin-bottom: 2px; }
.r-score { font-size: 15px; font-weight: 800; color: #ea580c; }
.r-card.winner .r-score { font-size: 18px; color: #d97706; }
@keyframes fade-in-up {
	0% { opacity: 0; transform: translateY(5px); }
	5%, 90% { opacity: 1; transform: translateY(0); }
	100% { opacity: 0; transform: translateY(5px); }
}
@keyframes btn-show {
	0% { opacity: 0; transform: scale(0.95); }
	5%, 90% { opacity: 1; transform: scale(1); }
	100% { opacity: 0; transform: scale(0.95); }
}

/* =========================================
Safety Section (High Fidelity)
========================================= */
.safe-demo-box { position: relative; width: 100%; height: 100%; background: #f1f5f9; overflow: hidden; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.safe-scene { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; padding: 12px; box-sizing: border-box; }

/* Animation Sequence (10s Loop) */
.scene-op { animation: op-fade-2 10s infinite; z-index: 1; }
.scene-alert { animation: alert-pop-2 10s infinite; z-index: 10; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.2); backdrop-filter: blur(2px); display: flex; /* Added for centering */ }
@keyframes op-fade-2 {
	0%, 30% { opacity: 1; filter: blur(0); }
	35% { opacity: 1; filter: blur(2px); }
	
	 /* Alert shows */
	90% { opacity: 1; filter: blur(2px); }
	95%, 100% { opacity: 1; filter: blur(0); }
}
@keyframes alert-pop-2 {
	0%, 30% { opacity: 0; transform: scale(0.9); pointer-events: none; visibility: hidden; }
	32% { opacity: 1; transform: scale(1.05); pointer-events: auto; visibility: visible; }
	35% { transform: scale(1); }
	88% { opacity: 1; transform: scale(1); }
	90%, 100% { opacity: 0; transform: scale(0.9); pointer-events: none; visibility: hidden; }
}

/* UI Components */
.pt-info-bar { background: #fff; border-radius: 8px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); margin-bottom: 12px; border-left: 4px solid #3b82f6; }
.pt-main { display: flex; align-items: center; gap: 8px; }
.pt-name { font-weight: 700; color: #1e293b; font-size: 14px; }
.pt-tag { background: #fee2e2; color: #ef4444; font-size: 10px; padding: 2px 6px; border-radius: 4px; font-weight: 600; border: 1px solid #fecaca; }
.pt-id { color: #94a3b8; font-size: 11px; }
.order-list { display: flex; flex-direction: column; gap: 8px; }
.order-card { background: #fff; border-radius: 8px; padding: 12px; border: 1px solid #e2e8f0; display: flex; justify-content: space-between; align-items: center; position: relative; }
.order-card.active { border-color: #3b82f6; box-shadow: 0 2px 8px rgba(59, 130, 246, 0.1); }
.o-left { display: flex; gap: 10px; align-items: center; }
.o-icon { width: 32px; height: 32px; background: #eff6ff; color: #3b82f6; border-radius: 6px; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.o-info h4 { margin: 0; font-size: 13px; color: #334155; font-weight: 600; }
.o-info p { margin: 0; font-size: 11px; color: #64748b; margin-top: 2px; }
.o-btn { background: #3b82f6; color: #fff; border: none; padding: 6px 12px; border-radius: 6px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.o-btn:hover { background: #2563eb; }

/* Hand Animation */
.hand-cursor-2 { position: absolute; width: 28px; height: 28px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.9 19.3L4.8 12.2a2.3 2.3 0 0 1 0-3.3l.9-.9a2.3 2.3 0 0 1 3.3 0l2.3 2.3V3.5a1.5 1.5 0 0 1 3 0v4h.5a1.5 1.5 0 0 1 1.5 1.5v.5l-2.2 9.8h-2.2z' fill='%23fff'/%3E%3C/svg%3E"); filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3)); z-index: 20; top: 50%; left: 50%; opacity: 0; animation: click-seq 10s infinite; }

/* Coordinates tuned for the button position */
@keyframes click-seq {
	0% { opacity: 0; transform: translate(40px, 40px); }
	15% { opacity: 1; transform: translate(40px, 40px); }
	25% { transform: translate(90px, -18px); }
	
	 /* Move to button */
	28% { transform: translate(90px, -18px) scale(0.9); }
	
	 /* Click */
	32% { transform: translate(90px, -18px) scale(1); opacity: 1; }
	35%, 100% { opacity: 0; }
}

/* Red Alert Box */
.red-alert { width: 90%; background: #ef4444; /* Red Background */ color: #fff; /* White Text */ border-radius: 12px; padding: 20px; box-shadow: 0 10px 30px rgba(220, 38, 38, 0.4); text-align: center; position: relative; overflow: hidden; }
.red-alert::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: rgba(255, 255, 255, 0.3); }
.a-icon { font-size: 32px; margin-bottom: 10px; animation: shake 0.5s ease-in-out 0.3s; }
.a-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; letter-spacing: 0.5px; }
.a-desc { font-size: 13px; line-height: 1.5; opacity: 0.95; }
.a-desc strong { color: #fee2e2; text-decoration: underline; margin: 0 2px; }
@keyframes shake {
	0%, 100% { transform: rotate(0); }
	25% { transform: rotate(-10deg); }
	75% { transform: rotate(10deg); }
}

/* Responsive */
@media (max-width:900px) {
	.values-bento-grid { grid-template-columns: 1fr; }
	.bento-large, .bento-small { grid-column: span 1; min-height: auto; }
	.bc-visual { padding: 0px; min-height: 250px; }
	.values-header { max-width: 520px; margin-bottom: 20px; padding: 0 8px; }
	.values-header::before { width: 220px; height: 90px; top: -26px; filter: blur(14px); }
	.values-header::after { width: 92px; margin-top: 10px; }
	.values-header .section-tag { font-size: 11px; margin-bottom: 6px; letter-spacing: 1.4px; }
	.section-title { font-size: 22px; line-height: 1.22; letter-spacing: -0.25px; }
	.section-title span { font-size: 15px; margin-top: 5px; }
}

/* =========================================
Efficiency Section Visuals
========================================= */

/* Card 3.1: Performance Dashboard */
.perf-dashboard { padding: 20px; display: flex; flex-direction: column; gap: 16px; height: 100%; background: #f8fafc; overflow: hidden; }
.perf-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.perf-stat-card { background: #fff; border-radius: 12px; padding: 12px; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); border: 1px solid #e2e8f0; display: flex; flex-direction: column; }
.psc-label { font-size: 11px; color: #64748b; margin-bottom: 4px; }
.psc-val { font-size: 18px; font-weight: 700; color: #0f172a; }
.psc-trend { font-size: 10px; color: #10b981; display: flex; align-items: center; gap: 2px; margin-top: 2px; }
.perf-chart-area { flex: 1; background: #fff; border-radius: 12px; border: 1px solid #e2e8f0; padding: 16px; display: flex; flex-direction: column; position: relative; }
.pca-title { font-size: 12px; font-weight: 700; color: #334155; margin-bottom: 12px; }
.pca-bars { display: flex; align-items: flex-end; justify-content: space-between; height: 100%; padding-bottom: 20px; gap: 8px; }
.pca-bar-group { display: flex; flex-direction: column; align-items: center; gap: 6px; flex: 1; height: 100%; justify-content: flex-end; }
.pca-bar { width: 100%; background: #e0f2fe; border-radius: 4px 4px 0 0; position: relative; overflow: hidden; flex: 1; }
.pca-bar::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; background: #3b82f6; transition: height 1s ease; animation: grow-bar 3s ease-in-out infinite alternate; }
.pb-1::after { height: 40%; animation-delay: 0.2s; }
.pb-2::after { height: 75%; animation-delay: 0.4s; }
.pb-3::after { height: 55%; animation-delay: 0.6s; }
.pb-4::after { height: 90%; animation-delay: 0.8s; }
.pb-5::after { height: 65%; animation-delay: 1.0s; }
.pca-label { font-size: 10px; color: #94a3b8; }
@keyframes grow-bar {
	from { height: 0; }
}

/* Card 3.2: Queue Screen */
.queue-box { background: #1e293b; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; position: relative; overflow: hidden; }
.queue-led { font-family: 'Courier New', monospace; text-align: center; color: #22d3ee; z-index: 2; }
.ql-title { font-size: 12px; color: #94a3b8; margin-bottom: 10px; letter-spacing: 2px; }
.ql-number { font-size: 56px; font-weight: 700; line-height: 1; margin-bottom: 10px; text-shadow: 0 0 20px rgba(34, 211, 238, 0.5); animation: blink-text 1s infinite; }
.ql-room { font-size: 16px; color: #fff; background: #0e7490; padding: 4px 16px; border-radius: 99px; display: inline-block; }
.queue-list { margin-top: 30px; width: 80%; background: rgba(255, 255, 255, 0.05); border-radius: 8px; padding: 12px; }
.q-row { display: flex; justify-content: space-between; color: #94a3b8; font-size: 11px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.1); }
.q-row:last-child { border: none; }
.q-row strong { color: #fff; }
@keyframes blink-text {
	50% { opacity: 0.5; }
}

/* Card 3.3: AI Education */
.edu-chat { padding: 20px; background: #f0fdf4; height: 100%; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.chat-bubble { background: #fff; padding: 12px 16px; border-radius: 12px 12px 12px 0; border: 1px solid #dcfce7; box-shadow: 0 2px 8px rgba(22, 163, 74, 0.05); max-width: 85%; animation: pop-in 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; opacity: 0; transform: translateY(10px); }
.cb-1 { animation-delay: 0.5s; }
.cb-2 { animation-delay: 1.5s; align-self: flex-end; border-radius: 12px 12px 0 12px; background: #16a34a; color: #fff; border: none; }
.cb-3 { animation-delay: 2.5s; }
.chat-user { font-size: 10px; color: #94a3b8; margin-bottom: 4px; display: flex; align-items: center; gap: 4px; }
.cb-2 .chat-user { color: rgba(255, 255, 255, 0.8); justify-content: flex-end; }
.chat-text { font-size: 12px; line-height: 1.5; }
.chat-audio { display: flex; align-items: center; gap: 8px; margin-top: 8px; background: #f0fdf4; padding: 6px 10px; border-radius: 6px; color: #166534; font-size: 11px; font-weight: 600; cursor: pointer; }
@keyframes pop-in {
	to { opacity: 1; transform: translateY(0); }
}

/* =========================================
Research Section Visuals
========================================= */

/* Card 4.1: Research Net */
.research-net-box { background: #f5f3ff; height: 100%; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.net-node { position: absolute; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; box-shadow: 0 4px 12px rgba(139, 92, 246, 0.15); z-index: 2; animation: float-node 4s ease-in-out infinite; }
.nn-main { width: 60px; height: 60px; background: #8b5cf6; color: #fff; top: 40%; left: 40%; z-index: 3; }
.nn-1 { width: 40px; height: 40px; background: #fff; color: #6d28d9; top: 20%; left: 20%; border: 1px solid #ddd6fe; animation-delay: 0.5s; }
.nn-2 { width: 48px; height: 48px; background: #fff; color: #6d28d9; top: 60%; left: 70%; border: 1px solid #ddd6fe; animation-delay: 1s; }
.nn-3 { width: 36px; height: 36px; background: #fff; color: #6d28d9; top: 25%; left: 70%; border: 1px solid #ddd6fe; animation-delay: 1.5s; }
.net-line { position: absolute; height: 1px; background: #c4b5fd; transform-origin: 0 0; z-index: 1; }
.nl-1 { top: 25%; left: 25%; width: 120px; transform: rotate(25deg); }
.nl-2 { top: 45%; left: 45%; width: 100px; transform: rotate(15deg); }
@keyframes float-node {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-10px); }
}

/* Card 4.2: Case Funnel */
.case-funnel-box { background: #fffbeb; height: 100%; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding-top: 40px; }
.funnel-body { width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-top: 100px solid rgba(251, 191, 36, 0.2); position: relative; z-index: 1; }
.doc-item { width: 24px; height: 30px; background: #fff; border: 1px solid #fcd34d; position: absolute; top: -40px; animation: fall-doc 3s infinite linear; border-radius: 2px; }
.di-1 { left: -40px; animation-delay: 0s; }
.di-2 { left: 0px; animation-delay: 1s; }
.di-3 { left: 40px; animation-delay: 2s; }
.star-case { width: 40px; height: 50px; background: #fff; border: 2px solid #f59e0b; border-radius: 4px; display: flex; align-items: center; justify-content: center; margin-top: 10px; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2); animation: shine-case 2s infinite; z-index: 2; }
.sc-star { font-size: 20px; color: #f59e0b; }
@keyframes fall-doc {
	0% { top: -40px; opacity: 0; transform: rotate(0deg); }
	20% { opacity: 1; }
	80% { top: 60px; opacity: 0; transform: rotate(180deg) scale(0.5); }
	100% { top: 80px; opacity: 0; }
}
@keyframes shine-case {
	0%, 100% { transform: scale(1); box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2); }
	50% { transform: scale(1.05); box-shadow: 0 8px 20px rgba(245, 158, 11, 0.4); }
}

/* =========================================
Structured Data Research (Keyan) - Light Theme
========================================= */
.keyan-window { background: #ffffff !important; border-top: 5px solid #8B5CF6 !important; box-shadow: 0 16px 40px rgba(139, 92, 246, 0.14), 0 0 0 1px rgba(139, 92, 246, 0.1) !important; border-radius: 16px 16px 0 0; width: 100%; /* Ensure full width */ height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.keyan-window .window-header { background: #fdfbff !important; border-bottom: 1px solid #f3e8ff !important; padding: 0 16px; height: 44px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.keyan-window .header-title { font-size: 13px; font-weight: 600; color: #4c1d95 !important; display: flex; align-items: center; gap: 8px; }
.keyan-window .header-status { background: #ede9fe !important; color: #7c3aed !important; font-size: 10px; padding: 4px 8px; border-radius: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.keyan-content { display: flex; flex-direction: column; /* Stack vertically for narrow cards */ padding: 12px; gap: 12px; background: linear-gradient(180deg, #ffffff 0%, #fbf8ff 100%); height: 100%; align-items: stretch; overflow-y: auto; /* Allow scrolling if content is too tall */ }

/* Top: NLP Engine */
.engine-section { flex: 0 0 auto; /* Don't stretch */ height: 118px; background: #fdfbff; border: 1px solid #f3e8ff; border-radius: 12px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: inset 0 0 20px rgba(139, 92, 246, 0.03); }
.dna-bg { position: absolute; width: 100%; height: 100%; opacity: 0.08; background-image: repeating-linear-gradient(45deg, #8B5CF6 0, #8B5CF6 1px, transparent 1px, transparent 16px); animation: keyan-scrollBg 30s linear infinite; }
.transform-container { position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; z-index: 2; }
.doc-icon { position: absolute; left: 20%; /* Adjusted position */ width: 48px; /* Smaller icon */ height: 58px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.06); animation: keyan-float 4s ease-in-out infinite; }
.doc-line { width: 60%; height: 3px; background: #cbd5e1; margin: 3px 0; border-radius: 2px; }
.db-icon { position: absolute; right: 20%; /* Adjusted position */ width: 48px; /* Smaller icon */ height: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; animation: keyan-float 4s ease-in-out infinite 2s; }
.db-layer { width: 100%; height: 12px; background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%); border-radius: 50% / 20%; box-shadow: 0 4px 10px rgba(124, 58, 237, 0.2); }
.beam-process { width: 60px; /* Shorter beam */ height: 2px; background: linear-gradient(90deg, transparent, #ddd6fe, transparent); position: relative; overflow: hidden; }
.beam-particle { width: 8px; height: 8px; background: #8B5CF6; border-radius: 50%; position: absolute; top: -3px; box-shadow: 0 0 12px #8B5CF6; animation: keyan-beamTravel 2s infinite cubic-bezier(0.4, 0, 0.2, 1); }
.engine-label { position: absolute; bottom: 12px; font-size: 11px; font-weight: 700; color: #6d28d9; background: rgba(255, 255, 255, 0.9); padding: 4px 12px; border-radius: 20px; border: 1px solid #e9d5ff; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1); backdrop-filter: blur(4px); z-index: 2; display: flex; align-items: center; gap: 6px; }

/* Bottom: Search Results */
.research-section { flex: 1; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.rs-title { font-size: 14px; font-weight: 700; color: #1e293b; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; }
.dim-tags { display: flex; gap: 6px; margin-bottom: 8px; flex-wrap: wrap; }
.dim-tag { font-size: 11px; padding: 3px 10px; background: #f5f3ff; color: #7c3aed; border-radius: 6px; border: 1px solid #ede9fe; font-weight: 600; transition: all 0.2s; }
.dim-tag:hover { background: #ede9fe; transform: translateY(-1px); }
.result-list { display: flex; flex-direction: column; gap: 8px; flex: 1; overflow-y: auto; }
.result-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 10px; background: #ffffff; border: 1px solid #f1f5f9; border-radius: 8px; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02); cursor: pointer; }
.result-item:hover { border-color: #c4b5fd; box-shadow: 0 8px 20px rgba(139, 92, 246, 0.08); transform: translateY(-2px); }
.res-icon { width: 16px; height: 16px; color: #94a3b8; flex-shrink: 0; transition: color 0.2s; }
.result-item:hover .res-icon { color: #8B5CF6; }
.res-text { font-size: 12px; color: #334155; flex: 1; margin: 0 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.res-count { font-size: 10px; font-weight: 700; color: #7c3aed; background: #f3e8ff; padding: 2px 6px; border-radius: 4px; }
.export-btn { margin-top: 6px; height: 34px; background: linear-gradient(135deg, #8B5CF6 0%, #7c3aed 100%); color: #FFFFFF; border-radius: 8px; display: flex; justify-content: center; align-items: center; font-size: 12px; font-weight: 600; gap: 6px; box-shadow: 0 8px 20px rgba(124, 58, 237, 0.25); cursor: pointer; transition: all 0.2s; border: 1px solid rgba(255, 255, 255, 0.1); }
.export-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(124, 58, 237, 0.3); }
.export-btn:active { transform: translateY(0); }

/* =========================================
Typical Cases (Gean) - Light Theme
========================================= */
.gean-window { background: #ffffff !important; border-top: 5px solid #F59E0B !important; box-shadow: 0 16px 40px rgba(245, 158, 11, 0.14), 0 0 0 1px rgba(245, 158, 11, 0.1) !important; border-radius: 16px 16px 0 0; width: 100%; height: 100%; display: flex; flex-direction: column; overflow: hidden; }
.gean-window .window-header { background: #fffdf7 !important; border-bottom: 1px solid #fef3c7 !important; padding: 0 16px; height: 44px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.gean-window .header-title { font-size: 13px; font-weight: 600; color: #92400e !important; display: flex; align-items: center; gap: 8px; }
.gean-window .header-status { background: #fef3c7 !important; color: #d97706 !important; font-size: 10px; padding: 4px 8px; border-radius: 6px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; }
.gean-content { display: grid; grid-template-rows: 118px minmax(0, 1fr); padding: 9px; gap: 8px; background: linear-gradient(180deg, #ffffff 0%, #fffbf2 100%); height: 100%; align-items: stretch; overflow: hidden; }

/* Top: Radar */
.radar-section { height: 118px; background: #fffbeb; border: 1px solid #fef3c7; border-radius: 12px; position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.radar-scan { position: absolute; width: 96px; height: 96px; border-radius: 50%; border: 1px solid rgba(245, 158, 11, 0.3); background: radial-gradient(circle, rgba(251, 191, 36, 0.05) 0%, transparent 70%); }
.radar-scan::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 90px; height: 90px; border: 1px dashed rgba(245, 158, 11, 0.2); border-radius: 50%; }
.radar-scan::after { content: ''; position: absolute; top: 0; left: 0; width: 50%; height: 50%; background: linear-gradient(135deg, transparent 50%, rgba(245, 158, 11, 0.15) 100%); border-radius: 100% 0 0 0; transform-origin: 100% 100%; animation: gean-radarSpin 4s linear infinite; }
.case-point { position: absolute; width: 10px; height: 10px; background: #F59E0B; border-radius: 50%; box-shadow: 0 0 12px rgba(245, 158, 11, 0.6); animation: gean-blink 2s infinite ease-in-out; cursor: pointer; z-index: 2; }
.case-point::after { content: ''; position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 1px solid rgba(245, 158, 11, 0.3); border-radius: 50%; animation: gean-pulse 2s infinite; }
.case-point.p1 { top: 35%; left: 65%; animation-delay: 0s; }
.case-point.p2 { top: 65%; left: 35%; animation-delay: 0.7s; }
.case-point.p3 { top: 75%; left: 75%; animation-delay: 1.4s; }
.radar-label { position: absolute; bottom: 8px; font-size: 10px; font-weight: 700; color: #b45309; background: rgba(255, 255, 255, 0.9); padding: 3px 10px; border-radius: 20px; border: 1px solid #fde68a; box-shadow: 0 4px 12px rgba(245, 158, 11, 0.1); backdrop-filter: blur(4px); z-index: 3; display: flex; align-items: center; gap: 6px; }

/* Bottom: Case Recommendation */
.generate-section { min-height: 0; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 5px; overflow: hidden; }
.generate-section .rs-title { font-size: 12px; margin-bottom: 0; }
.best-case-card { background: #ffffff; border: 1px solid #fef3c7; border-radius: 10px; padding: 7px; margin-bottom: 0; position: relative; overflow: hidden; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.06); transition: all 0.3s; }
.best-case-card:hover { transform: translateY(-2px); box-shadow: 0 10px 25px rgba(245, 158, 11, 0.12); border-color: #fde68a; }
.best-case-card::before { content: '优选'; position: absolute; top: 0; right: 0; background: linear-gradient(135deg, #F59E0B, #d97706); color: #FFF; font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 0 0 0 8px; box-shadow: -2px 2px 6px rgba(245, 158, 11, 0.2); }
.case-title { font-size: 12px; font-weight: 700; color: #1e293b; margin-bottom: 4px; padding-right: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.case-stats { display: flex; gap: 10px; font-size: 10px; color: #64748b; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-val { color: #10b981; font-weight: 800; font-size: 11px; margin-left: 2px; }
.step-list { display: flex; flex-direction: column; gap: 4px; min-height: 0; overflow: hidden; }
.step-item { display: flex; align-items: center; gap: 6px; font-size: 11px; line-height: 1.2; color: #475569; background: #fffbeb; padding: 4px 8px; border-radius: 7px; border: 1px solid transparent; }
.step-item::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #F59E0B; box-shadow: 0 0 0 2px rgba(245, 158, 11, 0.15); flex-shrink: 0; }
.step-item span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.step-item:hover { background: #fff; border-color: #fef3c7; color: #b45309; }
.step-icon { color: #F59E0B; width: 12px; height: 12px; flex-shrink: 0; }
.create-btn { margin-top: 0; height: 29px; background: linear-gradient(135deg, #F59E0B 0%, #d97706 100%); color: #FFF; border-radius: 9px; display: flex; justify-content: center; align-items: center; font-size: 11px; font-weight: 600; gap: 6px; box-shadow: 0 8px 20px rgba(245, 158, 11, 0.25); cursor: pointer; position: relative; overflow: hidden; transition: all 0.2s; border: 1px solid rgba(255, 255, 255, 0.1); }
.create-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(245, 158, 11, 0.3); }
.create-btn:active { transform: translateY(0); }
.btn-glow { position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 60%); animation: gean-btnShine 4s infinite linear; pointer-events: none; }

/* Animations */
@keyframes keyan-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}
@keyframes keyan-beamTravel {
	0% { left: 0; opacity: 0; }
	20% { opacity: 1; }
	80% { opacity: 1; }
	100% { left: 100%; opacity: 0; }
}
@keyframes keyan-scrollBg {
	from { background-position: 0 0; }
	to { background-position: 40px 40px; }
}
@keyframes gean-radarSpin {
	to { transform: rotate(360deg); }
}
@keyframes gean-blink {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.7; transform: scale(1.2); }
}
@keyframes gean-pulse {
	0% { transform: scale(1); opacity: 0.6; }
	100% { transform: scale(2); opacity: 0; }
}
@keyframes gean-btnShine {
	0% { transform: translate(-30%, -30%) rotate(0deg); }
	100% { transform: translate(-30%, -30%) rotate(360deg); }
}

/* Responsive adjustments */
@media (max-width:768px) {
	.values-bento-grid { grid-template-columns: 1fr; padding: 16px; gap: 24px; }
	.bento-small, .bento-large, .bento-wide { grid-column: span 1; min-height: auto; }
	.bc-content { padding: 24px 24px 12px; }
	.bc-title { font-size: 22px; }
	.bc-desc { font-size: 14px; }
	.keyan-content, .gean-content { flex-direction: column; padding: 16px; gap: 16px; }
	.engine-section, .radar-section { min-height: 160px; /* Slightly taller on mobile for better touch targets if needed, or keep compact */ height: auto; padding: 20px 0; }
	.research-section, .generate-section { flex: 1; }
	.result-item, .step-item { padding: 10px; }
}