/* ====== 全球AI热力图（ECharts geo） ====== */
/* 容器为 div（v3 起弃用 canvas），echarts.init 自动按 DPR 高清渲染，缩放/拖拽不糊不顿 */
#worldCanvas { width: 100%; height: 463px; border-radius: 8px; }

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: #0a0f1e;
  color: #cfd8ea;
  font-family: "Microsoft YaHei", "PingFang SC", Arial, sans-serif;
  min-height: 100vh;
}
a { color: #4da3ff; text-decoration: none; }
.header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 28px;
  background: linear-gradient(90deg, rgba(20,40,90,.85), rgba(10,16,34,.6));
  border-bottom: 1px solid rgba(77,163,255,.25);
}
.header h1 { font-size: 22px; color: #fff; letter-spacing: 2px; }
.header .meta { font-size: 12px; color: #8aa2c8; }
.header .meta a { color: #4da3ff; margin-left: 8px; }

/* ====== 头部标题美化 ====== */
.header {
  position: relative; overflow: hidden;
  padding: 14px 28px;
  background:
    radial-gradient(1100px 300px at 10% -60%, rgba(77,163,255,.22), transparent 62%),
    radial-gradient(900px 280px at 88% -40%, rgba(128,96,255,.16), transparent 62%),
    linear-gradient(90deg, rgba(20,40,90,.85), rgba(10,16,34,.6));
}
.header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(77,163,255,.9), rgba(143,208,255,.4), transparent);
}
.brand { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.t-main {
  font-size: 26px; font-weight: 800; letter-spacing: 3px;
  background: linear-gradient(92deg, #ffffff 25%, #9cc6ff 75%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 14px rgba(77,163,255,.30));
}
.t-main em {
  font-style: normal;
  background: linear-gradient(92deg, #4da3ff, #8f7bff);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.t-sep { color: rgba(143,170,210,.5); font-size: 18px; }
.t-tags { display: inline-flex; gap: 8px; }
.t-tags b {
  font-size: 12px; font-weight: 600; letter-spacing: 2px; padding: 4px 11px;
  color: #9cc6ff; border: 1px solid rgba(77,163,255,.35); border-radius: 999px;
  background: rgba(77,163,255,.10);
}
.t-tags b:nth-child(2) { color: #ffd28a; border-color: rgba(255,190,90,.35); background: rgba(255,190,90,.08); }
.t-tags b:nth-child(3) { color: #8affc1; border-color: rgba(90,220,160,.35); background: rgba(90,220,160,.08); }
.t-en { font-size: 10px; letter-spacing: 4px; color: #5f7ba6; align-self: flex-end; padding-bottom: 7px; }

/* 雷达扫描徽标 */
.radar {
  position: relative; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid rgba(77,163,255,.55);
  background:
    repeating-radial-gradient(circle at center, rgba(77,163,255,.15) 0 1px, transparent 1px 8px),
    radial-gradient(circle, rgba(77,163,255,.20), rgba(8,18,35,.65));
  box-shadow: 0 0 16px rgba(77,163,255,.35), inset 0 0 10px rgba(77,163,255,.25);
}
.radar::before {
  content: ""; position: absolute; left: 50%; top: 50%; width: 1px; height: 50%;
  transform-origin: top center;
  background: linear-gradient(to bottom, rgba(143,208,255,.95), rgba(143,208,255,0));
  animation: radar-sweep 3.6s linear infinite;
}
.radar::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; margin: -2.5px 0 0 -2.5px;
  border-radius: 50%; background: #8fd0ff; box-shadow: 0 0 8px #8fd0ff;
}
.radar i {
  position: absolute; right: 6px; top: 8px; width: 3px; height: 3px; border-radius: 50%;
  background: #ffd28a; box-shadow: 0 0 6px #ffd28a;
}
@keyframes radar-sweep { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .radar::before { animation: none; } }
@media (max-width: 900px) {
  .header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .t-main { font-size: 22px; }
  .t-en { display: none; }
}

.kpis { display: flex; gap: 16px; padding: 18px 28px; flex-wrap: wrap; }
.kpi {
  flex: 1; min-width: 200px;
  background: rgba(20,35,70,.55);
  border: 1px solid rgba(77,163,255,.18);
  border-radius: 10px; padding: 14px 18px;
}
.kpi .num { font-size: 26px; font-weight: bold; color: #4da3ff; }
.kpi .sub { font-size: 12px; color: #8aa2c8; margin-top: 4px; }

/* ====== 10列栅格：地图60%（span6）+ 城市榜40%（span4），通栏span10，半宽span5 ====== */
.grid { display: grid; grid-template-columns: repeat(10, 1fr); gap: 16px; padding: 0 28px 20px; }
.card {
  background: rgba(20,35,70,.45);
  border: 1px solid rgba(77,163,255,.18);
  border-radius: 10px; padding: 14px 16px;
}
.card h3 { font-size: 15px; color: #dfe9ff; margin-bottom: 10px; border-left: 3px solid #4da3ff; padding-left: 8px; }
.card.wide { grid-column: 1 / -1; }
.card.mapcol { grid-column: span 6; }
.card.citycol { grid-column: span 4; }
.card.half { grid-column: span 5; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { padding: 6px 8px; text-align: left; border-bottom: 1px solid rgba(77,163,255,.12); }
th { color: #8aa2c8; font-weight: normal; }
td .bar-bg { background: rgba(77,163,255,.12); border-radius: 4px; height: 14px; width: 100%; }
td .bar { background: linear-gradient(90deg,#2b6bd8,#4da3ff); height: 14px; border-radius: 4px; }
.news li {
  list-style: none; padding: 8px 6px; border-bottom: 1px dashed rgba(77,163,255,.15);
  font-size: 13px; line-height: 1.6;
}
.news .t { color: #e8f0ff; font-weight: bold; }
.news .s { color: #8aa2c8; font-size: 12px; margin-left: 8px; }
.news .d { color: #5f7ba6; font-size: 12px; }
.tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px;
  background: rgba(77,163,255,.15); color: #4da3ff; margin-right: 6px; }
.footer { text-align: center; color: #5f7ba6; font-size: 12px; padding: 14px; border-top: 1px solid rgba(77,163,255,.15); }
@media (max-width: 900px){
  .grid { grid-template-columns: 1fr; }
  .grid > .card { grid-column: auto; }
}

.dim { color: #8aa2c8; }

/* ====== 城市明细榜：固定高度550px，表格区域内滚动（标题与口径说明常驻） ====== */
#city { display: flex; flex-direction: column; height: 550px; overflow: hidden; }
#city .tbl-wrap { flex: 1 1 auto; min-height: 0; }
/* ====== 城市明细榜：精简4列（# 城市 国家/地区 综合热度条+值同格） ====== */
#city table th, #city table td { white-space: nowrap; }
#city .hot-cell { display: flex; align-items: center; gap: 8px; min-width: 140px; }
#city .hot-cell .bar-bg { flex: 1 1 auto; height: 12px; }
#city .hot-cell .bar { height: 12px; }
#city .hot-cell b { color: #ffd28a; font-variant-numeric: tabular-nums; flex: 0 0 auto; }

/* ====== 行业热点赛道 · 单行表格样式 ====== */
#industry table td, #industry table th { white-space: nowrap; }
#industry td.rank { color: #5f7ba6; width: 34px; }
#industry td.bar-cell { width: 38%; min-width: 110px; }
#industry td.bar-cell .bar-bg.bar-sm { height: 10px; border-radius: 5px; }
#industry td.bar-cell .bar-sm .bar { height: 10px; border-radius: 5px; background: linear-gradient(90deg,#1f8a5a,#3ddc97); }
#industry td.num-cell { text-align: right; color: #ffd28a; font-weight: bold; font-variant-numeric: tabular-nums; }
#industry td a { font-size: 12px; }
@media (max-width: 900px){
  #industry td.bar-cell { min-width: 70px; }
}

/* ====== AI顶会截稿 · 单行表格样式 ====== */
#conf table td, #conf table th { white-space: nowrap; }
#conf td.rank { color: #5f7ba6; width: 30px; }
#conf td.conf-name { color: #e8f0ff; font-weight: bold; }
#conf td.dl-date { color: #dfe9fb; font-variant-numeric: tabular-nums; }
#conf .dl-hot { color: #ff6b6b; font-weight: bold; text-shadow: 0 0 8px rgba(255,107,107,.35); }
#conf .dl-warn { color: #ffd28a; font-weight: bold; }
#conf .dl-over { color: #5f7ba6; }
#conf td.num-cell { text-align: right; color: #8aa2c8; font-variant-numeric: tabular-nums; }

/* ====== 技术热度上升最快 · 24小时增量榜 美化 ====== */
#risers table td, #risers table th { white-space: nowrap; }
#risers tbody tr { transition: background .15s; }
#risers tbody tr:nth-child(odd) { background: rgba(77,163,255,.04); }
#risers tbody tr:hover { background: rgba(77,163,255,.10); }
#risers td.rank { width: 44px; }
#risers td.prj a { color: #dfe9fb; }
#risers td.prj a:hover { color: #8fd0ff; }
#risers td.star-cell { font-variant-numeric: tabular-nums; }

/* Top3 金/银/铜奖牌徽章，其余为蓝色幽灵徽章 */
.rk-medal {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  font-weight: bold; font-size: 13px; font-variant-numeric: tabular-nums;
}
.rk-1 { color: #221703; background: linear-gradient(160deg, #ffe9a8, #f5b942); box-shadow: 0 0 12px rgba(245,185,66,.45); }
.rk-2 { color: #0e1526; background: linear-gradient(160deg, #dfe7f3, #9fb2cc); box-shadow: 0 0 9px rgba(160,180,210,.35); }
.rk-3 { color: #2b1608; background: linear-gradient(160deg, #f3c09b, #cd8050); box-shadow: 0 0 9px rgba(210,130,80,.40); }
.rk-n { color: #7fb0ff; background: rgba(77,163,255,.08); border: 1px solid rgba(77,163,255,.22); }

/* 日增量胶囊：琥珀底渐变；Top2 橙红高亮+光晕 */
.vel-pill {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 10px; border-radius: 999px;
  font-weight: bold; font-size: 12px; font-variant-numeric: tabular-nums;
  color: #ffe2a8;
  background: linear-gradient(90deg, rgba(232,179,75,.16), rgba(255,122,69,.20));
  border: 1px solid rgba(255,170,80,.38);
}
.vel-pill.hot {
  color: #fff3de;
  background: linear-gradient(90deg, rgba(255,150,60,.28), rgba(255,84,64,.30));
  border-color: rgba(255,140,70,.60);
  box-shadow: 0 0 12px rgba(255,130,70,.28);
}

/* 增量热度条：琥珀→橙红渐变+光晕，与蓝色系榜单形成主题区分 */
#risers td.vel-cell { width: 26%; min-width: 130px; }
#risers .bar-bg { height: 12px; border-radius: 6px; }
#risers .bar.vel-bar {
  height: 12px; border-radius: 6px;
  background: linear-gradient(90deg, #f5b942, #ff7a45 70%, #ff5f57);
  box-shadow: 0 0 10px rgba(255,140,80,.30);
}

/* 日涨幅分档chip：≥10% 橙红·爆发 / ≥3% 琥珀·强势 / 其余 绿色·温和 */
.pct-chip {
  display: inline-block; padding: 1px 9px; border-radius: 999px;
  font-size: 12px; font-weight: bold; font-variant-numeric: tabular-nums;
}
.pct-exp { color: #ff9d7a; background: rgba(255,107,80,.13); border: 1px solid rgba(255,107,80,.40); }
.pct-str { color: #ffd28a; background: rgba(232,179,75,.10); border: 1px solid rgba(232,179,75,.38); }
.pct-up  { color: #7ee2a8; background: rgba(76,175,125,.10); border: 1px solid rgba(76,175,125,.35); }
@media (max-width: 900px) {
  #risers td.vel-cell { min-width: 90px; }
}