/* fruit.css - 全国水果态势与动态 门户样式（零外网依赖）
   v3: 行1/行2 固定尺寸——地图绘制区固定 520px（同"信创"city-chart），面板高度不再随内容伸缩；
       右侧 TOP20 表格固定高度、表体内部滚动（sticky 表头）。
       关键修复：地图/表格面板的 .bd 显式 flex:none——此前 .panel .bd{flex:1}（flex-basis:0%）
       覆盖了 height:520px，绘制区被压成 ~280px，这是"地图太小"的根因 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; background: #040d1f; color: #cfe6ff; font-family: "Microsoft YaHei", "PingFang SC", sans-serif; font-size: 14px; overflow-x: hidden; }
#bgCanvas { position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 0; }
.main { position: relative; z-index: 1; padding: 12px 16px 20px; }
/* 头部 */
.header { display: flex; align-items: center; justify-content: space-between; padding: 6px 8px 12px; }
.title { font-size: 26px; font-weight: bold; letter-spacing: 4px; background: linear-gradient(180deg, #eaf6ff, #7fc4ff); -webkit-background-clip: text; color: transparent; text-shadow: 0 0 18px rgba(64,156,255,.35); }
.top-right { display: flex; align-items: center; gap: 16px; font-size: 13px; color: #8fc1ff; }
.live i { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #35e08a; margin-right: 6px; box-shadow: 0 0 8px #35e08a; animation: blink 1.6s infinite; }
@keyframes blink { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
/* KPI */
.kpis { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; margin-bottom: 12px; }
.kpi { background: linear-gradient(160deg, rgba(16,52,110,.75), rgba(8,26,58,.75)); border: 1px solid rgba(70,140,255,.25); border-radius: 8px; padding: 10px 14px; position: relative; overflow: hidden; }
.kpi:before { content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, #3fa2ff, transparent); }
.kpi .v { font-size: 24px; font-weight: bold; color: #ffd766; font-family: Consolas, monospace; }
.kpi .l { margin-top: 2px; font-size: 12px; color: #9fc3ee; }
/* 布局行：地图行 1.6fr 与"信创" city-panel 一致 */
.row { display: grid; gap: 12px; margin-bottom: 12px; }
.row-map { grid-template-columns: 1.6fr 1fr; }
.row-species { grid-template-columns: 1.6fr 1fr; }
.row-tech { grid-template-columns: 1.2fr 1fr; }
.row-mkt { grid-template-columns: 1.2fr 1fr; }
/* 面板 */
.panel { background: linear-gradient(170deg, rgba(13,42,88,.62), rgba(6,20,46,.72)); border: 1px solid rgba(70,140,255,.22); border-radius: 10px; display: flex; flex-direction: column; min-height: 320px; box-shadow: 0 0 18px rgba(20,80,180,.18) inset; }
.panel .hd { padding: 10px 14px; font-size: 15px; font-weight: bold; color: #d8ecff; border-bottom: 1px solid rgba(70,140,255,.18); display: flex; align-items: center; justify-content: space-between; flex: none; }
.panel .hd:before { content: '◆'; color: #3fa2ff; margin-right: 8px; font-size: 12px; }
.hd-tip { font-size: 11px; font-weight: normal; color: #7ea8d8; }
.panel .bd { flex: 1; padding: 10px 12px; overflow: hidden; }
.chart { width: 100%; height: 100%; min-height: 280px; }
/* 行1/行2 固定尺寸（同"信创" city-chart 520px）：
   面板总高 = 表头(约44px) + 表体 520px，左右两列等高、不随内容伸缩；
   flex:0 0 auto 是关键——防止 .panel .bd 的 flex:1（flex-basis:0%）覆盖 height 把地图压小 */
.p-map .bd, .p-table .bd, .p-smap .bd, .p-stable .bd { flex: 0 0 auto; height: 520px; min-height: 0; }
.p-map, .p-table, .p-smap, .p-stable { min-height: 0; }
/* 表格：右侧 TOP20 固定高度、表体内部滚动，表头吸顶 */
.tbl-wrap { height: 100%; overflow-y: auto; }
.dtbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.dtbl th { position: sticky; top: 0; z-index: 2; background: rgba(20,60,120,.92); color: #bcd9ff; padding: 7px 8px; text-align: left; }
.dtbl td { padding: 6px 8px; border-bottom: 1px solid rgba(70,140,255,.12); color: #d3e6fb; }
.dtbl tr:hover td { background: rgba(40,100,200,.15); }
.dtbl .num { text-align: right; color: #ffd766; }
.dtbl .rk { color: #ff9f43; font-weight: bold; }
/* chips 与列表 */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; flex: none; }
.chip { padding: 3px 12px; border: 1px solid rgba(90,160,255,.35); border-radius: 12px; font-size: 12px; color: #9cc3f0; cursor: pointer; user-select: none; }
.chip.on { background: rgba(63,162,255,.25); color: #ffd766; border-color: #3fa2ff; }
.bd-species { display: flex; flex-direction: column; }
.chips-row { max-height: none; overflow: visible; }
/* 分品种地图区：表体 520px 内扣除品种切换 chips 行高，地图区固定填充剩余高度 */
.sp-mapbox { flex: 1 1 auto; min-height: 0; display: flex; position: relative; }
.bd-tech { display: flex; flex-direction: column; }
.tech-list { flex: 1; overflow-y: auto; }
.tech-list .it { display: flex; gap: 8px; align-items: baseline; padding: 7px 6px; border-bottom: 1px dashed rgba(70,140,255,.14); font-size: 12.5px; }
.tech-list .it:hover { background: rgba(40,100,200,.1); }
.tech-list .tag { flex: none; padding: 1px 8px; border-radius: 3px; font-size: 11px; background: rgba(63,162,255,.2); color: #8fc3ff; }
.tech-list .tag.g { background: rgba(53,224,138,.15); color: #57e8a5; }
.tech-list .tag.y { background: rgba(255,183,66,.15); color: #ffc46b; }
.tech-list .tt { color: #e2efff; }
.tech-list .memo { color: #86a9d4; margin-left: auto; text-align: right; max-width: 46%; }
/* 图例 */
.map-legend { position: absolute; left: 18px; bottom: 14px; z-index: 5; font-size: 11px; color: #9cc3f0; }
.map-legend .li { display: flex; align-items: center; gap: 6px; margin-top: 4px; }
.lg-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle, #ffd766, #c2790a); }
.lg-dot.sm { width: 6px; height: 6px; }
.lg-dia { display: inline-block; width: 9px; height: 9px; transform: rotate(45deg); background: #35e08a; }
.lg-tri { display: inline-block; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid #f35858; }
.p-map, .p-smap { position: relative; }
.p-map .bd, .p-smap .bd { position: relative; }
.p-map .chart { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
.sp-mapbox .chart { position: absolute; left: 0; top: 0; width: 100%; height: 100%; }
/* 滚动条 */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(70,140,255,.35); border-radius: 3px; }
::-webkit-scrollbar-track { background: transparent; }
@media (max-width: 1100px) {
  .row-map, .row-species, .row-tech, .row-mkt { grid-template-columns: 1fr; }
  .kpis { grid-template-columns: repeat(3, 1fr); }
}