/* ═══════════════════════════════════════════════════════════════
   天讯 API · 排行榜页视觉层 (tx-rank.css)
   作用：排行榜页(/rankings) —— 标题居中、卡片玻璃化、图表配色统一
   实现：CSS 为主（该页是普通 React 渲染，不涉及 Shadow DOM）
   2026-09-11 初版
   ═══════════════════════════════════════════════════════════════ */

/* ── 页面头部：标题居中 + 渐变字 ── */
body.tx-rank .tx-rank-head,
body.tx-rank main > div > div:first-child > h1,
body.tx-rank h1{
  text-align:center !important;
}
body.tx-rank h1{
  font-size:clamp(28px,3.6vw,38px) !important;
  font-weight:800 !important; letter-spacing:-.02em !important;
  background:linear-gradient(115deg,#1d4ed8,#0891b2 55%,#7c3aed);
  -webkit-background-clip:text; background-clip:text; color:transparent !important;
  display:block !important; margin:0 auto 10px !important;
}
/* 标题下那句说明也居中 */
body.tx-rank h1 + p, body.tx-rank h1 ~ p{
  text-align:center !important; margin-left:auto !important; margin-right:auto !important;
  max-width:640px !important;
}

/* ── 时间筛选（今天/本周/本月/今年）：居中 + 胶囊化 ── */
body.tx-rank [role="tablist"]{
  justify-content:center !important; margin:18px auto 26px !important;
}

/* ── 卡片：玻璃化（覆盖该页的白卡） ── */
body.tx-rank .rounded-lg.border:not(button):not(a),
body.tx-rank .rounded-xl.border:not(button):not(a),
body.tx-rank [class*="rounded-"][class*="border"]:not(button):not(a):not(input){
  background:linear-gradient(150deg,rgba(255,255,255,.74),rgba(255,255,255,.52)) !important;
  border-color:rgba(255,255,255,.85) !important;
  backdrop-filter:blur(20px) saturate(185%) !important;
  -webkit-backdrop-filter:blur(20px) saturate(185%) !important;
  border-radius:20px !important;
  box-shadow:0 16px 44px rgba(23,37,84,.09), 0 3px 10px rgba(23,37,84,.04),
             inset 0 1px 0 rgba(255,255,255,.9) !important;
}

/* ── 排行榜列表项：悬停轻浮起 ── */
body.tx-rank [class*="rounded-"][class*="border"] li,
body.tx-rank li[class*="rounded-"]{
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, background .22s;
}
body.tx-rank [class*="rounded-"][class*="border"] li:hover,
body.tx-rank li[class*="rounded-"]:hover{
  transform:translateY(-2px);
  background:rgba(37,99,235,.045) !important;
  box-shadow:0 8px 22px rgba(23,37,84,.08);
}

/* ── 图表容器：去灰底、给圆角 ── */
body.tx-rank canvas{ border-radius:14px; }

/* ── 排名数字：品牌色突出一二三名 ── */
body.tx-rank li:first-child [class*="font-mono"],
body.tx-rank li:nth-child(1) span:first-child{ color:#b45309 !important; font-weight:800 !important; }
body.tx-rank li:nth-child(2) span:first-child{ color:#64748b !important; font-weight:800 !important; }
body.tx-rank li:nth-child(3) span:first-child{ color:#a16207 !important; font-weight:800 !important; }

/* ── 暗色适配 ── */
html.dark body.tx-rank [class*="rounded-"][class*="border"]:not(button):not(a){
  background:linear-gradient(150deg,rgba(255,255,255,.09),rgba(255,255,255,.045)) !important;
  border-color:rgba(255,255,255,.14) !important;
}
html.dark body.tx-rank h1{ -webkit-text-fill-color:#e8eefc; color:#e8eefc !important; }

@media (max-width:640px){
  body.tx-rank h1{ font-size:26px !important; }
}