/* 上半段由 miniprogram/app.wxss 自动转换而来，别手改这里——改那边。 */
:root {
  /* 一份 rpx 有多宽。桌面端用 min() 收住，否则 100vw 会把字撑爆 */
  --u: calc(min(100vw, 520px) / 750);
}
* { box-sizing: border-box; margin: 0; padding: 0; }

/* 设计令牌与公共组件。跟设计稿、原型同一套色板。 */
body {
  --bg: #0b0d11;
  --surface: #12161c;
  --surface-2: #181d24;
  --surface-3: #1f252d;
  --hair: rgba(255, 255, 255, .07);
  --line: rgba(255, 255, 255, .11);
  --text: #eef1f4;
  --text-2: #a6aeb8;
  --text-3: #6f7883;
  --accent: #34d367;
  --warn: #ffb340;
  --danger: #ff5252;
  --blue: #4c9eff;
  background: var(--bg);
  color: var(--text);
  font-size: calc(var(--u) * 30);
  line-height: 1.6;
}

.wrap { padding: calc(var(--u) * 24) calc(var(--u) * 24) calc(var(--u) * 40); }

/* 等宽数字：仪表感的地基。数字不等宽，滚动时会左右跳。 */
.num {
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

.sect {
  font-size: calc(var(--u) * 21);
  color: var(--text-3);
  letter-spacing: .06em;
  margin: calc(var(--u) * 32) calc(var(--u) * 4) calc(var(--u) * 14);
}
.sect:first-child { margin-top: calc(var(--u) * 4); }

.card {
  background: var(--surface);
  border: calc(var(--u) * 1) solid var(--hair);
  border-radius: calc(var(--u) * 24);
  padding: calc(var(--u) * 24) calc(var(--u) * 26);
  margin-bottom: calc(var(--u) * 18);
}

/* 极淡的坐标网格。一条几乎看不见的线，但它决定了这块区域被读成
   「仪表」还是「卡片」。 */
.grid {
  background-image:
    linear-gradient(rgba(255, 255, 255, .035) calc(var(--u) * 1), transparent calc(var(--u) * 1)),
    linear-gradient(90deg, rgba(255, 255, 255, .035) calc(var(--u) * 1), transparent calc(var(--u) * 1));
  background-size: calc(var(--u) * 56) calc(var(--u) * 40);
}

.row { display: flex; align-items: center; justify-content: space-between; }
.k { font-size: calc(var(--u) * 20); color: var(--text-3); letter-spacing: .05em; }
.mini { font-size: calc(var(--u) * 23); color: var(--text-2); line-height: 1.75; }
.dim { color: var(--text-3); }
.big { font-size: calc(var(--u) * 60); font-weight: 700; line-height: 1; letter-spacing: -.02em; }
.u { font-size: calc(var(--u) * 22); font-weight: 500; color: var(--text-3); margin-left: calc(var(--u) * 8); letter-spacing: .04em; }

.pill {
  font-size: calc(var(--u) * 20);
  padding: calc(var(--u) * 4) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 40);
  border: calc(var(--u) * 1) solid var(--line);
  color: var(--text-2);
}
.pill.ok { color: var(--accent); border-color: rgba(52, 211, 103, .4); background: rgba(52, 211, 103, .1); }
.pill.warn { color: var(--warn); border-color: rgba(255, 179, 64, .4); background: rgba(255, 179, 64, .1); }

/* 列表行 */
.li {
  display: flex;
  align-items: center;
  padding: calc(var(--u) * 22) calc(var(--u) * 24);
  background: var(--surface);
  border: calc(var(--u) * 1) solid var(--hair);
  border-radius: calc(var(--u) * 22);
  margin-bottom: calc(var(--u) * 14);
}
.li.hit { background: var(--surface-2); }
.li .no { font-size: calc(var(--u) * 28); font-weight: 700; color: var(--text-3); width: calc(var(--u) * 40); }
.li .nm { flex: 1; min-width: 0; font-size: calc(var(--u) * 28); font-weight: 600; margin-left: calc(var(--u) * 18); }
.li .sub { display: block; font-size: calc(var(--u) * 21); color: var(--text-3); font-weight: 400; margin-top: calc(var(--u) * 2); }
.li .v { font-size: calc(var(--u) * 28); font-weight: 600; }

.kpis { display: flex; gap: calc(var(--u) * 14); margin-bottom: calc(var(--u) * 18); }
.kpis .card { flex: 1; margin: 0; padding: calc(var(--u) * 20) calc(var(--u) * 18); }
.kpis .vv { font-size: calc(var(--u) * 38); font-weight: 700; margin-top: calc(var(--u) * 6); }

.bar { height: calc(var(--u) * 12); border-radius: calc(var(--u) * 6); background: var(--surface-3); overflow: hidden; margin-top: calc(var(--u) * 14); }
.bar .fill { display: block; height: 100%; background: var(--accent); transition: width .5s cubic-bezier(.22, 1, .36, 1); }

.note {
  border-left: calc(var(--u) * 4) solid var(--accent);
  background: var(--surface);
  border-radius: 0 calc(var(--u) * 20) calc(var(--u) * 20) 0;
  padding: calc(var(--u) * 20) calc(var(--u) * 24);
  font-size: calc(var(--u) * 23);
  color: var(--text-2);
  line-height: 1.8;
  margin-bottom: calc(var(--u) * 18);
}
.note.warn { border-left-color: var(--warn); }
.note .b { color: var(--text); font-weight: 600; }

/* 广告位占位。真组件要等主体和流量主开通，先把位置和间距定死：
   平台规范要求广告与可点击内容之间必须有明显间距，不能无缝相连。 */
.adslot {
  border: calc(var(--u) * 1) dashed rgba(76, 158, 255, .45);
  border-radius: calc(var(--u) * 22);
  background: rgba(76, 158, 255, .05);
  color: var(--blue);
  font-size: calc(var(--u) * 21);
  text-align: center;
  padding: calc(var(--u) * 24) calc(var(--u) * 16);
  margin: calc(var(--u) * 32) 0 calc(var(--u) * 8);
  line-height: 1.7;
}
.adslot .t { display: block; font-size: calc(var(--u) * 23); color: #7db8ff; margin-bottom: calc(var(--u) * 4); }

canvas { display: block; width: 100%; }


/* ↓ 以下是 H5 独有的：小程序没有这些概念（页头、面包屑、正文、页脚、广告位） */

body {
  margin: 0 auto;
  max-width: 520px;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
@media (min-width: 560px) {
  /* 桌面端：版心居中，两侧留白。--u 已经在 520px 封顶，所以字号不会再涨 */
  body { box-shadow: 0 0 0 1px var(--hair); }
}
@media (min-width: 820px) {
  /* 宽屏上给表格更多横向空间——表格是这个站的内容主体，
     挤在 520px 里而右边一片空是浪费。字号不动（--u 已封顶）。 */
  body { max-width: calc(var(--u) * 1100); }
  /* 但正文不跟着变宽：中文一行超过 45 字就难读了 */
  .prose, h1, h2 { max-width: calc(var(--u) * 750); }
}

a { color: inherit; text-decoration: none; }

.top {
  position: sticky; top: 0; z-index: 9;
  background: rgba(18, 22, 28, .92);
  backdrop-filter: saturate(150%) blur(10px);
  border-bottom: 1px solid var(--hair);
  /* 顶部要加安全区：加到主屏幕后 status-bar-style 是 black-translucent，
     内容会顶到状态栏底下（这样最像原生 App），不补的话标题被刘海压住。
     在浏览器里 env() 是 0，所以这一行对普通访问没有副作用。 */
  padding: calc(var(--u) * 20 + env(safe-area-inset-top)) calc(var(--u) * 24) calc(var(--u) * 20);
  display: flex; align-items: center; gap: calc(var(--u) * 16);
}
.top .logo { font-weight: 800; color: var(--accent); letter-spacing: .04em; font-size: calc(var(--u) * 28); }
.top .ttl { margin-left: auto; font-size: calc(var(--u) * 26); font-weight: 600; color: var(--text-2); }

/* 底部 tab bar。取值直接对齐 miniprogram/app.json 的 tabBar：
   背景 #12161c、未选中 #6f7883、选中 #34d367。两边要长得像同一个 App。 */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex;
  background: #12161c;
  border-top: 1px solid var(--hair);
  padding-bottom: env(safe-area-inset-bottom);   /* iPhone Home 指示条 */
}
.tabbar a {
  flex: 1; text-align: center;
  padding: calc(var(--u) * 20) 0 calc(var(--u) * 18);
  font-size: calc(var(--u) * 24);
  color: #6f7883;
}
.tabbar a.on { color: var(--accent); font-weight: 600; }
/* 内容要给 tab bar 让出高度，否则最后一屏被盖住 */
body { padding-bottom: calc(var(--u) * 110 + env(safe-area-inset-bottom)); }

@media (min-width: 820px) {
  /* 桌面端：贴底的整条变成居中悬浮的玻璃胶囊，鼠标划过会放大。
     手机上不这么做——那儿贴底的实心 tab bar 才是原生 App 的样子。 */
  .tabbar {
    left: 50%; right: auto; transform: translateX(-50%);
    bottom: calc(var(--u) * 34);
    width: auto;
    padding: calc(var(--u) * 8);
    gap: calc(var(--u) * 4);
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 999px;
    background: rgba(24, 29, 36, .62);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    backdrop-filter: saturate(180%) blur(20px);
    /* 内阴影那道高光是玻璃感的关键，去掉就变成半透明塑料 */
    box-shadow: 0 calc(var(--u) * 12) calc(var(--u) * 44) rgba(0, 0, 0, .55),
                inset 0 1px 0 rgba(255, 255, 255, .09);
  }
  .tabbar a {
    flex: none;
    padding: calc(var(--u) * 14) calc(var(--u) * 32);
    border-radius: 999px;
    transition: transform .24s cubic-bezier(.22, 1, .36, 1),
                background .2s ease, color .2s ease;
  }
  .tabbar a:hover {
    transform: scale(1.14) translateY(calc(var(--u) * -3));
    background: rgba(255, 255, 255, .08);
    color: var(--text);
  }
  .tabbar a.on { background: rgba(52, 211, 103, .14); }
  /* 邻近项微微收缩——就是 macOS Dock 那个放大效果的来源，
     不加的话只有被指的那个变大，看着像在膨胀而不是在被拎起来 */
  .tabbar:hover a:not(:hover) { transform: scale(.96); }
  body { padding-bottom: calc(var(--u) * 150); }
}

.crumb { font-size: calc(var(--u) * 21); color: var(--text-3); padding: calc(var(--u) * 18) calc(var(--u) * 4) 0; }
.crumb a:hover { color: var(--accent); }

h1 { font-size: calc(var(--u) * 44); font-weight: 700; letter-spacing: -.02em; margin: calc(var(--u) * 10) 0 calc(var(--u) * 6); }
/* 直播页的 h1 给爬虫和读屏器用，界面上不显示——那一屏的视觉主角是赛道名和名次板，
   顶一个大标题上去反而不像小程序了。但页面必须有且只有一个 h1。 */
h1.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* 直播页卡片里的赛道名 */
.ttl2 { font-size: calc(var(--u) * 34); font-weight: 700; margin-top: calc(var(--u) * 12); }
h2 { font-size: calc(var(--u) * 30); font-weight: 700; margin: calc(var(--u) * 34) 0 calc(var(--u) * 14); }

/* 正文散文。AdSense 审核看的就是这一块——只有表格的页面会被判 low value content。 */
.prose { font-size: calc(var(--u) * 25); color: var(--text-2); line-height: 1.9; margin-bottom: calc(var(--u) * 18); }
.prose + .prose { margin-top: calc(var(--u) * -6); }
.prose b { color: var(--text); font-weight: 600; }
.prose a { color: var(--accent); border-bottom: 1px solid rgba(52, 211, 103, .35); }

/* 表格整体套进一张卡片，行之间只用分隔线。
   一开始试过「每一行是一张独立的卡」（border-collapse: separate + 每格背景圆角），
   跟表格盒模型打架，单元格会各自散成小方块——别再走那条路。
   语义上仍然是 <table>（爬虫和读屏器需要），视觉上是小程序那种卡片列表。 */
.tw {
  background: var(--surface);
  border: 1px solid var(--hair);
  border-radius: calc(var(--u) * 22);
  padding: calc(var(--u) * 6) calc(var(--u) * 8);
  margin: 0 0 calc(var(--u) * 18);
  overflow-x: auto;                 /* 窄屏兜底：列太多时横向滚，而不是把字挤成竖排 */
  -webkit-overflow-scrolling: touch;
}
table {
  width: 100%;
  font-size: calc(var(--u) * 25);
  border-collapse: collapse;
}
thead th {
  font-size: calc(var(--u) * 20);
  color: var(--text-3);
  font-weight: 600;
  letter-spacing: .05em;
  text-align: left;
  padding: calc(var(--u) * 14) calc(var(--u) * 10) calc(var(--u) * 10);
  border-bottom: 1px solid var(--hair);
}
tbody td {
  padding: calc(var(--u) * 20) calc(var(--u) * 10);
  border-bottom: 1px solid var(--hair);
  font-weight: 500;
}
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td { background: var(--surface-2); }
/* 高亮行。注意别叫 .top——那是页头的类，里面有 display:flex，
   套到 <tr> 上会把整个表格布局打散（踩过）。 */
tbody tr.lead td { background: rgba(52, 211, 103, .05); }
td.r, th.r { text-align: right; }
/* 数字列不许折行，折了就对不齐，仪表感全没了 */
td.num, td.r, th.r { white-space: nowrap; }
/* 名次列：跟小程序 .li .no 一样，灰、粗、窄 */
td.no { color: var(--text-3); font-weight: 700; width: calc(var(--u) * 56); text-align: center; }
tbody tr.lead td.no, tbody tr.lead td.nm a, tbody tr.lead td.hi { color: var(--accent); }
/* 赛道名可能很长（「童话世界 沉睡的森林巨人」），别让它把数字列挤没 */
td.nm { min-width: calc(var(--u) * 150); }
td.hi { color: var(--accent); font-weight: 600; }
td .sub { display: block; font-size: calc(var(--u) * 21); color: var(--text-3); font-weight: 400; margin-top: calc(var(--u) * 2); }

/* KPI 三连，直接对齐小程序 track 页那一排 */
.kpis .vv.sm { font-size: calc(var(--u) * 30); }
.kpis .k { white-space: nowrap; }

/* 逆转图 / 遥测曲线的画布 */
canvas.cv { display: block; width: 100%; height: calc(var(--u) * 260); margin: calc(var(--u) * 16) 0 calc(var(--u) * 8); }

/* 名次板一行（小程序直播页 .lane 的等价物） */
.lane {
  display: flex; align-items: center; gap: calc(var(--u) * 16);
  background: var(--surface); border: 1px solid var(--hair);
  border-radius: calc(var(--u) * 22);
  padding: calc(var(--u) * 20) calc(var(--u) * 24);
  margin-bottom: calc(var(--u) * 12);
}
.lane.p1 { border-color: rgba(52, 211, 103, .34); }
.lane .no { width: calc(var(--u) * 34); font-weight: 700; color: var(--text-3); }
.lane.p1 .no { color: var(--accent); }
.lane .nm { flex: 1; font-weight: 600; min-width: 0; }
/* 副标题换行显示，跟小程序 .li .sub 一致——挤在同一行就不像那个产品了 */
.lane .sub { display: block; font-size: calc(var(--u) * 21); color: var(--text-3); font-weight: 400; margin-top: calc(var(--u) * 2); }
.lane .rt { text-align: right; }
.lane .rt .v { font-weight: 600; }
.lane .rt .g { font-size: calc(var(--u) * 21); color: var(--text-3); }
/* 广告位。规范要求广告与可点击内容之间必须有明显间距，不能无缝相连——
   这个 margin 就是那条规矩，别为了排版紧凑去掉。 */
.ad {
  margin: calc(var(--u) * 40) 0 calc(var(--u) * 24);
  min-height: calc(var(--u) * 180);
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed rgba(76, 158, 255, .35);
  border-radius: calc(var(--u) * 22);
  color: var(--blue); font-size: calc(var(--u) * 21);
}

footer {
  margin-top: calc(var(--u) * 48);
  border-top: 1px solid var(--hair);
  /* 底部安全区：iPhone 的 Home 指示条会盖住最后一行 */
  padding: calc(var(--u) * 28) calc(var(--u) * 24) calc(var(--u) * 60 + env(safe-area-inset-bottom));
  font-size: calc(var(--u) * 21); color: var(--text-3); line-height: 1.9;
}
footer a { color: var(--text-2); }
footer a:hover { color: var(--accent); }
footer nav { display: flex; gap: calc(var(--u) * 20); flex-wrap: wrap; margin-bottom: calc(var(--u) * 12); }