:root { --primary-blue: #4A90E2; --primary-purple: #7B61FF; --primary-pink: #FF6B6B; --text-dark: #2C3E50; --text-light: #666; }
.core-features { max-width: 1200px; margin: 0 auto; padding: 0 20px; margin-top:10px; }
.section-title { font-size: 40px; color: var(--text-dark); margin-bottom: 20px; text-align: center; font-weight: 500; }
.tab-nav { display: flex; gap: 20px; margin-bottom: 40px; justify-content: center; }
.tab-button { padding: 14px 36px; border-radius: 8px; border: none; background: #F8F9FA; color: var(--text-light); cursor: pointer; transition: all 0.3s ease; font-size: 16px; box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.tab-button.active { background: linear-gradient(105deg,#3989f8,#ff6bd0); color: white; transform: translateY(-2px); box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3); }
.tab-content { display: none; background: white; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); padding: 40px; gap: 40px; grid-template-columns: 1fr 1fr; }
.tab-content.active { display: grid; }
.content-left { padding-right: 30px; }
.content-ai-left { width: 700px; padding-right: 30px; }
.feature-subtitle { color: #333; font-size: 22px; margin-bottom: 30px; }
.feature-desc { color: var(--text-light); line-height: 260%; margin-bottom: 30px; }
.stats-container { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; margin-bottom: 30px; }
.stat-item { background: #F8FAFF; padding: 20px; border-radius: 8px; text-align: center; }
.stat-value { color: var(--primary-blue); font-size: 28px; font-weight: bold; margin-bottom: 8px; }
.stat-label { color: var(--text-light); font-size: 14px; }
.stats-data-container { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; }
.stat-data-item { background: #F8FAFF; padding: 20px; border-radius: 8px; text-align: center; }
.stat-data-value { color: var(--primary-blue); font-size: 28px; font-weight: bold; margin-bottom: 8px; }
.stat-data-value img { width: 80px; }
.stat-data-label { color: var(--text-light); font-size: 14px; }
.visualization-area { background: #F8FAFF; border-radius: 12px; padding: 20px;}
.visualization-area h3 { margin-bottom: 20px; }
.visualization-area h3 img { width: 40px; padding-right: 10px; }
.visualization-area li { font-size: 14px; color: var(--text-light); line-height: 260%; margin-bottom: 3px; }
.visualization-area img { width: 399px; }
.visualization-back-area { background: #F8FAFF; border-radius: 12px; padding: 20px; display: grid;place-items: center;    /* 单属性实现双向居中 */min-height: 400px;}
.visualization-back-area h3 { margin-bottom: 20px; }
.visualization-back-area h3 img { width: 40px; padding-right: 10px; }
.visualization-back-area li { font-size: 14px; color: var(--text-light); line-height: 260%; margin-bottom: 3px; }
.visualization-back-area img { width: 399px; }
.chart-placeholder { background: linear-gradient(45deg, #fff, #f1f5ff); border-radius: 8px; height: 200px; margin: 20px 0; position: relative; overflow: hidden; }
.chart-placeholder::after { content: "AI"; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--primary-blue); opacity: 0.3; }
.word-cloud { display: flex; flex-wrap: wrap; gap: 12px; margin-top:44px; }
.word-tag { padding: 6px 15px; background: rgba(74, 144, 226, 0.1); border-radius: 20px; color: var(--primary-blue); font-size: 14px; transition: all 0.2s ease; }
.word-zq-tag { padding: 6px 15px; border-radius: 20px; color: #333; font-size: 14px; transition: all 0.2s ease; }
.xzy-product { background: #fafeffb0; min-height: 300px; margin-top: 30px; padding-top: 30px; padding-bottom: 30px; }
.xzy-product-xzy { background: #ebf8fd; min-height: 100px; padding-top: 30px; padding-bottom: 30px; }
.xzyai-intro { text-align: center; color: #718096; font-size: 1.1em; line-height: 220%; max-width: 800px; margin: 0 auto 40px; padding-top: 10px; padding-bottom: 10px; }
.feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; margin-top: 25px; }
.feature-card { background: rgba(248, 250, 255, 0.6); border-radius: 12px; padding: 20px 10px; transition: all 0.3s ease; min-width: 210px; }
.feature-card:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(74, 144, 226, 0.15); }
.card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.card-icon { width: 40px; height: 40px; object-fit: contain; }
.card-title { color: #2c3e50; font-size: 16px; margin: 0; }
.card-desc { color: #666; font-size: 13px; line-height: 2; margin: 0; padding-left: 52px; }
.chart-placeholder li { font-size:13px; margin:20px 10px; color:#666; }
.chart-placeholder img { width:240px; }
.ask-button { background: #1e9fff; color: white; padding: 8px 20px; border: none; border-radius: 8px; cursor: pointer; margin-bottom: 15px; transition: background 0.3s; }
.ask-button:hover { background: #1A45CC; }
.ai-response { background: #F5F8FF; border-radius: 12px; padding: 20px; margin-top: 50px; line-height:260%; font-size:13px; min-height: 80px; position: relative; border: 1px solid #E0E7FF; display: none; white-space: pre-wrap; }
.typing-cursor::after { content: '|'; animation: blink 1s infinite; color: #2D5CFE; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.highlight-percent { color: #2D5CFE; font-weight: 700; }
.chart-bar { color: #FF6B6B; font-size: 1.2em; }
.analysis-actions { margin-top: 10px; border-top: 1px solid #eee; padding-top: 10px; display: flex; gap: 10px; }
.detail-btn, .compare-btn { background: #F5F8FF; border: 1px solid #2D5CFE; padding: 8px 16px; margin-right: 10px; border-radius: 4px; cursor: pointer; transition: all 0.3s; }
.detail-btn:hover, .compare-btn:hover { background: #2D5CFE; color: white; }
.pro-container { position:relative; width:1200px; height:516px; margin:auto; }
.pro-core { position:absolute; left:33%; top:10%; transform:translate(-50%, -50%); width:436px; height:436px; animation: float 3s ease-in-out infinite; z-index:2; }
.pro-core-image { width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 0 20px rgba(0,184,148,0.3)); }
.engine-module { position:absolute; width:306px; border-radius:16px; padding:16px; }
#engine-1 { left:5px; top:10px; }
#engine-2 { right:5px; top:10px; }
#engine-3 { left:5px; bottom:186px; }
#engine-4 { right:5px; bottom:186px; }
#engine-5 { left:5px; bottom:10px; }
#engine-6 { right:5px; bottom:10px; }
.module-number { width:40px; height:40px; background:var(--ai-green); border-radius:50%; color:white; font-size:20px; display:flex; align-items:center; justify-content:center; margin-bottom:15px; }
.module-title { font-size:16px; margin-bottom:15px; padding-bottom:8px; border-bottom:0px solid #03A9F4; background: #e6f9f5; color: #16215b; width: fit-content; padding: 6px 12px; font-weight: 500; }
.module-columns { display:grid; grid-template-columns:1fr; gap:15px; font-size:13px; line-height:260%; color:#666; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(0deg); filter: drop-shadow(0 5px 15px rgba(74,202,80,0.3)); } 50% { transform: translateY(-20px) rotate(3deg); filter: drop-shadow(0 15px 25px rgba(74,202,80,0.5)); } }
@media (max-width: 768px) { 
  .tab-content { grid-template-columns: 1fr; padding: 25px; } 
  .content-left { padding-right: 0; } 
  .tab-nav { flex-direction: column; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 30px; width: 100%; } 
  .feature-grid { grid-template-columns: 1fr; } 
  .card-desc { padding-left: 0; margin-top: 8px; } 
  .feature-desc { max-width: 321px; } 
  .stats-container { max-width: 300px; } 
  .word-cloud { max-width: 300px; } 
  .visualization-area { max-width: 280px; } 
  .visualization-area img { width: 270px; } 
  .feature-card { max-width: 300px; } 
  .stats-data-container { grid-template-columns: repeat(2, 1fr); } 
  .core-features { padding: 0 2px; margin-top: -10px;} 
  .visualization-back-area img {width: 340px;}
  .visualization-back-area {padding: 5px;min-height: 326px;}
  .section-title {font-size: 30px;}
  .xzyai-intro {font-size: 1em;margin: 0 auto 20px;}
  .engine-module {position: static; width: 356px;}
  .pro-container {position: relative;width:100%;height: 100%;margin: auto;}
  .pro-core-image {display: none;}
  .xzy-product {padding: 15px;}
}