:root {
  --bg: #0D0D2B;
  --bg-card: #141438;
  --text: #E0E0FF;
  --text-sec: #8888BB;
  --text-muted: #4444777;
  --cyan: #00F5FF;
  --red: #FF6B6B;
  --green: #00E676;
  --amber: #FFD54F;
  --border: rgba(0,245,255,0.06);
  --radius: 12px;
  --font: 'Inter',system-ui,sans-serif;
  --glow: 0 0 20px rgba(0,245,255,0.2);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh}

.header{display:flex;align-items:center;justify-content:space-between;padding:8px 14px;background:var(--bg-card);border-bottom:1px solid var(--border)}
.header h1{font-size:.9rem;font-weight:700;color:var(--cyan)}
.header-right{display:flex;align-items:center;gap:8px}
.conn-type{font-size:.6rem;padding:2px 6px;border-radius:4px;background:rgba(0,245,255,.08);color:var(--cyan)}

.btn{padding:4px 10px;border:1px solid var(--border);border-radius:6px;background:transparent;color:var(--text-sec);font-family:var(--font);font-size:.68rem;cursor:pointer;transition:.2s}
.btn:hover{border-color:var(--cyan);color:var(--cyan)}

.app{max-width:600px;margin:0 auto;padding:12px}

/* Gauge */
.gauge-section{text-align:center;margin-bottom:16px}
.gauge-wrap{position:relative;display:inline-block}
canvas#gauge{width:200px;height:200px}
.gauge-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}
.gauge-value{font-size:2.2rem;font-weight:800;color:var(--cyan);text-shadow:var(--glow);line-height:1}
.gauge-unit{font-size:.62rem;color:var(--text-sec);margin-top:2px}
.gauge-label{font-size:.58rem;color:var(--text-muted);margin-top:4px;text-transform:uppercase;letter-spacing:.05em}

.btn-start{margin-top:12px;padding:10px 40px;border:2px solid var(--cyan);border-radius:30px;background:transparent;color:var(--cyan);font-family:var(--font);font-size:.82rem;font-weight:700;letter-spacing:.06em;cursor:pointer;transition:.3s;box-shadow:var(--glow)}
.btn-start:hover{background:var(--cyan);color:var(--bg);box-shadow:0 0 30px rgba(0,245,255,0.4)}
.btn-start.testing{border-color:var(--red);color:var(--red);box-shadow:none;pointer-events:none}

/* Results */
.results-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-bottom:10px}
.result-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:10px;text-align:center}
.result-icon{font-size:1.2rem;margin-bottom:4px}
.result-val{font-size:1.1rem;font-weight:700;color:var(--cyan)}
.result-label{font-size:.56rem;color:var(--text-sec);margin-top:2px;text-transform:uppercase}

.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:10px;margin-bottom:8px}
.card h2{font-size:.62rem;color:var(--text-muted);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}

canvas#progress-chart{width:100%;height:120px}

/* History */
.hist-item{display:flex;align-items:center;justify-content:space-between;padding:4px 0;border-bottom:1px solid var(--border);font-size:.68rem}
.hist-item:last-child{border-bottom:none}
.hist-time{color:var(--text-muted);font-size:.58rem}
.hist-vals{display:flex;gap:10px}
.hist-dl{color:var(--cyan)}
.hist-ul{color:var(--green)}
.hist-ping{color:var(--amber)}

@media(max-width:480px){
  .results-grid{grid-template-columns:repeat(2,1fr)}
}