/* ==========================================================================
   WebTools HUB — Internet Speed Test (speedometer redesign)
   ========================================================================== */
.ist-wrap{width:100%;max-width:760px;margin:0 auto;padding:0 16px 40px}
.ist-wrap *{box-sizing:border-box}
.ist-card{
  position:relative;padding:26px;border-radius:32px;overflow:hidden;
  background:var(--glass-bg);border:1px solid var(--glass-border);
  box-shadow:0 40px 90px -40px var(--shadow-strong);
  backdrop-filter:blur(26px) saturate(150%);-webkit-backdrop-filter:blur(26px) saturate(150%);
}
.ist-head{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:6px}
.ist-head h2{font-size:clamp(20px,3.6vw,26px);font-weight:900;letter-spacing:-.6px;color:var(--text-main);margin:0}
.ist-server{display:inline-flex;align-items:center;gap:8px;padding:6px 12px;border-radius:999px;background:var(--recess-bg);font-size:12px;font-weight:700;color:var(--text-dim)}
.ist-server i{color:var(--gt-green);font-size:8px}

/* stepper */
.ist-steps{display:flex;justify-content:center;gap:8px;margin:10px 0 0}
.ist-step{
  display:flex;align-items:center;gap:7px;padding:7px 14px;border-radius:999px;font-size:12px;font-weight:800;letter-spacing:.8px;
  text-transform:uppercase;color:var(--text-faint);background:var(--recess-bg-soft);border:1px solid var(--glass-border);transition:.3s
}
.ist-step.active{color:#fff;background:linear-gradient(135deg,#0071e3,#00b4ff);border-color:transparent;box-shadow:0 8px 20px -8px rgba(0,113,227,.8)}
.ist-step.up.active{background:linear-gradient(135deg,#16a34a,#21cf81);box-shadow:0 8px 20px -8px rgba(33,207,129,.8)}
.ist-step.done{color:var(--gt-green);border-color:rgba(33,207,129,.4)}

/* gauge */
.ist-gauge{position:relative;width:100%;max-width:440px;margin:0 auto}
.ist-gauge svg{display:block;width:100%;height:auto;overflow:visible}
.g-track{fill:none;stroke:var(--recess-bg);stroke-width:16;stroke-linecap:round}
.g-prog{fill:none;stroke-width:16;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;transition:stroke-dashoffset .35s cubic-bezier(.2,.8,.2,1)}
.g-tick{stroke:var(--text-faint);stroke-width:2;stroke-linecap:round}
.g-lbl{fill:var(--text-faint);font-size:11px;font-weight:700;text-anchor:middle;dominant-baseline:middle;font-family:inherit}
#g-needle{transform-origin:160px 150px;transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.g-needle-body{fill:var(--text-main)}
.g-hub{fill:var(--bg-dark);stroke:var(--text-main);stroke-width:4}
#g-num{fill:var(--text-main);font-size:44px;font-weight:900;text-anchor:middle;letter-spacing:-2px;font-family:inherit}
#g-unit{fill:var(--apple-blue);font-size:13px;font-weight:800;text-anchor:middle;letter-spacing:2px;text-transform:uppercase;font-family:inherit}
.ist-state{margin:2px 0 0;text-align:center;font-size:12px;font-weight:800;letter-spacing:1.4px;text-transform:uppercase;color:var(--text-dim);min-height:18px}
.ist-state.ok{color:var(--gt-green)}.ist-state.err{color:var(--gt-red)}

/* button */
.ist-go{display:flex;justify-content:center;margin:16px 0 22px}
#start-test-btn{
  min-width:220px;padding:17px 40px;border:0;border-radius:999px;cursor:pointer;color:#fff;font-size:15px;font-weight:900;letter-spacing:1.2px;font-family:inherit;
  background:linear-gradient(135deg,#0071e3,#00b4ff);box-shadow:0 18px 36px -14px rgba(0,113,227,.85);transition:.25s
}
#start-test-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 22px 40px -14px rgba(0,113,227,.95)}
#start-test-btn:disabled{opacity:.8;cursor:not-allowed}

/* metrics */
.ist-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.ist-m{padding:16px 12px;border-radius:20px;text-align:center;background:var(--recess-bg-soft);border:1px solid var(--glass-border)}
.ist-m .lbl{display:flex;align-items:center;justify-content:center;gap:6px;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:800;color:var(--text-faint)}
.ist-m .val{margin-top:8px;font-size:clamp(22px,4vw,30px);font-weight:900;letter-spacing:-1px;color:var(--text-main);line-height:1}
.ist-m .val small{font-size:11px;font-weight:700;letter-spacing:0;color:var(--text-dim);margin-left:3px}
.ist-m.dl .lbl{color:var(--apple-blue)}.ist-m.ul .lbl{color:var(--gt-green)}.ist-m.pg .lbl{color:var(--gt-orange)}.ist-m.jt .lbl{color:#a855f7}

/* info */
.ist-info{border-radius:20px;border:1px solid var(--glass-border);background:var(--recess-bg-soft);overflow:hidden}
.ist-row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:13px 16px;border-bottom:1px solid var(--glass-border);font-size:14px}
.ist-row:last-child{border-bottom:0}
.ist-row span{color:var(--text-dim);display:flex;align-items:center;gap:9px;flex:none}
.ist-row span i{width:16px;text-align:center;color:var(--apple-blue)}
.ist-row b{color:var(--text-main);text-align:right;min-width:0;word-break:break-word}
.ist-row button{background:none;border:0;padding:0;margin-left:8px;color:var(--apple-blue);font-weight:700;font-size:12px;cursor:pointer;font-family:inherit}

/* capabilities */
.ist-cap{display:none;margin-top:16px}
.ist-cap h3,.ist-hist h3{font-size:12px;letter-spacing:1.4px;text-transform:uppercase;font-weight:800;color:var(--text-faint);margin:0 0 10px}
.ist-chips{display:flex;flex-wrap:wrap;gap:8px}
.ist-chip{display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;font-size:13px;font-weight:700;border:1px solid var(--glass-border);background:var(--recess-bg-soft);color:var(--text-dim)}
.ist-chip.ok{color:var(--text-main);border-color:rgba(33,207,129,.45);background:rgba(33,207,129,.1)}
.ist-chip.ok i{color:var(--gt-green)}
.ist-chip.no i{color:var(--text-faint)}

.ist-hist{display:none;margin-top:18px}
.ist-hist-row{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:8px;padding:10px 4px;border-bottom:1px solid var(--glass-border);font-size:13px;color:var(--text-dim)}
.ist-hist-row b{color:var(--text-main)}
.ist-hist-row:last-child{border-bottom:0}
.ist-note{margin-top:14px;text-align:center;font-size:12px;color:var(--text-faint)}

@media (max-width:640px){
  .ist-wrap{padding:0 12px 30px}
  .ist-card{padding:18px 14px;border-radius:26px}
  .ist-metrics{grid-template-columns:repeat(2,1fr)}
  #start-test-btn{width:100%}
  .ist-step{padding:6px 10px;font-size:11px}
  .ist-row{flex-direction:column;align-items:flex-start;gap:4px}
  .ist-row b{text-align:left}
}