/* ==========================================================================
   在线网络测速 · xc_toolbox 工具样式
   主色 #ff6500 — 全部规则以 .wsp- 前缀作用域限定，避免污染工具箱其它页面
   ========================================================================== */

.wsp-wrap {
    max-width: 760px;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
                 "Hiragino Sans GB", "Microsoft YaHei", Arial, sans-serif;
    -webkit-text-size-adjust: 100%;
    box-sizing: border-box;
}
.wsp-wrap *,
.wsp-wrap *::before,
.wsp-wrap *::after { box-sizing: border-box; }

/* ============================ 主面板 ============================ */
.wsp-panel {
    background: #ffffff;
    border-radius: 18px;
    padding: 26px 22px 22px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .05), 0 12px 32px rgba(16, 24, 40, .07);
    border: 1px solid #f0f2f5;
}

/* ============================ 环形表盘 ============================ */
.wsp-dial {
    position: relative;
    width: 212px;
    height: 212px;
    margin: 2px auto 6px;
}

.wsp-ring {
    width: 100%;
    height: 100%;
    display: block;
    transform: rotate(-90deg);
    overflow: visible;
}

.wsp-ring-bg {
    fill: none;
    stroke: #eef0f4;
    stroke-width: 11;
}

.wsp-ring-fg {
    fill: none;
    stroke: #ff6500;
    stroke-width: 11;
    stroke-linecap: round;
    /* JS 会覆盖这两个值；此处为 JS 未执行时的兜底（2π*86 ≈ 540.35） */
    stroke-dasharray: 540.35;
    stroke-dashoffset: 540.35;
    transition: stroke-dashoffset .28s cubic-bezier(.25, .8, .35, 1),
                stroke .3s ease;
    filter: drop-shadow(0 2px 5px rgba(255, 101, 0, .28));
}
.wsp-ring-fg.is-ping { stroke: #3b82f6; filter: drop-shadow(0 2px 5px rgba(59, 130, 246, .28)); }
.wsp-ring-fg.is-down { stroke: #ff6500; filter: drop-shadow(0 2px 5px rgba(255, 101, 0, .28)); }
.wsp-ring-fg.is-up   { stroke: #22a06b; filter: drop-shadow(0 2px 5px rgba(34, 160, 107, .28)); }

.wsp-dial-inner {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.wsp-val {
    font-size: 42px;
    line-height: 1.05;
    font-weight: 700;
    color: #1f2329;
    letter-spacing: -.5px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.wsp-unit {
    font-size: 13px;
    color: #9aa1ab;
    margin-top: 3px;
    letter-spacing: .5px;
}

.wsp-phase {
    font-size: 12.5px;
    color: #ff6500;
    margin-top: 10px;
    max-width: 150px;
    text-align: center;
    line-height: 1.5;
}

/* ============================ 速度曲线 ============================ */
.wsp-chart-box {
    position: relative;
    height: 118px;
    margin: 14px 0 20px;
    background: linear-gradient(180deg, #fbfcfd, #f6f7f9);
    border: 1px solid #f0f2f5;
    border-radius: 14px;
    padding: 8px 10px;
    overflow: hidden;
}
.wsp-chart-box canvas {
    width: 100%;
    height: 100%;
    display: block;
}
.wsp-chart-tip {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #aab0b8;
    letter-spacing: .3px;
}

/* ============================ 按钮 ============================ */
.wsp-btn {
    display: block;
    width: 100%;
    max-width: 340px;
    height: 54px;
    margin: 0 auto;
    border: none;
    border-radius: 27px;
    background: linear-gradient(135deg, #ff8124, #ff6400);
    color: #fff;
    font-size: 16.5px;
    font-weight: 600;
    letter-spacing: 1px;
    cursor: pointer;
    outline: none;
    box-shadow: 0 8px 20px rgba(255, 101, 0, .3);
    transition: transform .16s ease, box-shadow .2s ease, background .2s ease;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
}
.wsp-btn:hover:not(.is-running) {
    box-shadow: 0 10px 26px rgba(255, 101, 0, .4);
}
.wsp-btn:active:not(.is-running) {
    transform: translateY(1px) scale(.99);
    box-shadow: 0 5px 14px rgba(255, 101, 0, .32);
}
.wsp-btn.is-running {
    background: #fff2e8;
    color: #ff6500;
    box-shadow: inset 0 0 0 1.5px #ffc199;
    font-weight: 600;
}
.wsp-btn.is-running:hover { background: #ffe8d6; }

/* ============================ 三项指标 ============================ */
.wsp-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-top: 22px;
}

.wsp-metric {
    position: relative;
    background: #f8f9fb;
    border: 1px solid #f0f2f5;
    border-radius: 14px;
    padding: 15px 8px 13px;
    text-align: center;
    transition: background .25s ease, border-color .25s ease, transform .2s ease;
}
.wsp-metric.active {
    background: #fff;
    border-color: #ffe0c7;
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(255, 101, 0, .1);
}

.wsp-m-ico {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    margin-bottom: 6px;
    color: #9aa1ab;
    transition: color .25s ease;
}
.wsp-m-ico svg { width: 21px; height: 21px; }

#mPing .wsp-m-ico { color: #3b82f6; }
#mDown .wsp-m-ico { color: #ff6500; }
#mUp   .wsp-m-ico { color: #22a06b; }

.wsp-m-val {
    line-height: 1.15;
    color: #1f2329;
    font-variant-numeric: tabular-nums;
}
.wsp-m-val b {
    font-size: 21px;
    font-weight: 700;
}
.wsp-m-val i {
    font-style: normal;
    font-size: 11px;
    color: #a5abb3;
    margin-left: 2px;
}

.wsp-m-name {
    font-size: 12px;
    color: #8b9199;
    margin-top: 7px;
    letter-spacing: .3px;
}

/* ============================ 详细结果 ============================ */
.wsp-detail {
    margin-top: 20px;
}
.wsp-detail:empty { display: none; }

.wsp-detail-sec {
    background: #fbfcfd;
    border: 1px solid #f0f2f5;
    border-radius: 14px;
    padding: 12px 16px 6px;
    margin-bottom: 12px;
}
.wsp-detail-sec:last-child { margin-bottom: 0; }

.wsp-detail-sec h5 {
    margin: 0 0 4px;
    padding-left: 9px;
    position: relative;
    font-size: 13.5px;
    font-weight: 600;
    color: #26292e;
    letter-spacing: .3px;
}
.wsp-detail-sec h5::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 13px;
    border-radius: 2px;
    background: #ff6500;
}

.wsp-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 0;
    border-bottom: 1px dashed #eceff3;
    font-size: 13.5px;
}
.wsp-row:last-child { border-bottom: none; }
.wsp-row span { color: #8b9199; }
.wsp-row b {
    color: #1f2329;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.wsp-err {
    padding: 16px 18px;
    border-radius: 12px;
    background: #fff5f5;
    border: 1px solid #fdd8d8;
    color: #c0392b;
    font-size: 13.5px;
    text-align: center;
    line-height: 1.7;
}
.wsp-err span { color: #9aa1ab; font-size: 12.5px; }

/* ============================ 本机环境 ============================ */
.wsp-env {
    margin-top: 14px;
    text-align: center;
    font-size: 12px;
    color: #a5abb3;
    line-height: 1.9;
    word-break: break-all;
}
.wsp-env:empty { display: none; }

/* ============================ 历史记录 ============================ */
.wsp-history {
    margin-top: 16px;
    background: #fff;
    border: 1px solid #f0f2f5;
    border-radius: 18px;
    padding: 18px 20px 10px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .04);
}
.wsp-history h4 {
    margin: 0 0 10px;
    padding-left: 10px;
    position: relative;
    font-size: 14.5px;
    font-weight: 600;
    color: #26292e;
}
.wsp-history h4::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 14px;
    border-radius: 2px;
    background: #ff6500;
}

.wsp-hitem {
    display: flex;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid #f2f4f7;
    font-size: 13.5px;
}
.wsp-hitem:last-child { border-bottom: none; }

.wsp-htime {
    flex: 0 0 82px;
    color: #a5abb3;
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}
.wsp-hv {
    flex: 1;
    text-align: center;
    font-weight: 600;
    color: #1f2329;
    font-variant-numeric: tabular-nums;
}
.wsp-hv i {
    font-style: normal;
    font-size: 10px;
    color: #b6bcc4;
    margin-left: 2px;
}
.wsp-hv.ping { color: #3b82f6; }
.wsp-hv.down { color: #ff6500; }
.wsp-hv.up   { color: #22a06b; }

/* ============================ 榜单区（全站数据） ============================ */
.wsp-board {
    margin-top: 16px;
    background: #fff;
    border: 1px solid #f0f2f5;
    border-radius: 18px;
    padding: 18px 20px 12px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, .04);
}

.wsp-board-hd {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 10px;
}
.wsp-board-hd h4 {
    margin: 0;
    padding-left: 10px;
    position: relative;
    font-size: 14.5px;
    font-weight: 600;
    color: #26292e;
}
.wsp-board-hd h4::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 3px; height: 14px;
    border-radius: 2px;
    background: #ff6500;
}
.wsp-board-sub {
    flex: none;
    font-size: 12px;
    color: #a5abb3;
    letter-spacing: .2px;
}

.wsp-skel,
.wsp-empty {
    padding: 22px 0 24px;
    text-align: center;
    color: #b6bcc4;
    font-size: 13px;
    letter-spacing: .2px;
}

/* ---------- 测速排行榜 ---------- */
.wsp-top-item {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 0;
    border-bottom: 1px solid #f4f6f9;
    font-size: 13.5px;
}
.wsp-top-item:last-child { border-bottom: none; }

.wsp-rk {
    flex: 0 0 22px;
    height: 22px;
    line-height: 22px;
    text-align: center;
    border-radius: 7px;
    background: #f2f4f8;
    color: #8b9199;
    font-size: 12px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}
.wsp-rk.rk1 {
    background: linear-gradient(135deg, #ffb020, #ff8a00);
    color: #fff;
    box-shadow: 0 2px 6px rgba(255, 138, 0, .32);
}
.wsp-rk.rk2 { background: linear-gradient(135deg, #b9c3d4, #8e9bb0); color: #fff; }
.wsp-rk.rk3 { background: linear-gradient(135deg, #e0a877, #c98a52); color: #fff; }

.wsp-tc {
    flex: 0 0 64px;
    color: #26292e;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wsp-ti {
    flex: 0 0 54px;
    color: #8b9199;
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wsp-tbar {
    flex: 1;
    min-width: 18px;
    height: 6px;
    border-radius: 3px;
    background: #f2f4f8;
    overflow: hidden;
}
.wsp-tbar i {
    display: block;
    height: 100%;
    border-radius: 3px;
    background: linear-gradient(90deg, #ffa04d, #ff6500);
    transition: width .5s cubic-bezier(.25, .8, .35, 1);
}
.wsp-tv {
    flex: 0 0 96px;
    margin-left: auto;
    text-align: right;
    font-weight: 700;
    color: #ff6500;
    font-variant-numeric: tabular-nums;
}
.wsp-tv i {
    font-style: normal;
    font-size: 10.5px;
    font-weight: 500;
    color: #b6bcc4;
    margin-left: 3px;
}

/* ---------- 最近测速 ---------- */
.wsp-ritem {
    display: flex;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #f4f6f9;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}
.wsp-ritem:last-child { border-bottom: none; }
.wsp-ritem.is-head {
    padding: 5px 0 7px;
    border-bottom: 1px solid #eceff3;
}
.wsp-ritem.is-head span {
    color: #a5abb3;
    font-weight: 500;
    font-size: 12px;
}

.wsp-rt {
    flex: 0 0 84px;
    color: #a5abb3;
    font-size: 12.5px;
}
.wsp-rip {
    flex: 1;
    min-width: 0;
    color: #2b62d9;
    font-family: ui-monospace, Menlo, Consolas, "Courier New", monospace;
    font-size: 12.5px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.wsp-rd {
    flex: 0 0 84px;
    text-align: right;
    color: #ff6500;
    font-weight: 600;
}
.wsp-ru {
    flex: 0 0 84px;
    text-align: right;
    color: #22a06b;
    font-weight: 600;
}
.wsp-rd i,
.wsp-ru i {
    font-style: normal;
    font-size: 10px;
    font-weight: 500;
    color: #c3c9d1;
    margin-left: 2px;
}

/* ============================ 说明区（主题 .resttips 兜底） ============================ */
.wsp-wrap + .resttips { margin-top: 18px; }

/* ============================ 移动端适配 ============================ */
@media screen and (max-width: 560px) {
    .wsp-panel { padding: 20px 14px 18px; border-radius: 16px; }
    .wsp-dial { width: 178px; height: 178px; }
    .wsp-val { font-size: 34px; }
    .wsp-unit { font-size: 12px; }
    .wsp-phase { font-size: 11.5px; margin-top: 8px; max-width: 130px; }
    .wsp-chart-box { height: 100px; margin: 12px 0 16px; }
    .wsp-btn { height: 50px; font-size: 15.5px; }
    .wsp-metrics { gap: 7px; margin-top: 18px; }
    .wsp-metric { padding: 12px 5px 11px; border-radius: 12px; }
    .wsp-m-val b { font-size: 17.5px; }
    .wsp-m-val i { font-size: 10px; }
    .wsp-m-name { font-size: 11.5px; }
    .wsp-detail-sec { padding: 11px 13px 5px; }
    .wsp-row { font-size: 13px; padding: 8px 0; }
    .wsp-history { padding: 15px 14px 8px; }
    .wsp-hitem { font-size: 12.5px; }
    .wsp-htime { flex: 0 0 66px; font-size: 11px; }
    .wsp-hv i { display: none; }

    /* 榜单区 */
    .wsp-board { padding: 15px 13px 9px; border-radius: 16px; }
    .wsp-board-hd h4 { font-size: 13.5px; }
    .wsp-board-sub { font-size: 11.5px; }
    .wsp-top-item { gap: 7px; font-size: 13px; padding: 8px 0; }
    .wsp-rk { flex: 0 0 20px; height: 20px; line-height: 20px; font-size: 11px; border-radius: 6px; }
    .wsp-tc { flex: 0 0 50px; font-size: 13px; }
    .wsp-ti { flex: 0 0 44px; font-size: 11.5px; }
    .wsp-tv { flex: 0 0 80px; font-size: 12.5px; }
    .wsp-tv i { font-size: 10px; margin-left: 2px; }
    .wsp-ritem { font-size: 12.5px; padding: 8px 0; }
    .wsp-ritem.is-head span { font-size: 11.5px; }
    .wsp-rt { flex: 0 0 72px; font-size: 11.5px; }
    .wsp-rip { font-size: 11.5px; }
    .wsp-rd, .wsp-ru { flex: 0 0 66px; font-size: 12.5px; }
}

@media screen and (max-width: 360px) {
    .wsp-dial { width: 158px; height: 158px; }
    .wsp-val { font-size: 30px; }
    .wsp-m-val b { font-size: 16px; }
    .wsp-hv i { display: none; }
    .wsp-tbar { display: none; }
    .wsp-tc { flex: 0 0 58px; }
    .wsp-tv { flex: 0 0 74px; }
    .wsp-rt { flex: 0 0 66px; }
    .wsp-rd, .wsp-ru { flex: 0 0 58px; font-size: 12px; }
    .wsp-rd i, .wsp-ru i, .wsp-tv i { display: none; }
}

/* ============================ 说明区补充 ============================ */