:root{
  --bg:#071018;--panel:#0c1721;--panel2:#101e2a;--text:#f4f7fb;--muted:#8da0b2;
  --line:rgba(255,255,255,.08);--grid:rgba(255,255,255,.07);--accent:#48e6a1;
  --accent2:#72b8ff;--shadow:0 24px 80px rgba(0,0,0,.35)
}
:root.light{
  --bg:#f3f6f9;--panel:#fff;--panel2:#f7fafc;--text:#10202c;--muted:#647483;
  --line:rgba(16,32,44,.1);--grid:rgba(16,32,44,.08);--accent:#0ca66a;--accent2:#367ed8;
  --shadow:0 20px 60px rgba(25,45,65,.12)
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;min-height:100vh}
.bg{position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 20% 0%,rgba(72,230,161,.09),transparent 30%),radial-gradient(circle at 90% 10%,rgba(114,184,255,.08),transparent 28%)}
.topbar{height:76px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 max(24px,calc((100vw - 1180px)/2));position:relative}
.brand{font-weight:800;letter-spacing:-.04em;font-size:20px}.brand span{color:var(--accent)}.brand-dot{display:inline-block;width:9px;height:9px;background:var(--accent);border-radius:50%;margin-right:9px;box-shadow:0 0 18px var(--accent)}
.top-actions{display:flex;gap:10px;align-items:center}.engine-pill{font-size:12px;padding:8px 12px;border:1px solid var(--line);border-radius:999px;color:var(--muted)}
.icon-btn,.clear-btn{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:9px 12px;cursor:pointer}
.wrap{max-width:1180px;margin:auto;padding:58px 24px 30px;position:relative}.hero{margin-bottom:34px}.eyebrow{font-size:11px;letter-spacing:.18em;color:var(--accent);font-weight:800}.hero h1{font-size:clamp(38px,6vw,68px);line-height:.98;margin:12px 0}.hero p{color:var(--muted);font-size:17px;margin:0}
.dashboard{display:grid;grid-template-columns:1.25fr .75fr;gap:18px}.gauge-card,.stats-card,.panel{background:linear-gradient(145deg,var(--panel),var(--panel2));border:1px solid var(--line);box-shadow:var(--shadow);border-radius:24px}
.gauge-card{min-height:470px;padding:30px;display:flex;flex-direction:column;align-items:center;justify-content:center}.gauge{width:min(100%,430px);position:relative}.gauge svg{width:100%;display:block}.arc-bg,.arc{fill:none;stroke-width:14;stroke-linecap:round}.arc-bg{stroke:var(--line)}.arc{stroke:var(--accent);stroke-dasharray:408;stroke-dashoffset:408;filter:drop-shadow(0 0 10px rgba(72,230,161,.25));transition:stroke-dashoffset .25s ease}
.gauge-center{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);text-align:center}.gauge-value{font-size:64px;font-weight:850;letter-spacing:-.06em}.gauge-unit{font-size:13px;color:var(--muted);margin-top:-5px}.test-status{font-size:16px;margin:4px 0 15px}.start-btn{border:0;background:var(--accent);color:#04140d;font-weight:900;letter-spacing:.08em;padding:15px 30px;border-radius:13px;cursor:pointer;box-shadow:0 10px 30px rgba(72,230,161,.18)}.start-btn:disabled{opacity:.55;cursor:wait}.phase{margin-top:12px;font-size:12px;color:var(--muted)}
.stats-card{padding:20px;display:grid;grid-template-columns:1fr 1fr;gap:10px}.stat{min-height:120px;background:rgba(255,255,255,.025);border:1px solid var(--line);border-radius:17px;padding:17px;display:flex;gap:12px;align-items:flex-start}.stat-icon{font-size:24px;color:var(--accent);line-height:1}.stat small{display:block;color:var(--muted);font-size:9px;letter-spacing:.11em;font-weight:800;margin-bottom:6px}.stat strong{font-size:25px;letter-spacing:-.03em}.stat span{color:var(--muted);font-size:11px;margin-left:5px}
.lower-grid{display:grid;grid-template-columns:1.3fr .7fr;gap:18px;margin-top:18px}.panel{padding:24px;margin-top:18px}.lower-grid .panel{margin-top:0}.panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:15px}.panel h2{font-size:17px;margin:0}.panel p{margin:5px 0 0;color:var(--muted);font-size:12px}.legend{font-size:11px;color:var(--muted)}.legend i{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--accent);margin-right:5px}
#chart{width:100%;height:230px;display:block;margin-top:20px}.info-row{display:flex;justify-content:space-between;gap:20px;padding:16px 0;border-bottom:1px solid var(--line);font-size:13px}.info-row:last-child{border:0}.info-row span{color:var(--muted)}.info-row b{text-align:right}
.history-list{margin-top:15px}.history-row{display:grid;grid-template-columns:1.6fr 1fr 1fr .7fr .9fr;gap:10px;padding:13px 0;border-bottom:1px solid var(--line);font-size:12px}.history-row time{color:var(--muted)}.history-empty{color:var(--muted);font-size:13px;padding-top:18px}.error-box{margin-top:18px;padding:18px;border-radius:16px;border:1px solid rgba(255,100,100,.35);background:rgba(255,60,60,.06);color:#ffb5b5}.error-box pre{white-space:pre-wrap;font:12px ui-monospace,SFMono-Regular,Menlo,monospace;margin:10px 0 0;color:var(--muted)}.hidden{display:none!important}footer{text-align:center;color:var(--muted);font-size:11px;padding:30px 0 5px}
@media(max-width:850px){.dashboard,.lower-grid{grid-template-columns:1fr}.gauge-card{min-height:420px}.stats-card{grid-template-columns:1fr 1fr}.history-row{grid-template-columns:1fr 1fr}.history-row time{grid-column:1/-1}}
@media(max-width:520px){.wrap{padding:40px 14px 20px}.topbar{padding:0 14px}.engine-pill{display:none}.stats-card{grid-template-columns:1fr}.hero h1{font-size:44px}.gauge-value{font-size:52px}.panel,.gauge-card{border-radius:18px}}

.server-control{display:flex;align-items:center;gap:7px}
.server-control label{font-size:9px;letter-spacing:.12em;color:var(--muted);font-weight:800}
.server-control select{appearance:none;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:10px;padding:9px 30px 9px 11px;font-size:11px;max-width:300px;outline:none}
.server-note{margin-top:18px;padding:16px 18px;border-radius:16px;border:1px solid var(--line);background:var(--panel);color:var(--muted);font-size:12px;line-height:1.6}
.server-note b{color:var(--text)}
.server-note label{display:block;margin-top:9px;color:var(--text);cursor:pointer}
.server-note input{accent-color:var(--accent);margin-right:7px}
/* Mobile header: logo and server selector use separate rows. */
@media(max-width:700px){
  .topbar{
    height:auto;
    min-height:112px;
    padding:14px;
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:
      "brand theme"
      "server server";
    gap:12px 10px;
    align-content:center;
  }
  .brand{
    grid-area:brand;
    font-size:20px;
    line-height:1.1;
    white-space:nowrap;
    align-self:center;
  }
  .top-actions{display:contents}
  .server-control{
    grid-area:server;
    width:100%;
  }
  .server-control label{display:none}
  .server-control select{
    width:100%;
    max-width:none;
    min-height:46px;
    padding:11px 38px 11px 14px;
    border-radius:13px;
    font-size:13px;
  }
  .icon-btn{
    grid-area:theme;
    width:46px;
    height:46px;
    padding:0;
    display:flex;
    align-items:center;
    justify-content:center;
    border-radius:13px;
  }
}

@media(max-width:420px){
  .wrap{padding:34px 12px 18px}
  .hero{margin-bottom:24px}
  .hero h1{font-size:42px}
  .hero p{font-size:16px;line-height:1.4}
  .gauge-card{padding:20px 14px;min-height:390px}
  .gauge{width:100%;max-width:360px}
  .gauge-value{font-size:50px}
  .start-btn{width:100%;max-width:300px;padding:14px 18px}
}