/* 全国养老机构态势与动态 - 主样式 */
html, body {
  margin: 0;
  padding: 0;
  background: #0b1c2c;
  color: #d7e3ee;
  font-family: "Microsoft YaHei", "PingFang SC", "Helvetica Neue", sans-serif;
  scroll-behavior: smooth;
}
#app { width: 100%; }
/* 顶部导航：品牌区（徽标 + 主标题渐变发光 + 中英副标题 + 流光分隔线） */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: linear-gradient(180deg, #0e2a40, #0b1c2c);
  border-bottom: 1px solid rgba(80,160,220,.25);
  padding: 0 28px;
  display: flex;
  align-items: center;
  height: 66px;
  box-shadow: 0 2px 16px rgba(3,14,26,.55);
}
.topbar::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent 5%, rgba(89,194,255,.5) 50%, transparent 95%);
  pointer-events: none;
}
.brand-row { display: flex; align-items: center; gap: 12px; min-width: 0; }
/* 品牌徽标：屋顶+爱心（关爱之家）SVG 图标，渐变描边、扫光高光与呼吸光圈 */
.brand-badge {
  position: relative;
  width: 40px; height: 40px; border-radius: 12px; flex: none;
  background:
    radial-gradient(120% 120% at 18% 12%, rgba(143,212,255,.35), transparent 56%),
    linear-gradient(155deg, rgba(89,194,255,.30), rgba(21,78,138,.14) 52%, rgba(42,124,212,.30));
  border: 1px solid rgba(120,205,255,.6);
  box-shadow:
    0 0 16px rgba(89,194,255,.30),
    0 6px 14px rgba(3,14,26,.5),
    0 0 12px rgba(89,194,255,.16) inset;
  color: #bfe9ff;
  display: flex; align-items: center; justify-content: center;
  animation: badgeGlow 4.5s ease-in-out infinite;
}
.brand-badge svg { display: block; filter: drop-shadow(0 0 6px rgba(89,194,255,.5)); }
/* 高光扫过（background-position 动画，不越界裁剪） */
.brand-badge::before {
  content: "";
  position: absolute; inset: 0; border-radius: inherit;
  background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,.30) 48%, transparent 66%) no-repeat;
  background-size: 230% 100%;
  background-position: 210% 0;
  animation: badgeSheen 6s ease-in-out infinite;
  pointer-events: none;
}
/* 呼吸光圈 */
.brand-badge::after {
  content: "";
  position: absolute; inset: -3px; border-radius: inherit;
  border: 1px solid rgba(89,194,255,.4);
  opacity: 0;
  animation: badgeRing 4.5s ease-out infinite;
  pointer-events: none;
}
@keyframes badgeGlow {
  0%, 100% { box-shadow: 0 0 14px rgba(89,194,255,.26), 0 6px 14px rgba(3,14,26,.5), 0 0 10px rgba(89,194,255,.14) inset; }
  50% { box-shadow: 0 0 26px rgba(89,194,255,.5), 0 6px 14px rgba(3,14,26,.5), 0 0 16px rgba(89,194,255,.24) inset; }
}
@keyframes badgeSheen {
  0%, 58%, 100% { background-position: 210% 0; }
  22% { background-position: -80% 0; }
}
@keyframes badgeRing {
  0% { opacity: .7; transform: scale(.92); }
  70%, 100% { opacity: 0; transform: scale(1.28); }
}
.brand-title { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.brand {
  font-size: 21px;
  font-weight: bold;
  letter-spacing: 3px;
  line-height: 1.15;
  white-space: nowrap;
  background: linear-gradient(90deg, #d9f1ff, #9fdcff 40%, #59c2ff 90%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: #7ecbff;
  filter: drop-shadow(0 0 12px rgba(89,194,255,.30));
}
.brand-sub {
  font-size: 11px;
  color: #5f7f96;
  letter-spacing: 2px;
  white-space: nowrap;
}
.brand-sub .en { color: #40607a; font-family: Arial, sans-serif; letter-spacing: 1.5px; }
.brand-sub .sep {
  font-style: normal;
  margin: 0 8px;
  color: #2f4d64;
  background: linear-gradient(90deg, rgba(89,194,255,.45), rgba(89,194,255,.08));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.topbar .meta {
  margin-left: auto;
  font-size: 12px;
  color: #6f95b1;
  white-space: nowrap;
  padding: 6px 16px;
  border: 1px solid rgba(80,160,220,.25);
  border-radius: 16px;
  background: rgba(89,194,255,.06);
  letter-spacing: 1px;
}
/* 章节通用 */
.section {
  padding: 36px 48px 12px;
}
.section > h2 {
  font-size: 20px;
  color: #7ecbff;
  margin: 0 0 6px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.section > h2::before {
  content: "";
  width: 6px;
  height: 20px;
  background: linear-gradient(180deg, #59c2ff, #2a7cd4);
  border-radius: 3px;
  display: inline-block;
}
.section > .desc {
  color: #5f7f96;
  font-size: 12px;
  margin: 0 0 18px 16px;
}
/* 指标卡片：整行单排不折行 */
.kpi-row {
  display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr));
  gap: 12px;
}
.kpi {
  background: linear-gradient(160deg, rgba(36,74,105,.55), rgba(17,38,58,.85));
  border: 1px solid rgba(80,160,220,.22);
  border-radius: 10px;
  padding: 16px 14px;
  position: relative;
  overflow: hidden;
  min-width: 0;
}
.kpi::after {
  content: "";
  position: absolute;
  right: -18px;
  top: -18px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(89,194,255,.18), transparent 70%);
}
.kpi .kpi-label { font-size: 12px; color: #7fa2bd; white-space: nowrap; }
.kpi .kpi-value {
  font-size: 22px;
  font-weight: 700;
  color: #9fdcff;
  font-family: "DIN Alternate", "Arial", sans-serif;
  margin-top: 6px;
  white-space: nowrap;
}
.kpi .kpi-value .unit { font-size: 12px; color: #6f95b1; font-weight: normal; margin-left: 4px; }
.kpi .kpi-sub {
  font-size: 11px;
  color: #5f7f96;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* 地图 + 排行表 左右并排（区域分布） */
.map-table-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 14px;
  margin-bottom: 14px;
}
.map-box {
  background: rgba(15,36,56,.6);
  border: 1px solid rgba(80,160,220,.18);
  border-radius: 10px;
  padding: 12px 14px 10px;
}
.map-box .map-title {
  font-size: 13px;
  color: #8fb8d6;
  padding: 2px 2px 8px;
}
.map-box .map {
  width: 100%;
  height: 460px;
}
.map-box .map-tip {
  font-size: 11px;
  color: #5f7f96;
  padding: 8px 2px 2px;
  line-height: 1.9;
}
.map-tip i { vertical-align: middle; }
/* 排行表滚动容器：与地图等高，行数多时表内滚动 */
.tbl-scroll {
  height: 460px;
  overflow-y: auto;
}
/* 通用表格（区域排行/TOP100/动态） */
.region-table-box {
  margin-top: 14px;
  background: linear-gradient(165deg, rgba(24,52,78,.72), rgba(13,29,45,.85));
  border: 1px solid rgba(80,160,220,.25);
  border-radius: 10px;
  padding: 14px 16px;
  box-shadow: 0 4px 18px rgba(3,14,26,.35);
}
.region-table-box h3 {
  margin: 0 0 12px;
  font-size: 14px;
  color: #8fb8d6;
}
.region-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
}
/* 表头：不透明渐变底（行滚动时不透底）+ 发光下沿 */
.region-table th {
  background: linear-gradient(180deg, #1e4060, #17324a);
  color: #9fdcff;
  padding: 9px 10px;
  text-align: left;
  font-weight: normal;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  position: sticky;
  top: 0;
  z-index: 2;
  text-shadow: 0 1px 4px rgba(3,14,26,.6);
}
.region-table th:hover { color: #c6e9ff; }
.region-table th .sort-arrow { font-size: 10px; margin-left: 3px; color: #59c2ff; }
.region-table th.sorted { color: #c6e9ff; }
.region-table td {
  padding: 8px 10px;
  color: #b9cfdf;
}
.region-table tbody tr:hover td { background: rgba(89,194,255,.09); }
.region-table td.num { font-family: "DIN Alternate", "Arial", sans-serif; color: #9fdcff; }
.region-table td.orgname { color: #c6dcea; font-weight: 500; }
.region-table td.newstitle { color: #d7e3ee; }
.region-table td.nowrap { white-space: nowrap; }
.region-table td.firstcol { color: #9fdcff; font-weight: 500; }
/* 表格边框美化（区域排行/TOP100/动态通用）：
   separate+单边描边避免 2px 叠线；表头亮色网格+发光下沿；斑马纹；四角圆角 */
.region-table th {
  border-top: 1px solid rgba(80,160,220,.32);
  border-left: 1px solid rgba(80,160,220,.32);
  border-bottom: 1px solid rgba(89,194,255,.5);
  box-shadow: 0 2px 6px rgba(3,14,26,.4);
}
.region-table th:last-child { border-right: 1px solid rgba(80,160,220,.32); }
.region-table th:first-child { border-top-left-radius: 8px; }
.region-table th:last-child { border-top-right-radius: 8px; }
.region-table td {
  border-top: 1px solid rgba(80,160,220,.14);
  border-left: 1px solid rgba(80,160,220,.14);
}
.region-table td:last-child { border-right: 1px solid rgba(80,160,220,.14); }
.region-table tbody tr:last-child td {
  border-bottom: 1px solid rgba(80,160,220,.3);
}
.region-table tbody tr:last-child td:first-child { border-bottom-left-radius: 8px; }
.region-table tbody tr:last-child td:last-child { border-bottom-right-radius: 8px; }
/* 斑马纹（偶数行微亮，悬停更亮） */
.region-table tbody tr:nth-child(even) td {
  background: rgba(89,194,255,.04);
}
/* 表格底部脚注说明 */
.tbl-note {
  margin-top: 10px;
  padding: 8px 10px;
  border-top: 1px dashed rgba(80,160,220,.25);
  font-size: 11px;
  line-height: 1.8;
  color: #5f7f96;
}
/* 省份梯队色点（与地图填色同色系） */
.tier-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 6px;
  vertical-align: middle;
}
/* 链接样式（官网/报道入口） */
a.weblink {
  color: #59c2ff;
  text-decoration: none;
}
a.weblink:hover { color: #9fdcff; text-decoration: underline; }
/* 动态末列“报道”入口：胶囊按钮 */
a.newslink {
  display: inline-block;
  padding: 2px 12px;
  border: 1px solid rgba(89,194,255,.45);
  border-radius: 12px;
  font-size: 11px;
  white-space: nowrap;
}
a.newslink:hover {
  background: rgba(89,194,255,.12);
  text-decoration: none;
}
/* 动态筛选按钮 */
.news-filters {
  display: flex;
  gap: 8px;
  margin: 0 0 14px 16px;
  flex-wrap: wrap;
}
.news-filters .filter {
  font-size: 12px;
  padding: 5px 16px;
  border-radius: 15px;
  border: 1px solid rgba(80,160,220,.3);
  color: #9db8cc;
  cursor: pointer;
  transition: all .2s;
  background: transparent;
}
.news-filters .filter:hover { color: #7ecbff; }
.news-filters .filter.active {
  background: rgba(60,130,190,.3);
  color: #9fdcff;
  border-color: #59c2ff;
}
.tag {
  font-size: 11px;
  padding: 2px 10px;
  border-radius: 10px;
  white-space: nowrap;
}
.tag.policy { background: rgba(89,194,255,.15); color: #59c2ff; }
.tag.build { background: rgba(90,214,160,.15); color: #5ad6a0; }
.tag.operate { background: rgba(255,200,87,.15); color: #ffc857; }
.tag.safe { background: rgba(255,110,118,.15); color: #ff6e76; }
.tag.service { background: rgba(146,112,219,.18); color: #b39ddb; }
.tag.punish { background: rgba(255,110,118,.22); color: #ff8f97; }
/* 页脚 */
.footer {
  margin-top: 30px;
  padding: 24px 48px 30px;
  border-top: 1px solid rgba(80,160,220,.15);
  color: #5f7f96;
  font-size: 12px;
  line-height: 1.9;
}
@media (max-width: 1100px) {
  .kpi-row { grid-template-columns: repeat(3, 1fr); }
  .section { padding: 28px 20px 8px; }
  .map-table-grid { grid-template-columns: 1fr; }
  .tbl-scroll { height: 380px; }
  .topbar { height: 56px; padding: 0 16px; }
  .brand-sub { display: none; }
  .brand { font-size: 18px; letter-spacing: 2px; }
  .brand-badge { width: 30px; height: 30px; border-radius: 9px; }
  .brand-badge svg { width: 17px; height: 17px; }
  .topbar .meta { display: none; }
}