/* === 首页仪表盘区域 === */
.main-content { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    margin: 20px 0; 
    position: relative; 
}
.dashboard-circle { 
    width: 280px; 
    height: 280px; 
    border-radius: 50%; 
    background: radial-gradient(circle, #1a4c82 0%, #051a4d 70%); 
    border: 2px solid #00d2ff; 
    box-shadow: 0 0 30px #00d2ff, inset 0 0 20px #00d2ff; 
    position: relative; 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    text-align: center; 
}
.circle-ring { 
    position: absolute; 
    top: -10px; 
    left: -10px; 
    right: -10px; 
    bottom: -10px; 
    border: 2px solid #00ff9d; 
    border-radius: 50%; 
    border-top-color: transparent; 
    border-bottom-color: transparent; 
    animation: rotateRing 4s linear infinite; 
    box-shadow: 0 0 15px #00ff9d; 
}
@keyframes rotateRing { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}
.circle-content { 
    z-index: 2; 
    width: 100%; 
}
.label { 
    font-size: 14px; 
    color: #aaccff; 
    margin-bottom: 5px; 
}
.value-big { 
    font-size: 48px; 
    font-weight: bold; 
    color: #00ffff; 
    text-shadow: 0 0 10px #00ffff; 
    font-family: "Arial", sans-serif; 
}
.details-grid { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 10px 5px; 
    width: 90%; 
    margin: 0 auto; 
    text-align: center; 
    font-size: 14px; 
    color: #aaccff; 
}
.details-grid b { 
    color: #ffffff; 
    font-weight: bold; 
    margin-left: 2px; 
}
.level-tag { 
    margin-top: 10px; 
    font-size: 14px; 
    color: #00ff9d; 
    font-weight: bold; 
    text-shadow: 0 0 5px #00ff9d; 
}

/* === 首页底部图片样式 === */
.div_spaces { 
    height: 20px; 
}
.div_base { 
    text-align: center; 
    padding: 0px 0px 20px; 
}
.img_base { 
    max-height: 80px; 
    height: auto; 
}
.img_business_school { 
    max-width:92%; 
    height: auto; 
    border: 1px solid #00d2ff; 
    border-radius: 6px; 
}

/* === 首页菜单网格 === */
.menu-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    gap: 10px; 
    padding: 0 15px; 
    margin-bottom: 25px; 
}
.nav-btn { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    padding: 10px 5px; 
    background: linear-gradient(to bottom, #1e3c72, #162a54); 
    border: 1px solid #00d2ff; 
    border-radius: 6px; 
    color: white; 
    font-size: 12px; 
    text-align: center; 
    text-decoration: none; 
    cursor: pointer; 
    transition: all 0.2s; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.3); 
}
.nav-btn:hover { 
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.6); 
}
.nav-btn:active { 
    background: #00d2ff; 
    color: #000; 
    transform: scale(0.95); 
}

/* --- 首页底部新闻滚动区域 --- */
/* --- 底部新闻列表 --- */
.news-section {
    padding: 0 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.news-item {
    background: linear-gradient(to left, #1a2a5c, #243b7a);
    padding: 12px 15px;
    border-radius: 20px;
    font-size: 14px;
    display: flex;          /* 使用 Flex 布局实现标题间隔 */
    align-items: center;
    border-left: 4px solid #00d2ff;
    margin-bottom: 10px;    /* 增加条目之间的垂直间距 */
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    transition: transform 0.2s;
}

.news-item:hover {
    transform: translateY(-2px); /* 悬停时轻微上浮效果 */
}

/* --- 首页新闻样式微调 --- */
.news-cat-link {
    color: #00ffff;
    text-decoration: none;
    font-weight: bold;
}
.news-cat-link:hover {
    text-decoration: underline;
}
.separator {
    color: #eee6e6;
    margin: 0 5px;
}
.news-title {
    color: #fff;
    flex: 1;
    text-decoration: none;
    display: block;
}
.news-title:hover {
    color: #00d2ff;
}

/* === 首页推荐产品模块 === */
.recommended-products {
    padding: 0 15px 10px;
}

.recommended-title {
    text-align: center;
    font-size: 18px;
    color: #00d2ff;
    margin-bottom: 20px;
    font-weight: bold;
    text-shadow: 0 0 5px #00d2ff;
    position: relative;
}

/* 标题底部的装饰线条，模仿仪表盘的环形风格 */
.recommended-title::after {
    content: '';
    display: block;
    width: 60px;
    height: 2px;
    background: linear-gradient(to right, transparent, #00d2ff, transparent);
    margin: 5px auto;
}

/* --- 产品网格布局 --- */
.product-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    padding: 0 10px;
}

/* --- 单个产品卡片 --- */
.product-card {
    background: linear-gradient(to bottom, #1a4c82 0%, #0b2a5e 100%);
    border: 1px solid #00d2ff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 
        0 0 10px rgba(0, 210, 255, 0.2),
        inset 0 0 5px rgba(0, 210, 255, 0.1);
    transition: all 0.3s ease;
    backdrop-filter: blur(2px);
}

/* 卡片悬停效果：增强发光 */
.product-card:hover {
    transform: scale(1.03);
    box-shadow: 
        0 0 15px rgba(0, 210, 255, 0.5),
        inset 0 0 10px rgba(0, 210, 255, 0.2);
    border-color: #00ff9d; /* 悬停时边框变为青绿色 */
}

/* --- 产品图片容器 --- */
/* --- 产品图片容器 (优化版) --- */
.product-img {
    width: 100%;
    /* 建议：稍微增加高度，或者使用 aspect-ratio 保持比例 */
    height: 160px; /* 手机端看起来更舒适 */
    
    /* 关键属性：保持图片比例，自动裁剪溢出部分，防止变形 */
    object-fit: cover; 
    
    /* 关键属性：确保图片在容器内居中 */
    object-position: center; 
    
    border-bottom: 1px solid rgba(0, 210, 255, 0.3);
    
    /* 优化：移动端渲染性能 */
    will-change: transform; 
}

/* --- 产品信息区域 --- */
.product-info {
    padding: 12px;
    text-align: center;
}

.product-name {
    font-size: 14px;
    color: #ffffff;
    margin: 0 0 8px 0;
    font-weight: 500;
    min-height: 36px; /* 保持高度一致，防止按钮跳动 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* --- 查看详情按钮 --- */
.btn-view {
    display: inline-block;
    width: 100%;
    padding: 8px;
    background: transparent;
    border: 1px solid #00d2ff;
    color: #00d2ff;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    text-align: center;
}

.btn-view:hover {
    background: #00d2ff;
    color: #000;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
}

/* --- 暂无数据提示 --- */
.no-products {
    grid-column: span 2;
    text-align: center;
    padding: 20px;
    color: #888;
    font-size: 14px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    border: 1px dashed #666;
}

.btn-more-product {
    display: inline-block;
    width: 92%;
    padding: 8px;
    background: transparent;
    border: 1px solid #00d2ff;
    color: #00d2ff;
    font-size: 13px;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
    text-decoration: none;
    text-align: center;
}

.btn-more-product:hover {
    background: #00d2ff;
    color: #000;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.6);
}

.more-product {
    text-align: center;
}

/* 容器设置：关键是为了防止图片放大时被挤开（防抖） */
/* === 商学院图片容器 (修正类名 + 居中布局) === */
.business_school {
    /* 核心：Flex 居中 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    
    /* 占满父容器宽度，保证居中范围 */
    width: 100%;
    /* 防止溢出 */
    overflow: hidden;
    /* 上下间距 */
    padding: 0 0 20px;
}

/* 让链接也变成居中容器，修复布局问题 */
.business_school a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* 图片样式 */
.img_business_school {
    transition: transform 0.3s ease-out;
    transform-origin: center center;
    /* 保证图片最大宽度，居中显示 */
    max-width: 92%;
    height: auto;
    display: block;
}

/* === 精彩活动图片容器 (修正类名 + 居中布局) === */
.activity {
    /* 核心：Flex 居中 */
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center;     /* 垂直居中 */
    
    /* 占满父容器宽度，保证居中范围 */
    width: 100%;
    /* 防止溢出 */
    overflow: hidden;
    /* 上下间距 */
    padding: 0 0 20px;
    margin-top: 10px;
}

/* 让链接也变成居中容器，修复布局问题 */
.activity a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
}

/* 图片样式 */
.img_activity {
    transition: transform 0.3s ease-out;
    transform-origin: center center;
    /* 保证图片最大宽度，居中显示 */
    max-width: 92%;
    height: auto;
    display: block;
}

/* =============================================
   === AI 环境健康顾问页面 (ai_health.html) ===
   === 统一首页深蓝科技主题                      ===
   ============================================= */

/* --- 页面背景：与首页一致的深蓝 --- */
body.ai-health-page {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', sans-serif;
    background: #051a4d;
    min-height: 100vh;
    padding: 15px;
    color: #fff;
    margin: 0;
}

.ai-health-container {
    max-width: 700px;
    margin: 0 auto;
}

/* --- 返回按钮 --- */
.back-btn {
    display: inline-block;
    margin-bottom: 16px;
    color: #00d2ff;
    text-decoration: none;
    font-size: 14px;
}
.back-btn:hover {
    text-decoration: underline;
}

/* --- 页头 --- */
.ai-header {
    text-align: center;
    margin-bottom: 24px;
}
.ai-header h1 {
    font-size: 22px;
    margin-bottom: 6px;
    color: #00ffff;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}
.ai-header p {
    opacity: 0.7;
    font-size: 13px;
    color: #aaccff;
}

/* --- 通用卡片：复用首页 product-card 风格 --- */
.ai-card {
    background: linear-gradient(to bottom, #1a4c82 0%, #0b2a5e 94%);
    border: 1px solid #00d2ff;
    border-radius: 12px;
    padding: 18px;
    margin-bottom: 16px;
    box-shadow:
        0 0 10px rgba(0, 210, 255, 0.2),
        inset 0 0 5px rgba(0, 210, 255, 0.1);
}

.ai-card-title {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #00d2ff;
    text-shadow: 0 0 5px rgba(0, 210, 255, 0.4);
}

/* --- 实时数据网格 --- */
.data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.data-item {
    background: linear-gradient(to bottom, #1e3c72, #162a54);
    border: 1px solid rgba(0, 210, 255, 0.3);
    border-radius: 8px;
    padding: 12px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.data-item .label {
    font-size: 12px;
    color: #aaccff;
    margin-bottom: 4px;
}
.data-item .value {
    font-size: 20px;
    font-weight: 700;
    color: #00ffff;
    text-shadow: 0 0 8px rgba(0, 255, 255, 0.5);
    font-family: "Arial", sans-serif;
}
.data-item .unit {
    font-size: 12px;
    color: #aaccff;
}

/* --- 分级标签网格 --- */
.grade-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}
.grade-item {
    padding: 10px;
    border-radius: 8px;
    background: linear-gradient(to bottom, #1e3c72, #162a54);
    border: 1px solid rgba(0, 210, 255, 0.2);
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.grade-item .param-name {
    font-size: 12px;
    color: #aaccff;
    margin-bottom: 4px;
}
.grade-item .param-label {
    font-size: 13px;
    padding: 3px 10px;
    border-radius: 4px;
    display: inline-block;
}
.label-good {
    background: rgba(0, 255, 157, 0.15);
    color: #00ff9d;
    text-shadow: 0 0 5px rgba(0, 255, 157, 0.4);
}
.label-moderate {
    background: rgba(241, 196, 15, 0.15);
    color: #f1c40f;
}
.label-poor {
    background: rgba(231, 76, 60, 0.15);
    color: #e74c3c;
}

/* --- 综合评分圆 --- */
.score-section {
    text-align: center;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(0, 210, 255, 0.2);
}
.score-circle {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    font-weight: 700;
    margin-bottom: 6px;
    font-family: "Arial", sans-serif;
}
.score-high {
    background: radial-gradient(circle, #1a4c82, #0b2a5e);
    border: 2px solid #00ff9d;
    box-shadow: 0 0 15px rgba(0, 255, 157, 0.5), inset 0 0 10px rgba(0, 255, 157, 0.2);
    color: #00ff9d;
    text-shadow: 0 0 8px rgba(0, 255, 157, 0.6);
}
.score-mid {
    background: radial-gradient(circle, #1a4c82, #0b2a5e);
    border: 2px solid #f1c40f;
    box-shadow: 0 0 15px rgba(241, 196, 15, 0.4), inset 0 0 10px rgba(241, 196, 15, 0.15);
    color: #f1c40f;
    text-shadow: 0 0 8px rgba(241, 196, 15, 0.5);
}
.score-low {
    background: radial-gradient(circle, #1a4c82, #0b2a5e);
    border: 2px solid #e74c3c;
    box-shadow: 0 0 15px rgba(231, 76, 60, 0.4), inset 0 0 10px rgba(231, 76, 60, 0.15);
    color: #e74c3c;
    text-shadow: 0 0 8px rgba(231, 76, 60, 0.5);
}

/* --- AI 建议区域 --- */
.advice-summary {
    font-size: 15px;
    padding: 12px;
    background: linear-gradient(to bottom, #1e3c72, #162a54);
    border-radius: 8px;
    border-left: 3px solid #00d2ff;
    margin-bottom: 12px;
    color: #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.risk-badge {
    display: inline-block;
    padding: 4px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 14px;
}
.risk-low {
    background: rgba(0, 255, 157, 0.12);
    color: #00ff9d;
    border: 1px solid rgba(0, 255, 157, 0.3);
}
.risk-mid {
    background: rgba(241, 196, 15, 0.12);
    color: #f1c40f;
    border: 1px solid rgba(241, 196, 15, 0.3);
}
.risk-high {
    background: rgba(231, 76, 60, 0.12);
    color: #e74c3c;
    border: 1px solid rgba(231, 76, 60, 0.3);
}
.suggestion-list {
    list-style: none;
    margin-bottom: 14px;
    padding: 0;
}
.suggestion-list li {
    padding: 10px 12px;
    margin-bottom: 8px;
    background: linear-gradient(to bottom, #1e3c72, #162a54);
    border: 1px solid rgba(0, 210, 255, 0.15);
    border-radius: 8px;
    font-size: 14px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    color: #ddd;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.suggestion-list li::before {
    content: '💡';
    flex-shrink: 0;
}
.outdoor-advice {
    padding: 12px;
    background: linear-gradient(to bottom, #1a4c52, #0b3a3e);
    border: 1px solid rgba(0, 255, 157, 0.25);
    border-radius: 8px;
    font-size: 14px;
    color: #a8e6cf;
    margin-bottom: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.outdoor-advice::before {
    content: '🏃 ';
}
.disclaimer {
    font-size: 12px;
    color: #7799bb;
    text-align: center;
    padding-top: 12px;
    border-top: 1px dashed rgba(0, 210, 255, 0.2);
}
.source-tag {
    font-size: 11px;
    color: #5577aa;
    text-align: right;
    margin-top: 8px;
}

/* --- 获取建议按钮：复用首页 btn-view 风格放大版 --- */
.btn-refresh {
    display: block;
    width: 100%;
    padding: 14px;
    background: transparent;
    border: 1px solid #00d2ff;
    border-radius: 8px;
    color: #00d2ff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    margin-bottom: 16px;
    text-align: center;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}
.btn-refresh:hover {
    background: #00d2ff;
    color: #000;
    box-shadow: 0 0 15px rgba(0, 210, 255, 0.6);
}
.btn-refresh:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    background: transparent;
    color: #00d2ff;
    box-shadow: none;
}

/* --- 加载动画 --- */
.ai-loading {
    display: none;
    text-align: center;
    padding: 30px;
}
.ai-loading.active {
    display: block;
}
.spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(0, 210, 255, 0.2);
    border-top-color: #00d2ff;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 12px;
    box-shadow: 0 0 10px rgba(0, 210, 255, 0.3);
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* --- 基线比对卡片 --- */
.baseline-highlight {
    padding: 14px;
    background: linear-gradient(to bottom, #1a4c52, #0b3a3e);
    border: 1px solid rgba(0, 255, 157, 0.3);
    border-radius: 8px;
    margin-bottom: 14px;
    font-size: 15px;
    line-height: 1.6;
    color: #a8e6cf;
    box-shadow: 0 0 8px rgba(0, 255, 157, 0.15);
}
.baseline-highlight .icon {
    margin-right: 6px;
}
.baseline-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 12px;
}
.baseline-item {
    padding: 8px 10px;
    background: linear-gradient(to bottom, #1e3c72, #162a54);
    border: 1px solid rgba(0, 210, 255, 0.15);
    border-radius: 6px;
    font-size: 12px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.baseline-item .bl-label {
    color: #aaccff;
    margin-bottom: 2px;
}
.baseline-item .bl-value {
    color: #fff;
    font-weight: 600;
}
.baseline-item.active {
    border: 1px solid rgba(0, 255, 157, 0.5);
    background: linear-gradient(to bottom, #1a4c52, #0b3a3e);
    box-shadow: 0 0 8px rgba(0, 255, 157, 0.2);
}
.baseline-item.active .bl-value {
    color: #00ff9d;
    text-shadow: 0 0 5px rgba(0, 255, 157, 0.4);
}
.baseline-source {
    margin-top: 10px;
    font-size: 11px;
    color: #5577aa;
    line-height: 1.5;
}

/* --- 通用隐藏 --- */
.hidden {
    display: none;
}

/* --- 响应式 --- */
@media (max-width: 500px) {
    .data-grid,
    .grade-grid,
    .baseline-detail-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================
   === AI 健康页 ECharts 图表区域               ===
   ============================================= */
.chart-row {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}
.chart-box {
    flex: 1;
    min-width: 0;          /* 防止 flex 子项撑开 */
}
.chart-box-inner {
    width: 100%;
    height: 155px;
}
.chart-nai-box {
    width: 100%;
    height: 240px;
}
.chart-radar-box {
    width: 100%;
    height: 240px;
}

@media (max-width: 400px) {
    .chart-nai-box  { height: 200px; }
    .chart-box-inner { height: 130px; }
    .chart-radar-box { height: 200px; }
}