/* ==================================================================
   online.html · 在线人数页（大折线 + 大数字 + 时间范围 pills）
   全部走令牌，不写十六进制字面量。
   ================================================================== */

/* 顶部两个大数字：--t-h2 字号 · 深蓝 · 等宽数字 */
.onl-stats{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:clamp(14px,2vw,28px);
  margin-bottom:var(--gap-m,20px);
}
.onl-stat{
  padding:clamp(14px,2vw,20px) clamp(16px,2.2vw,24px);
  background:var(--card);border:1px solid var(--line);
  border-radius:var(--r-m);
}
.onl-stat .k{
  font-size:var(--t-xs);color:var(--t2);font-weight:500;
}
.onl-stat .v{
  margin-top:6px;
  font-size:var(--t-h2);font-weight:600;letter-spacing:-.02em;
  color:var(--blue-deep-2);
  font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1;
  line-height:1.1;
}
/* 深底时 --blue-deep-2(#275A7C) 在 --bg(#141821) 上对比度不足，
   取同一深蓝族里更亮的一档，保持「深蓝大数字」的观感 */
[data-mode="dark"] .onl-stat .v,[data-theme="dark"] .onl-stat .v{color:var(--blue-deep-1)}
.onl-stat .d{
  margin-top:4px;font-size:var(--t-xs);color:var(--t2);
}

/* 图表 */
.onl-panel{padding:clamp(14px,2vw,20px)}
.onl-wrap{position:relative}
.onl-chart{position:relative;width:100%}
.onl-svg{display:block;width:100%;height:auto;touch-action:none}
.onl-grid line{stroke:var(--line);stroke-width:1;vector-effect:non-scaling-stroke}
.onl-line{
  stroke:var(--blue);stroke-width:2;fill:none;
  stroke-linejoin:round;stroke-linecap:round;
  vector-effect:non-scaling-stroke;
}
.onl-area{stroke:none}
.onl-cross{
  stroke:var(--blue-deep-2);stroke-width:1;stroke-dasharray:3 3;
  vector-effect:non-scaling-stroke;
}
[data-mode="dark"] .onl-cross,[data-theme="dark"] .onl-cross{stroke:var(--blue-deep-1)}
.onl-dot{fill:var(--card);stroke:var(--blue);stroke-width:2;vector-effect:non-scaling-stroke}
.onl-tip{
  position:absolute;z-index:3;transform:translate(-50%,-100%);
  display:flex;flex-direction:column;gap:2px;
  padding:6px 10px;border-radius:var(--r-s);
  background:var(--card);border:1px solid var(--line);
  box-shadow:var(--sh-3);pointer-events:none;white-space:nowrap;
}
.onl-tip b{font-size:var(--t-sm);font-weight:600;color:var(--ink)}
.onl-tip span{font-size:var(--t-xs);color:var(--t2)}
.onl-axis{
  display:flex;justify-content:space-between;gap:12px;
  margin-top:6px;font-size:var(--t-xs);color:var(--t2);
}
.onl-empty{
  padding:36px 12px;text-align:center;
  font-size:var(--t-sm);color:var(--t2);
  background:var(--wash);border-radius:var(--r-m);
}

/* 390：大数字与图同宽，pills 允许换行不溢出 */
@media (max-width:640px){
  .onl-stats{grid-template-columns:minmax(0,1fr)}
}