/* ============================================================
   新页面（排行榜 / 聚合页 / 百科 / 日报）专用组件
   - 在 style.css 之后加载，全部使用 .pg- 前缀，避免与现有类冲突
   - ⚠️ 移动端 @media 必须放在本文件末尾（文件中部会被主样式覆盖）
   ============================================================ */

/* ---------- 面包屑 ---------- */
.pg-crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12px; color: var(--text-dim); margin-bottom: 10px; }
.pg-crumb a { color: var(--text-mut); }
.pg-crumb a:hover { color: var(--accent); text-decoration: none; }
.pg-crumb i { font-style: normal; opacity: .45; }

/* ---------- 页头 ---------- */
.pg-hero { padding: 4px 0 18px; }
.pg-hero h1 { font-size: 26px; margin: 0 0 10px; letter-spacing: -.01em; }
.pg-hero .lead { color: var(--text-mut); font-size: 13.5px; line-height: 1.85; margin: 0; max-width: 920px; }
.pg-hero .lead b { color: #ffcf8a; font-weight: 600; }

/* ---------- 页面切换胶囊 ---------- */
.pg-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.pg-nav a {
  font-size: 12.5px; color: var(--text-mut); padding: 6px 12px; border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03);
  transition: all .15s;
}
.pg-nav a:hover { color: var(--text); border-color: rgba(247, 147, 26, .4); text-decoration: none; }
.pg-nav a.on { color: #ffcf8a; border-color: rgba(247, 147, 26, .45); background: rgba(247, 147, 26, .1); }

/* ---------- 涨跌 / 单位 / 等级（沿用 style.css 变量：涨=绿 跌=红） ---------- */
.pg-up { color: var(--up); }
.pg-down { color: var(--down); }
.pg-flat { color: var(--text-mut); }
.pg-unit { color: var(--text-dim); font-size: 11px; font-weight: 400; }
.pg-lv { display: inline-block; font-size: 11px; padding: 2px 7px; border-radius: 5px; white-space: nowrap; }
.pg-lv0 { color: var(--text-dim); background: rgba(255, 255, 255, .05); }
.pg-lv4 { color: #ffcf8a; background: rgba(247, 147, 26, .14); }
.pg-lv3 { color: #8ec5ff; background: rgba(78, 161, 255, .13); }
.pg-lv2 { color: #9fb3c8; background: rgba(255, 255, 255, .07); }
.pg-lv1 { color: #ff8a8c; background: rgba(255, 77, 79, .12); }

/* ---------- 互链区 ---------- */
.pg-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.pg-links a {
  display: block; padding: 9px 12px; border-radius: 8px; font-size: 12.5px; color: var(--text-mut);
  border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .02); transition: all .15s;
}
.pg-links a:hover { color: var(--accent); border-color: rgba(247, 147, 26, .35); text-decoration: none; }
.pg-links a.on { color: #ffcf8a; border-color: rgba(247, 147, 26, .4); background: rgba(247, 147, 26, .08); }

/* ---------- 说明 / 免责 ---------- */
.pg-note { font-size: 12px; color: var(--text-mut); line-height: 1.85; margin: 0; }
.pg-note b { color: #ffcf8a; font-weight: 600; }
.pg-note + .pg-note { margin-top: 8px; }

/* ---------- 百科 / 日报正文排版 ---------- */
.pg-prose { font-size: 13.5px; line-height: 1.95; color: #c7d2de; max-width: 920px; }
.pg-prose h2 { font-size: 16px; color: var(--text); margin: 26px 0 10px; padding-left: 10px; border-left: 3px solid var(--accent); }
.pg-prose h2:first-child { margin-top: 0; }
.pg-prose h3 { font-size: 13.5px; color: #ffcf8a; margin: 20px 0 8px; }
.pg-prose p { margin: 0 0 12px; }
.pg-prose ul, .pg-prose ol { margin: 0 0 14px; padding-left: 20px; }
.pg-prose li { margin-bottom: 6px; }
.pg-prose strong { color: var(--text); font-weight: 600; }
.pg-prose table { width: 100%; border-collapse: collapse; margin: 0 0 16px; font-size: 12.5px; }
.pg-prose th, .pg-prose td { padding: 8px 10px; border-bottom: 1px solid rgba(255, 255, 255, .08); text-align: left; }
.pg-prose th { color: var(--text-mut); font-weight: 600; }
.pg-prose code { background: rgba(255, 255, 255, .06); padding: 1px 5px; border-radius: 4px; font-size: 12px; }

/* ---------- 分布条 ---------- */
.pg-dist { margin: 0 0 14px; }
.pg-dist-row { display: grid; grid-template-columns: 100px 1fr 56px; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 12px; color: var(--text-mut); }
.pg-dist-bar { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .06); overflow: hidden; }
.pg-dist-bar i { display: block; height: 100%; border-radius: 4px; }
.pg-dist-val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text); }

/* ---------- 卡片网格 ---------- */
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
a.pg-card {
  display: block; padding: 14px 16px; border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, .07); background: rgba(255, 255, 255, .02); transition: all .15s;
}
a.pg-card:hover { border-color: rgba(247, 147, 26, .35); text-decoration: none; transform: translateY(-1px); }
.pg-card b { display: block; font-size: 13.5px; color: var(--text); margin-bottom: 6px; font-weight: 600; }
.pg-card span { font-size: 12px; color: var(--text-mut); line-height: 1.7; }

/* ---------- 表格：新页面列数少于首页，收窄最小宽度 ---------- */
.pg-table .rank-scroll { border-radius: 10px; }
.pg-table table.rank { min-width: 700px; }
.pg-table table.rank tbody td a.tk-a { color: inherit; display: block; }
.pg-table table.rank tbody td a.tk-a:hover { color: var(--accent); text-decoration: none; }
.pg-table table.rank tbody td a.tk-a .tk { font-weight: 700; letter-spacing: .01em; }
.pg-table table.rank tbody td a.tk-a .nm { display: block; }

/* ---------- 列表顶部工具条（榜单切换） ---------- */
.pg-tools { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.pg-tools .pg-count { font-size: 12px; color: var(--text-dim); }

/* ---------- 分页器 ---------- */
.pg-pager { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 16px; }
.pg-pager a {
  min-width: 34px; text-align: center; padding: 6px 10px; border-radius: 7px; font-size: 12.5px;
  color: var(--text-mut); border: 1px solid rgba(255, 255, 255, .08); background: rgba(255, 255, 255, .03);
}
.pg-pager a:hover { color: var(--text); border-color: rgba(247, 147, 26, .4); text-decoration: none; }
.pg-pager a.on { color: #ffcf8a; border-color: rgba(247, 147, 26, .45); background: rgba(247, 147, 26, .1); }

/* ---------- 百科正文的补充元素 ---------- */
.pg-meta { font-size: 12px; color: var(--text-dim); margin-bottom: 14px; }
.pg-meta a { color: var(--text-mut); }
.pg-prose pre.pg-code {
  margin: 0 0 14px; padding: 12px 14px; overflow-x: auto; border-radius: 8px;
  background: rgba(0, 0, 0, .38); border: 1px solid rgba(255, 255, 255, .07);
  color: #9fe8d4; font-size: 12px; line-height: 1.7; font-family: ui-monospace, Menlo, Consolas, monospace;
}
.pg-prose a { color: var(--accent); }
.pg-prose a:hover { color: #ffb45c; }
.pg-prose .pg-note { font-size: 12px; color: var(--text-dim); }

/* ---------- 页脚站点导航（避免新页面成为孤岛页） ---------- */
.footer .foot-links {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px; text-align: left; padding: 0 4px 16px; margin-bottom: 14px;
  border-bottom: 1px solid var(--border);
}
.footer .foot-col { display: flex; flex-direction: column; gap: 5px; }
.footer .foot-col b { color: var(--text); font-size: 12.5px; font-weight: 600; margin-bottom: 3px; }
.footer .foot-col a { font-size: 12px; color: var(--text-dim); }
.footer .foot-col a:hover { color: var(--accent); text-decoration: none; }
/* 版权栏：三块内容统一行高、垂直居中（2026-09-14 用户要求「高度统一、一行对齐」）。
   第三块里的 .live 是带边框与内边距的胶囊，如果不管它，整行会被撑高、前两块被拉伸错位。
   所以：整行 align-items:center；页脚内的 .live 收小到与 12px 正文同一高度。 */
.footer .foot-bar {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 4px 18px; justify-content: center;
  line-height: 1.7;
}
/* 「数据更新」原先在导航条右上角，2026-09-14 起移到版权栏末位（全站统一） */
.footer .foot-upd { display: inline-flex; align-items: center; gap: 6px; }
.footer .foot-upd b { color: var(--text-mut); font-weight: 600; font-variant-numeric: tabular-nums; }
.footer .foot-bar .live { padding: 2px 9px; font-size: 11px; line-height: 1.5; }

/* ---------- 对比表 ---------- */
.pg-table table.rank.cmp-table { min-width: 660px; }
.pg-table table.rank.cmp-table th { text-align: center; }
.pg-table table.rank.cmp-table th.l { text-align: left; }
.pg-table table.rank.cmp-table td { text-align: center; }
.pg-table table.rank.cmp-table td.l { text-align: left; color: var(--text-mut); }
.pg-table table.rank.cmp-table td.cmp-win { color: var(--text); font-weight: 600; background: rgba(46, 230, 197, .05); }

/* ---------- 详情页「延伸阅读」内链（detail.js renderRelated 渲染） ---------- */
.rel-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.rel-col {
  background: rgba(0, 0, 0, .2); border: 1px solid var(--border);
  border-radius: 11px; padding: 12px 13px;
}
.rel-h {
  font-size: 12px; font-weight: 700; color: #ffcf8a;
  letter-spacing: .03em; margin-bottom: 9px;
}
.rel-item { display: block; padding: 7px 0; border-top: 1px solid rgba(255, 255, 255, .05); text-decoration: none; }
.rel-item:first-of-type { border-top: 0; padding-top: 0; }
.rel-item b { display: block; font-size: 13px; font-weight: 600; color: var(--text); line-height: 1.5; }
.rel-item:hover b { color: var(--accent); text-decoration: none; }
.rel-item span { display: block; font-size: 11.5px; color: var(--text-mut); line-height: 1.6; margin-top: 2px; }
.rel-more { display: inline-block; margin-top: 9px; font-size: 12px; color: var(--accent-2); text-decoration: none; }
.rel-more:hover { color: var(--accent); text-decoration: none; }

/* ---------- 移动端（必须置于文件末尾） ---------- */
@media (max-width: 760px) {
  .pg-hero { padding: 0 0 14px; }
  .pg-hero h1 { font-size: 20px; }
  .pg-hero .lead { font-size: 12.5px; }
  .pg-nav { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; }
  .pg-nav a { flex: 0 0 auto; white-space: nowrap; font-size: 12px; padding: 5px 10px; }
  .pg-links { grid-template-columns: 1fr 1fr; }
  .pg-grid { grid-template-columns: 1fr; }
  .pg-dist-row { grid-template-columns: 74px 1fr 46px; font-size: 11.5px; }
  .pg-prose { font-size: 13px; }
  .pg-prose h2 { font-size: 15px; }
  .pg-tools { gap: 6px; }
  /* 页脚：4 组链接收成 2×2 卡片，标题带分隔线，避免原来「一堆小字堆在一起」 */
  .footer .foot-links { grid-template-columns: 1fr 1fr; gap: 9px; padding: 0 0 14px; margin-bottom: 12px; align-items: start; }
  .footer .foot-col {
    gap: 3px; padding: 10px 11px 11px;
    border-radius: 12px; border: 1px solid var(--border);
    background: rgba(255, 255, 255, .022);
  }
  .footer .foot-col b {
    margin: 0 0 6px; padding-bottom: 6px;
    font-size: 11px; font-weight: 700; letter-spacing: .06em; color: #ffcf8a;
    border-bottom: 1px solid var(--border);
  }
  .footer .foot-col a { font-size: 11.5px; line-height: 1.65; }
  .footer .foot-bar { flex-direction: column; gap: 3px; align-items: center; line-height: 1.7; }
  .pg-prose pre.pg-code { font-size: 11.5px; padding: 10px 11px; }
  .rel-grid { grid-template-columns: 1fr; gap: 10px; }
  .rel-item b { font-size: 12.5px; }
}

/* ============================================================
   404 页面（/404.php，nginx error_page 指向它）
   ============================================================ */
.e404 {
  padding: 6px 0 10px;
  /* 顶部一层暖金光晕，把视线聚到中间的 4₿4 上（不用伪元素，避免层级问题） */
  background: radial-gradient(56% 240px at 50% 0%, rgba(247, 147, 26, .13), transparent 72%);
}

.e404-stage { padding: 40px 0 34px; text-align: center; }

.e404-num {
  display: flex; align-items: center; justify-content: center; gap: .02em;
  font-size: clamp(72px, 14vw, 132px);
  font-weight: 800; line-height: 1; letter-spacing: -.03em;
  color: #2c3a49;                  /* 数字压低对比，让中间的 ₿ 跳出来 */
  user-select: none;
}
.e404-num i {
  display: inline-block; font-style: normal;
  background: linear-gradient(148deg, #ffd89a 0%, #f7931a 46%, #c4660d 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  transform: translateY(-3px) rotate(-5deg);
  filter: drop-shadow(0 14px 34px rgba(247, 147, 26, .34));
}

.e404 h1 { margin: 22px 0 12px; font-size: 25px; font-weight: 800; letter-spacing: -.01em; color: var(--text); }
.e404-lead { margin: 0 auto; max-width: 560px; font-size: 13.5px; line-height: 1.9; color: var(--text-mut); }
.e404-lead b { color: #ffcf8a; font-weight: 600; }

.e404-act { display: flex; justify-content: center; gap: 10px; margin-top: 24px; flex-wrap: wrap; }
.e404-act a.btn { text-decoration: none; }

/* 常用入口：把「走丢的人」直接送到最常去的几个页面 */
.e404-links {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin: 8px 0 26px;
}
.e404-links a {
  display: grid; gap: 4px;
  padding: 14px 15px 15px;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--bg-card); box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: border-color .16s, transform .16s, background .16s;
}
.e404-links a:hover { border-color: rgba(247, 147, 26, .42); transform: translateY(-2px); text-decoration: none; }
.e404-links a b { font-size: 13.5px; color: var(--text); }
.e404-links a span { font-size: 11.5px; color: var(--text-dim); }

@media (max-width: 760px) {
  .e404-stage { padding: 26px 0 24px; }
  .e404 h1 { font-size: 20px; margin-top: 16px; }
  .e404-lead { font-size: 12.5px; }
  .e404-links { grid-template-columns: 1fr 1fr; gap: 9px; }
  .e404-links a { padding: 11px 12px 12px; }
  .e404-links a b { font-size: 12.5px; }
  .e404-act { flex-direction: column; }
  .e404-act a.btn { width: 100%; justify-content: center; box-sizing: border-box; }
}