body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100vh;
    background-color: #020a1a;
    background-image: url('../utils/allbgimg.png'),
        radial-gradient(
            ellipse at center,
            #1b2735 0%,
            #020a1a 70%
    );
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed, fixed;
    color: #fff;
    font-family: Arial, sans-serif;
    overflow: hidden; /* 防止出现滚动条 */

    /* 【注意】原先这里的 flex 布局已被移除，移交给了 #scale-box */
}

/* --- 【新增】核心适配容器 --- */
#scale-box {
    /* 1. 锁定设计稿尺寸 */
    width: 1920px;
    height: 1080px;

    /* 2. 绝对定位，结合 JS 进行缩放 */
    position: absolute;
    transform-origin: 0 0; /* 变换原点设为左上角 */
    left: 50%; /* 初始居中，JS 会修正 */
    top: 50%;
    transition: 0.3s; /* 窗口变化时的平滑过渡 */
    z-index: 999;

    /* 3. 【关键】接管原先 body 的布局逻辑 */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* --- 顶部标题栏 --- */

.header-center {
    text-align: center;

    /* 【新增】改为绝对定位 */
    position: absolute;
    /*top: 10px; !* 距离地图顶部 10px *!*/
    left: 0;
    right: 0;
    z-index: 100; /* 确保在地图之上 */
}

/* 中居中 */

/* 右对齐（空，所以无内容） */
/* --- 【修改】下挂式标题铭牌 --- */
.title-plaque {
    /*margin-top: 10px;*/
    display: inline-flex;
    position: relative;
    z-index: 10;
    height: 75px;
    padding: 0 60px;
    align-items: center;

    /* 【新增】使用 filter 来创建阴影, 它会跟随 clip-path */
    filter: drop-shadow(0 5px 15px rgba(64, 233, 255, 0.5));

    /* (所有 background, border, box-shadow, border-radius 已移除) */
}

.title-plaque h1{
    font-size: 36px;
}

.title-plaque::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1; /* 置于 h1 文字下方 */

    /* 【复制】将样式移到这里 */
    background: #0e2f5a;
    border: 2px solid #40e9ff;
    border-top: none;

    /* 【关键】使用 clip-path 裁剪出您绘制的形状
       (顶部平, 侧边 70% 处开始, 底部 5% 处收尾) */
    clip-path: polygon(0% 0%, 100% 0%, 90% 100%, 10% 100%);
}


/* Header glow animation */
@keyframes header-glow {
    0% {
        box-shadow: 0 5px 10px rgba(64, 233, 255, 0.5);
    }
    50% {
        box-shadow: 0 5px 20px rgba(64, 233, 255, 0.9);
    }
    100% {
        box-shadow: 0 5px 10px rgba(64, 233, 255, 0.5);
    }
}

/* --- 主内容区 (三栏布局) --- */
.main-content {
    flex: 1; /* 占据标题栏之外的所有剩余高度 */
    display: flex;
    flex-direction: row; /* 水平排列 (左中右) */
    padding: 15px;
    gap: 15px; /* 栏与栏之间的间距 */
}

/* --- 所有三栏的通用设置 --- */
.column {
    display: flex;
    flex-direction: column;
    gap: 15px; /* 栏内盒子上下的间距 */
    height: 100%; /* 占满父容器高度 */
}

/* --- 三栏的具体宽度比例 (2.5 : 5 : 2.5) --- */
.left-column {
    flex: 2.2;
}

.center-column {
    flex: 5.6;
}

.right-column {
    flex: 2.2;
}

/* --- .chart-box (所有面板的“皮肤”) --- */
.chart-box {
    position: relative;
    background-color: rgba(10, 24, 60, 0.8);
    border-radius: 4px;
    overflow: hidden;

    /* 【关键修正 1】
      添加 position: relative，防止 L7 地图的子元素溢出
    */
    position: relative;
}

.chart-box::before,
.chart-box::after {
    content: '';
    position: absolute;
    pointer-events: none;
    z-index: 1;
}

.chart-box::before {
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px solid rgba(64, 233, 255, 0.7);
    border-radius: 4px;
    box-shadow: 0 0 20px rgba(64, 233, 255, 0.9), inset 0 0 15px rgba(64, 233, 255, 0.7);
    animation: glow 2s infinite ease-in-out;
}

.chart-box::after {
    top: -2px;
    left: 20px;
    right: 20px;
    height: 4px;
    background: linear-gradient(to right,
    #40e9ff 0%, #40e9ff 10%,
    transparent 10%, transparent 20%,
    #40e9ff 20%, #40e9ff 30%,
    transparent 30%, transparent 40%,
    #40e9ff 40%, #40e9ff 50%,
    transparent 50%, transparent 60%,
    #40e9ff 60%, #40e9ff 70%,
    transparent 70%, transparent 80%,
    #40e9ff 80%, #40e9ff 90%,
    transparent 90%, transparent 100%
    );
    box-shadow: 0 0 10px #40e9ff;
    animation: glow 2s infinite ease-in-out;
}

/* Corner decorations */
.chart-box .corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border: 2px solid rgba(64, 233, 255, 0.9);
    z-index: 2;
    animation: glow 2s infinite ease-in-out;
}

.chart-box .top-left {
    top: -2px;
    left: -2px;
    border-bottom: none;
    border-right: none;
    border-top-left-radius: 4px;
}

.chart-box .top-left::before {
    content: '';
    position: absolute;
    top: 10px;
    left: 0;
    width: 10px;
    height: 2px;
    background: #40e9ff;
    transform: rotate(-45deg);
    transform-origin: top left;
}

.chart-box .top-right {
    top: -2px;
    right: -2px;
    border-bottom: none;
    border-left: none;
    border-top-right-radius: 4px;
}

.chart-box .top-right::before {
    content: '';
    position: absolute;
    top: 10px;
    right: 0;
    width: 10px;
    height: 2px;
    background: #40e9ff;
    transform: rotate(45deg);
    transform-origin: top right;
}

.chart-box .bottom-left {
    bottom: -2px;
    left: -2px;
    border-top: none;
    border-right: none;
    border-bottom-left-radius: 4px;
}

.chart-box .bottom-left::before {
    content: '';
    position: absolute;
    bottom: 10px;
    left: 0;
    width: 10px;
    height: 2px;
    background: #40e9ff;
    transform: rotate(45deg);
    transform-origin: bottom left;
}

.chart-box .bottom-right {
    bottom: -2px;
    right: -2px;
    border-top: none;
    border-left: none;
    border-bottom-right-radius: 4px;
}

.chart-box .bottom-right::before {
    content: '';
    position: absolute;
    bottom: 10px;
    right: 0;
    width: 10px;
    height: 2px;
    background: #40e9ff;
    transform: rotate(-45deg);
    transform-origin: bottom right;
}

/* Glow animation */
@keyframes glow {
    0% {
        box-shadow: 0 0 10px #40e9ff;
    }
    50% {
        box-shadow: 0 0 25px #40e9ff;
    }
    100% {
        box-shadow: 0 0 10px #40e9ff;
    }
}

/* --- 左栏和右栏的子项 (1:1:1) --- */
#right-top-box {
    flex: 0.8 1 0; /* 比例 0.8 */
    overflow: hidden;
}

#right-middle-box {
    flex: 0.5 1 0; /* 比例 1.2 */
    overflow: hidden;
}

#right-bottom-box {
    flex: 1 1 0; /* 比例 1 */
    overflow: hidden;
}

/* 【新增】左侧栏的新比例 (1 : 0.7 : 1.3) */
/* (1 + 0.7 + 1.3 = 3) */
#echarts-bar-chart {
    flex: 0.9 1 0; /* 比例 1 (flex-grow: 1) */
    overflow: hidden; /* 隐藏溢出的内容 (如果内容过多) */
}

#echarts-pie-chart {
    flex: 0.8 1 0; /* 比例 0.7 (flex-grow: 0.7) */
    overflow: hidden;
}

#left-bottom-box {
    flex: 1.3 1 0; /* 比例 1.3 (flex-grow: 1.3) */
    overflow: hidden;
}

/* --- 中间栏的子项 (7:3) --- */
.center-column #antv-l7-map {
    flex: 1;
    /* L7 地图容器的大小完全由 flex: 7 控制。
       L7.js 会自动检测这个 <div> 的大小。
       我们不再需要 height: 100%
    */
}

.center-column .center-bottom-container {
    /*flex: 3;*/
    /*display: flex;*/
    /*gap: 15px;*/
}

/* --- 中间栏下半部分的子项 (1:1) --- */
.center-bottom-container .chart-box {
    flex: 1; /* 1:1 均分宽度 */
}


/* 【关键修正 2】
  这个规则现在只用于 ECharts。
  ECharts 需要一个明确设置了宽高的容器来初始化。
  L7 容器 (id=antv-l7-map) 已经由 flexbox 定义了大小，所以从这里移除。
*/
#echarts-bar-chart,
#echarts-pie-chart {
    width: 100%;
    height: 100%;
}


/* --- 【新增】时钟和天气的样式 --- */
#clock-info {
    font-family: 'Arial', 'Helvetica Neue', Helvetica, sans-serif;
    font-size: 22px;
    font-weight: bold;
    color: #40e9ff; /* 科技蓝 */
    letter-spacing: 2px;
}

/* 闪烁的冒号 */
#clock-info .colon {
    animation: blink 1s infinite;
}

@keyframes blink {
    50% {
        opacity: 0;
    }
}

#weather-info {
    color: #c4e9ff; /* 浅蓝色 */
}

#weather-info span {
    margin-right: 10px; /* 让天气元素之间有一点间距 */
}

#echarts-bar-chart {
    display: flex;
    flex-direction: column;
    padding: 15px; /* 增加一些内边距 */
    box-sizing: border-box;
}

/* --- 【新增】摘要行列表样式 (仿“油气生产加工”) --- */

/* 1. .chart-box (id=left-top-summary) 的内部布局 */
#echarts-bar-chart {
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
}

/* 2. 块的总标题 */
.summary-block-title {
    font-size: 18px;
    font-weight: bold;
    color: #40e9ff;
    margin-bottom: 6px;
    padding-left: 5px;
    border-left: 4px solid #40e9ff; /* 科技蓝的左侧装饰条 */
}

/* 3. 容纳所有“行”的容器 */
.summary-row-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start; /* 【修改】从顶部开始排列 */
    gap: 17px; /* 【新增】控制行与行之间的垂直间距 */
    padding: 10px 20px 0; /* 【新增】顶部/左右/底部 内边距，使行"变短" */
    box-sizing: border-box; /* 【新增】确保 padding 不会撑破布局 */
}

/* 4. 单个数据行 */
.summary-row {
    display: flex;
    align-items: center;
    padding: 6px 10px;
    border-radius: 4px;
    position: relative;
    margin-top: 5px;
}

/* 默认背景（适用于图标颜色较深的行：如专利、作品登记） */
.summary-row.bg-default {
    background: linear-gradient(to right,
    rgba(20, 126, 255, 0) 0%,
    rgba(20, 126, 255, 0.25) 20%,
    rgba(20, 126, 255, 0.25) 80%,
    rgba(20, 126, 255, 0) 100%
    );
}

/* 增强背景（适用于图标颜色较淡的行：如注册商标、数据知识产权） */
.summary-row.bg-highlight {
    background: linear-gradient(to right,
    rgba(30, 150, 255, 0) 0%,
    rgba(30, 150, 255, 0.45) 20%,
    rgba(30, 150, 255, 0.45) 80%,
    rgba(30, 150, 255, 0) 100%
    );
    /* 可选：加一点轻微发光感 */
    box-shadow: 0 0 8px rgba(30, 150, 255, 0.15);
}

/* 5. 行图标 */
.summary-icon {
    font-size: 24px;
    color: #40e9ff;
    margin-right: 15px;
}

/* 6. 行数据项 (主内容) */
/*.summary-item {*/
/*    display: flex;*/
/*    flex-direction: column; !* 竖排 (标题, 数字) *!*/
/*    flex: 1; !* 占据主要空间 *!*/
/*}*/

.summary-title {
    font-size: 18px;
    color: #c4e9ff; /* 浅蓝色 */
    flex: 1;
}

.summary-value {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
}

/*!* 7. 行数据项 (对比) *!*/
/*.summary-item-comparison {*/
/*    font-size: 15px;*/
/*    color: #aaa;*/
/*    width: 160px; !* 给一个固定宽度让其对齐 *!*/
/*    text-align: right;*/
/*}*/

/*!* 8. 增长/下降的特殊颜色 *!*/
/*.summary-item-comparison.kpi-up {*/
/*    color: #67C23A; !* 绿色 *!*/
/*}*/

/*.summary-item-comparison.kpi-down {*/
/*    color: #F56C6C; !* 红色 *!*/
/*}*/

/*!* 数字加粗 + 放大 *!*/
/*.summary-item-comparison .comparison-value {*/
/*    font-weight: bold;*/
/*    font-size: 16px; !* 比整体大一点（原15px → 16px） *!*/
/*}*/

/*!* 可选：箭头和文字保持原色或统一 *!*/
/*.summary-item-comparison .arrow,*/
/*.summary-item-comparison .comparison-text {*/
/*    color: inherit;*/

/*}*/

.arrow {
    font-size: 20px;
    font-weight: bold; /* 【修改点 1】加粗 */
}

/*.summary-item-comparison .arrow {*/
/*    display: inline-block;*/
/*    min-width: 1.2em; !* 防止布局跳动 *!*/
/*}*/

/* 【新增】
   为 .kpi-up 和 .kpi-down 的箭头应用动画
*/
/*.summary-item-comparison.kpi-up .arrow {*/
/*    !* 应用向上飞动画，2秒周期，无限循环 *!*/
/*    animation: fly-up 2s infinite linear;*/
/*}*/

/*.summary-item-comparison.kpi-down .arrow {*/
/*    !* 应用向下飞动画，2秒周期，无限循环 *!*/
/*    animation: fly-down 2s infinite linear;*/
/*}*/

#echarts-pie-chart {
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
}

/* 2. 排行榜总标题 */

/* 3. 2个卡片的横向容器 */
.ranking-card-container {
    flex: 1; /* 占满剩余所有空间 */
    display: flex;
    flex-direction: row; /* 【关键】横向排列 */
    justify-content: space-between;
    gap: 10px; /* 卡片之间的间距 */
}


/* 4. 单个排行榜卡片 */
.ranking-card {
    flex: 1;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: 15px;
    border-radius: 4px;

    /* 【修改】移除边框，添加渐变背景和内阴影 */
    background: linear-gradient(to right,
    rgba(20, 126, 255, 0.2) 0%,
    rgba(20, 126, 255, 0.05) 100%
    );
    box-shadow: inset 0 0 15px rgba(64, 233, 255, 0.1);
}

/* 5. 卡片左侧内容 (标题 + 数字) */
.rank-content {
    display: flex;
    flex-direction: column; /* 竖排 */
    justify-content: center;
}

.rank-title {
    font-size: 14px;
    color: #c4e9ff; /* 浅蓝色 */
}

.rank-value {
    font-size: 22px;
    font-weight: bold;
    color: #fff;
    line-height: 1.3;
}

/* 6. 卡片右侧排名 (NO.2) */
.rank-number {
    font-size: 36px;
    font-weight: bold;
    color: #40e9ff; /* 科技蓝 */
    font-style: italic;
    line-height: 1;
}

.rank-number span {
    font-size: 16px;
    color: #aaa;
    display: block; /* "NO." 在数字上方 */
    font-style: normal;
}

/* 排行榜横条容器 */
.ranking-bar-container {
    display: flex;
    flex-direction: column; /* 竖排每个条 */
    gap: 10px; /* 条之间间距 */
    padding: 10px;
}

/* 单个横条 */
.ranking-bar {
    display: flex;
    align-items: center; /* 垂直居中 */
    background: linear-gradient(to right, rgba(20, 126, 255, 0.2), rgba(20, 126, 255, 0.05)); /* 浅蓝渐变条背景 */
    padding: 4px 12px;
    border-radius: 4px;
    font-size: 15px;
    color: #fff;
}


/* 标题（中间） */
.ranking-title {
    flex: 1; /* 占满剩余空间 */
    color: #c4e9ff;
}

/* 值（右侧） */
.ranking-value {
    font-weight: bold;
    text-align: right;
    min-width: 100px; /* 固定宽度，对齐 */
}

.ranking-header {
    display: flex;
    align-items: center;
    /*padding: 2px 6px;*/
    background: linear-gradient(to right, rgba(64, 233, 255, 0.15), rgba(64, 233, 255, 0.05));
    border: 1px solid rgba(64, 233, 255, 0.3);
    border-radius: 6px;
    font-size: 14px;
    color: #40e9ff;
    font-weight: bold;
    margin-bottom: 4px;
}

.header-rank {
    min-width: 50px;
    text-align: left;
}

.header-title {
    flex: 1;
}

.header-value {
    min-width: 100px;
    text-align: right;
}

/* 内容条：加大字体 + 加大条高 + 更深背景 */
.ranking-bar {
    display: flex;
    align-items: center;
    background: linear-gradient(to right, rgba(20, 126, 255, 0.35), rgba(20, 126, 255, 0.1));
    padding: 8px 8px; /* 加大内边距 */
    border-radius: 6px;
    font-size: 12px; /* 字体放大 */
    color: #fff;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
    transition: all 0.2s;
}

.ranking-bar:hover {
    background: linear-gradient(to right, rgba(20, 126, 255, 0.45), rgba(20, 126, 255, 0.15));
    transform: translateY(-1px);
}

.ranking-number {
    font-weight: bold;
    margin-right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;

    /* 【修改 1】恢复到更合理、更高级的尺寸 */
    width: 34px; /* 原来是 34px */
    height: 30px; /* 原来是 30px */
    font-size: 16px; /* 原来是 16px */

    /* 【修改 2】裁剪路径 (保持不变) */
    clip-path: polygon(15% 0%, 85% 0%, 100% 40%, 50% 100%, 0% 40%);

    /* 【修改 3】使用 filter 来创建贴合形状的阴影，增强立体感 */
    /* (原有的 box-shadow 无法为 clip-path 创建外部阴影) */
    filter: drop-shadow(0 3px 4px rgba(0, 0, 0, 0.4));

    /* 【新增】确保在 filter 生效时，元素有自己的堆叠上下文 */
    position: relative;
    z-index: 1;
}

/* --- 金色钻石样式 (用于 1, 2, 3) 【修正版】--- */
.ranking-number.gold {
    /* 【修改 1】使用径向渐变，模拟顶部高光 */
    background: radial-gradient(circle at 50% 10%, #FEEA83, #D4AF37 60%, #C78D0B 100%);

    color: #4D2D0B; /* 文字颜色不变 */
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3); /* 文字高光不变 */

    /* 【修改 2】使用多层内阴影模拟“刻面”和“深度” */
    /* (移除了原有的外部阴影，因为它已被 filter 替代) */
    box-shadow: /* 1. 顶部边缘的高光 */ inset 0 1px 1px rgba(255, 230, 150, 0.8),
        /* 2. 底部边缘的暗部 */ inset 0 -2px 3px rgba(77, 45, 11, 0.3),
        /* 3. 整体的内描边 */ inset 0 0 0 2px #D4AF37;
}

/* --- 银色钻石样式 (用于 4+) 【修正版】--- */
.ranking-number.silver {
    /* 【修改 1】使用径向渐变，模拟顶部高光 */
    background: radial-gradient(circle at 50% 10%, #FFFFFF, #DDE1E5 60%, #9D9D9D 100%);

    color: #222; /* 文字颜色不变 */
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.3); /* 文字高光不变 */

    /* 【修改 2】使用多层内阴影模拟“刻面”和“深度” */
    box-shadow: /* 1. 顶部边缘的高光 */ inset 0 1px 1px rgba(255, 255, 255, 0.9),
        /* 2. 底部边缘的暗部 */ inset 0 -2px 3px rgba(0, 0, 0, 0.3),
        /* 3. 整体的内描边 */ inset 0 0 0 2px #AAAAAA;
}

.ranking-title {
    flex: 1;
    color: #e0f7ff;
    white-space: nowrap;
    font-size: 18px;
}

.ranking-value {
    font-weight: bold;
    text-align: right;
    min-width: 120px;
    font-size: 20px;
}

.ranking-value small {
    font-size: 14px;
    color: #88dfff;
    margin-left: 4px;
}

.summary-value small {
    font-size: 14px;
    color: #88dfff;
    margin-left: 4px;
}

.ranking-header {
    display: flex;
    align-items: center;
    padding: 10px 12px;
    background: linear-gradient(to right, rgba(64, 233, 255, 0.15), rgba(64, 233, 255, 0.05));
    border: 1px solid rgba(64, 233, 255, 0.3);
    border-radius: 6px;
    font-size: 14px;
    color: #40e9ff;
    font-weight: bold;
    margin-bottom: 5px;
}

/* 知识产权跃升榜样式：去掉排名图标后，优化两列布局 */
#echarts-pie-chart .header-title {
    flex: 1;
}

#echarts-pie-chart .header-value {
    min-width: 180px;
    text-align: right;
}

#echarts-pie-chart .ranking-title {
    flex: 1;
    max-width: 9em;
    white-space: normal;
    font-size: 16px;
    line-height: 1.35;
}

#echarts-pie-chart .ranking-value {
    min-width: 180px;
    font-size: 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

#echarts-pie-chart .ranking-growth {
    font-size: 14px;
    color: #7fe3ff;
    font-weight: 600;
}
#echarts-pie-chart .ranking-growth b{
    font-size: 16px;
    color: #67c23a;
}


#left-bottom-box {
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
}

/* 2. 2x2 网格容器 */
.quad-chart-container {
    flex: 1; /* 占满剩余空间 */
    display: grid;
    grid-template-columns: 1fr 1fr; /* 2 列 */
    grid-template-rows: 1fr 1fr; /* 2 行 */
    gap: 15px; /* 单元格之间的间距 */
    overflow: hidden; /* 防止内容溢出 */
}

/* 3. 单元格 */
.quad-chart-cell {
    display: flex;
    flex-direction: column;
    padding: 10px;
    background-color: rgba(20, 126, 255, 0.05); /* 极淡的背景色 */
    border-radius: 4px;
}

/* 4. 单元格标题 */
.quad-chart-title {
    font-size: 16px;
    color: #c4e9ff;
    margin-bottom: 5px;
    white-space: nowrap;
}

.quad-chart-title .icon {
    margin-left: 5px;
}

/* 5. 单元格内容区 (环 + 条) */
.quad-chart-body {
    flex: 1;
    display: flex;
    align-items: center; /* 垂直居中 */
    gap: 10px; /* 环和条之间的间距 */
}

/* 6. 环形图容器 */
.quad-gauge-container {
    flex: 0 0 100px; /* 固定宽度 100px, 不放大不缩小 */
    height: 100px; /* ECharts 必须有高度 */
    position: relative;
}

/* 7. HTML 条形图容器 */
.quad-bar-container {
    flex: 1; /* 占满剩余宽度 */
    display: flex;
    flex-direction: column; /* 竖排两个条 */
    gap: 8px; /* 两个条之间的间距 */
}

/* 8. 单个 HTML 条 */
.quad-bar {
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 14px;
    font-weight: bold;
    color: #fff;
    box-sizing: border-box;
    /* 文本在条内部右侧 */
    text-align: right;
    white-space: nowrap;
}

.bar-current {
    background-color: #007bff; /* 亮蓝色 */
}

.bar-previous {
    background-color: #6c757d; /* 灰色 */
}

#right-top-box {
    display: flex;
    flex-direction: column;
    padding: 15px; /* 【修正】增加内边距 */
    box-sizing: border-box;
}

.ranking-pie-container {
    flex: 1; /* 【修正】占满父容器的剩余空间 */
    width: 100%; /* 宽度 100% */
    min-height: 150px; /* 【修正】设置最小高度 */
}

#right-middle-box {
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
}

#right-middle-box .summary-block-title {
    margin-bottom: 6px;
}

.ip-info-section {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-bottom: 10px;
}

.ip-info-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(64, 233, 255, 0.35);
    background: linear-gradient(135deg, rgba(19, 80, 128, 0.34), rgba(10, 32, 66, 0.72));
    box-shadow: inset 0 0 18px rgba(64, 233, 255, 0.12), 0 3px 10px rgba(0, 0, 0, 0.25);
}

.ip-info-card::after {
    content: '';
    position: absolute;
    right: 10px;
    top: 10px;
    width: 34px;
    height: 2px;
    background: linear-gradient(to right, rgba(64, 233, 255, 0), rgba(64, 233, 255, 0.7));
}

.ip-card-icon {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.45), rgba(52, 170, 255, 0.15));
    border: 1px solid rgba(132, 224, 255, 0.7);
    box-shadow: 0 0 10px rgba(65, 212, 255, 0.4);
    flex-shrink: 0;
}

.ip-card-content {
    flex: 1;
    min-width: 0;
}

.ip-card-label {
    color: #bcecff;
    font-size: 13px;
    line-height: 1.2;
}

.ip-card-value {
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    line-height: 1.15;
    text-shadow: 0 0 8px rgba(66, 218, 255, 0.3);
}

.ip-card-value small {
    margin-left: 4px;
    font-size: 13px;
    color: #8fe5ff;
    font-weight: 500;
}


.ip-info-card.use-rights {
    border-color: rgba(54, 236, 196, 0.45);
}

.ip-info-card.use-rights .ip-card-icon {
    border-color: rgba(54, 236, 196, 0.65);
    box-shadow: 0 0 10px rgba(54, 236, 196, 0.38);
}

.ip-info-card.defense-rights {
    border-color: rgba(64, 170, 255, 0.5);
}

.ip-info-card.defense-rights .ip-card-icon {
    border-color: rgba(120, 188, 255, 0.75);
    box-shadow: 0 0 10px rgba(120, 188, 255, 0.38);
}

/* 2. 顶部 KPI 行 (仿照 image_b496b2.png) */
.industry-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

#left-bottom-box .industry-block-header .summary-block-title {
    margin-bottom: 0;
}

.legend-container.compact {
    padding: 0;
    font-size: 12px;
}

.top-kpi-row {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    padding: 10px 0;
    /* 模仿模板的蓝色横线 */
    background: linear-gradient(to right,
    rgba(20, 126, 255, 0) 0%,
    rgba(20, 126, 255, 0.3) 20%,
    rgba(20, 126, 255, 0.3) 80%,
    rgba(20, 126, 255, 0) 100%
    );
}

.top-kpi-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.top-kpi-item .kpi-icon {
    font-size: 24px;
}

.top-kpi-item .kpi-value {
    font-size: 24px;
    font-weight: bold;
    color: #fff;
    line-height: 1.2;
}

.top-kpi-item .kpi-value small {
    font-size: 14px;
    font-weight: normal;
    color: #88dfff;
}

.top-kpi-item .kpi-title {
    font-size: 14px;
    color: #c4e9ff;
}

/* 3. 水球图网格 */
.liquid-grid-container {
    flex: 1;
    display: flex;
    flex-direction: column; /* 竖排 (Row 1, Row 2) */
    gap: 5px; /* 【修改】行间距，解决“往上提” */
    padding-top: 15px;
}

/* 4. 水球图单元格 */
.liquid-cell {
    display: flex;
    flex-direction: column;
    align-items: center;
    /* position: relative; (已删除) */
    flex: 1 1 23%; /* 【修改】使用 flex 简写 */
    min-width: 100px; /* 【新增】防止被过度压缩 */
}

.liquid-title {
    font-size: 14px;
    color: #c4e9ff;
    margin-bottom: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    width: 100%;
    text-align: center;
}

.liquid-chart {
    width: 100px;
    height: 100px;
    max-width: 100%;
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    border: 1px solid rgba(142, 228, 255, 0.75);
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), rgba(93, 208, 255, 0.12) 45%, rgba(22, 79, 140, 0.65) 100%);
    box-shadow: 0 0 12px rgba(64, 233, 255, 0.38), inset 0 -20px 26px rgba(32, 140, 255, 0.35);
}

.liquid-chart::before,
.liquid-chart::after {
    content: '';
    position: absolute;
    left: 50%;
    z-index: 1;
    border-radius: 50%;
    transform: translateX(-50%);
    pointer-events: none;
}

.liquid-chart::before {
    bottom: 22px;
    width: 120%;
    height: 30px;
    background: rgba(86, 205, 255, 0.22);
    filter: blur(0.2px);
}

.liquid-chart::after {
    bottom: 18px;
    width: 70%;
    height: 10px;
    border: 1px solid rgba(207, 245, 255, 0.45);
    opacity: 0.7;
}

.liquid-row {
    display: flex;
    flex-direction: row; /* 横排 */
}

/* 【新增】第一行 (4个) */
.liquid-row:nth-child(1) {
    justify-content: space-between; /* 4个均匀分布 */
}

/* 【新增】第二行 (4个，与第一行对齐) */
.liquid-row:nth-child(2) {
    justify-content: space-between;
    padding: 0;
}

.legend-container {
    display: flex;
    justify-content: flex-end; /* 右对齐 */
    gap: 15px; /* 图例项之间的间距 */
    padding: 5px 0 10px; /* 上下内边距 */
    font-size: 13px;
    color: #c4e9ff;
}

/* 2. 单个图例项 */
.legend-item {
    display: flex;
    align-items: center;
}

/* 3. 图例颜色方块 */
.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 2px;
    margin-right: 5px;
}

.legend-color.new-industry {
    background-color: #9932CC; /* 紫色 */
}

.legend-color.existing-industry {
    background-color: #00BFFF; /* 蓝色 */
}

#center-bottom-left {
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
}

/* 2. 顶部 KPI 容器 */
.gdp-kpi-container {
    display: flex;
    justify-content: space-between; /* 数字在左，增长在右 */
    align-items: flex-end; /* 底部对齐 */
    padding: 0 10px 10px; /* 增加一些内边距 */
    border-bottom: 1px solid rgba(64, 233, 255, 0.2); /* 科技感分割线 */
}

.gdp-value {
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}

.gdp-value small {
    font-size: 16px;
    color: #88dfff;
    margin-left: 5px;
}

.gdp-growth {
    font-size: 16px;
    color: #67C23A; /* kpi-up 颜色 */
}

.gdp-growth.kpi-up {
    color: #67C23A; /* 绿色 */
}

.gdp-growth.kpi-down {
    color: #F56C6C; /* 红色 */
}

/* 数字加粗 + 放大 */
.gdp-growth .comparison-value {
    font-weight: bold;
    font-size: 16px; /* 比整体大一点（原15px → 16px） */
}

/* 可选：箭头和文字保持原色或统一 */
.gdp-growth .arrow,
.gdp-growth .comparison-text {
    color: inherit;
}


.invest-growth.kpi-up {
    color: #67C23A; /* 绿色 */
}

.invest-growth.kpi-down {
    color: #F56C6C; /* 红色 */
}

/* 数字加粗 + 放大 */
.invest-growth .comparison-value {
    font-weight: bold;
    font-size: 16px; /* 比整体大一点（原15px → 16px） */
}

/* 可选：箭头和文字保持原色或统一 */
.invest-growth .arrow,
.invest-growth .comparison-text {
    color: inherit;
}

/* 3. ECharts 容器 */
.gdp-pie-chart { /* 【修改】 */
    flex: 1; /* 占满剩余所有空间 */
    width: 100%;
}

#center-bottom-right {
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
}

/* 2. 顶部 KPI 容器 (可以复用 .gdp-kpi-container) */
.invest-kpi-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 10px 10px;
    border-bottom: 1px solid rgba(64, 233, 255, 0.2);
}

.invest-value {
    font-size: 32px;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}

.invest-value small {
    font-size: 16px;
    color: #88dfff;
    margin-left: 5px;
}

.invest-growth {
    font-size: 16px;
    color: #67C23A; /* kpi-up 颜色 */
}

/* 3. ECharts 容器 */
.invest-mixed-chart {
    flex: 1; /* 占满剩余所有空间 */
    width: 100%;
}

#right-bottom-box {
    display: flex;
    flex-direction: column;
    padding: 15px;
    box-sizing: border-box;
}

/* 右下：未来产业概况 */
#right-bottom-box .summary-block-title {
    margin-bottom: 8px;
}

.future-overview {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.future-kpi-row {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(64, 233, 255, 0.35);
    background: linear-gradient(90deg, rgba(11, 54, 96, 0.55), rgba(9, 25, 58, 0.75));
}

.future-kpi-value {
    color: #fff;
    font-size: 30px;
    font-weight: 700;
    line-height: 1;
}

.future-kpi-value small {
    margin-left: 4px;
    font-size: 15px;
    font-weight: 500;
    color: #8fe5ff;
}

.future-kpi-label {
    margin-top: 4px;
    font-size: 13px;
    color: #c3edff;
}

.future-kpi-growth {
    font-size: 15px;
    color: #97ecff;
    white-space: nowrap;
}

.future-kpi-growth b {
    font-size: 20px;
    color: #67c23a;
}


.future-grid {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
}

/* 4个球：上2下2 对齐 */
.future-grid .future-item:nth-child(1) {
    grid-column: 1;
    grid-row: 1;
}

.future-grid .future-item:nth-child(2) {
    grid-column: 2;
    grid-row: 1;
}

.future-grid .future-item:nth-child(3) {
    grid-column: 1;
    grid-row: 2;
}

.future-grid .future-item:nth-child(4) {
    grid-column: 2;
    grid-row: 2;
}

.future-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    /*border-radius: 10px;*/
    /*border: 1px solid rgba(64, 233, 255, 0.25);*/
    /*background: linear-gradient(135deg, rgba(16, 71, 120, 0.25), rgba(11, 26, 58, 0.45));*/
    padding: 6px 4px;
}

.future-item-title {
    font-size: 14px;
    color: #c4e9ff;
    /*font-weight: 700;*/
    text-align: center;
    line-height: 1.2;
}

.future-liquid {
    width: 98px;
    height: 98px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 1px solid rgba(142, 228, 255, 0.75);
    background: radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.35), rgba(93, 208, 255, 0.12) 45%, rgba(22, 79, 140, 0.65) 100%);
    box-shadow: 0 0 12px rgba(64, 233, 255, 0.38), inset 0 -20px 26px rgba(32, 140, 255, 0.35);
    overflow: hidden;
}

.future-liquid::before {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 28px;
    width: 120%;
    height: 34px;
    transform: translateX(-50%);
    border-radius: 50%;
    background: rgba(86, 205, 255, 0.22);
    filter: blur(0.2px);
}

.future-liquid::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 23px;
    width: 70%;
    height: 12px;
    transform: translateX(-50%);
    border-radius: 50%;
    border: 1px solid rgba(207, 245, 255, 0.45);
    opacity: 0.7;
}

.future-item-desc {
    position: relative;
    z-index: 2;
    color: #d8f5ff;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
    line-height: 1.2;
}

.future-num {
    font-size: 22px;
    font-weight: 800;
    color: #ffd76a;
    text-shadow: 0 0 10px rgba(255, 205, 96, 0.55);
}

.future-item.ai {
    border-color: rgba(71, 206, 255, 0.45);
}

.future-item.hydrogen {
    border-color: rgba(84, 255, 214, 0.45);
}

.future-item.storage {
    border-color: rgba(111, 183, 255, 0.45);
}

.future-item.space {
    border-color: rgba(186, 147, 255, 0.45);
}

.future-item.semiconductor {
    border-color: rgba(255, 176, 107, 0.45);
}

.map-toggle-buttons {
    /* 关键：
      .chart-box 已经有 position: relative;
      所以我们可以用 absolute 定位
    */
    position: absolute;
    top: 90px;
    left: 50%; /* 【修改】改为 50% */
    transform: translateX(-50%); /* 【新增】水平居中 */
    z-index: 100; /* 确保在 ECharts 画布之上 */
    display: flex;
    gap: 5px; /* 按钮之间的间距 */
}

.map-toggle-btn {
    padding: 10px 20px; /* 【修改】8px 15px -> 10px 20px */
    font-size: 24px; /* 【修改】20px -> 24px */
    color: #fff;
    background-color: rgba(20, 126, 255, 0.3); /* 半透明背景 */
    border: 1px solid #00BFFF; /* 亮蓝边框 */
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.map-toggle-btn:hover {
    background-color: rgba(20, 126, 255, 0.5);
}

/* 默认/激活状态的样式 */
.map-toggle-btn.active {
    background-color: #00BFFF; /* 实心亮蓝 */
    color: #020a1a; /* 深色文字 */
    font-weight: bold;
}

@keyframes fly-up {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(0);
        opacity: 1;
    }
    75% {
        transform: translateY(-150%); /* 向上飞出 */
        opacity: 0;
    }
    76% {
        transform: translateY(150%); /* 瞬移到下方 */
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/**
 * 向下飞的动画 (fly-down)
 * 逻辑与 fly-up 相反
 */
@keyframes fly-down {
    0% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(0);
        opacity: 1;
    }
    75% {
        transform: translateY(150%); /* 向下飞出 */
        opacity: 0;
    }
    76% {
        transform: translateY(-150%); /* 瞬移到上方 */
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* --- 【新增】地图右上角的数据时间 --- */
#map-data-time {
    position: absolute; /* 使用绝对定位 */
    top: 90px; /* 距离顶部 15px (和左侧按钮对齐) */
    right: 15px; /* 距离右侧 15px */
    z-index: 100; /* 确保在地图画布之上 */
    font-size: 24px; /* 字体大小 (和左侧按钮对齐) */
    color: #fff; /* 白色文字 */

    /* (可选) 加一点文字阴影，防止地图背景导致看不清 */
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* 地图常显普通文本框（独立于 ECharts 3D 图层） */
.map-static-overlay {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 110;
    pointer-events: none;
}

.map-info-card {
    position: absolute;
    max-width: 250px;
    white-space: pre-line;
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    background: rgba(0, 10, 28, 0.82);
    border: 1px solid #00bfff;
    border-radius: 6px;
    padding: 8px 10px;
    box-shadow: 0 0 10px rgba(0, 191, 255, 0.35);
    transform: translate(-50%, -50%);
}

.map-info-card.industry {
    max-width: 230px;
    font-size: 12px;
}

.map-info-card.patent {
    font-size: 14px;
    line-height: 1.7;
}

.map-info-card.patent .num {
    font-size: 18px;
    font-weight: 700;
    color: #ffd700;
}