/* UpnixTools Speed Test — speedtest.upnixtools.com (v2: Ookla-style needle meter, light theme) */
*{box-sizing:border-box}
:root{
  --ink:#0f172a; --muted:#64748b; --line:#e2e8f0; --surface:#ffffff; --bg:#f8fafc;
  --green:#16a34a; --green2:#22c55e; --cyan:#0899c9;
}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  font-size:16px;line-height:1.6}
a{color:var(--cyan);text-decoration:none}
a:hover{text-decoration:underline}
.st-wrap{max-width:960px;margin:0 auto;padding:0 20px}
.grad{background:linear-gradient(90deg,#16a34a,#0899c9);-webkit-background-clip:text;background-clip:text;color:transparent}

/* top bar */
.st-top{background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.st-top-in{display:flex;align-items:center;justify-content:space-between;gap:16px;height:60px}
.st-logo{font-size:1.25rem;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.st-logo span{color:var(--green)}
.st-logo:hover{text-decoration:none}
.st-nav{display:flex;gap:20px;font-size:.92rem}
.st-nav a{color:var(--muted)}
.st-nav a:hover{color:var(--ink);text-decoration:none}
@media(max-width:640px){.st-nav a:not(:first-child){display:none}}

/* hero */
.st-hero{padding:44px 0 8px;text-align:center}
.st-hero h1{font-size:clamp(2rem,5vw,2.9rem);line-height:1.15;margin:0 0 10px;letter-spacing:-.02em}
.st-sub{color:var(--muted);max-width:640px;margin:0 auto 28px;font-size:1.05rem}

/* test card */
.st-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;
  padding:30px 28px 26px;box-shadow:0 10px 34px rgba(15,23,42,.07);text-align:center}

/* phase tabs (DOWNLOAD / UPLOAD) */
.st-tabs{display:flex;justify-content:center;gap:34px;flex-wrap:wrap}
.st-tab{color:#94a3b8;font-weight:700;font-size:.86rem;letter-spacing:.08em}
.st-tab i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#cbd5e1;margin-right:7px;vertical-align:1px}
.st-tab b{color:var(--ink);font-variant-numeric:tabular-nums}
.st-tab small{color:#94a3b8;font-weight:600;letter-spacing:0}
.st-tab.active{color:var(--ink)}
.st-tab.active i{background:var(--green2);box-shadow:0 0 0 4px rgba(34,197,94,.18)}

/* ping / jitter row */
.st-pingrow{display:flex;justify-content:center;gap:10px;color:var(--muted);font-size:.92rem;margin:8px 0 4px}
.st-pingrow b{color:var(--ink);font-variant-numeric:tabular-nums}
.st-pingrow .st-sep{color:#cbd5e1}

/* needle gauge */
.st-gauge-wrap{position:relative;width:320px;height:230px;margin:6px auto 0}
.st-gauge-wrap.idle{cursor:pointer}
.st-gauge{display:block}
.st-track{fill:none;stroke:#e8eef4;stroke-width:14;stroke-linecap:round}
.st-arc{fill:none;stroke:url(#stGrad);stroke-width:14;stroke-linecap:round;
  stroke-dasharray:481.3;stroke-dashoffset:481.3;transition:stroke-dashoffset .3s linear}
.st-spin{fill:none;stroke:var(--green2);stroke-width:4;stroke-linecap:round;
  stroke-dasharray:130 351.3;display:none;
  transform-box:view-box;transform-origin:160px 140px;animation:stspin 1s linear infinite}
.st-gauge-wrap.connecting .st-spin{display:block}
@keyframes stspin{to{transform:rotate(360deg)}}
.st-tick{stroke:#cbd5e1;stroke-width:2;stroke-linecap:round}
.st-ticklbl{fill:#94a3b8;font-size:11px;font-weight:600;text-anchor:middle;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
.st-needle{transform-box:view-box;transform-origin:160px 140px;transition:transform .3s ease-out}
.st-needle polygon{fill:#0f172a}
.st-needle circle:first-of-type{fill:#0f172a}
.st-needle circle:last-of-type{fill:#fff}
.st-gauge-c{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;padding-top:120px;pointer-events:none}
.st-speed{font-size:2.6rem;font-weight:800;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:10px 14px 8px;
  box-shadow:0 2px 12px rgba(15,23,42,.08);
  display:flex;flex-direction:column;align-items:center;gap:2px}
.st-speed .st-unit{font-size:.85rem;font-weight:600;color:var(--muted);margin-left:0}
.st-speed.small{font-size:1.35rem;font-weight:700;letter-spacing:0}
.st-gauge-sub{font-size:.9rem;color:var(--muted);margin-top:10px}

/* pulsing rings (idle only, like the GO screen) */
.st-ring{position:absolute;left:50%;top:61%;width:300px;height:300px;margin:-150px 0 0 -150px;
  border:2px solid rgba(34,197,94,.45);border-radius:50%;display:none;pointer-events:none}
.st-gauge-wrap.idle .st-ring{display:block;animation:ringpulse 2.4s ease-out infinite}
.st-gauge-wrap.idle .r2{animation-delay:1.2s}
@keyframes ringpulse{0%{transform:scale(.78);opacity:.7}100%{transform:scale(1.16);opacity:0}}

.st-controls{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;justify-content:center;margin-top:22px}
.st-server{display:flex;flex-direction:column;align-items:flex-start;gap:6px;text-align:left}
.st-server span{font-size:.82rem;font-weight:600;color:var(--ink)}
.st-server select{font:inherit;font-size:.95rem;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:11px 12px;min-width:210px;cursor:pointer}
.st-server select:focus{outline:2px solid var(--cyan);outline-offset:2px}
.st-btn{font:inherit;font-weight:700;border:0;border-radius:12px;cursor:pointer;padding:13px 30px;font-size:1rem;
  transition:transform .15s,box-shadow .15s}
.st-btn:hover{transform:translateY(-1px)}
.st-btn:active{transform:translateY(0)}
.st-start{background:linear-gradient(135deg,var(--green2),var(--green));color:#fff;
  box-shadow:0 8px 20px rgba(34,197,94,.35);min-width:180px}
.st-start:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none}
.st-abort{background:#fff;border:1px solid var(--line);color:var(--ink)}
.st-abort:hover{border-color:#ef4444;color:#ef4444}

.st-meta{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center;
  margin-top:18px;font-size:.86rem;color:var(--muted)}
.st-meta .st-dot{color:#cbd5e1}
.st-copy{font:inherit;font-size:.86rem;color:var(--cyan);background:none;border:0;cursor:pointer;padding:0}
.st-copy:hover{text-decoration:underline}
.st-err{margin-top:16px;background:#fef2f2;border:1px solid #fecaca;color:#b91c1c;
  border-radius:10px;padding:12px 16px;font-size:.92rem;text-align:left}

/* content sections */
.st-section{padding:40px 0 8px}
.st-section h2{font-size:1.5rem;letter-spacing:-.01em;margin:0 0 18px}
.st-section h2:not(:first-child){margin-top:38px}
.st-4col{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.st-mini{border:1px solid var(--line);border-radius:14px;padding:18px;background:var(--surface)}
.st-mini h3{margin:0 0 8px;font-size:1rem}
.st-mini p{margin:0;font-size:.92rem;color:var(--muted)}
.st-mini p b{color:var(--ink)}
@media(max-width:720px){.st-4col{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.st-4col{grid-template-columns:1fr}}
.st-table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.st-table{width:100%;border-collapse:collapse;font-size:.95rem}
.st-table th,.st-table td{padding:12px 16px;text-align:left;border-bottom:1px solid var(--line)}
.st-table thead th{background:#f8fafc;font-size:.82rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.st-table tbody tr:last-child td{border-bottom:0}
.st-tips{margin:0;padding-left:20px;color:var(--muted)}
.st-tips li{margin-bottom:8px}
.st-tips li::marker{color:var(--green)}
.st-faq details{border:1px solid var(--line);border-radius:12px;background:var(--surface);margin-bottom:10px;padding:14px 18px}
.st-faq summary{font-weight:700;cursor:pointer;list-style:none}
.st-faq summary::-webkit-details-marker{display:none}
.st-faq summary::after{content:"+";float:right;color:var(--green);font-size:1.2rem;line-height:1}
.st-faq details[open ] summary::after{content:"–"}
.st-faq-a{color:var(--muted);margin-top:10px;font-size:.95rem}

/* footer */
.st-foot{border-top:1px solid var(--line);margin-top:48px;padding:26px 0 34px;text-align:center;
  font-size:.88rem;color:var(--muted)}
.st-foot a{color:var(--muted)}