body{font-family:Arial,'PingFang SC','Microsoft YaHei',sans-serif;background:#eef3fb;color:#222;margin:0}.wrap{max-width:1180px;margin:0 auto;padding:24px}.hero{background:linear-gradient(135deg,#0f62fe,#5aa2ff);color:#fff;border-radius:22px;padding:30px;box-shadow:0 16px 40px rgba(15,98,254,.18)}.hero-badge{display:inline-block;background:rgba(255,255,255,.18);padding:6px 12px;border-radius:999px;font-size:13px;margin-bottom:10px}.hero h1{margin:8px 0 10px;font-size:34px}.hero p{margin:0;max-width:780px;line-height:1.8;opacity:.95}.hero-actions{margin-top:18px;display:flex;gap:10px;flex-wrap:wrap}.panel{background:#fff;border-radius:18px;padding:22px;margin-top:18px;box-shadow:0 8px 24px rgba(0,0,0,.06);transition:transform .25s,box-shadow .25s}.panel.testing{box-shadow:0 10px 30px rgba(15,98,254,.16);transform:translateY(-1px)}.metrics{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px}.metrics div{padding:14px;border:1px solid #e5e7eb;border-radius:14px;background:linear-gradient(180deg,#fff,#fafbff)}.metrics span{display:block;color:#667085;font-size:13px;margin-bottom:6px}.metrics strong{font-size:28px;color:#0f172a;transition:color .2s}.metrics strong.flash{color:#0f62fe}.metrics em{font-style:normal;color:#667085}.status-line{margin-bottom:12px;color:#475467}.progress{height:10px;background:#e8eef9;border-radius:999px;overflow:hidden;margin:12px 0 16px}.progress span{display:block;height:100%;width:0%;background:linear-gradient(90deg,#0f62fe,#5aa2ff);transition:width .35s ease}.btn,.chip{display:inline-block;padding:10px 14px;border-radius:10px;text-decoration:none;border:0;cursor:pointer}.btn{background:#0f62fe;color:#fff}.btn:disabled{opacity:.7;cursor:not-allowed}.btn-light{background:#eef4ff;color:#1f3b73}.chips{display:flex;flex-wrap:wrap;gap:12px}.chip{background:#eef4ff;color:#1f3b73}.gridcards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.record-card{background:linear-gradient(180deg,#fff,#f8fbff);border:1px solid #e6edf7;border-radius:16px;padding:14px}.record-card b{display:block;font-size:16px;margin-bottom:8px}.record-card small{color:#667085}.record-card .nums{display:flex;gap:12px;flex-wrap:wrap;margin-top:10px}.record-card .nums span{background:#eef4ff;color:#1f3b73;border-radius:999px;padding:4px 10px;font-size:12px}.record-card .time{margin-top:8px;color:#667085;font-size:12px}table{width:100%;border-collapse:collapse}th,td{padding:10px;border-bottom:1px solid #eef2f7;text-align:left;font-size:14px}.muted{color:#667085;font-size:14px;line-height:1.8}
/* 首页测速区增强美化 */
#speed-card {
  background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
  border: 1px solid rgba(59, 130, 246, 0.12);
  box-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);
  border-radius: 20px;
  padding: 22px;
  position: relative;
  overflow: hidden;
}

#speed-card::before {
  content: "";
  position: absolute;
  inset: -2px;
  background: radial-gradient(circle at top right, rgba(59,130,246,0.14), transparent 35%),
              radial-gradient(circle at bottom left, rgba(16,185,129,0.10), transparent 30%);
  pointer-events: none;
}

#speed-card > * {
  position: relative;
  z-index: 1;
}

#speed-card h2 {
  font-size: 20px;
  margin: 0 0 14px;
  color: #0f172a;
  letter-spacing: 0.2px;
}

#speed-card .speed-meta {
  display: grid;
  gap: 8px;
  margin-top: 8px;
  padding: 14px 16px;
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid rgba(148, 163, 184, 0.18);
  border-radius: 16px;
  backdrop-filter: blur(8px);
}

#speed-card .speed-meta > div {
  color: #334155;
  font-size: 14px;
  line-height: 1.6;
}

#speed-card .speed-meta span {
  color: #0f172a;
  font-weight: 700;
}

#speed-card .progress {
  height: 12px;
  border-radius: 999px;
  background: #e2e8f0;
  overflow: hidden;
  margin: 16px 0 14px;
  box-shadow: inset 0 1px 2px rgba(15, 23, 42, 0.08);
}

#speed-card .progress span {
  display: block;
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #3b82f6 0%, #06b6d4 50%, #10b981 100%);
  transition: width 0.35s ease;
}

#speed-card .metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 16px;
}

#speed-card .metrics > div {
  padding: 16px 14px;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.92);
  border: 1px solid rgba(148, 163, 184, 0.16);
  box-shadow: 0 6px 18px rgba(15, 23, 42, 0.04);
}

#speed-card .metrics > div span {
  display: block;
  font-size: 13px;
  color: #64748b;
  margin-bottom: 6px;
}

#speed-card .metrics > div strong {
  font-size: 28px;
  line-height: 1;
  color: #0f172a;
  font-weight: 800;
}

#speed-card .metrics > div em {
  font-style: normal;
  font-size: 13px;
  color: #64748b;
  margin-left: 4px;
}

#speed-card.testing {
  transform: translateY(-1px);
}

#speed-card.testing .progress span {
  background: linear-gradient(90deg, #2563eb 0%, #06b6d4 50%, #14b8a6 100%);
}

#current-region,
#current-isp,
#current-ip {
  font-weight: 700;
  color: #0f172a;
}

@media (max-width: 640px) {
  #speed-card {
    padding: 18px;
    border-radius: 18px;
  }

  #speed-card .metrics {
    grid-template-columns: 1fr;
  }

  #speed-card .metrics > div strong {
    font-size: 24px;
  }
}