/* 全国三甲医院分布态势和动态 - 全本地化样式
 * v4.4.5：地图栏参照“信创”对齐——①#b_map 分栏改为 1.6:1（flex 布局）；②栏高 520px（面板体），地图绘图区 508px，与信创 .city-chart 等高；③栏间距 16px；窄屏堆叠时降为 420/408px。
 * v4.4.4：地图图例移至地图容器内下方悬浮——.map-legend绝对定位底部居中，半透明胶囊底衬，不挤占地图高度。
 * v4.4.3：床位口径披露——KPI"≈"估算标记(.kpi .k-note)样式；面板副标题带"量级估算"字样。
 * v4.4.1：面板副标题(.panel .hd .sub)统一改为单行显示——flex占满剩余宽度、超出自动省略号"..."，不再换行撑高面板头；悬停title看全文。
 * v4.3.0：① 新增「科研TOP20 + 行业会议」双栏行 #b_res_conf；② 运行指标表新增"特色专业"列样式 .hs-spec。
 * v4.1.1：① 运行指标表格自然撑开；② 修复表头与数据列错位。
 * v3.10：标题栏/面板标题美化等。 */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { background: #04101f; }
body {
  font: 13px/1.5 'Microsoft YaHei', 'PingFang SC', sans-serif;
  color: #d7ecff;
  background: radial-gradient(1200px 600px at 50% -10%, #0a2a52 0%, #04101f 55%, #02080f 100%);
  overflow-x: hidden;
}
#bgCanvas { position: fixed; left: 0; top: 0; z-index: 0; opacity: .5; pointer-events: none; }
.main { position: relative; z-index: 1; padding: 0 16px 20px; }

/* ===== 吸顶标题栏 ===== */
.header {
  position: sticky; top: 0; z-index: 50;
  height: 62px; display: flex; align-items: center;
  padding: 0 18px; margin: 0 -16px 12px;
  background:
    radial-gradient(620px 46px at 30% 0%, rgba(53,226,255,.10), transparent 70%),
    linear-gradient(180deg, rgba(6,26,54,.97), rgba(6,26,54,.80));
  backdrop-filter: blur(6px);
}
.header::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(53,226,255,.75) 15%, rgba(53,226,255,.75) 85%, transparent);
  box-shadow: 0 0 14px rgba(53,226,255,.30);
}
.header .title {
  display: flex; align-items: center; gap: 13px; white-space: nowrap;
  font-size: 24px; font-weight: 700; letter-spacing: 4px;
  background: linear-gradient(90deg, #7fe7ff, #35e2ff 45%, #9fd0ff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.header .title::before {
  content: ''; width: 13px; height: 13px; flex: none; transform: rotate(45deg);
  border: 2px solid #35e2ff; background: rgba(53,226,255,.16);
  box-shadow: 0 0 10px rgba(53,226,255,.7);
}
.header .deco { flex: 1; height: 16px; position: relative; margin: 0 28px; min-width: 60px; }
.header .deco::before, .header .deco::after {
  content: ''; position: absolute; top: 50%; width: calc(50% - 16px); height: 1px;
  background: linear-gradient(90deg, rgba(53,226,255,.55), rgba(53,226,255,.04));
}
.header .deco::before { left: 0; }
.header .deco::after { right: 0; transform: scaleX(-1); }
.header .deco i {
  position: absolute; left: 50%; top: 50%; width: 7px; height: 7px;
  transform: translate(-50%, -50%) rotate(45deg);
  border: 1px solid rgba(53,226,255,.85); background: rgba(53,226,255,.12);
  box-shadow: 0 0 9px rgba(53,226,255,.45);
}
.header .right { margin-left: auto; }
.header .time {
  font-size: 14px; color: #9fe0ff; font-family: Consolas, monospace; letter-spacing: 1px;
  padding: 5px 14px; border: 1px solid rgba(53,226,255,.35); border-radius: 4px;
  background: rgba(53,226,255,.06); box-shadow: inset 0 0 10px rgba(53,226,255,.08);
}

/* ===== KPI 行 ===== */
.kpis { display: flex; gap: 12px; margin-bottom: 12px; }
.kpi {
  flex: 1; padding: 10px 6px 8px; text-align: center; border-radius: 6px;
  background: linear-gradient(180deg, rgba(13,49,95,.65), rgba(8,30,62,.55));
  border: 1px solid rgba(53,226,255,.28); box-shadow: 0 0 14px rgba(53,226,255,.08) inset;
}
.kpi .v {
  font-size: 26px; font-weight: 700; font-family: Consolas, monospace; color: #35e2ff;
  text-shadow: 0 0 14px rgba(53,226,255,.45);
}
/* v4.4.3：床位KPI"≈"量级估算标记 */
.kpi .k-note { font-size: 14px; font-weight: 400; color: #8fc3ef; text-shadow: none; margin-right: 4px; vertical-align: 6px; }
.kpi .l { margin-top: 2px; font-size: 12px; color: #8fc3ef; }

/* ===== 面板通用 ===== */
.panel {
  background: linear-gradient(180deg, rgba(10,38,74,.72), rgba(6,22,46,.72));
  border: 1px solid rgba(53,226,255,.22); border-radius: 6px;
  display: flex; flex-direction: column; min-height: 0; overflow: hidden;
}
.panel .hd {
  position: relative;
  padding: 9px 12px 9px 32px; font-size: 15px; font-weight: 700; letter-spacing: 1px; color: #c9ecff;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: linear-gradient(90deg, rgba(53,226,255,.13), rgba(53,226,255,.03) 55%, transparent);
}
.panel .hd::before {
  content: ''; position: absolute; left: 13px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, #7fe7ff, #1590e0);
  box-shadow: 0 0 8px rgba(53,226,255,.7);
}
.panel .hd::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(53,226,255,.65), rgba(53,226,255,.14) 55%, transparent);
}
/* v4.4.1：副标题单行省略——占满剩余宽度，超长显示"..."，全文看悬停提示 */
.panel .hd .sub {
  font-size: 11px; font-weight: 400; letter-spacing: 0; color: #6f9cc7;
  flex: 1 1 auto; min-width: 60px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.panel .hd .chips { margin-left: auto; display: flex; gap: 6px; }
.panel .hd .chip {
  font-size: 11px; color: #7ef0d2; padding: 1px 8px; border-radius: 10px;
  border: 1px solid rgba(126,240,210,.35); background: rgba(126,240,210,.07);
}
.panel .bd { flex: 1; padding: 6px; min-height: 0; position: relative; }
.band { margin-bottom: 12px; }
.band .panel .bd { height: 460px; }
.band-md .panel .bd { height: auto; padding: 0; }
.band-2 { display: flex; gap: 12px; }
.band-2 .panel { flex: 1; }
.band-2 .panel .bd { height: 300px; }

/* ===== 地图行（v4.4.5 参照信创）：1.6:1 分栏、栏高 520px、间距 16px，地图与城市TOP10 等高 ===== */
#b_map { display: flex; gap: 16px; }
#b_map .map-panel { flex: 1.6; min-width: 0; }
#b_map .city-panel { flex: 1; min-width: 0; }
#b_map .panel .bd { height: 520px; }
#b_map .chart.map { height: 508px; }
/* v4.4.4：地图图例悬浮于地图容器内底部居中 */
#b_map .map-panel .bd { position: relative; }
.map-legend {
  position: absolute; left: 0; right: 0; bottom: 6px; z-index: 5;
  display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  font-size: 11px; color: #bfe9ff;
  pointer-events: none;
}
.map-legend .ci {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 3px 10px; border-radius: 11px;
  background: rgba(4,16,31,.62); border: 1px solid rgba(53,226,255,.22);
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
}
.map-legend .ci i {
  width: 14px; height: 10px; border-radius: 2px; display: inline-block;
  box-shadow: 0 0 6px rgba(0,0,0,.35);
}

/* ===== 科研TOP20 + 行业会议 双栏行（表格自然撑开，窄屏纵向堆叠） ===== */
#b_res_conf { display: flex; gap: 12px; }
#b_res_conf .panel { flex: 1; min-width: 0; }
#b_res_conf .panel .bd { height: auto; padding: 0; }
#b_res_conf .tbl-wrap { height: auto; max-height: none; overflow: visible; margin: 8px 10px 10px; }

/* ===== 通用分级图例色卡 ===== */
.legend .ci, .city-legend .ci { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: #8fc3ef; white-space: nowrap; }
.legend .ci i, .city-legend .ci i {
  width: 14px; height: 10px; border-radius: 2px; display: inline-block;
  box-shadow: 0 0 6px rgba(0,0,0,.35);
}
.city-legend {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  height: 26px; margin: 2px 6px 0; font-size: 11px; color: #8fc3ef;
  border-top: 1px dashed rgba(53,226,255,.18); padding-top: 4px;
}

/* ===== 城市床位数TOP10 ===== */
#b_map .city-panel .bd { display: flex; flex-direction: column; }
.ct-wrap { flex: 1; min-height: 0; overflow: auto; margin: 2px 4px 0; }
.ct-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ct-tbl th {
  position: sticky; top: 0; background: #0a2447; color: #8fc3ef; font-weight: 600;
  padding: 7px 8px; border-bottom: 1px solid rgba(53,226,255,.3); text-align: left; white-space: nowrap; z-index: 2;
}
.ct-tbl td { padding: 8px 8px; border-bottom: 1px solid rgba(90,140,190,.14); color: #cfe8ff; }
.ct-tbl tbody tr:hover { background: rgba(53,226,255,.06); }
.ct-no {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; border: 1px solid; font-weight: 700; font-size: 12px; font-family: Consolas, monospace;
}
.ct-city { font-weight: 700; color: #e6f4ff; font-size: 13px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ct-prov { color: #8fc3ef; }
.ct-beds { text-align: right; font-family: Consolas, monospace; color: #35e2ff; font-size: 13px; }
.ct-count { text-align: right; font-family: Consolas, monospace; color: #bfe9ff; }
.ct-tier { font-size: 11px; padding: 1px 8px; border-radius: 9px; border: 1px solid; white-space: nowrap; }

/* ===== 趋势整行 ===== */
#b_trend .duo { display: flex; gap: 10px; }
.chart-half { flex: 1; height: 100%; position: relative; }
.chart { width: 100%; height: 100%; }

/* ===== 特色体系标题栏 ===== */
.spec-head {
  position: relative;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-bottom: 10px; padding: 9px 14px 9px 34px;
  border: 1px solid rgba(53,226,255,.22); border-radius: 6px;
  background: linear-gradient(90deg, rgba(53,226,255,.13), rgba(53,226,255,.03) 55%, transparent);
}
.spec-head::before {
  content: ''; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 15px; border-radius: 2px;
  background: linear-gradient(180deg, #7fe7ff, #1590e0);
  box-shadow: 0 0 8px rgba(53,226,255,.7);
}
.spec-head .t {
  font-size: 16px; font-weight: 700; color: #c9ecff; letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(53,226,255,.35);
}
.spec-head .s { font-size: 12px; color: #8fc3ef; }
.spec-head .lg { font-size: 11px; color: #8fc3ef; margin-left: auto; }
.spec-list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.spec-row {
  display: flex; align-items: stretch; gap: 0;
  border: 1px solid rgba(53,226,255,.22); border-radius: 6px; overflow: hidden;
  background: linear-gradient(180deg, rgba(10,38,74,.72), rgba(6,22,46,.72));
  transition: border-color .2s, box-shadow .2s;
}
.spec-row:hover { border-color: rgba(53,226,255,.55); box-shadow: 0 0 18px rgba(53,226,255,.12); }
.spec-row.sub { border-left: 3px solid #ffd166; }
.spec-row.sub .sp-nm { color: #ffe3a0; }
.spec-row.sub .sp-nm::before { content: '◇ '; color: #ffd166; }
.sp-head {
  flex: none; width: 240px; padding: 12px 14px;
  background: linear-gradient(135deg, rgba(53,226,255,.14), rgba(53,226,255,.03));
  border-right: 1px solid rgba(53,226,255,.18);
  display: flex; flex-direction: column; justify-content: center; gap: 5px;
}
.sp-nm { font-size: 17px; font-weight: 700; color: #7fe7ff; letter-spacing: 1px; }
.sp-nm::before { content: '◆ '; color: #35e2ff; }
.sp-meta { font-size: 11.5px; color: #8fc3ef; }
.sp-meta b { color: #7ef0d2; font-family: Consolas, monospace; font-size: 13px; }
.sp-meta .sp-mm { color: #ffd166; }
.sp-cnt { font-size: 11.5px; color: #bfe9ff; }
.sp-cnt b { color: #35e2ff; font-family: Consolas, monospace; font-size: 13px; }
.sp-split { color: #3f7fb8; margin: 0 4px; }
.sp-body { flex: 1; min-width: 0; display: flex; }
.sp-tbl-wrap { flex: 1; }
.sp-tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.sp-tbl th {
  background: #0a2447; color: #8fc3ef; font-weight: 600;
  padding: 6px 10px; border-bottom: 1px solid rgba(53,226,255,.3); text-align: left; white-space: nowrap;
}
.sp-tbl td { padding: 5px 10px; border-bottom: 1px solid rgba(90,140,190,.13); color: #cfe8ff; vertical-align: middle; }
.sp-tbl tbody tr:hover { background: rgba(53,226,255,.06); }
.sp-hname { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #e6f4ff; }
.starmark { color: #ffd166; margin-right: 3px; }
.sp-desc { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.sp-tier {
  flex: none; font-size: 11px; color: #7ef0d2; padding: 1px 8px; border-radius: 9px;
  border: 1px solid rgba(126,240,210,.35); background: rgba(126,240,210,.07); white-space: nowrap;
}
.sp-tier.star { color: #062142; font-weight: 700; border-color: #ffd166; background: linear-gradient(180deg, #ffe9b0, #ffd166); }
.sp-tags { color: #6f9cc7; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 340px; }
.sp-beds { flex: none; margin-left: auto; color: #35e2ff; font-family: Consolas, monospace; font-size: 11.5px; }

/* ===== 排行条 ===== */
.rank { padding: 4px 8px; overflow-y: auto; height: 100%; }
.rank-item { display: flex; align-items: center; gap: 8px; padding: 5px 0; }
.rank-item .no {
  width: 20px; height: 20px; border-radius: 3px; text-align: center; line-height: 20px;
  font-size: 12px; color: #062142; background: #35e2ff; font-weight: 700; flex: none;
}
.rank-item:nth-child(n+4) .no { color: #9fd0ff; background: rgba(53,226,255,.18); }
.rank-item .nm { width: 150px; color: #cfe8ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: none; }
.rank-item .bar { flex: 1; height: 10px; background: rgba(53,226,255,.1); border-radius: 5px; overflow: hidden; }
.rank-item .bar i {
  display: block; height: 100%; border-radius: 5px;
  background: linear-gradient(90deg, #0b62c4, #35e2ff); box-shadow: 0 0 8px rgba(53,226,255,.5);
  transition: width .6s;
}
.rank-item .bar i.warn { background: linear-gradient(90deg, #d97706, #ffb457); box-shadow: 0 0 8px rgba(255,180,87,.5); }
.rank-item .val { width: 64px; text-align: right; color: #35e2ff; font-family: Consolas, monospace; flex: none; }

/* ===== 第二区 ===== */
.screen2 { margin-top: 4px; }
.grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 12px; }
.grid4 .panel .bd { height: 240px; }

/* ===== 通用表格 ===== */
.tbl-wrap { height: 420px; overflow: auto; margin: 8px 10px 10px; }
.tbl { width: 100%; border-collapse: collapse; font-size: 12px; }
.tbl th {
  position: sticky; top: 0; background: #0a2447; color: #8fc3ef; font-weight: 600;
  padding: 7px 8px; border-bottom: 1px solid rgba(53,226,255,.3); text-align: left; white-space: nowrap; z-index: 2;
}
.tbl td { padding: 6px 8px; border-bottom: 1px solid rgba(90,140,190,.14); color: #cfe8ff; }
.tbl tbody tr:hover { background: rgba(53,226,255,.05); }
.tbl .num { text-align: right; font-family: Consolas, monospace; }
.t-tag { padding: 1px 8px; border-radius: 9px; font-size: 11px; color: #35e2ff; border: 1px solid rgba(53,226,255,.4); background: rgba(53,226,255,.08); }
.t-tag.zx { color: #c792ff; border-color: rgba(199,146,255,.4); background: rgba(199,146,255,.08); }
.t-tag.zy { color: #ffd166; border-color: rgba(255,209,102,.4); background: rgba(255,209,102,.08); }

/* ===== 三甲医院运行指标 TOP20（自然撑开 + 表头数据对齐） ===== */
.hs-wrap { height: auto; max-height: none; overflow: visible; margin: 8px 10px 10px; }
.hs-tbl th:first-child, .hs-tbl td:first-child { text-align: center; }
.hs-no {
  width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 4px; border: 1px solid transparent; font-weight: 700; font-size: 12px; font-family: Consolas, monospace;
}
.hs-nm { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; color: #e6f4ff; }
.hs-tbl .t-tag { white-space: nowrap; }
.hs-spec { color: #9fc9ee; font-size: 11.5px; }
.rs-platform { color: #9fc9ee; font-size: 11.5px; }

/* ===== 跑马灯 ===== */
.marquee {
  display: flex; align-items: center; height: 38px; margin-bottom: 10px;
  border: 1px solid rgba(53,226,255,.22); border-radius: 6px; background: rgba(8,30,62,.5); overflow: hidden;
}
.marquee .cap {
  flex: none; padding: 0 14px; line-height: 38px; color: #062142; font-weight: 700;
  background: linear-gradient(180deg, #35e2ff, #1590e0);
}
.marquee .vp { flex: 1; overflow: hidden; }
.track { display: inline-block; white-space: nowrap; padding-left: 100%; animation: mq 60s linear infinite; }
.track:hover { animation-play-state: paused; }
.track .it { margin-right: 60px; color: #bfe9ff; }
.track .it .d { color: #ffd166; margin-right: 6px; }
.track .it .s { color: #6f9cc7; margin-left: 8px; font-size: 12px; }
@keyframes mq { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }

.footer { text-align: center; color: #4d7ba6; font-size: 12px; padding: 8px 0 4px; }

/* ===== 自适应 ===== */
@media (max-width: 1400px) { .sp-head { width: 200px; } .sp-tags { max-width: 240px; } .hs-nm { max-width: 220px; } }
@media (max-width: 1200px) {
  .kpis { flex-wrap: wrap; }
  .kpi { flex: 1 1 30%; }
  .grid4 { grid-template-columns: repeat(2, 1fr); }
  .spec-row { flex-direction: column; }
  .sp-head { width: auto; flex-direction: row; align-items: baseline; flex-wrap: wrap; }
  #b_map { flex-direction: column; }
  #b_map .panel .bd { height: 420px; }
  #b_map .chart.map { height: 408px; }
  #b_res_conf { flex-direction: column; }
  #b_trend .duo { flex-direction: column; }
  .chart-half { height: 220px; }
  .header .deco { display: none; }
  .header .title { font-size: 19px; letter-spacing: 2px; }
}