/* speed-test 专用，依赖 /home.css 变量与 /tool.css */
/* 本页例外色（照 Cloudflare 测速页，用户 2026-10-21 要求）：下载橙、上传紫，只用在下载 / 上传的大数字、曲线和评分星 */
:root { --st-down: oklch(0.62 0.17 50); --st-up: oklch(0.54 0.2 305); }   /* 浅色下橙色压到 0.62，大字对比度过 3:1 */
@media (prefers-color-scheme: dark) {
  :root { --st-down: oklch(0.77 0.15 60); --st-up: oklch(0.72 0.15 305); }
}
#runBtn { min-width: 9em; }   /* 开始 / 暂停 / 继续 / 重新测速 切换时按钮不变宽窄 */
.st-phase { font: 13px/1.4 var(--mono); color: var(--ink-2); }
.st-note { margin: 10px 0 0; font: 13px/1.6 var(--sans); color: var(--ink-2); }

/* 四个大数字：宽屏一排四个，窄屏两排 */
.st-big {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px 24px;
  margin-top: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--rule);
}
.st-metric { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.st-label { font: 500 12px/1 var(--mono); letter-spacing: .14em; color: var(--ink-2); }
.st-val { font: 14px/1 var(--mono); color: var(--ink-2); white-space: nowrap; }
.st-val b { font: 600 clamp(28px, 4.2vw, 44px)/1 var(--mono); color: var(--result); font-variant-numeric: tabular-nums; }
.st-val #vDown { color: var(--st-down); }
.st-val #vUp { color: var(--st-up); }

/* 网络质量评分：三项一排，窄屏一项一行 */
.st-scores { padding: 18px 0 20px; border-bottom: 1px solid var(--rule); }
.st-scores h2 { margin: 0 0 14px; font: 600 12px/1 var(--mono); letter-spacing: .14em; }
.st-score-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px 24px; }
.st-score { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 6px; align-items: center; }
.st-icon { grid-row: 1 / 3; width: 34px; height: 34px; color: var(--ink); }
.st-score-name { font: 500 13px/1.2 var(--sans); color: var(--ink); }
.st-stars { display: flex; gap: 3px; }
.st-star { width: 17px; height: 17px; fill: none; stroke: var(--ink-2); stroke-width: 1.3; stroke-linejoin: round; opacity: .55; }
.st-star.on { fill: var(--st-down); stroke: var(--st-down); opacity: 1; }

/* 曲线：按请求顺序画每次的速度，虚线是取值（第 90 百分位） */
.st-chart { display: block; width: 100%; height: 120px; border-bottom: 1px solid var(--rule); color: var(--result); }
#downChart { color: var(--st-down); }
#upChart { color: var(--st-up); }
.st-chart path { vector-effect: non-scaling-stroke; }
.st-chart .st-area { fill: currentColor; opacity: .12; stroke: none; }
.st-chart .st-line { fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linejoin: round; }
.st-chart .st-ref { fill: none; stroke: var(--ink-2); stroke-width: 1; stroke-dasharray: 4 4; }

.kv td { font-variant-numeric: tabular-nums; }
.kv td .sub { display: block; font-weight: 400; color: var(--ink-2); font-size: 12px; word-break: normal; overflow-wrap: break-word; }
.kv td.na { color: var(--ink-2); font-weight: 400; }
.st-sizes { margin-top: 4px; }

@media (max-width: 760px) {
  .st-big { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-score-row { grid-template-columns: minmax(0, 1fr); }
}