/* 全国航运态势和动态 - 单页长滚动版式（开源，无外部依赖） */
* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { min-height: 100%; background: #04121f; color: #cfe6ff;
  font-family: 'Microsoft YaHei', 'PingFang SC', Helvetica, Arial, sans-serif; font-size: 14px; }
#screen { max-width: 1560px; margin: 0 auto; padding: 0 16px 26px; }

/* ===== 顶部吸顶栏 ===== */
#topbar { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between;
  height: 60px; padding: 8px 18px; background: rgba(5,20,35,.95); border-bottom: 1px solid #123a5e;
  box-shadow: 0 4px 18px rgba(0,0,0,.35); }
#topbar .title { font-size: 20px; font-weight: bold; letter-spacing: 5px; color: #7fd4ff;
  text-shadow: 0 0 12px rgba(60,170,255,.6); line-height: 1.2; }
#topbar .subtitle { font-size: 11px; color: #5e90bd; margin-top: 2px; }
#topbar .time { font-size: 14px; color: #6fb3e8; font-family: Consolas, monospace; }

/* ===== 区块布局 ===== */
section.block { scroll-margin-top: 76px; }

/* ===== 运量统计 KPI 卡片 ===== */
.kpi-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 16px; }
.kpi { --ac: #52d3ff; position: relative; overflow: hidden; display: flex; flex-direction: column;
  align-items: center; gap: 8px; padding: 24px 14px 14px; border-radius: 8px;
  background: linear-gradient(165deg, rgba(23,74,120,.5), rgba(7,26,45,.75));
  border: 1px solid rgba(47,140,200,.3);
  transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.kpi.k-gold { --ac: #ffd76e; }
.kpi.k-green { --ac: #5ee6a0; }
.kpi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--ac), transparent); opacity: .9; }
.kpi::after { content: ''; position: absolute; right: -26px; top: -26px; width: 88px; height: 88px; border-radius: 50%;
  background: var(--ac); opacity: .07; filter: blur(2px); transition: opacity .25s ease; }
.kpi:hover { transform: translateY(-3px); border-color: var(--ac);
  box-shadow: 0 8px 20px rgba(0,0,0,.4), 0 0 10px rgba(0,0,0,.25); }
.kpi:hover::after { opacity: .16; }
.kpi-ico { position: absolute; top: 10px; left: 14px; font-size: 17px; color: var(--ac); opacity: .85; }
.kpi .kpi-label { font-size: 13px; color: #79a8cf; letter-spacing: 1px; }
.kpi-main { display: flex; align-items: baseline; gap: 6px; }
.kpi .kpi-value { font-size: 34px; font-weight: bold; color: var(--ac); font-family: Consolas, 'Courier New', monospace;
  text-shadow: 0 0 14px rgba(0,0,0,.3); line-height: 1.1; }
.kpi .kpi-unit { font-size: 12px; color: #6f9cc4; }
.kpi .kpi-sub { width: 100%; padding-top: 8px; margin-top: 2px; text-align: center; font-size: 12px; color: #6f9cc4;
  border-top: 1px dashed rgba(47,140,200,.28); }
@media (max-width: 900px) { .kpi-row { grid-template-columns: repeat(2, 1fr); } }

.row { display: flex; gap: 12px; margin-top: 12px; align-items: stretch; }
.row.wrap-row { flex-wrap: wrap; }
.row > .panel { min-width: 0; }

/* ===== 面板 ===== */
.panel { position: relative; background: rgba(8, 34, 58, .55); border: 1px solid #12395c; border-radius: 4px;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.panel::before, .panel::after { content: ''; position: absolute; width: 12px; height: 12px; border: 2px solid #2fa7e0; z-index: 2; }
.panel::before { top: -1px; left: -1px; border-right: none; border-bottom: none; }
.panel::after { bottom: -1px; right: -1px; border-left: none; border-top: none; }
.panel .ptitle { height: 34px; line-height: 34px; padding: 0 12px; font-size: 15px; font-weight: bold; color: #7fd4ff; flex: none;
  background: linear-gradient(90deg, rgba(24,84,140,.55), rgba(24,84,140,0)); border-bottom: 1px solid #103552; }
.panel .ptitle .tip { font-size: 12px; color: #6f9cc4; font-weight: normal; margin-left: 8px; }
.panel .pbody { flex: 1; padding: 6px 8px; min-height: 0; }

/* ===== 地图(占行宽50%) + 港口TOP50（两面板同高：
        面板总高556 = 标题34 + 内容区520 + 边框2×1；
        内容区520 = 上下内边距10×2 + 内容500（画布固定500高 / 表格滚动区500高） ===== */
.map-panel { flex: 0 0 50%; max-width: 50%; }
.map-panel .pbody { padding: 10px;
  background: radial-gradient(ellipse at 28% 18%, rgba(22,78,132,.4), rgba(4,16,30,.68)); }
/* 港口热力图画布：深色底 + 边框圆角 + 外发光；画布内绘制完整底图（海洋渐变+经纬网格+海岸线陆地+航道水系） */
#heat { display: block; margin: 0 auto; border-radius: 4px; border: 1px solid rgba(47,140,200,.35);
  background: linear-gradient(180deg, rgba(10,42,70,.6), rgba(5,20,35,.8));
  box-shadow: 0 0 18px rgba(20,90,160,.18), inset 0 0 24px rgba(0,0,0,.25); }
#rank-panel { flex: 1; min-width: 460px; }
#rank-panel .pbody { padding: 10px 8px; }
#rank-scroll { height: 500px; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; }

/* ===== 表格基础（fixed布局 + 表头吸顶；港口TOP50带500px内部滚动，其余板块TOP20自适应高度不滚动） ===== */
.tbl { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: 13px; }
.tbl th { position: sticky; top: 0; z-index: 3; height: 34px; padding: 0 10px; text-align: left; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; font-size: 12px; font-weight: bold; color: #7fd4ff; letter-spacing: 1px;
  background: linear-gradient(180deg, #0e3a5f, #0b2c4a); border-bottom: 1px solid #1d5486; }
.tbl td { height: 30px; padding: 0 10px; color: #cfe6ff; border-bottom: 1px solid rgba(18,57,92,.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tbl td.num { text-align: right; font-family: Consolas, 'Courier New', monospace; color: #9fd1f5; }
.tbl th:first-child, .tbl td:first-child { text-align: center; }
.tbl tbody tr:nth-child(even) { background: rgba(15,52,88,.28); }
.tbl tbody tr:hover { background: rgba(47,140,200,.14); }
.tbl tr.top1 td { background: rgba(255,181,77,.10); }
.tbl tr.top2 td { background: rgba(207,216,227,.07); }
.tbl tr.top3 td { background: rgba(217,145,91,.09); }
.rk { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; border-radius: 50%;
  background: rgba(47,140,200,.20); color: #8fd0ff; font-size: 11px; text-align: center; }
.tbl tr.top1 .rk { background: #ffb54d; color: #06213a; font-weight: bold; }
.tbl tr.top2 .rk { background: #cfd8e3; color: #06213a; font-weight: bold; }
.tbl tr.top3 .rk { background: #d9915b; color: #06213a; font-weight: bold; }
.tsea { display: inline-block; margin-left: 5px; padding: 0 4px; line-height: 15px; font-size: 10px; border-radius: 3px;
  color: #ffb066; background: rgba(255,150,80,.16); border: 1px solid rgba(255,150,80,.45); }
.triv { display: inline-block; margin-left: 5px; padding: 0 4px; line-height: 15px; font-size: 10px; border-radius: 3px;
  color: #52d3ff; background: rgba(82,211,255,.13); border: 1px solid rgba(82,211,255,.4); }
.tbl-wrap::-webkit-scrollbar { width: 8px; }
.tbl-wrap::-webkit-scrollbar-thumb { background: rgba(47,140,200,.35); border-radius: 4px; }
.tbl-wrap::-webkit-scrollbar-track { background: rgba(8,34,58,.5); }

/* 港口TOP50 列宽：#46 | 港口200 | 省64 | 水系110 | 类型56，吞吐量130、装/卸110（右对齐） */
#rank-panel .tbl th:nth-child(2) { width: 200px; }
#rank-panel .tbl th:nth-child(3) { width: 64px; }
#rank-panel .tbl th:nth-child(4) { width: 110px; }
#rank-panel .tbl th:nth-child(5) { width: 56px; }
#rank-panel .tbl th:nth-child(6) { width: 130px; }
#rank-panel .tbl th:nth-child(7), #rank-panel .tbl th:nth-child(8) { width: 110px; }

/* ===== ③④ 新板块：航运公司/船舶/供应链/技术（各占整行，TOP20，高度随内容自适应、无内部滚动） ===== */
.full-panel { flex: 1 1 100%; max-width: 100%; }
.full-panel .pbody { padding: 10px 8px; }
.full-panel .tbl-wrap { height: auto; overflow: visible; }
/* 公司TOP20（8列）：#46 | 公司260 | 主营板块180 | 集团190 | 规模150 | 船队90 | 运力130 | 航线=吸收剩余 */
#co-panel .tbl th:nth-child(2) { width: 260px; }
#co-panel .tbl th:nth-child(3) { width: 180px; }
#co-panel .tbl th:nth-child(4) { width: 190px; }
#co-panel .tbl th:nth-child(5) { width: 150px; }
#co-panel .tbl th:nth-child(6) { width: 90px; }
#co-panel .tbl th:nth-child(7) { width: 130px; }
#co-panel .tbl td:last-child { color: #9fd1f5; font-size: 12px; }
/* 船舶TOP20（10列）：#46 | 船名170 | 公司170 | 船型150 | 能力110 | 能源90 | 航区110 | 状态70 | 母港90 | 亮点=吸收剩余 */
#vs-panel .tbl th:nth-child(2) { width: 170px; }
#vs-panel .tbl th:nth-child(3) { width: 170px; }
#vs-panel .tbl th:nth-child(4) { width: 150px; }
#vs-panel .tbl th:nth-child(5) { width: 110px; }
#vs-panel .tbl th:nth-child(6) { width: 90px; }
#vs-panel .tbl th:nth-child(7) { width: 110px; }
#vs-panel .tbl th:nth-child(8) { width: 70px; }
#vs-panel .tbl th:nth-child(9) { width: 90px; }
#vs-panel .tbl td:last-child { color: #9fd1f5; font-size: 12px; }
/* 技术图谱TOP20（右表5列，在窄列内重设）：#40 | 技术150 | 类别74 | 成熟度74 | 案例=吸收剩余 */
.techcol .tbl th:nth-child(2) { width: 150px; }
.techcol .tbl th:nth-child(3) { width: 74px; }
.techcol .tbl th:nth-child(4) { width: 74px; }
.techcol .tbl { font-size: 12px; }
.techcol .tbl th, .techcol .tbl td { padding-left: 6px; padding-right: 6px; }
/* 公司类型徽标 */
.tcet, .tprov, .tloc, .tpri { display: inline-block; margin-left: 5px; padding: 0 4px; line-height: 15px; font-size: 10px; border-radius: 3px; }
.tcet { color: #ffd76e; background: rgba(255,215,110,.14); border: 1px solid rgba(255,215,110,.45); }
.tprov { color: #52d3ff; background: rgba(82,211,255,.13); border: 1px solid rgba(82,211,255,.4); }
.tloc { color: #9fd1f5; background: rgba(120,180,230,.12); border: 1px solid rgba(120,180,230,.4); }
.tpri { color: #5ee6a0; background: rgba(94,230,160,.13); border: 1px solid rgba(94,230,160,.4); }
.cu { font-style: normal; font-size: 10px; color: #6f9cc4; }
/* 船舶能源/航区徽标 */
.ten { display: inline-block; margin-left: 5px; padding: 0 4px; line-height: 15px; font-size: 10px; border-radius: 3px; }
.en-lng { color: #7ff0c8; background: rgba(94,230,180,.12); border: 1px solid rgba(94,230,180,.4); }
.en-bio { color: #c8f27f; background: rgba(190,240,120,.12); border: 1px solid rgba(190,240,120,.4); }
.en-ele { color: #52d3ff; background: rgba(82,211,255,.13); border: 1px solid rgba(82,211,255,.4); }
.en-conv { color: #6f9cc4; background: rgba(120,180,230,.08); border: 1px solid rgba(120,180,230,.3); }
/* 船舶状态 */
.vstat { display: inline-block; padding: 0 6px; line-height: 16px; font-size: 10px; border-radius: 8px; border: 1px solid; }
.vstat-on { color: #5ee6a0; border-color: rgba(94,230,160,.5); background: rgba(94,230,160,.1); }
.vstat-berth { color: #52d3ff; border-color: rgba(82,211,255,.5); background: rgba(82,211,255,.1); }
.vstat-standby { color: #9fd1f5; border-color: rgba(120,180,230,.45); background: rgba(120,180,230,.08); }
.vstat-mission { color: #ffd76e; border-color: rgba(255,215,110,.5); background: rgba(255,215,110,.1); }
/* 技术成熟度 */
.mtag { display: inline-block; padding: 0 4px; line-height: 15px; font-size: 10px; border-radius: 3px; border: 1px solid; white-space: nowrap; }
.mtag.m1 { color: #5ee6a0; border-color: rgba(94,230,160,.5); background: rgba(94,230,160,.1); }
.mtag.m2 { color: #ffd76e; border-color: rgba(255,215,110,.5); background: rgba(255,215,110,.1); }
.mtag.m3 { color: #ff8f5e; border-color: rgba(255,143,94,.5); background: rgba(255,143,94,.1); }

/* ===== 航运供应链状态：左图（节点地图·固定500高）+ 右表（TOP20状态列表·固定500高·内部滚动） ===== */
.chain-body { padding: 0 !important; height: 534px; }
.chain-flex { display: flex; gap: 0; align-items: stretch; height: 100%; min-height: 0; }
.chainmap-col { flex: 0 0 52%; max-width: 52%; min-width: 420px; display: flex; flex-direction: column; min-height: 0;
  border-right: 1px solid rgba(47,140,200,.18);
  background: radial-gradient(ellipse at 30% 20%, rgba(22,78,132,.35), rgba(4,16,30,.6)); }
.chain-col { flex: 1; min-width: 380px; display: flex; flex-direction: column; min-height: 0; }
.col-title { flex: none; height: 30px; line-height: 30px; padding: 0 12px; font-size: 12px; font-weight: bold; color: #8fd0ff;
  background: linear-gradient(90deg, rgba(24,84,140,.35), rgba(24,84,140,0)); border-bottom: 1px solid rgba(16,53,82,.6); }
.col-title .csubtitle { font-size: 11px; color: #6f9cc4; font-weight: normal; margin-left: 8px; }
/* 航运供应链状态：标题文字背景透明（面板主标题 + 左右小标题均去掉渐变底） */
#chain-panel .ptitle { background: transparent; }
#chain-panel .col-title { background: transparent; }
/* 节点分布图画布：弹性填充剩余高度（内容区500 - 标题30 - 图例~28），JS 按实际 client 尺寸重建位图 */
#chainmap { flex: 1; display: block; width: 100%; min-height: 0; border: none; }
.legend-bar { flex: none; display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 12px; font-size: 11px; color: #8fd0ff;
  border-top: 1px dashed rgba(47,140,200,.25); }
.legend-bar .lg { display: inline-flex; align-items: center; gap: 5px; }
.lg-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
/* 右列：固定高500的滚动区（flex剩余空间），20条状态列表超出即内部滚动 */
.chain-scroll { flex: 1; min-height: 0; height: 100%; overflow-y: auto; overflow-x: hidden;
  overscroll-behavior: contain; padding: 6px 10px; }
#chain-list { list-style: none; }
#chain-list li { display: flex; align-items: center; gap: 8px; height: 30px;
  border-bottom: 1px dashed rgba(47,140,200,.18); font-size: 13px; }
.cdot { flex: none; width: 8px; height: 8px; border-radius: 50%; }
.cdot.s1 { background: #5ee6a0; box-shadow: 0 0 6px rgba(94,230,160,.7); }
.cdot.s2 { background: #ffd76e; box-shadow: 0 0 6px rgba(255,215,110,.7); }
.cdot.s3 { background: #ff8f5e; box-shadow: 0 0 6px rgba(255,143,94,.7); }
.cnode { flex: 1; min-width: 0; color: #cfe6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ctype { flex: none; width: 64px; font-size: 11px; color: #6f9cc4; }
.cbar { flex: none; width: 88px; height: 6px; border-radius: 3px; background: rgba(15,52,88,.9); overflow: hidden; }
.cbar i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #3fa9f5, #ffd76e, #ff6a45); }
.cload { flex: none; width: 44px; text-align: right; font-family: Consolas, monospace; font-size: 12px; color: #9fd1f5; }
.cwait { flex: none; width: 42px; text-align: right; font-family: Consolas, monospace; font-size: 12px; color: #ffd76e; }
.chain-scroll::-webkit-scrollbar { width: 8px; }
.chain-scroll::-webkit-scrollbar-thumb { background: rgba(47,140,200,.35); border-radius: 4px; }
.chain-scroll::-webkit-scrollbar-track { background: rgba(8,34,58,.5); }

/* ===== 航运相关技术图谱：左图（类别矩阵图）+ 右表（TOP20） ===== */
.tech-flex { display: flex; gap: 0; align-items: stretch; min-height: 0; }
.techmap-col { flex: 0 0 46%; max-width: 46%; min-width: 380px; display: flex; flex-direction: column;
  border-right: 1px solid rgba(47,140,200,.18);
  background: radial-gradient(ellipse at 50% 45%, rgba(22,78,132,.35), rgba(4,16,30,.6)); }
.techcol { flex: 1; min-width: 380px; display: flex; flex-direction: column; min-height: 0; }
.techcol .tbl-wrap { flex: 1; overflow: visible; padding: 6px 8px 0; }
#techmap { flex: 1; display: block; width: 100%; min-height: 430px; border: none; }

/* ===== 页脚 ===== */
#foot { margin-top: 18px; padding: 14px 4px 4px; text-align: center; color: #4d7ba6; font-size: 12px;
  border-top: 1px dashed rgba(47,140,200,.25); }

/* ===== 响应式：窄屏时两栏布局改为上下堆叠 ===== */
@media (max-width: 1280px) {
  .map-panel { flex: 1 1 100%; max-width: 100%; }
  .chainmap-col, .techmap-col { flex: 1 1 100%; max-width: 100%; min-width: 0; border-right: none; }
  .chain-col, .techcol { min-width: 0; border-top: 1px solid rgba(47,140,200,.18); }
  #chainmap, #techmap { min-height: 380px; }
  /* 窄屏堆叠时供应链内容区放开定高，右列保持500px内部滚动 */
  .chain-body { height: auto; }
  .chain-flex { height: auto; }
  .chain-scroll { flex: none; height: 500px; overflow-y: auto; }
}
@media (max-width: 640px) { .kpi-row { grid-template-columns: 1fr; } }