/* 全国水产养殖态势和动态 - 深色长滚动页样式 (本地化css) */
html, body { margin: 0; padding: 0; background: #05132b; color: #cfe6ff;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif; }
body { min-height: 100%; overflow-x: hidden; overflow-y: auto; }
#bgCanvas { position: fixed; left: 0; top: 0; z-index: 0; }
.main { position: relative; z-index: 1; box-sizing: border-box; padding: 0 16px 24px; max-width: 1760px; margin: 0 auto; }
/* 顶栏美化：无描边线条，柔和顶光晕 + 底边渐隐 + 标题流光 */
.header { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; justify-content: space-between;
  height: 64px; margin: 0 -16px 14px; padding: 0 20px; box-sizing: border-box;
  background: linear-gradient(180deg, rgba(5,24,54,.95) 0%, rgba(5,20,45,.72) 72%, rgba(5,20,45,0) 100%);
  backdrop-filter: blur(6px); }
.header::before { content: ""; position: absolute; left: 270px; top: -14px; transform: translateX(-50%);
  width: 640px; height: 92px; pointer-events: none;
  background: radial-gradient(ellipse at center, rgba(0,170,255,.16), rgba(0,170,255,0) 70%); }
.header .title { font-size: 28px; letter-spacing: 8px; font-weight: bold; padding-left: 14px; position: relative;
  background: linear-gradient(92deg, #ffffff, #a5e0ff 42%, #46e3b8 62%, #7ec9ff 100%); background-size: 220% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 14px rgba(0,180,255,.5)); animation: titleSheen 8s linear infinite; }
@keyframes titleSheen { 0% { background-position: 0% 0; } 100% { background-position: 220% 0; } }
.header .title::before { content: "🐟"; position: absolute; left: -22px; top: 3px; font-size: 19px;
  filter: drop-shadow(0 0 8px rgba(70,227,184,.75)); animation: fishFloat 3.2s ease-in-out infinite; }
@keyframes fishFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
.top-right { display: flex; align-items: center; gap: 12px; }
.live { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: #7ef7d3;
  border: 1px solid rgba(70,200,178,.45); background: rgba(70,200,178,.14); padding: 3px 12px; border-radius: 20px;
  box-shadow: inset 0 0 8px rgba(70,200,178,.12); }
.live i { width: 8px; height: 8px; border-radius: 50%; background: #46e3b8; box-shadow: 0 0 8px #46e3b8;
  animation: pulse 1.6s infinite; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }
.clock { font-family: Consolas, Menlo, monospace; font-size: 13px; color: #9fe0ff; letter-spacing: 1px;
  border: 1px solid rgba(0,168,255,.38); background: rgba(0,60,120,.32); padding: 4px 12px; border-radius: 8px;
  box-shadow: inset 0 0 10px rgba(0,140,255,.15); }
.kpis { display: flex; gap: 14px; margin: 0 0 12px; }
.kpi { flex: 1; background: linear-gradient(180deg, rgba(0,90,170,.28), rgba(0,40,90,.12));
  border: 1px solid rgba(0,168,255,.35); border-radius: 8px; padding: 10px 16px; }
.kpi .v { font-size: 26px; font-weight: bold; color: #35e2ff; }
.kpi .l { font-size: 12px; color: #8fc3ef; margin-top: 2px; }
/* 行布局：整行区块，纵向自然滚动 */
.row { display: flex; gap: 12px; }
.row + .row { margin-top: 12px; }
/* 地图行：参照"信创"应用布局（地图:表格 = 1.6:1，画布高520，信创 city-chart 同款）；
 * geo 不设四边边距、zoom 1.05，地图自动撑满高度并居中，比例匀称 */
.row-map { height: auto; }
.row-map .p-map { flex: 1.6; min-width: 0; }
.row-map .p-map .bd { flex: none; height: 520px; }
.row-map .p-table { flex: 1; min-width: 380px; }
/* 分品种热力 + 品种基地TOP20 行（布局与主地图行一致） */
.row-species { height: 520px; margin-top: 12px; }
.row-species .p-smap { flex: 1.6; min-width: 0; }
.row-species .p-stable { flex: 1; min-width: 400px; }
.bd-species { display: flex; flex-direction: column; overflow: hidden; }
.sp-mapbox { flex: 1; position: relative; min-height: 0; }
/* 技术装备 + 供应商行 */
.row-tech { height: 420px; margin-top: 12px; }
.row-tech .p-tech { flex: 1.55; min-width: 0; }
.row-tech .p-vendor { flex: 1; min-width: 0; }
/* 批发市场行 */
.row-mkt { height: 400px; margin-top: 12px; }
.row-mkt .p-mkt { flex: 1.3; min-width: 0; }
.row-mkt .p-mktchart { flex: 1; min-width: 0; }
.panel { background: rgba(3,26,58,.72); border: 1px solid rgba(0,168,255,.28); border-radius: 10px;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.panel .hd { flex: none; padding: 8px 12px; font-size: 15px; color: #9fe0ff; letter-spacing: 2px;
  border-bottom: 1px solid rgba(0,168,255,.25); background: linear-gradient(90deg, rgba(0,120,220,.25), transparent); }
.panel .hd::before { content: "▮"; color: #35e2ff; margin-right: 6px; }
.panel .hd .hd-tip { float: right; font-size: 11px; color: #6f9cc7; letter-spacing: 0; line-height: 22px; }
.panel .bd { flex: 1; min-height: 0; position: relative; }
.chart { position: absolute; left: 0; top: 0; right: 0; bottom: 0; }
/* 地图图例 */
.map-legend { position: absolute; left: 10px; bottom: 8px; z-index: 5; display: flex; flex-direction: column; gap: 4px;
  background: rgba(4,20,45,.72); border: 1px solid rgba(0,168,255,.3); border-radius: 8px; padding: 8px 12px;
  font-size: 11px; color: #bfe9ff; pointer-events: none; }
.map-legend .li { display: flex; align-items: center; gap: 7px; white-space: nowrap; }
.map-legend .lg-dot { width: 9px; height: 9px; border-radius: 50%; background: #35e2ff; box-shadow: 0 0 6px rgba(53,226,255,.9); }
.map-legend .lg-dot.sm { background: #1479c9; box-shadow: none; }
.map-legend .lg-dot.lg { background: #ffd166; }
.map-legend .lg-dia { width: 9px; height: 9px; background: #ffd166; transform: rotate(45deg);
  box-shadow: 0 0 6px rgba(255,209,102,.9); }
.map-legend .lg-tri { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent;
  border-bottom: 9px solid #ff9a6b; filter: drop-shadow(0 0 4px rgba(255,154,107,.8)); }
/* 表格 */
.tbl-wrap { position: absolute; left: 0; top: 0; right: 0; bottom: 0; overflow: auto; }
.dtbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.dtbl thead th { position: sticky; top: 0; z-index: 2; background: #0b2f60; color: #9fe0ff; font-weight: normal;
  padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(0,168,255,.4); white-space: nowrap; }
.dtbl td { padding: 7px 10px; border-bottom: 1px dashed rgba(0,168,255,.14); color: #c6e2ff; white-space: nowrap; }
.dtbl tbody tr:hover td { background: rgba(0,150,255,.12); color: #ffffff; }
.dtbl th.num, .dtbl td.num { text-align: right; }
.dtbl td.num { font-family: Consolas, Menlo, monospace; color: #35e2ff; }
.dtbl td.idx { width: 36px; color: #6f9cc7; }
/* 技术/设备/供应商/批发市场 */
.bd-tech { display: flex; flex-direction: column; overflow: hidden; }
.chips { flex: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 12px; border-bottom: 1px solid rgba(0,168,255,.15); }
.chips.chips-row { flex-wrap: nowrap; overflow-x: auto; padding: 8px 10px; }
.chips.chips-row .chip { flex: none; }
.chip { font-size: 12px; padding: 3px 12px; border-radius: 20px; cursor: pointer; color: #8fc3ef;
  background: rgba(0,80,160,.3); border: 1px solid rgba(0,168,255,.35); user-select: none; }
.chip em { font-style: normal; opacity: .7; margin-left: 4px; font-size: 10px; }
.chip:hover { color: #d8ecff; border-color: rgba(0,190,255,.7); }
.chip.on { color: #04101f; background: #35e2ff; border-color: #35e2ff; font-weight: bold; }
.chip.on em { opacity: .8; }
.tech-list { flex: 1; overflow-y: auto; padding: 8px 12px; box-sizing: border-box; }
.tech-item { padding: 9px 10px; border: 1px solid rgba(0,168,255,.2); border-radius: 8px; margin-bottom: 9px;
  background: linear-gradient(180deg, rgba(0,70,140,.22), rgba(0,40,90,.1)); }
.tech-item:hover { border-color: rgba(0,190,255,.55); }
.tech-item .l1 { display: flex; align-items: center; gap: 8px; }
.tech-item .badge { flex: none; font-size: 11px; color: #04101f; background: #46c8b2; border-radius: 3px; padding: 1px 7px; font-weight: bold; }
.tech-item .badge-v { background: #ffd166; }
.tech-item .badge-l1 { background: #ffd166; }
.tech-item .badge-l2 { background: #63b3ff; color: #04101f; }
.tech-item .nm { flex: 1; font-size: 14px; font-weight: bold; color: #e8f6ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tech-item .mat { flex: none; font-size: 12px; }
.tech-item .l2 { display: flex; gap: 14px; font-size: 12px; color: #7db8e8; margin-top: 4px; flex-wrap: wrap; }
.tech-item .l2 .org { color: #9fe0ff; }
.tech-item .l3 { display: flex; gap: 14px; font-size: 12px; margin-top: 4px; flex-wrap: wrap; }
.tech-item .l3 .eff { color: #46c8b2; }
.tech-item .l3 .pr { color: #ffd166; }
.tech-item .l4 { font-size: 12px; color: #93b8dd; line-height: 1.6; margin-top: 5px; }
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb { background: rgba(0,140,255,.4); border-radius: 3px; }