/* 大崔庄镇数字乡村大数据平台 - 新版样式 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-weight: normal;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    line-height: 1.15;
    font-size: 0.45rem;
    background: linear-gradient(135deg, #0a2a3a 0%, #0d4d5a 50%, #0a3040 100%);
    color: #fff;
    font-family: "Microsoft YaHei", "PingFang SC", sans-serif;
}

ul {
    list-style: none;
}

a {
    text-decoration: none;
}

/* 全屏地图 */
.fullscreen-map {
    position: fixed;
    top: 3rem;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

.fullscreen-map .geo {
    width: 100%;
    height: 100%;
}

/* 浮动面板 */
.float-panel {
    position: fixed;
    top: calc(3rem + 1em);
    bottom: calc(2.5rem + 1em);
    width: 21rem;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.5rem;
    overflow: visible;
    opacity: 1;
    transform: translateX(0);
    transition: transform 0.6s ease, opacity 0.6s ease;
}

.float-panel .tab-content {
    display: none;
    flex-direction: column;
    gap: 0.3rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.float-panel .tab-content.active {
    display: flex;
}

.village-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.stats-card {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.governance-grid,
.power-flow-left,
.governance-enable-list {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
}

.blueprint-stats {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    flex: 0 0 auto;
}

.blueprint-stats .stat-item {
    flex: 1 1 45%;
    text-align: center;
    padding: 0.4rem;
    background: rgba(0, 60, 80, 0.4);
    border-radius: 0.2rem;
}

.blueprint-stats .stat-item h4 {
    font-size: 1.08rem;
    color: #00d4ff;
    margin: 0;
}

.blueprint-stats .stat-item h4 i {
    font-size: 0.54rem;
    font-style: normal;
    color: #8ca0c3;
}

.blueprint-stats .stat-item span {
    font-size: 0.5rem;
    color: #8ca0c3;
}

.float-panel.left-panel {
    left: 0.5rem;
    overflow: visible;
}

.float-panel.right-panel {
    right: 0.5rem;
    overflow: visible;
}

.float-panel.panel-hidden {
    opacity: 0;
    pointer-events: none;
}

.float-panel.left-panel.panel-hidden {
    transform: translateX(calc(-100% - 0.5rem));
}

.float-panel.right-panel.panel-hidden {
    transform: translateX(calc(100% + 0.5rem));
}

.float-panel.panel-visible {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
}

.float-panel.panel-no-transition {
    transition: none !important;
}

.float-panel.panel-hide-charts .chart-box,
.float-panel.panel-hide-charts .chart-box > div,
.float-panel.panel-hide-charts .chart-box canvas {
    opacity: 0 !important;
    visibility: hidden !important;
}

.float-panel.panel-hide-content .panel-section > * {
    opacity: 0 !important;
    visibility: hidden !important;
}

.panel-section {
    background: rgba(0, 25, 45, 0.9);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 0.3rem;
    padding: 0.5rem 0.6rem;
    width: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex: 0 1 auto;
    min-height: 0;
}

/* 包含图表/列表/动态内容的section自动增长填充空间 */
.panel-section:has(.chart-box),
.panel-section:has(.village-list),
.panel-section:has(.intro-content),
.panel-section:has(.moral-card),
.panel-section:has(.governance-enable-list),
.panel-section:has(.governance-grid),
.panel-section:has(.power-flow-left),
.panel-section:has(.strands-stats),
.panel-section:has(.stats-card),
.panel-section.ecology-greening,
.panel-section.ecology-beautify,
.panel-section.ecology-lighting,
.panel-section.ecology-hardening,
.panel-section.ecology-purification {
    flex: 1 1 auto;
}

.panel-section h3 {
    font-size: 0.72rem;
    color: #00d4ff;
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
    padding-left: 0.4rem;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    border-left: 2px solid #00d4ff;
    flex-shrink: 0;
}

.panel-section h3 .chart-subtitle {
    font-size: 0.54rem;
    color: #8ca0c3;
    font-weight: normal;
    margin-left: 0.5rem;
}

.panel-section h3 .chart-subtitle em {
    color: #eacf19;
    font-style: normal;
}

.panel-section h3 .chart-legend {
    float: right;
    margin-right: 0.3rem;
}

.panel-section h3 .chart-legend .legend-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-right: 2px;
    margin-left: 6px;
    vertical-align: middle;
}

.chart-box {
    width: calc(21rem - 1rem - 1.2rem - 2px);
    min-width: calc(21rem - 1rem - 1.2rem - 2px);
    flex: 1;
    height: 10rem;
    min-height: 10rem;
    box-sizing: border-box;
    overflow: hidden;
}

/* 一张蓝图、产业兴旺: chart-box 不用flex，用固定高度，避免flex计算误差导致溢出 */
[data-tab="blueprint"] .chart-box,
[data-tab="industry"] .chart-box {
    flex: none;
}

/* 一张蓝图、产业兴旺: 包含图表的section也不用flex，避免自动扩展 */
[data-tab="industry"] .panel-section:has(.chart-box) {
    flex: none;
}

/* 一张蓝图左侧：基本信息紧凑，村庄人口排行占剩余空间 */
.left-panel [data-tab="blueprint"] .panel-section:first-child {
    flex: 0 0 auto;
}
.left-panel [data-tab="blueprint"] .panel-section:has(.chart-box) {
    flex: 1 1 auto;
    min-height: 0;
}
.left-panel [data-tab="blueprint"] .panel-section:has(.chart-box) .chart-box {
    flex: 1 1 auto;
    min-height: 0;
}
.left-panel [data-tab="blueprint"] .panel-section:first-child {
    padding: 0.3rem 0.5rem;
}
.left-panel [data-tab="blueprint"] .panel-section:first-child h3 {
    margin-bottom: 0.15rem;
    padding-bottom: 0.15rem;
}

.chart-box>div,
.chart-box>div>div,
.chart-box canvas {
    width: 100% !important;
    min-width: 100% !important;
    height: 100% !important;
}

/* 主视口 - 已弃用 */
.viewport {
    display: none;
    width: 100%;
    height: calc(100% - 5rem);
    min-width: 1024px;
    max-width: 1920px;
    margin: 0 auto;
    padding: 3.5rem 0.8rem 0.5rem;
    overflow: hidden;
    gap: 0.8rem;
}

/* 顶部标题 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3rem;
    background: linear-gradient(180deg, rgba(5, 18, 38, 0.92) 0%, rgba(5, 22, 45, 0.72) 70%, transparent 100%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1;
}

/* 左侧角标 */
.header-deco-left {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-left: 2px solid rgba(0,212,255,0.5);
    border-bottom: 2px solid rgba(0,212,255,0.5);
}

/* 右侧角标 */
.header-deco-right {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(0,212,255,0.5);
    border-bottom: 2px solid rgba(0,212,255,0.5);
}

/* 标题左侧装饰 */
.header-line-left {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-left: -17rem;
    width: 3rem;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,0.4));
    border-radius: 1px;
}

.header-line-left::before {
    content: '';
    position: absolute;
    right: -4px;
    top: -2px;
    width: 6px;
    height: 6px;
    border: 1px solid rgba(0,212,255,0.5);
    transform: rotate(45deg);
    background: rgba(0,212,255,0.15);
}

/* 标题右侧装饰 */
.header-line-right {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    margin-left: 17rem;
    width: 3rem;
    height: 2px;
    background: linear-gradient(270deg, transparent, rgba(0,212,255,0.4));
    border-radius: 1px;
}

.header-line-right::before {
    content: '';
    position: absolute;
    left: -4px;
    top: -2px;
    width: 6px;
    height: 6px;
    border: 1px solid rgba(0,212,255,0.5);
    transform: rotate(45deg);
    background: rgba(0,212,255,0.15);
}

.header h1 {
    font-size: 1.26rem;
    color: #fff;
    letter-spacing: 0.3rem;
    margin: 0;
    text-shadow: 0 0 15px rgba(0, 212, 255, 0.5);
    position: relative;
}

.header h1 span {
    color: #00d4ff;
    font-weight: bold;
}

.header h2 {
    display: none;
}

/* 左侧视频按钮 */
.video-btn {
    position: absolute;
    left: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2rem;
    height: 2rem;
    background: rgba(0, 212, 255, 0.2);
    border: 1px solid #00d4ff;
    border-radius: 0.3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
}

/* 右侧用户信息 */
.user-info {
    position: absolute;
    right: 1.5rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.user-info .security-btn {
    padding: 0.25rem 0.6rem;
    background: rgba(0, 212, 255, 0.15);
    border: 1px solid rgba(0, 212, 255, 0.6);
    border-radius: 0.2rem;
    color: #00d4ff;
    font-size: 0.5rem;
    cursor: pointer;
    transition: all 0.3s;
    text-decoration: none;
    letter-spacing: 0.05rem;
}

.user-info .security-btn:hover {
    background: rgba(0, 212, 255, 0.3);
    box-shadow: 0 0 8px rgba(0, 212, 255, 0.4);
    transform: translateY(-1px);
}

.user-info .username {
    color: #00d4ff;
    font-size: 0.55rem;
}

.user-info .logout-btn {
    padding: 0.25rem 0.6rem;
    background: rgba(231, 76, 60, 0.8);
    border: 1px solid rgba(231, 76, 60, 1);
    border-radius: 0.2rem;
    color: #fff;
    font-size: 0.5rem;
    cursor: pointer;
    transition: all 0.3s;
}

.user-info .logout-btn:hover {
    background: rgba(231, 76, 60, 1);
    transform: translateY(-1px);
}

.video-btn:hover {
    background: rgba(0, 212, 255, 0.4);
}

.video-btn::after {
    content: '';
    border-left: 0.6rem solid #00d4ff;
    border-top: 0.4rem solid transparent;
    border-bottom: 0.4rem solid transparent;
    margin-left: 0.15rem;
}

/* 三栏布局 */
.column {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-width: 0;
}

.column.left {
    flex: 0 0 18rem;
}

.column.center {
    flex: 1;
}

.column.right {
    flex: 0 0 18rem;
}

/* 面板通用样式 */
.panel {
    background: rgba(0, 40, 60, 0.85);
    border: 1px solid rgba(0, 212, 255, 0.4);
    border-radius: 0.3rem;
    position: relative;
    overflow: hidden;
}

.panel::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00d4ff, transparent);
}

.panel .inner {
    padding: 0.5rem 0.8rem;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.panel h3 {
    font-size: 0.68rem;
    color: #00d4ff;
    flex-shrink: 0;
    margin-bottom: 0.4rem;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    display: flex;
    align-items: center;
    gap: 0.3rem;
}

.panel h3::before {
    content: '';
    width: 0.2rem;
    height: 0.8rem;
    background: #00d4ff;
    border-radius: 0.1rem;
}

.panel .chart {
    flex: 1;
    min-height: 0;
    display: flex;
}

/* 基本信息面板 */
.info-panel {
    flex: 0 0 auto;
}

.info-panel h3 {
    background: rgba(0, 212, 255, 0.1);
    margin: -0.5rem -0.8rem 0.5rem;
    padding: 0.5rem 0.8rem;
}

.info-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    column-gap: 0.4rem;
}

.info-item {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.12rem 0;
}

.info-item .dot {
    width: 0.26rem;
    height: 0.26rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.info-item .dot.blue {
    background: #006cff;
}

.info-item .dot.green {
    background: #6acca3;
}

.info-item .dot.red {
    background: #ed3f35;
}

.info-item .dot.yellow {
    background: #eacf19;
}

.info-item .dot.cyan {
    background: #00d4ff;
}

.info-item .dot.orange {
    background: #ff8c00;
}

.info-item .dot.purple {
    background: #9d50bb;
}

.info-item .dot.teal {
    background: #20b2aa;
}

.info-item .dot.pink {
    background: #ff69b4;
}

.info-item .dot.lime {
    background: #32cd32;
}

.info-item .dot.amber {
    background: #ffc107;
}

.info-item .dot.indigo {
    background: #3f51b5;
}

.info-item .label {
    color: #8ca0c3;
    font-size: 0.44rem;
}

.info-item .value {
    color: #fff;
    font-size: 0.55rem;
    margin-left: auto;
}

.info-item .value .unit {
    font-size: 0.4rem;
    color: #8ca0c3;
    margin-left: 0.06rem;
}

/* 镇级简介 */
.intro-panel {
    flex: 1;
    min-height: 8rem;
}

.intro-content {
    font-size: 0.63rem;
    color: #8ca0c3;
    line-height: 1.8;
    overflow-y: auto;
    flex: 1;
}

/* 中间地图区域 */
.map-container {
    flex: 1;
    background: rgba(0, 40, 60, 0.5);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 0.3rem;
    position: relative;
    overflow: hidden;
}

.map-container .map-placeholder {
    width: 100%;
    height: 100%;
    background: url(../images/map_placeholder.jpg) no-repeat center center / cover;
    opacity: 0.6;
}

.map-container .geo {
    width: 100%;
    height: 100%;
}

/* 右侧面板 - 高度由 .float-panel 的 top/bottom 控制 */

/* 图表模块 */
.chart-panel {
    flex: 1;
    min-height: 6rem;
}

.chart-panel .chart>div {
    width: 100%;
    height: 100%;
}

/* 数据统计卡片 */
.stats-card {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.stat-box {
    flex: 1;
    min-width: calc(50% - 0.2rem);
    background: rgba(0, 108, 255, 0.1);
    border-left: 2px solid #006cff;
    padding: 0.4rem 0.5rem;
    border-radius: 0.15rem;
}

.stat-box .stat-label {
    font-size: 0.59rem;
    color: #8ca0c3;
    margin-bottom: 0.2rem;
}

.stat-box .stat-value {
    font-size: 0.85rem;
    color: #00d4ff;
    font-weight: bold;
}

.stat-box .stat-value .unit {
    font-size: 0.54rem;
    color: #8ca0c3;
    margin-left: 0.1rem;
}

/* 底部导航 */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 2.5rem;
    background: linear-gradient(0deg, rgba(0, 40, 60, 0.95) 0%, rgba(0, 60, 80, 0.9) 100%);
    border-top: 1px solid rgba(0, 212, 255, 0.3);
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    z-index: 100;
    padding: 0 2rem;
}

.nav-btn {
    padding: 0.4rem 1.2rem;
    background: rgba(0, 108, 255, 0.2);
    border: 1px solid rgba(0, 212, 255, 0.4);
    border-radius: 0.25rem;
    color: #8ca0c3;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.nav-btn:hover {
    background: rgba(0, 212, 255, 0.3);
    color: #fff;
}

.nav-btn.active {
    background: linear-gradient(135deg, #ff9900 0%, #ff6600 100%);
    border-color: #ff9900;
    color: #fff;
    box-shadow: 0 0 15px rgba(255, 153, 0, 0.5);
}

/* 右侧工具栏 */
.right-toolbar {
    position: fixed;
    right: 0.8rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    z-index: 90;
}

.tool-btn {
    width: 2rem;
    height: 2rem;
    background: rgba(0, 40, 60, 0.9);
    border: 1px solid rgba(0, 212, 255, 0.4);
    border-radius: 0.25rem;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.3s;
    color: #8ca0c3;
    font-size: 0.72rem;
}

.tool-btn:hover {
    background: rgba(0, 212, 255, 0.3);
    color: #fff;
}

/* 内容切换区域 */
.tab-content {
    display: none;
    height: 100%;
}

.tab-content.active {
    display: flex;
    flex-direction: column;
}

/* 旧版兼容样式 */
.blueprint {
    background: rgba(0, 40, 60, 0.85);
    border: 1px solid rgba(0, 212, 255, 0.4);
    border-radius: 0.3rem;
    padding: 0.5rem;
}

.blueprint .inner {
    display: flex;
    justify-content: space-around;
    align-items: center;
    flex-direction: row;
}

.blueprint .item {
    text-align: center;
    flex: 1;
}

.blueprint h4 {
    font-size: 0.99rem;
    color: #00d4ff;
    margin-bottom: 0.15rem;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 0.1rem;
}

.blueprint h4 i {
    font-style: normal;
    font-size: 0.59rem;
    color: #8ca0c3;
}

.blueprint span {
    font-size: 0.59rem;
    color: #8ca0c3;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.15rem;
}

/* 指标卡样式优化 */
.icon-dot {
    display: inline-block;
    width: 0.35rem;
    height: 0.35rem;
    border-radius: 50%;
    background-color: currentColor;
}

/* 图表容器统一 */
.greening,
.road,
.yard,
.garden,
.lights,
.heating,
.sanitation,
.toilet,
.facility,
.water,
.sewage,
.population {
    background: rgba(0, 40, 60, 0.85);
    border: 1px solid rgba(0, 212, 255, 0.4);
    border-radius: 0.3rem;
    position: relative;
}

.greening::before,
.road::before,
.yard::before,
.garden::before,
.lights::before,
.heating::before,
.sanitation::before,
.toilet::before,
.facility::before,
.water::before,
.sewage::before,
.population::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #00d4ff, transparent);
}

.greening .inner,
.road .inner,
.yard .inner,
.garden .inner,
.lights .inner,
.heating .inner,
.sanitation .inner,
.toilet .inner,
.facility .inner,
.water .inner,
.sewage .inner,
.population .inner {
    padding: 0.4rem 0.6rem;
}

.greening h3,
.road h3,
.yard h3,
.garden h3,
.lights h3,
.heating h3,
.sanitation h3,
.toilet h3,
.facility h3,
.water h3,
.sewage h3,
.population h3 {
    font-size: 0.72rem;
    color: #00d4ff;
    margin-bottom: 0.3rem;
    padding-left: 0.5rem;
    border-left: 2px solid #00d4ff;
}

/* 图表高度 */
.greening,
.road,
.yard,
.garden {
    height: 5.5rem;
}

.lights,
.heating,
.sanitation,
.toilet,
.facility,
.water {
    height: 5rem;
}

.sewage {
    height: 5.2rem;
}

.population {
    height: 9rem;
}

.greening-bar,
.road-bar,
.yard-bar,
.garden-pie,
.lights-bar,
.heating-pie,
.sanitation-bar,
.toilet-bar,
.facility-bar,
.water-bar,
.sewage-bar,
.pop-bar {
    width: 100%;
    height: 100%;
}

/* 地图 */
.map {
    flex: 1;
    min-height: 12rem;
    display: flex;
    flex-direction: column;
    background: rgba(0, 40, 60, 0.5);
    border: 1px solid rgba(0, 212, 255, 0.3);
    border-radius: 0.3rem;
    padding: 0.4rem;
}

.map h3 {
    line-height: 1;
    padding: 0.3rem 0;
    margin: 0;
    font-size: 0.59rem;
    color: #00d4ff;
    padding-left: 0.5rem;
    border-left: 2px solid #00d4ff;
}

.map h3 span {
    color: #ff9900;
    font-size: 0.54rem;
}

.map .icon-cube {
    color: #00d4ff;
    margin-right: 0.2rem;
}

.map .chart {
    flex: 1;
    min-height: 0;
    background-color: rgba(0, 60, 80, 0.3);
    border-radius: 0.2rem;
    margin-top: 0.3rem;
}

.map .geo {
    width: 100%;
    height: 100%;
}

/* 底部统计区域 */
.bottom-stats {
    position: fixed;
    bottom: 2.5rem;
    left: 0;
    right: 0;
    height: 2.8rem;
    background: linear-gradient(to top, rgba(0, 40, 60, 0.95), rgba(0, 40, 60, 0.85));
    border-top: 1px solid rgba(0, 212, 255, 0.2);
    display: flex;
    justify-content: center;
    gap: 2rem;
    padding: 0.3rem 1rem;
    z-index: 50;
}

.stats-section {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.stats-section h4 {
    font-size: 0.63rem;
    color: #00d4ff;
    margin-bottom: 0.2rem;
    font-weight: normal;
}

.stats-grid {
    display: flex;
    gap: 0.6rem;
    flex-wrap: wrap;
    justify-content: center;
}

.stat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.15rem 0.4rem;
    background: rgba(0, 108, 255, 0.1);
    border-radius: 0.15rem;
    border-left: 2px solid #006cff;
}

.stat-label {
    font-size: 0.5rem;
    color: #8ca0c3;
}

.stat-value {
    font-size: 0.59rem;
    color: #00d4ff;
    font-weight: bold;
}

/* 村庄详情弹窗 - 新版选项卡式 */
.detail-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 20, 30, 0.85);
    z-index: 1000;
    justify-content: center;
    align-items: center;
}

.detail-modal[style*="block"] {
    display: flex !important;
}

.detail-modal .detail-content {
    width: 90%;
    max-width: 1100px;
    height: 80%;
    max-height: 600px;
    margin: auto;
    background: rgba(5, 25, 45, 0.95);
    border: 2px solid #00d4ff;
    border-radius: 0.3rem;
    overflow: hidden;
    box-shadow: 0 0 30px rgba(0, 212, 255, 0.3);
    display: flex;
    flex-direction: column;
}

.detail-header {
    display: flex;
    align-items: stretch;
    padding: 0;
    background: linear-gradient(90deg, rgba(0, 120, 140, 0.8) 0%, rgba(0, 80, 100, 0.6) 30%, rgba(0, 60, 80, 0.4) 100%);
    border-bottom: 2px solid #00d4ff;
    flex-shrink: 0;
    min-height: 2.2rem;
}

.detail-header h3 {
    font-size: 0.81rem;
    color: #00ffff;
    margin: 0;
    padding: 0.5rem 1.2rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-weight: normal;
    letter-spacing: 2px;
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.5);
}

.detail-tabs {
    display: flex;
    /* 一张蓝图时显示选项卡 */
    align-items: stretch;
    margin-left: 1rem;
}

.detail-tabs.hidden {
    display: none;
    /* 其他选项卡时隐藏 */
}

.detail-tab {
    padding: 0 1.5rem;
    font-size: 0.63rem;
    color: #00d4ff;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    display: flex;
    align-items: center;
    letter-spacing: 1px;
}

.detail-tab:hover {
    color: #e0ffff;
}

.detail-tab.active {
    color: #ffffff;
}

.detail-tab.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 2rem;
    height: 3px;
    background: #fff;
    border-radius: 2px;
}

.close-btn {
    font-size: 1.35rem;
    color: #ff6b6b;
    cursor: pointer;
    line-height: 1;
    padding: 0 1rem;
    margin-left: auto;
    display: flex;
    align-items: center;
}

.close-btn:hover {
    color: #ff4444;
}

.detail-body {
    flex: 1;
    overflow: hidden;
    position: relative;
    background: transparent;
}

.detail-panel {
    visibility: hidden;
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 1rem;
    overflow-y: auto;
    background: transparent;
    display: flex;
    gap: 1.5rem;
    pointer-events: none;
}

.detail-panel.active {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}

.detail-left {
    width: 220px;
    flex-shrink: 0;
}

.detail-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    overflow-y: auto;
}

.detail-stats {
    background: rgba(0, 40, 60, 0.3);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 0.3rem;
    padding: 0.6rem;
}

.stat-row {
    display: flex;
    align-items: center;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid rgba(0, 212, 255, 0.15);
}

.stat-row:last-child {
    border-bottom: none;
}

.stat-row.full-row {
    background: rgba(0, 212, 255, 0.1);
    border-radius: 0.15rem;
    margin-bottom: 0.3rem;
}

.stat-row.full-row .stat-label {
    color: #00d4ff;
    font-weight: bold;
}

.stat-row.sub {
    padding-left: 1rem;
}

.stat-row .stat-label {
    color: #8ca0c3;
    font-size: 0.54rem;
    flex: 1;
}

.stat-row .stat-val {
    color: #00d4ff;
    font-size: 0.68rem;
    font-weight: bold;
    margin-right: 0.2rem;
}

.stat-row .stat-unit {
    color: #6ca0b3;
    font-size: 0.45rem;
}

.detail-text-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0.5rem 0;
    min-height: 0;
}

.detail-text-block h4 {
    font-size: 0.63rem;
    color: #00d4ff;
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.4rem;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    flex-shrink: 0;
}

.detail-text {
    flex: 1;
    font-size: 0.54rem;
    color: #b0c8d8;
    line-height: 1.9;
    overflow-y: auto;
}

.detail-images {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
}

.detail-images img {
    max-width: 200px;
    max-height: 150px;
    border-radius: 0.3rem;
    border: 1px solid rgba(0, 212, 255, 0.3);
}

/* 兼容旧样式 */
.detail-section {
    margin-bottom: 0.8rem;
}

.detail-section h4 {
    font-size: 0.59rem;
    color: #00d4ff;
    margin-bottom: 0.4rem;
    padding-bottom: 0.2rem;
    padding-left: 0.5rem;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
    border-left: 2px solid #00d4ff;
}

.detail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.3rem;
    align-items: stretch;
}

.detail-grid .detail-item {
    display: flex;
    align-items: center;
    min-height: 100%;
}

.detail-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.3rem 0.5rem;
    background: rgba(0, 108, 255, 0.1);
    border-radius: 0.15rem;
    border-left: 2px solid #006cff;
}

.detail-item.full {
    grid-column: span 4;
}

.detail-item .label {
    color: #8ca0c3;
    font-size: 0.43rem;
}

.detail-item .value {
    color: #00d4ff;
    font-size: 0.47rem;
    font-weight: bold;
    max-width: 60%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.detail-intro {
    font-size: 0.47rem;
    color: #8ca0c3;
    line-height: 1.8;
    padding: 0.4rem;
    background: rgba(0, 108, 255, 0.05);
    border-radius: 0.15rem;
    max-height: 6rem;
    overflow-y: auto;
}

/* 响应式适配 */
@media screen and (max-width: 1600px) {
    .viewport {
        padding: 3.5rem 0.6rem 0.4rem;
        gap: 0.6rem;
    }

    .column.left,
    .column.right {
        flex: 0 0 16rem;
    }

    .header h1 {
        font-size: 1.08rem;
    }
    .header-line-left { margin-left: -15rem; }
    .header-line-right { margin-left: 15rem; }

    .blueprint h4 {
        font-size: 0.9rem;
    }

    .greening,
    .road,
    .yard,
    .garden {
        height: 5.2rem;
    }

    .lights,
    .heating,
    .sanitation,
    .toilet,
    .facility,
    .water {
        height: 4.8rem;
    }

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

    .nav-btn {
        padding: 0.35rem 1rem;
        font-size: 0.63rem;
    }
}

@media screen and (max-width: 1400px) {
    .viewport {
        padding: 3.2rem 0.5rem 0.3rem;
        height: calc(100% - 4.5rem);
        gap: 0.5rem;
    }

    .column.left,
    .column.right {
        flex: 0 0 14rem;
    }

    .header {
        height: 2.8rem;
    }

    .header h1 {
        font-size: 0.99rem;
        letter-spacing: 0.2rem;
    }
    .header-line-left { margin-left: -13rem; }
    .header-line-right { margin-left: 13rem; }

    .greening h3,
    .road h3,
    .yard h3,
    .garden h3,
    .lights h3,
    .heating h3,
    .sanitation h3,
    .toilet h3,
    .facility h3,
    .water h3,
    .sewage h3,
    .population h3 {
        font-size: 0.65rem;
    }

    .blueprint h4 {
        font-size: 0.81rem;
    }

    .blueprint span {
        font-size: 0.5rem;
    }

    .greening,
    .road,
    .yard,
    .garden {
        height: 4.8rem;
    }

    .lights,
    .heating,
    .sanitation,
    .toilet,
    .facility,
    .water {
        height: 4.3rem;
    }

    .sewage {
        height: 4.8rem;
    }

    .population {
        height: 8.5rem;
    }

    .bottom-stats {
        height: 2.5rem;
        gap: 1.5rem;
    }

    .bottom-nav {
        height: 2.2rem;
    }

    .nav-btn {
        padding: 0.3rem 0.8rem;
        font-size: 0.59rem;
    }

    .detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 1200px) {
    .viewport {
        padding: 3rem 0.4rem 0.2rem;
    }

    .column.left,
    .column.right {
        flex: 0 0 12rem;
    }

    .column {
        gap: 0.4rem;
    }

    .header {
        height: 2.5rem;
    }

    .header h1 {
        font-size: 0.85rem;
    }
    .header-line-left, .header-line-right { display: none; }

    .panel .inner {
        padding: 0.3rem 0.5rem;
    }

    .blueprint {
        padding: 0.3rem;
    }

    .blueprint h4 {
        font-size: 0.72rem;
    }

    .greening,
    .road,
    .yard,
    .garden {
        height: 4.3rem;
    }

    .lights,
    .heating,
    .sanitation,
    .toilet,
    .facility,
    .water {
        height: 3.8rem;
    }

    .sewage {
        height: 4.3rem;
    }

    .population {
        height: 7.5rem;
    }

    .map {
        min-height: 10rem;
    }

    .bottom-stats {
        height: 2.2rem;
        gap: 1rem;
        padding: 0.2rem 0.5rem;
    }

    .stats-section h4 {
        font-size: 0.54rem;
    }

    .stat-item {
        padding: 0.12rem 0.3rem;
    }

    .bottom-nav {
        height: 2rem;
        gap: 0.5rem;
    }

    .nav-btn {
        padding: 0.25rem 0.6rem;
        font-size: 0.52rem;
    }
}

/* 村庄列表样式 */
.village-list {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    overflow-y: auto;
    flex: 1;
}

.village-item {
    padding: 0.4rem 0.6rem;
    background: rgba(0, 108, 255, 0.1);
    border-left: 2px solid #006cff;
    border-radius: 0.15rem;
    color: #8ca0c3;
    font-size: 0.63rem;
    cursor: pointer;
    transition: all 0.3s;
}

.village-item:hover {
    background: rgba(0, 212, 255, 0.2);
    color: #00d4ff;
    border-left-color: #00d4ff;
}

/* Leaflet地图样式 */
.geo {
    background: rgba(0, 40, 60, 0.5) !important;
}

.village-marker {
    background: transparent;
    border: none;
}

.village-marker .marker-dot {
    width: 12px;
    height: 12px;
    background: radial-gradient(circle, #ffcc00 0%, #ff6600 100%);
    border-radius: 50%;
    margin: 0 auto 4px;
    box-shadow: 0 0 8px rgba(255, 153, 0, 0.8);
    animation: pulse 2s infinite;
}

@keyframes pulse {

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

    50% {
        transform: scale(1.2);
        opacity: 0.8;
    }
}

.village-marker .marker-label {
    font-size: 13px;
    color: #fff;
    text-align: center;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8), 1px 1px 2px rgba(0, 0, 0, 0.9);
    white-space: nowrap;
}

.village-tooltip {
    background: rgba(0, 40, 60, 0.95) !important;
    border: 1px solid #00d4ff !important;
    border-radius: 4px !important;
    color: #fff !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
}

.village-tooltip b {
    color: #00d4ff;
}

.leaflet-container {
    background: transparent !important;
}

/* 滚动条样式 */
::-webkit-scrollbar {
    width: 4px;
    height: 4px;
}

::-webkit-scrollbar-track {
    background: rgba(0, 108, 255, 0.1);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.4);
    border-radius: 2px;
}

::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 212, 255, 0.6);
}

/* 所有 tab 布局优化 - 垂直拉满 */

/* 一张蓝图 - 右侧 */
.tab-content[data-tab="blueprint"] .lights,
.tab-content[data-tab="blueprint"] .heating,
.tab-content[data-tab="blueprint"] .sanitation {
    flex: 1;
    min-height: 4rem;
    height: auto;
}

/* 产业兴旺 - 左侧 */
.tab-content[data-tab="industry"] .blueprint {
    flex: 0 0 auto;
}

.tab-content[data-tab="industry"] .yard,
.tab-content[data-tab="industry"] .garden {
    flex: 1;
    min-height: 5rem;
    height: auto;
}

/* 产业兴旺 - 右侧 */
.tab-content[data-tab="industry"] .facility,
.tab-content[data-tab="industry"] .water {
    flex: 1;
    min-height: 5rem;
    height: auto;
}

/* 生态宜居 - 左侧 */
.tab-content[data-tab="ecology"] .greening,
.tab-content[data-tab="ecology"] .road,
.tab-content[data-tab="ecology"] .sewage {
    flex: 1;
    min-height: 4rem;
    height: auto;
}

/* 生态宜居 - 右侧 */
.tab-content[data-tab="ecology"] .toilet,
.tab-content[data-tab="ecology"] .lights,
.tab-content[data-tab="ecology"] .heating {
    flex: 1;
    min-height: 4rem;
    height: auto;
}

/* 乡风文明/治理有效/生活富裕 - 垂直居中 */
.tab-content[data-tab="culture"] .panel,
.tab-content[data-tab="governance"] .panel,
.tab-content[data-tab="wealth"] .panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 治理有效 - 信息选项卡 */
.gov-info-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.gov-tab {
    padding: 0.5rem 0.8rem;
    background: rgba(0, 40, 60, 0.4);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 0.25rem;
    color: #8ca0c3;
    font-size: 0.68rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.gov-tab:hover {
    background: rgba(0, 80, 100, 0.5);
    border-color: rgba(0, 212, 255, 0.4);
}

.gov-tab.active {
    background: linear-gradient(90deg, rgba(0, 120, 140, 0.6), rgba(0, 80, 100, 0.3));
    border-color: #00d4ff;
    color: #ffffff;
}

.gov-info-content {
    flex: 1;
    font-size: 0.68rem;
    color: #b0c4d8;
    line-height: 1.8;
    white-space: pre-wrap;
    overflow-y: auto;
    padding: 0.5rem;
    background: rgba(0, 40, 60, 0.2);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 0.25rem;
}

.gov-info-images {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 0.5rem;
}

.gov-info-images img {
    width: 6rem;
    height: 4rem;
    object-fit: cover;
    border-radius: 0.25rem;
    border: 1px solid rgba(0, 212, 255, 0.3);
}

/* 治理有效 - 全面加强党的领导 */
.governance-party-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.35rem;
    padding: 0.3rem;
}

.party-stat-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.25rem 0.4rem;
    background: rgba(0, 100, 150, 0.3);
    border-radius: 0.2rem;
    border-left: 2px solid #00d4ff;
}

.party-stat-item .party-label {
    color: #8ca0c3;
    font-size: 0.45rem;
    flex: 1;
}

.party-stat-item .party-value {
    color: #00d4ff;
    font-size: 0.54rem;
    font-weight: bold;
    white-space: nowrap;
}

.party-stat-item .party-value em {
    font-style: normal;
    font-size: 0.4rem;
    color: #8ca0c3;
    margin-left: 0.1rem;
}

/* 治理有效 - 小微权力清单表格 */
.power-list-table {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 0.2rem;
}

.power-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.45rem;
    table-layout: fixed;
}

.power-table th,
.power-table td {
    padding: 0.25rem 0.3rem;
    border: 1px solid rgba(0, 212, 255, 0.2);
    text-align: left;
    color: #a8c5d0;
    width: 25%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.power-table th {
    background: rgba(0, 100, 150, 0.4);
    color: #00d4ff;
    font-weight: normal;
    font-size: 0.45rem;
}

.power-table td.type-cell {
    background: rgba(0, 100, 150, 0.25);
    color: #00d4ff;
    font-weight: bold;
    text-align: center;
    vertical-align: middle;
}

.power-table tr:hover td {
    background: rgba(0, 150, 200, 0.15);
}

/* 治理有效 - 图层控制 */
.layer-control-list {
    padding: 0.4rem;
}

.layer-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.3rem;
    background: rgba(0, 100, 150, 0.3);
    border-radius: 0.25rem;
    cursor: pointer;
    transition: background 0.2s;
}

.layer-item:hover {
    background: rgba(0, 150, 200, 0.35);
}

.layer-item input[type="checkbox"] {
    width: 0.7rem;
    height: 0.7rem;
    accent-color: #00d4ff;
}

.layer-icon {
    width: 0.6rem;
    height: 0.6rem;
    display: inline-block;
}

.layer-name {
    flex: 1;
    color: #a8c5d0;
    font-size: 0.5rem;
}

.layer-count {
    color: #00d4ff;
    font-size: 0.54rem;
    font-weight: bold;
}

/* 乡风文明 - 顶部统计卡片 */
.culture-top-stats {
    display: flex;
    gap: 1rem;
}

.culture-stat-card {
    flex: 1;
    text-align: center;
    padding: 0.5rem;
    background: rgba(0, 100, 150, 0.2);
    border-radius: 0.3rem;
    border: 1px solid rgba(0, 212, 255, 0.2);
}

.culture-stat-value {
    font-size: 1.35rem;
    font-weight: bold;
    color: #00d4ff;
    line-height: 1.2;
}

.culture-stat-value span {
    font-size: 0.54rem;
    color: #8ca0c3;
    margin-left: 0.1rem;
}

.culture-stat-label {
    font-size: 0.5rem;
    color: #8ca0c3;
    margin-top: 0.2rem;
}

/* 乡风文明 - 文明体系构建 */
.culture-system {
    padding: 0.3rem 0;
}

.culture-system-items {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    margin-bottom: 0.6rem;
}

.culture-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    background: rgba(0, 100, 150, 0.2);
    border-radius: 0.2rem;
}

.culture-item .item-icon {
    color: #eacf19;
    font-size: 0.45rem;
}

.culture-item .item-label {
    flex: 1;
    color: #a8c5d0;
    font-size: 0.54rem;
}

.culture-item .item-value {
    color: #00d4ff;
    font-size: 0.72rem;
    font-weight: bold;
}

.culture-item .item-unit {
    color: #8ca0c3;
    font-size: 0.45rem;
}

.culture-progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.culture-progress-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.culture-progress-item .progress-label {
    width: 3rem;
    font-size: 0.5rem;
    color: #8ca0c3;
}

.culture-progress-item .progress-bar {
    flex: 1;
    height: 0.4rem;
    background: rgba(0, 100, 150, 0.3);
    border-radius: 0.2rem;
    overflow: hidden;
}

.culture-progress-item .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #00d4ff, #6acca3);
    border-radius: 0.2rem;
    transition: width 0.5s ease;
}

.culture-progress-item .progress-value {
    width: 2.5rem;
    text-align: right;
    font-size: 0.54rem;
    color: #00d4ff;
    font-weight: bold;
}

/* 乡风文明 - 道德模范评选 */
.moral-stats {
    display: flex;
    gap: 0.8rem;
    margin-bottom: 0.6rem;
}

.moral-stat {
    flex: 1;
    text-align: center;
    padding: 0.4rem;
    background: rgba(0, 100, 150, 0.2);
    border-radius: 0.2rem;
}

.moral-stat .moral-num {
    display: block;
    font-size: 1.08rem;
    font-weight: bold;
    color: #00d4ff;
}

.moral-stat .moral-label {
    font-size: 0.45rem;
    color: #8ca0c3;
}

.moral-card {
    flex: 1;
    overflow-y: auto;
}

.moral-person {
    display: flex;
    gap: 0.6rem;
    padding: 0.5rem;
    background: rgba(0, 100, 150, 0.15);
    border-radius: 0.3rem;
    border: 1px solid rgba(0, 212, 255, 0.15);
}

.moral-avatar {
    width: 3.5rem;
    height: 3.5rem;
    flex-shrink: 0;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid rgba(0, 212, 255, 0.4);
}

.moral-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.moral-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.moral-name {
    font-size: 0.72rem;
    color: #fff;
    margin-bottom: 0.3rem;
}

.moral-tag {
    display: inline-block;
    font-size: 0.5rem;
    color: #eacf19;
    background: rgba(234, 207, 25, 0.15);
    padding: 0.1rem 0.3rem;
    border-radius: 0.15rem;
    margin-left: 0.3rem;
}

.moral-deed {
    font-size: 0.45rem !important;
    font-weight: 400 !important;
    color: #a8c5d0 !important;
    line-height: 1.5 !important;
    flex: 1;
    display: -webkit-box !important;
    -webkit-line-clamp: 6 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-break: break-all !important;
    max-height: 4.5rem !important;
}

/* 乡风文明 - 子标签页面板 */
.culture-subtab-panel {
    display: none;
    flex-direction: column;
    gap: 0.8rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.culture-subtab-panel.active {
    display: flex;
}

/* 乡风文明 - 人群治理面板紧凑布局 */
.culture-subtab-panel[data-culture-subtab-panel="people"] {
    gap: 0.4rem;
}

.culture-subtab-panel[data-culture-subtab-panel="people"] .panel-section {
    flex-shrink: 0;
    min-height: 0;
    padding: 0.3rem 0.5rem;
}

.culture-subtab-panel[data-culture-subtab-panel="people"] .panel-section h3 {
    font-size: 0.63rem;
    margin-bottom: 0.15rem;
    padding-bottom: 0.15rem;
}

/* 特殊人群专题 - 紧凑网格 */
.culture-subtab-panel[data-culture-subtab-panel="people"] .special-people-grid {
    gap: 0.2rem;
    padding: 0.15rem 0;
}

.culture-subtab-panel[data-culture-subtab-panel="people"] .special-item {
    padding: 0.2rem;
}

.culture-subtab-panel[data-culture-subtab-panel="people"] .special-item .sp-value {
    font-size: 0.65rem;
}

.culture-subtab-panel[data-culture-subtab-panel="people"] .special-item .sp-label,
.culture-subtab-panel[data-culture-subtab-panel="people"] .special-item .sp-unit {
    font-size: 0.4rem;
}

.culture-subtab-panel[data-culture-subtab-panel="people"] .special-item .sp-label {
    margin-bottom: 0.1rem;
}

/* 小区分布 - 压缩饼图高度 */
.culture-subtab-panel[data-culture-subtab-panel="people"] .panel-section:nth-child(2) {
    flex: 0 0 auto;
}

.culture-subtab-panel[data-culture-subtab-panel="people"] .panel-section:nth-child(2) .chart-box {
    height: 110px;
}

/* 标签分布 - 紧凑 */
.culture-subtab-panel[data-culture-subtab-panel="people"] .panel-section:nth-child(3) {
    flex: 0 0 auto;
    max-height: 110px;
    overflow-y: auto;
}

.culture-subtab-panel[data-culture-subtab-panel="people"] .tag-distribution {
    padding: 0.1rem 0;
}

.culture-subtab-panel[data-culture-subtab-panel="people"] .tag-item {
    padding: 0.25rem 0.4rem;
    margin-bottom: 0.15rem;
}

/* 志愿者概览 - 紧凑网格 */
.culture-subtab-panel[data-culture-subtab-panel="people"] .volunteer-stats {
    gap: 0.2rem;
    padding: 0.15rem 0;
}

.culture-subtab-panel[data-culture-subtab-panel="people"] .vol-stat {
    padding: 0.2rem;
}

.culture-subtab-panel[data-culture-subtab-panel="people"] .vol-stat .vol-value {
    font-size: 0.65rem;
}

.culture-subtab-panel[data-culture-subtab-panel="people"] .vol-stat .vol-label,
.culture-subtab-panel[data-culture-subtab-panel="people"] .vol-stat .vol-unit {
    font-size: 0.4rem;
}

.culture-subtab-panel[data-culture-subtab-panel="people"] .vol-stat .vol-label {
    margin-bottom: 0.1rem;
}

/* 文明家庭评选 - 占据剩余空间 */
.culture-subtab-panel[data-culture-subtab-panel="people"] .panel-section:nth-child(5) {
    flex: 1 1 auto;
    min-height: 120px;
}

.culture-subtab-panel[data-culture-subtab-panel="people"] .family-stats {
    gap: 0.4rem;
    padding: 0.15rem 0;
}

.culture-subtab-panel[data-culture-subtab-panel="people"] .family-stat {
    padding: 0.2rem;
}

.culture-subtab-panel[data-culture-subtab-panel="people"] .family-stat .family-num {
    font-size: 0.8rem;
}

/* 乡风文明 - 特殊人群网格 */
.special-people-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.4rem;
    padding: 0.3rem 0;
}

.special-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem;
    background: rgba(0, 100, 150, 0.2);
    border-radius: 0.2rem;
}

.special-item .sp-label {
    font-size: 0.45rem;
    color: #8ca0c3;
    margin-bottom: 0.2rem;
}

.special-item .sp-value {
    font-size: 0.81rem;
    font-weight: bold;
    color: #00d4ff;
}

.special-item .sp-value.sp-warning {
    color: #ff6b6b;
}

.special-item .sp-unit {
    font-size: 0.45rem;
    color: #8ca0c3;
    margin-left: 0.1rem;
}

/* 标签分布 */
.tag-distribution {
    padding: 0.3rem 0;
}

.tag-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.4rem 0.5rem;
    margin-bottom: 0.3rem;
    background: rgba(0, 100, 150, 0.15);
    border-radius: 0.2rem;
}

.tag-item:last-child {
    margin-bottom: 0;
}

.tag-name {
    font-size: 0.54rem;
    color: #fff;
}

.tag-count {
    font-size: 0.5rem;
    color: #00d4ff;
}

/* 志愿者概览 */
.volunteer-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.4rem;
    padding: 0.3rem 0;
}

.vol-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0.4rem;
    background: rgba(0, 100, 150, 0.2);
    border-radius: 0.2rem;
}

.vol-stat .vol-label {
    font-size: 0.45rem;
    color: #8ca0c3;
    margin-bottom: 0.2rem;
}

.vol-stat .vol-value {
    font-size: 0.81rem;
    font-weight: bold;
    color: #00d4ff;
}

.vol-stat .vol-unit {
    font-size: 0.45rem;
    color: #8ca0c3;
    margin-left: 0.1rem;
}

/* 文明家庭评选 */
.family-stats {
    display: flex;
    gap: 0.8rem;
    padding: 0.3rem 0;
}

.family-stat {
    flex: 1;
    text-align: center;
    padding: 0.4rem;
    background: rgba(0, 100, 150, 0.2);
    border-radius: 0.2rem;
}

.family-stat .family-num {
    display: block;
    font-size: 1.08rem;
    font-weight: bold;
    color: #00d4ff;
}

.family-stat .family-label {
    font-size: 0.45rem;
    color: #8ca0c3;
}

/* 文化活动列表 */
.culture-activity-list {
    flex: 1;
    overflow-y: auto;
    padding: 0.3rem 0;
    min-height: 15rem;
}

.activity-item {
    padding: 0.5rem;
    margin-bottom: 0.4rem;
    background: rgba(0, 100, 150, 0.15);
    border-radius: 0.3rem;
    border: 1px solid rgba(0, 212, 255, 0.15);
}

.activity-item:last-child {
    margin-bottom: 0;
}

.activity-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.3rem;
}

.activity-title {
    font-size: 0.63rem;
    color: #fff;
    font-weight: 500;
}

.activity-date {
    font-size: 0.5rem;
    color: #00d4ff;
}

.activity-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.5rem;
    color: #a8c5d0;
}

.activity-location,
.activity-participants {
    display: flex;
    align-items: center;
    gap: 0.2rem;
}

/* 乡风文明 - 右侧图例 */
.culture-legend {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 0.8rem;
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.legend-icon {
    width: 1rem;
    height: 1rem;
    border-radius: 50%;
}

.legend-icon.province {
    background: #ed3f35;
}

.legend-icon.city {
    background: #f7a440;
}

.legend-text {
    font-size: 0.54rem;
    color: #a8c5d0;
}

.culture-village-count {
    padding: 0.5rem;
    background: rgba(0, 100, 150, 0.2);
    border-radius: 0.2rem;
    text-align: center;
}

.culture-village-count span {
    font-size: 0.54rem;
    color: #8ca0c3;
}

.culture-village-count em {
    font-style: normal;
    font-size: 0.9rem;
    color: #00d4ff;
    font-weight: bold;
    margin: 0 0.2rem;
}

/* 地图标注 - 文明村模式 */
.village-marker.culture-mode .marker-dot {
    transition: all 0.3s ease;
}

.marker-level {
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 10px;
    padding: 1px 4px;
    border-radius: 3px;
    color: #fff;
    font-weight: bold;
    white-space: nowrap;
}

.marker-level.province {
    background: #ed3f35;
}

.marker-level.city {
    background: #f7a440;
}

/* 产业兴旺 - 示范合作社 */
.demo-coop-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.5rem;
}

.demo-coop-item {
    display: flex;
    align-items: center;
    padding: 0.5rem;
    background: rgba(0, 100, 150, 0.2);
    border-radius: 0.2rem;
    gap: 0.3rem;
}

.demo-label {
    font-size: 0.5rem;
    color: #8ca0c3;
    flex: 1;
}

.demo-value {
    font-size: 0.9rem;
    color: #00d4ff;
    font-weight: bold;
}

.demo-unit {
    font-size: 0.45rem;
    color: #8ca0c3;
}

/* 产业兴旺 - 规模化养殖 */
.scale-farm-stats {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}

.scale-item {
    display: flex;
    align-items: center;
    padding: 0.25rem 0.5rem;
    background: rgba(0, 100, 150, 0.15);
    border-radius: 0.2rem;
    border-left: 3px solid #006cff;
}

.scale-label {
    font-size: 0.5rem;
    color: #a8c5d0;
    flex: 1;
}

.scale-value {
    font-size: 0.81rem;
    color: #00d4ff;
    font-weight: bold;
}

.scale-unit {
    font-size: 0.45rem;
    color: #8ca0c3;
    margin-left: 0.2rem;
}

/* 产业兴旺 - 右侧图表拉满 */
.detail-panel[data-detail-panel="industry"] .detail-right {
    flex: 1;
    min-width: 0;
}

.detail-panel[data-detail-panel="industry"] .chart-box.small-chart {
    height: auto;
    flex: 1;
    min-height: 100px;
    width: 100%;
}

.detail-panel[data-detail-panel="industry"] .chart-box.small-chart>div {
    width: 100% !important;
    height: 100% !important;
}

/* 产业兴旺 - 2x2网格布局 */
.industry-info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0.5rem;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 0.3rem;
    box-sizing: border-box;
}

.industry-info-section {
    padding: 0.5rem;
    background: rgba(0, 50, 100, 0.3);
    border-radius: 0.3rem;
    border: 1px solid rgba(0, 180, 255, 0.2);
    display: flex;
    flex-direction: column;
}

.industry-info-section h4 {
    font-size: 0.65rem;
    color: #00d4ff;
    margin-bottom: 0.4rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(0, 180, 255, 0.3);
}

.industry-info-section .info-images {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.3rem;
    flex-wrap: wrap;
}

.industry-info-section .info-images img {
    width: 4rem;
    height: 3rem;
    object-fit: cover;
    border-radius: 0.2rem;
    border: 1px solid rgba(0, 180, 255, 0.3);
}

.industry-info-section .info-content {
    font-size: 0.55rem;
    color: #b8d4e8;
    line-height: 1.6;
    flex: 1;
}

/* 详情页小图表 */
.small-chart {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}

.small-chart h4 {
    font-size: 0.5rem;
    color: #8ca0c3;
    margin-bottom: 0.3rem;
    flex-shrink: 0;
}

.small-chart>div {
    flex: 1;
    min-height: 0;
    width: 100% !important;
}

/* 生态宜居 - 村街绿化 */
.ecology-greening .greening-icons {
    display: flex;
    gap: 1.5rem;
    padding: 0.5rem 0;
    flex: 1;
    align-items: center;
}

.greening-icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
}

.tree-icon {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    flex-shrink: 0;
}

.tree-icon.tree-green {
    background: linear-gradient(135deg, #4ade80, #22c55e);
}

.tree-icon.tree-orange {
    background: linear-gradient(135deg, #fb923c, #f97316);
}

.greening-value {
    font-size: 0.77rem;
    font-weight: bold;
    color: #00d4ff;
    white-space: nowrap;
}

.greening-value .unit {
    font-size: 0.59rem;
    color: #8ca0c3;
    margin-left: 0.1rem;
}

.greening-label {
    font-size: 0.63rem;
    color: #8ca0c3;
}

.greening-info {
    white-space: nowrap;
}

/* 生态宜居 - 村庄美化 */
.ecology-beautify .beautify-content {
    display: flex;
    gap: 0.8rem;
    flex: 1;
    min-height: 0;
}

.beautify-list {
    flex: 1;
}

.beautify-item {
    display: flex;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.63rem;
}

.beautify-item .item-label {
    flex: 1;
    color: #8ca0c3;
}

.beautify-item .item-value {
    color: #00d4ff;
    font-weight: bold;
    margin-right: 0.2rem;
}

.beautify-item .item-unit {
    color: #8ca0c3;
    font-size: 0.54rem;
}

.beautify-chart {
    width: 6rem;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.garden-pie-chart {
    width: 5rem;
    height: 5rem;
}

.garden-legend {
    font-size: 0.5rem;
    color: #8ca0c3;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    justify-content: center;
}

.legend-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-right: 0.1rem;
}

.legend-dot.veg {
    background: #006cff;
}

.legend-dot.park {
    background: #00d4ff;
}

.legend-dot.fruit {
    background: #6acca3;
}

.legend-dot.sketch {
    background: #ff9900;
}

/* 生态宜居 - 村庄亮化 */
.ecology-lighting .lighting-content {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    flex: 1;
    min-height: 0;
}

.lighting-stats {
    flex: 0 0 auto;
    min-width: 8rem;
}

.lighting-item {
    display: flex;
    align-items: center;
    padding: 0.35rem 0;
    font-size: 0.63rem;
}

.light-icon {
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 50%;
    margin-right: 0.4rem;
    flex-shrink: 0;
}

.light-icon.installed {
    background: #00d4ff;
}

.light-icon.repair {
    background: #ff9900;
}

.light-label {
    color: #8ca0c3;
    margin-right: 0.5rem;
    white-space: nowrap;
}

.light-value {
    color: #00d4ff;
    font-weight: bold;
    margin-right: 0.15rem;
}

.light-unit {
    color: #8ca0c3;
    font-size: 0.54rem;
}

.lighting-chart {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 5rem;
}

.lights-pie-chart {
    width: 5rem;
    height: 5rem;
}

.lights-legend {
    font-size: 0.5rem;
    color: #8ca0c3;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.3rem;
}

.lights-legend>span {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
}

.lights-legend .legend-dot {
    display: inline-block;
    flex-shrink: 0;
}

.legend-dot.solar {
    background: #00d4ff;
}

.legend-dot.electric {
    background: #ff9900;
}

/* 生态宜居 - 村街硬化 */
.ecology-hardening .hardening-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    flex: 1;
    min-height: 0;
}

.hardening-chart {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
}

.hardening-bar-chart {
    flex: 1;
    min-height: 4rem;
}

.hardening-bar-legend {
    font-size: 0.54rem;
    color: #8ca0c3;
    text-align: center;
}

.hardening-stats {
    flex: 1;
}

.hardening-item {
    display: flex;
    align-items: center;
    padding: 0.25rem 0;
    font-size: 0.63rem;
}

.road-icon {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    margin-right: 0.3rem;
}

.road-icon.main {
    background: #006cff;
}

.road-icon.secondary {
    background: #00d4ff;
}

.road-icon.village {
    background: #6acca3;
}

.road-label {
    flex: 1;
    color: #8ca0c3;
}

.road-count,
.road-meter {
    color: #00d4ff;
    font-weight: bold;
}

.road-sep,
.road-unit {
    color: #8ca0c3;
    font-size: 0.54rem;
    margin: 0 0.1rem;
}

/* 生态宜居 - 村庄净化 */
.ecology-purification .purification-legend {
    font-size: 0.54rem;
    color: #8ca0c3;
    margin-bottom: 0.4rem;
}

.legend-dot.treated {
    background: #00d4ff;
}

.legend-dot.total {
    background: rgba(0, 212, 255, 0.3);
}

.purification-items {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.purification-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.63rem;
}

.puri-label {
    width: 2rem;
    color: #8ca0c3;
}

.puri-progress {
    flex: 1;
    height: 0.5rem;
    background: rgba(0, 212, 255, 0.2);
    border-radius: 0.25rem;
    overflow: hidden;
}

.puri-bar {
    height: 100%;
    background: linear-gradient(90deg, #006cff, #00d4ff);
    border-radius: 0.25rem;
    transition: width 0.5s ease;
}

.puri-value {
    min-width: 3rem;
    color: #00d4ff;
    font-weight: bold;
    text-align: right;
}

/* 生态宜居 - 右侧图层控制 */
.layer-controls {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.layer-checkbox {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.5rem;
    font-size: 0.63rem;
    color: #8ca0c3;
    cursor: pointer;
    background: rgba(0, 40, 60, 0.3);
    border-radius: 0.2rem;
    transition: all 0.2s ease;
}

.layer-checkbox:hover {
    background: rgba(0, 80, 100, 0.4);
}

.layer-checkbox input[type="checkbox"] {
    width: 0.9rem;
    height: 0.9rem;
    accent-color: #00d4ff;
}

.checkbox-label {
    flex: 1;
}

/* 生态宜居 - 弹窗选项卡 */
.eco-info-tabs {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.eco-tab {
    padding: 0.5rem 0.8rem;
    background: rgba(0, 40, 60, 0.4);
    border: 1px solid rgba(0, 212, 255, 0.2);
    border-radius: 0.25rem;
    color: #8ca0c3;
    font-size: 0.59rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.eco-tab:hover {
    background: rgba(0, 80, 100, 0.5);
    border-color: rgba(0, 212, 255, 0.4);
}

.eco-tab.active {
    background: linear-gradient(90deg, rgba(0, 120, 140, 0.6), rgba(0, 80, 100, 0.3));
    border-color: #00d4ff;
    color: #ffffff;
}

.eco-tab-content {
    flex: 1;
    font-size: 0.54rem;
    color: #b0c4d8;
    overflow-y: auto;
    padding: 0.5rem;
    background: rgba(0, 40, 60, 0.2);
    border: 1px solid rgba(0, 212, 255, 0.15);
    border-radius: 0.25rem;
}

/* 生态宜居详情 - 信息网格 */
.eco-info-grid {
    display: flex;
    gap: 1rem;
}

.eco-map-section {
    flex: 1;
}

.eco-map-placeholder {
    height: 8rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 40, 60, 0.3);
    border: 1px dashed rgba(0, 212, 255, 0.3);
    border-radius: 0.25rem;
    color: #8ca0c3;
    font-size: 0.5rem;
}

.eco-desc-section {
    flex: 1;
    line-height: 1.8;
}

/* 生态宜居详情 - 表格 */
.eco-info-tables {
    display: flex;
    gap: 0.8rem;
}

.eco-info-tables.three-cols {
    flex-wrap: nowrap;
}

.eco-table-section {
    flex: 1;
}

.eco-table-section h5 {
    font-size: 0.54rem;
    color: #00d4ff;
    margin-bottom: 0.4rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(0, 212, 255, 0.2);
}

.eco-table {
    width: 100%;
    font-size: 0.45rem;
    border-collapse: collapse;
}

.eco-table td {
    padding: 0.25rem 0.3rem;
    border-bottom: 1px solid rgba(0, 212, 255, 0.1);
}

.eco-table td:first-child {
    color: #8ca0c3;
}

.eco-table td:last-child,
.eco-table td:nth-child(even) {
    color: #00d4ff;
    text-align: right;
}

.eco-table.facility-table {
    table-layout: fixed;
    width: 100%;
}

.eco-table.facility-table td {
    box-sizing: border-box;
}

.eco-table.facility-table td:nth-child(1),
.eco-table.facility-table td:nth-child(3) {
    width: 35%;
    color: #8ca0c3;
    text-align: left;
}

.eco-table.facility-table td:nth-child(2),
.eco-table.facility-table td:nth-child(4) {
    width: 15%;
    color: #00d4ff;
    text-align: right;
}

/* 生活富裕 - 左侧 */
.wealth-total {
    float: right;
    font-size: 0.63rem;
    font-weight: normal;
    color: #8ca0c3;
}

.wealth-total em {
    color: #eacf19;
    font-style: normal;
    font-weight: bold;
}

/* 生活富裕 - 资产与用地 */
.wealth-meta {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}

.wealth-meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.2rem 0;
}

.wealth-meta-label {
    color: #8ca0c3;
    font-size: 0.6rem;
}

.wealth-meta-value {
    color: #fff;
    font-size: 0.75rem;
    margin-left: auto;
}

.wealth-meta-unit {
    color: #8ca0c3;
    font-size: 0.55rem;
    margin-left: 0.1rem;
}

.wealth-assets-bar,
.wealth-health-bar,
.wealth-poverty-bar {
    width: 100%;
    height: 120px;
}

/* 生活富裕 - 右侧 */
.strands-stats {
    padding: 0.5rem 0;
}

.strands-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem;
    background: rgba(0, 108, 255, 0.1);
    border-radius: 4px;
    margin-bottom: 0.5rem;
}

.strands-label {
    color: #8ca0c3;
    font-size: 0.63rem;
}

.strands-value {
    color: #00d4ff;
    font-size: 1.08rem;
    font-weight: bold;
}

.strands-unit {
    color: #8ca0c3;
    font-size: 0.63rem;
    margin-left: 0.2rem;
}

.wealth-insurance-bar {
    width: 100%;
    height: 180px;
}

/* 生态宜居弹层样式 */
.eco-full-content {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.3rem;
}

.eco-col {
    flex: 1;
    min-width: 280px;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.eco-section {
    background: rgba(0, 60, 100, 0.3);
    border-radius: 4px;
    padding: 0.4rem;
    border: 1px solid rgba(0, 180, 255, 0.2);
}

.eco-section h5 {
    color: #00d4ff;
    font-size: 0.65rem;
    margin-bottom: 0.3rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(0, 180, 255, 0.3);
}

.eco-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.55rem;
}

.eco-table tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.eco-table tr:last-child {
    border-bottom: none;
}

.eco-table td {
    padding: 0.15rem 0.2rem;
    color: #b8d4e8;
}

.eco-table td:first-child {
    color: #8ca0c3;
    width: 55%;
}

.eco-table td:last-child {
    text-align: right;
    color: #fff;
}

.eco-facility-section {
    width: 100%;
    background: rgba(0, 60, 100, 0.3);
    border-radius: 4px;
    padding: 0.4rem;
    border: 1px solid rgba(0, 180, 255, 0.2);
    margin-top: 0.3rem;
}

.eco-facility-section h5 {
    color: #00d4ff;
    font-size: 0.65rem;
    margin-bottom: 0.3rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(0, 180, 255, 0.3);
}

.eco-facility-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.55rem;
}

.eco-facility-table td {
    padding: 0.15rem 0.3rem;
    color: #b8d4e8;
    width: 25%;
}

.eco-facility-table td:nth-child(odd) {
    color: #8ca0c3;
}

.eco-facility-table td:nth-child(even) {
    color: #fff;
}

/* 乡风文明弹层样式 */
.culture-full-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.3rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
}

.culture-section {
    background: rgba(0, 60, 100, 0.3);
    border-radius: 4px;
    padding: 0.5rem;
    border: 1px solid rgba(0, 180, 255, 0.2);
}

.culture-section h5 {
    color: #00d4ff;
    font-size: 0.65rem;
    margin-bottom: 0.4rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(0, 180, 255, 0.3);
}

.culture-text {
    color: #b8d4e8;
    font-size: 0.55rem;
    line-height: 1.8;
    white-space: pre-wrap;
}

.culture-rules .culture-text {
    max-height: 200px;
    overflow-y: auto;
}

.culture-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.55rem;
}

.culture-table td {
    padding: 0.2rem 0.3rem;
    color: #b8d4e8;
}

.culture-table td:nth-child(odd) {
    color: #8ca0c3;
    width: 30%;
}

.culture-table td:nth-child(even) {
    color: #fff;
    width: 20%;
}

.culture-images {
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.culture-images img {
    max-width: 150px;
    max-height: 100px;
    border-radius: 4px;
    border: 1px solid rgba(0, 180, 255, 0.3);
}

/* 治理有效弹层样式 */
.governance-full-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.3rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
}

.governance-section {
    background: rgba(0, 60, 100, 0.3);
    border-radius: 4px;
    padding: 0.5rem;
    border: 1px solid rgba(0, 180, 255, 0.2);
}

.governance-section h5 {
    color: #00d4ff;
    font-size: 0.65rem;
    margin-bottom: 0.4rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(0, 180, 255, 0.3);
}

.governance-text {
    color: #b8d4e8;
    font-size: 0.55rem;
    line-height: 1.8;
    white-space: pre-wrap;
}

.governance-images {
    margin-top: 0.4rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
}

.governance-images img {
    max-width: 150px;
    max-height: 100px;
    border-radius: 4px;
    border: 1px solid rgba(0, 180, 255, 0.3);
}

/* 生活富裕弹层样式 */
.wealth-full-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.3rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
}

.wealth-section {
    background: rgba(0, 60, 100, 0.3);
    border-radius: 4px;
    padding: 0.5rem;
    border: 1px solid rgba(0, 180, 255, 0.2);
}

.wealth-section h5 {
    color: #00d4ff;
    font-size: 0.65rem;
    margin-bottom: 0.4rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(0, 180, 255, 0.3);
}

.wealth-text {
    color: #b8d4e8;
    font-size: 0.55rem;
    line-height: 1.8;
    white-space: pre-wrap;
}
/* 产业兴旺 - 示范合作社（右侧面板） */
.demo-stats {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.4rem;
}

.demo-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.4rem 0.5rem;
    background: rgba(0, 100, 150, 0.2);
    border-radius: 0.2rem;
    border-left: 2px solid #00d4ff;
}

.demo-item .demo-label {
    flex: 1;
    font-size: 0.54rem;
    color: #8ca0c3;
}

.demo-item .demo-value {
    font-size: 0.9rem;
    color: #00d4ff;
    font-weight: bold;
}

.demo-item .demo-unit {
    font-size: 0.45rem;
    color: #8ca0c3;
}

/* 产业兴旺 - 规模化养殖（右侧面板） */
.scale-stats {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.scale-stats .scale-item {
    display: flex;
    align-items: center;
    padding: 0.3rem 0.5rem;
    background: rgba(0, 100, 150, 0.15);
    border-radius: 0.2rem;
    border-left: 3px solid #006cff;
}

.scale-stats .scale-item:first-child {
    border-left-color: #00d4ff;
    background: rgba(0, 150, 180, 0.2);
}

.scale-stats .scale-label {
    flex: 1;
    font-size: 0.54rem;
    color: #a8c5d0;
}

.scale-stats .scale-value {
    font-size: 0.81rem;
    color: #00d4ff;
    font-weight: bold;
}

.scale-stats .scale-unit {
    font-size: 0.45rem;
    color: #8ca0c3;
    margin-left: 0.15rem;
}

/* 生态宜居 - 村级详情弹窗 */
.ecology-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: auto auto auto;
    gap: 0.4rem;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    padding: 0.3rem;
    box-sizing: border-box;
}

.ecology-section {
    padding: 0.35rem 0.4rem;
    background: rgba(0, 50, 100, 0.3);
    border-radius: 0.25rem;
    border: 1px solid rgba(0, 180, 255, 0.2);
}

.ecology-section-title {
    font-size: 0.58rem;
    color: #00d4ff;
    margin-bottom: 0.3rem;
    padding-bottom: 0.15rem;
    border-bottom: 1px solid rgba(0, 180, 255, 0.3);
    text-align: center;
}

.ecology-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.5rem;
}

.ecology-table td {
    padding: 0.15rem 0.2rem;
    border: 1px solid rgba(0, 120, 180, 0.25);
}

.ecology-table .eco-label {
    color: #8ca0c3;
    width: 55%;
    background: rgba(0, 40, 70, 0.3);
}

.ecology-table .eco-value {
    color: #00d4ff;
    text-align: right;
    width: 45%;
    font-weight: 500;
}

/* 乡风文明选项卡 */
.culture-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid rgba(0, 180, 255, 0.2);
}

.culture-tab {
    padding: 0.4rem 1rem;
    font-size: 0.55rem;
    color: #8ca0c3;
    cursor: pointer;
    transition: all 0.3s;
    border-bottom: 2px solid transparent;
}

.culture-tab:hover {
    color: #00d4ff;
}

.culture-tab.active {
    color: #00d4ff;
    border-bottom-color: #00d4ff;
}

.culture-content {
    min-height: 20rem;
}

.culture-content-panel {
    display: none;
}

.culture-content-panel.active {
    display: block;
}

.culture-text {
    color: #8ca0c3;
    line-height: 1.8;
    font-size: 0.5rem;
    margin-bottom: 1rem;
}

.culture-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8rem, 1fr));
    gap: 0.5rem;
    margin-top: 1rem;
}

.culture-images img {
    width: 100%;
    height: 6rem;
    object-fit: cover;
    border-radius: 0.2rem;
    border: 1px solid rgba(0, 180, 255, 0.2);
}

/* 家风家训 */
.family-mottos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(4rem, 1fr));
    gap: 1rem;
    padding: 1rem 0;
}

.family-motto-item {
    display: flex;
    justify-content: center;
    align-items: center;
}

.motto-seal {
    width: 4rem;
    height: 4rem;
    background: radial-gradient(circle, #dc3545 0%, #8b1a2a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.6rem;
    font-weight: bold;
    text-align: center;
    padding: 0.3rem;
    box-shadow: 0 0 10px rgba(220, 53, 69, 0.5), inset 0 0 10px rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    line-height: 1.3;
}

/* 美丽庭院 */
.courtyard-header {
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(0, 180, 255, 0.2);
}

.courtyard-stats {
    display: flex;
    gap: 2rem;
    font-size: 0.5rem;
    color: #8ca0c3;
}

.courtyard-stats em {
    color: #00d4ff;
    font-style: normal;
    font-weight: bold;
    font-size: 0.65rem;
    margin: 0 0.2rem;
}

.courtyard-main {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.courtyard-image-section img {
    width: 100%;
    height: 15rem;
    object-fit: cover;
    border-radius: 0.2rem;
    border: 1px solid rgba(0, 180, 255, 0.2);
}

.courtyard-scores-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
}

.courtyard-scores-table td {
    padding: 0.4rem;
    border: 1px solid rgba(0, 180, 255, 0.2);
    font-size: 0.5rem;
    text-align: center;
}

.courtyard-scores-table td:nth-child(odd) {
    background: rgba(0, 40, 70, 0.3);
    color: #8ca0c3;
    width: 30%;
}

.courtyard-scores-table td:nth-child(even) {
    color: #00d4ff;
    font-weight: 500;
}

.courtyard-intro {
    color: #8ca0c3;
    line-height: 1.8;
    font-size: 0.5rem;
    padding: 0.5rem;
    background: rgba(0, 40, 70, 0.3);
    border-radius: 0.2rem;
    border: 1px solid rgba(0, 180, 255, 0.1);
}

.empty-tip {
    color: #666;
    text-align: center;
    padding: 2rem;
    font-size: 0.5rem;
}

/* 乡风文明弹窗特殊布局 */
.detail-panel[data-detail-panel="culture"] {
    flex-direction: column;
    gap: 0;
}

.detail-panel[data-detail-panel="culture"] .culture-tabs {
    flex-shrink: 0;
}

.detail-panel[data-detail-panel="culture"] .culture-content {
    flex: 1;
    overflow-y: auto;
}

/* 家风家训布局优化 */
.family-mottos-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 1.5rem;
    padding: 2rem 1rem;
}

.family-motto-item {
    flex: 0 0 auto;
}

.motto-seal {
    width: 5rem;
    height: 5rem;
    background: radial-gradient(circle, #dc3545 0%, #8b1a2a 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.55rem;
    font-weight: bold;
    text-align: center;
    padding: 0.8rem;
    box-shadow: 0 0 15px rgba(220, 53, 69, 0.6), inset 0 0 15px rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.3);
    line-height: 1.4;
    word-break: break-all;
    white-space: normal;
}

/* 美丽庭院布局优化 */
.courtyard-header {
    margin-bottom: 1.5rem;
    padding-bottom: 0.8rem;
    border-bottom: 2px solid rgba(0, 180, 255, 0.3);
}

.courtyard-stats {
    display: flex;
    gap: 3rem;
    font-size: 0.55rem;
    color: #8ca0c3;
    justify-content: center;
}

.courtyard-stats span {
    padding: 0.5rem 1rem;
    background: rgba(0, 40, 70, 0.3);
    border-radius: 0.3rem;
}

.courtyard-stats em {
    color: #00d4ff;
    font-style: normal;
    font-weight: bold;
    font-size: 0.75rem;
    margin: 0 0.3rem;
}

.courtyard-main {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 2rem;
    padding: 1rem 0;
}

.courtyard-image-section {
    display: flex;
    align-items: center;
    justify-content: center;
}

.courtyard-image-section img {
    width: 100%;
    max-height: 20rem;
    object-fit: cover;
    border-radius: 0.3rem;
    border: 2px solid rgba(0, 180, 255, 0.3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.courtyard-info-section {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.courtyard-scores-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 1rem;
    background: rgba(0, 40, 70, 0.2);
}

.courtyard-scores-table td {
    padding: 0.5rem;
    border: 1px solid rgba(0, 180, 255, 0.3);
    font-size: 0.52rem;
    text-align: center;
}

.courtyard-scores-table td:nth-child(odd) {
    background: rgba(0, 40, 70, 0.4);
    color: #8ca0c3;
    width: 35%;
    font-weight: 500;
}

.courtyard-scores-table td:nth-child(even) {
    color: #00d4ff;
    font-weight: bold;
    font-size: 0.6rem;
}

.courtyard-intro {
    color: #8ca0c3;
    line-height: 1.8;
    font-size: 0.52rem;
    padding: 0.8rem;
    background: rgba(0, 40, 70, 0.3);
    border-radius: 0.3rem;
    border: 1px solid rgba(0, 180, 255, 0.2);
    max-height: 10rem;
    overflow-y: auto;
}

/* 文化活动和文化墙布局优化 */
.culture-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

.culture-images img {
    width: 100%;
    height: 8rem;
    object-fit: cover;
    border-radius: 0.3rem;
    border: 2px solid rgba(0, 180, 255, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
}

.culture-images img:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0, 180, 255, 0.5);
}

/* 村规民约文本优化 */
.culture-text {
    color: #8ca0c3;
    line-height: 2;
    font-size: 0.52rem;
    margin-bottom: 1rem;
    padding: 1rem;
    background: rgba(0, 40, 70, 0.2);
    border-radius: 0.3rem;
    border-left: 3px solid #00d4ff;
}

/* 选项卡样式优化 */
.culture-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid rgba(0, 180, 255, 0.3);
}

.culture-tab {
    padding: 0.6rem 1.5rem;
    font-size: 0.58rem;
    color: #8ca0c3;
    cursor: pointer;
    transition: all 0.3s;
    border-bottom: 3px solid transparent;
    background: rgba(0, 40, 70, 0.2);
    margin-bottom: -2px;
}

.culture-tab:hover {
    color: #00d4ff;
    background: rgba(0, 60, 100, 0.3);
}

.culture-tab.active {
    color: #00d4ff;
    border-bottom-color: #00d4ff;
    background: rgba(0, 80, 120, 0.3);
}

/* 家风家训纯文字样式 */
.family-mottos-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.family-mottos-list .family-motto-item {
    color: #8ca0c3;
    font-size: 0.55rem;
    line-height: 2.2;
    padding: 0.6rem 1rem;
    margin-bottom: 0.8rem;
    background: rgba(0, 40, 70, 0.3);
    border-left: 4px solid #00d4ff;
    border-radius: 0.2rem;
    position: relative;
    padding-left: 2rem;
}

.family-mottos-list .family-motto-item::before {
    content: '◆';
    color: #00d4ff;
    position: absolute;
    left: 0.8rem;
    font-size: 0.4rem;
}

.family-mottos-list .family-motto-item:hover {
    background: rgba(0, 60, 100, 0.4);
    border-left-color: #00ffff;
}

/* 治理有效选项卡 */
.governance-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid rgba(0, 180, 255, 0.3);
    flex-shrink: 0;
}

.governance-tab {
    padding: 0.6rem 1.5rem;
    font-size: 0.58rem;
    color: #8ca0c3;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    margin-bottom: -2px;
}

.governance-tab:hover {
    color: #00d4ff;
    background: rgba(0, 60, 100, 0.3);
}

.governance-tab.active {
    color: #00d4ff;
    border-bottom-color: #00d4ff;
    background: rgba(0, 80, 120, 0.3);
}

.governance-content {
    flex: 1;
    overflow-y: auto;
    min-height: 20rem;
}

.governance-content-panel {
    display: none;
    padding: 1.5rem 0 1rem 0;
}

.governance-content-panel.active {
    display: block;
}

/* 治理有效面板布局 */
.detail-panel[data-detail-panel="governance"] {
    flex-direction: column;
    gap: 0;
}

/* 治理有效内容区块 */
.governance-section {
    padding: 0 1rem;
}

.governance-section-title {
    font-size: 0.7rem;
    color: #00d4ff;
    margin-top: 1rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    padding-left: 1rem;
    border-bottom: 1px solid rgba(0, 180, 255, 0.3);
}

.governance-section-text {
    color: #8ca0c3;
    font-size: 0.55rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
    text-align: justify;
    text-indent: 2em;
}

.governance-section-images {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-top: 1rem;
}

.governance-section-images img {
    width: 100%;
    height: auto;
    border-radius: 0.3rem;
    border: 1px solid rgba(0, 180, 255, 0.2);
    transition: all 0.3s ease;
}

.governance-section-images img:hover {
    border-color: #00d4ff;
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

/* 生活富裕面板 */
.detail-panel[data-detail-panel="wealth"] {
    flex-direction: column;
    padding: 1.5rem;
}

.wealth-content {
    width: 100%;
}

.wealth-full-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.3rem;
    max-height: calc(100vh - 8rem);
    overflow-y: auto;
}

.wealth-section {
    background: rgba(0, 60, 100, 0.3);
    border-radius: 4px;
    padding: 0.5rem;
    border: 1px solid rgba(0, 180, 255, 0.2);
}

.wealth-section h5 {
    color: #00d4ff;
    font-size: 0.65rem;
    margin-bottom: 0.4rem;
    padding-bottom: 0.2rem;
    border-bottom: 1px solid rgba(0, 180, 255, 0.3);
}

.wealth-text {
    color: #b8d4e8;
    font-size: 0.55rem;
    line-height: 1.8;
    white-space: pre-wrap;
}

/* 三务公开 - 二级分类选项卡 */
.public-affairs-secondary-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 1rem;
    border-bottom: 2px solid rgba(0, 180, 255, 0.3);
    flex-shrink: 0;
}

.public-affairs-secondary-tab {
    padding: 0.5rem 1.2rem;
    font-size: 0.55rem;
    color: #8ca0c3;
    cursor: pointer;
    transition: all 0.3s ease;
    border-bottom: 2px solid transparent;
    position: relative;
    bottom: -2px;
    white-space: nowrap;
}

.public-affairs-secondary-tab:hover {
    color: #00d4ff;
    background: rgba(0, 60, 100, 0.3);
}

.public-affairs-secondary-tab.active {
    color: #00d4ff;
    border-bottom-color: #00d4ff;
    background: rgba(0, 80, 120, 0.3);
}

/* 三务公开 - 三级分类选项卡 */
.public-affairs-tertiary-tabs {
    display: flex;
    gap: 0.5rem;
    margin-bottom: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(0, 40, 80, 0.3);
    border-radius: 4px;
    flex-shrink: 0;
}

.public-affairs-tertiary-tab {
    padding: 0.4rem 1rem;
    font-size: 0.5rem;
    color: #8ca0c3;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 3px;
    border: 1px solid transparent;
    white-space: nowrap;
}

.public-affairs-tertiary-tab:hover {
    color: #00d4ff;
    border-color: rgba(0, 180, 255, 0.3);
    background: rgba(0, 60, 100, 0.3);
}

.public-affairs-tertiary-tab.active {
    color: #fff;
    background: rgba(0, 180, 255, 0.3);
    border-color: #00d4ff;
}

/* 三务公开 - 左右布局容器 */
.public-affairs-container {
    display: flex;
    gap: 1.5rem;
    height: calc(100% - 8rem);
    overflow: hidden;
    flex: 1;
}

/* 左侧时间列表 */
.public-affairs-timeline {
    width: 200px;
    flex-shrink: 0;
    background: rgba(0, 40, 80, 0.3);
    border-radius: 4px;
    border: 1px solid rgba(0, 180, 255, 0.2);
    overflow-y: auto;
}

.timeline-list {
    padding: 0.5rem;
}

.timeline-item {
    padding: 0.6rem 1rem;
    margin-bottom: 0.5rem;
    font-size: 0.5rem;
    color: #8ca0c3;
    cursor: pointer;
    transition: all 0.3s ease;
    border-radius: 3px;
    border-left: 3px solid transparent;
    background: rgba(0, 30, 60, 0.3);
}

.timeline-item:hover {
    color: #00d4ff;
    border-left-color: #00d4ff;
    background: rgba(0, 60, 100, 0.5);
}

.timeline-item.active {
    color: #fff;
    background: rgba(0, 100, 150, 0.5);
    border-left-color: #00d4ff;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.3);
}

/* 右侧图片展示 */
.public-affairs-images {
    flex: 1;
    background: rgba(0, 40, 80, 0.3);
    border-radius: 4px;
    border: 1px solid rgba(0, 180, 255, 0.2);
    overflow-y: auto;
}

.images-container {
    padding: 1rem;
}

.empty-tip {
    text-align: center;
    color: #5a7a9b;
    font-size: 0.5rem;
    padding: 3rem 0;
}

.public-affairs-images img {
    width: 100%;
    height: auto;
    border-radius: 0.3rem;
    border: 1px solid rgba(0, 180, 255, 0.2);
    margin-bottom: 1rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.public-affairs-images img:hover {
    border-color: #00d4ff;
    transform: scale(1.02);
    box-shadow: 0 0 15px rgba(0, 212, 255, 0.3);
}

/* 滚动条美化 */
.public-affairs-timeline::-webkit-scrollbar,
.public-affairs-images::-webkit-scrollbar {
    width: 6px;
}

.public-affairs-timeline::-webkit-scrollbar-thumb,
.public-affairs-images::-webkit-scrollbar-thumb {
    background: rgba(0, 180, 255, 0.3);
    border-radius: 3px;
}

.public-affairs-timeline::-webkit-scrollbar-thumb:hover,
.public-affairs-images::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 180, 255, 0.5);
}

/* ========== 一张蓝图选项卡样式 ========== */
.blueprint-tabs {
    display: flex;
    gap: 0.3rem;
    margin-bottom: 0.35rem;
    padding: 0.22rem 0.26rem;
    background: rgba(1, 24, 40, 0.95);
    border: 1px solid rgba(0, 212, 255, 0.28);
    border-radius: 0.24rem;
    box-shadow: 0 0 0.45rem rgba(0, 0, 0, 0.28);
    position: sticky;
    top: 0;
    z-index: 5;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.blueprint-tab {
    border: 1px solid rgba(0, 212, 255, 0.4);
    background: rgba(2, 59, 86, 0.62);
    color: #8ca0c3;
    font-size: 0.56rem;
    line-height: 1;
    padding: 0.2rem 0.35rem;
    border-radius: 0.18rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.blueprint-tab:hover {
    background: rgba(0, 132, 183, 0.5);
    border-color: #00b4d8;
}

.blueprint-tab.active {
    color: #fff;
    border-color: #00d4ff;
    background: rgba(0, 132, 183, 0.78);
}

.blueprint-section {
    /* display 由 JS applyBlueprintTab() 控制 */
}

/* ========== 经济补充数据网格 ========== */
.economy-extra-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.35rem 0.6rem;
    margin-top: 0.4rem;
}

/* 经济统计 overflow */
.right-panel .tab-content[data-tab="blueprint"] .panel-section:nth-child(2) {
    overflow: hidden;
}

.economy-extra-item {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0;
}

.economy-label {
    color: #8ca0c3;
    font-size: 0.62rem;
}

.economy-value {
    color: #fff;
    font-size: 0.75rem;
    margin-left: auto;
}

.economy-unit {
    color: #8ca0c3;
    font-size: 0.55rem;
    margin-left: 0.12rem;
}

/* ========== 收入柱状图容器 ========== */
.income-bar {
    width: 100%;
    height: 100%;
}

/* ========== 生态宜居扩展样式 ========== */

.left-panel .tab-content[data-tab="ecology"] {
    overflow: hidden;
}

/* 子标签页面板显示/隐藏 */
.eco-subtab-panel {
    display: none;
}
.eco-subtab-panel.active {
    display: block;
    overflow-y: auto;
    flex: 1 1 0;
}
.eco-subtab-panel > .panel-section + .panel-section {
    margin-top: 0.3rem;
}

/* 公共区域与重点人群 */
.ecology-public .public-stats {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.ecology-public .public-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.8rem;
    background: rgba(0, 108, 255, 0.1);
    border-left: 0.15rem solid #006cff;
    border-radius: 0.2rem;
}

.ecology-public .public-label {
    font-size: 0.7rem;
    color: #a3c8f8;
}

.ecology-public .public-value {
    font-size: 1.2rem;
    font-weight: bold;
    color: #00d4ff;
    margin: 0 0.3rem;
}

.ecology-public .public-unit {
    font-size: 0.65rem;
    color: #6b8ca8;
}

/* 五化概览列表 */
.wuhua-overview-list {
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}

.wuhua-overview-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.wuhua-category {
    font-size: 0.75rem;
    color: #a3c8f8;
    min-width: 2.5rem;
}

.wuhua-progress {
    flex: 1;
    height: 0.8rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.4rem;
    overflow: hidden;
}

.wuhua-bar {
    height: 100%;
    transition: width 0.8s ease;
}

.wuhua-rate {
    font-size: 0.85rem;
    font-weight: bold;
    color: #00d4ff;
    min-width: 2.5rem;
    text-align: right;
}

/* 五化告警列表 */
.wuhua-alarm-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 15rem;
    overflow-y: auto;
}

.wuhua-alarm-item {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.6rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.2rem;
}

.alarm-level {
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 50%;
}

.alarm-category {
    font-size: 0.65rem;
    color: #ff9900;
}

.alarm-title {
    font-size: 0.7rem;
    color: #a3c8f8;
    flex: 1;
}

/* 五化工程进度列表 */
.wuhua-project-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    max-height: 15rem;
    overflow-y: auto;
}

.wuhua-project-item {
    padding: 0.5rem 0.6rem;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 0.2rem;
}

.project-header {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.3rem;
}

.project-category {
    font-size: 0.65rem;
    color: #ff9900;
}

.project-name {
    font-size: 0.7rem;
    color: #a3c8f8;
    flex: 1;
}

.project-progress {
    font-size: 0.7rem;
    font-weight: bold;
    color: #00d4ff;
}

.project-bar-bg {
    height: 0.5rem;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 0.25rem;
    overflow: hidden;
}

.project-bar {
    height: 100%;
    background: linear-gradient(90deg, #006cff, #00d4ff);
    transition: width 0.8s ease;
}

/* 五化专项详情 */
.ecology-wuhua-detail .wuhua-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0.7rem 1rem;
}

.wuhua-detail-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 0.7rem;
    background: rgba(0, 108, 255, 0.1);
    border-radius: 0.2rem;
}

.wuhua-detail-item .detail-label {
    font-size: 0.65rem;
    color: #a3c8f8;
}

.wuhua-detail-item .detail-value {
    font-size: 1rem;
    font-weight: bold;
    color: #00d4ff;
    margin: 0 0.2rem;
}

.wuhua-detail-item .detail-unit {
    font-size: 0.6rem;
    color: #6b8ca8;
}

.wuhua-empty {
    text-align: center;
    padding: 2rem 0;
    font-size: 0.7rem;
    color: #6b8ca8;
}

/* 滚动条样式 */
.wuhua-alarm-list::-webkit-scrollbar,
.wuhua-project-list::-webkit-scrollbar {
    width: 0.2rem;
}

.wuhua-alarm-list::-webkit-scrollbar-thumb,
.wuhua-project-list::-webkit-scrollbar-thumb {
    background: rgba(0, 212, 255, 0.3);
    border-radius: 0.1rem;
}

.wuhua-alarm-list::-webkit-scrollbar-track,
.wuhua-project-list::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.2);
}

/* ========== 右侧面板高度溢出修复 ========== */

/* 右侧面板通用 */
.right-panel .panel-section {
    padding: 0.3rem 0.5rem;
}
.right-panel .tab-content {
    gap: 0.25rem;
    overflow: hidden;
}
.right-panel .panel-section h3 {
    margin-bottom: 0.25rem;
    padding-bottom: 0.15rem;
}

/* Blueprint - chart-box 默认高度 */
.right-panel .tab-content[data-tab="blueprint"] .panel-section:not(:first-child) .chart-box {
    height: 7rem;
    min-height: 7rem;
    max-height: 7rem;
}

/* 经济统计（nth-child(2)）：缩小1/3 */
.right-panel .tab-content[data-tab="blueprint"] .panel-section:nth-child(2) .chart-box {
    height: 4rem;
    min-height: 4rem;
    max-height: 4rem;
}

/* 民生服务（nth-child(4)）：获得多出的空间 */
.right-panel .tab-content[data-tab="blueprint"] .panel-section:nth-child(4) .chart-box {
    height: 10rem;
    min-height: 10rem;
    max-height: 10rem;
}

/* Blueprint - 经济统计 extra grid */
.right-panel .economy-extra-grid {
    gap: 0.2rem 0.4rem;
    margin-top: 0.2rem;
}

/* 产业兴旺 - 示范合作社 */
.right-panel .demo-stats { gap: 0.25rem; }
.right-panel .demo-item { padding: 0.3rem 0.4rem; }

/* 产业兴旺 - 规模化养殖 */
.right-panel .scale-stats { gap: 0.2rem; }
.right-panel .scale-stats .scale-item { padding: 0.2rem 0.4rem; }

/* 产业兴旺 - 产业补充：改为flex单行（原为block垂直堆叠） */
.right-panel .industry-extra-grid { gap: 0.25rem; }
.right-panel .industry-extra-item {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    padding: 0.25rem 0.4rem;
    text-align: left;
}
.right-panel .industry-extra-item .ind-extra-label {
    display: inline;
    flex: 1;
    margin-bottom: 0;
}
.right-panel .industry-extra-item .ind-extra-value {
    display: inline;
    margin-bottom: 0;
}
.right-panel .industry-extra-single {
    display: flex;
    align-items: center;
    gap: 0.2rem;
    margin-top: 0.2rem;
    padding: 0.25rem 0.4rem;
    text-align: left;
}
.right-panel .industry-extra-single .ind-extra-label {
    display: inline;
    flex: 1;
    margin-bottom: 0;
}
.right-panel .industry-extra-single .ind-extra-value {
    display: inline;
    margin-bottom: 0;
}

/* 生态宜居 - 村街硬化 */
.right-panel .hardening-content { gap: 0.3rem; }
.right-panel .hardening-item { padding: 0.15rem 0; }

/* 生态宜居 - 村庄净化 */
.right-panel .purification-items { gap: 0.3rem; }

/* 生态宜居 - 五化专项详情 */
.right-panel .ecology-wuhua-detail .wuhua-detail-grid { gap: 0.25rem; }
.right-panel .wuhua-detail-item { padding: 0.2rem 0.4rem; }

/* 生活富裕 - 左侧面板3个图表均分空间 */
.left-panel .tab-content[data-tab="wealth"] .panel-section {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}
.left-panel .tab-content[data-tab="wealth"] .chart-box {
    flex: 1 1 0;
    height: auto;
    min-height: 0;
}