:root{
  --bg:#0f1220; --bg2:#161a2e; --panel:#1b2036; --panel2:#232a45;
  --text:#e8ebf5; --muted:#9aa3c4; --line:#2c3352;
  --primary:#5b8cff; --primary2:#3f6fe0;
  --ok:#37d399; --bad:#ff6b6b; --warn:#ffcc66;
  --radius:14px;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  background:radial-gradient(1200px 600px at 50% -10%, #20264a 0%, var(--bg) 55%) fixed;
  color:var(--text);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}
.wrap{max-width:940px;margin:0 auto;padding:0 20px}
a{color:var(--primary)}

/* hero */
.hero{padding:54px 0 30px;text-align:center;border-bottom:1px solid var(--line)}
.logo{font-weight:800;font-size:20px;letter-spacing:.2px;margin-bottom:18px}
.logo span{color:var(--primary)}
.hero h1{font-size:clamp(26px,4.5vw,40px);line-height:1.15;margin:.2em auto;max-width:16ch}
.sub{color:var(--muted);max-width:60ch;margin:14px auto 0;font-size:17px}

/* panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px;margin:26px 0}
.panel h2{margin:.1em 0 .5em}
.warn-panel{border-color:#5a4a1e;background:#241f12}

.steps{margin:0 0 22px;padding-left:20px;color:var(--muted)}
.steps li{margin:.3em 0}
.steps b{color:var(--text)}

/* pick row */
.pickrow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}
.picked{color:var(--muted)} .picked b{color:var(--text)}

/* buttons */
.btn{cursor:pointer;border:1px solid var(--line);background:var(--panel2);color:var(--text);
  padding:11px 18px;border-radius:10px;font-size:15px;font-weight:600;transition:.15s;
  display:inline-flex;align-items:center;gap:8px}
.btn:hover:not(:disabled){transform:translateY(-1px);border-color:var(--primary)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.primary{background:linear-gradient(180deg,var(--primary),var(--primary2));border-color:transparent}
.btn.ghost{background:transparent}

/* status */
.status{margin:20px 0;padding:12px 14px;border-radius:10px;background:var(--bg2);
  border:1px solid var(--line);color:var(--muted);font-size:14.5px}
.status.ok{color:var(--ok);border-color:#1f5a45}
.status.bad{color:var(--bad);border-color:#5a2626}
.status.warn{color:var(--warn);border-color:#5a4a1e}

/* tests */
.tests{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.test{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:18px;display:flex;flex-direction:column}
.test .btn{margin-top:auto}
.test h3{margin:0 0 4px}
.badge{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  background:var(--primary);color:#fff;padding:2px 7px;border-radius:20px;vertical-align:middle}
.custom-cap{width:100%;margin:0 0 12px;padding:9px 10px;border-radius:8px;background:var(--panel);
  color:var(--text);border:1px solid var(--line);font-size:14px}
.test p{color:var(--muted);margin:.2em 0 14px;font-size:14px}
.test label{display:block;color:var(--muted);font-size:13px;margin-bottom:12px}
.test label.check{display:flex;align-items:center;gap:8px}
select{width:100%;margin-top:6px;padding:9px 10px;border-radius:8px;background:var(--panel);
  color:var(--text);border:1px solid var(--line);font-size:14px}
.test .btn{width:100%;justify-content:center}

/* progress */
.progress{margin-top:22px}
.track{height:12px;background:var(--bg2);border:1px solid var(--line);border-radius:20px;overflow:hidden}
.fill{height:100%;width:0;background:linear-gradient(90deg,var(--primary),#7aa2ff);transition:width .2s}
.fill.indeterminate{width:35% !important;animation:slide 1.1s ease-in-out infinite}
@keyframes slide{0%{margin-left:-35%}100%{margin-left:100%}}
.progresstext{color:var(--muted);font-size:14px;margin-top:10px;font-variant-numeric:tabular-nums}
#stopBtn{margin-top:12px}

/* results */
.results{margin-top:20px}
.verdict{font-size:20px;font-weight:800;padding:16px;border-radius:12px;text-align:center;margin-bottom:16px}
.verdict.ok{background:#12352a;color:var(--ok);border:1px solid #1f5a45}
.verdict.bad{background:#3a1a1a;color:var(--bad);border:1px solid #5a2626}
.verdict.warn{background:#2e2712;color:var(--warn);border:1px solid #5a4a1e}

/* spot-check grid (ValiDrive-style) */
.grid{display:grid;grid-template-columns:repeat(24,1fr);gap:3px;margin:4px 0 14px}
@media(max-width:560px){.grid{grid-template-columns:repeat(16,1fr)}}
.cell{width:100%;aspect-ratio:1;border-radius:2px;display:block}
.cell.good{background:var(--ok)}
.cell.bad{background:var(--bad)}
.cell.na{background:#3a4066}
.legend{display:flex;gap:18px;flex-wrap:wrap;color:var(--muted);font-size:13px;margin-bottom:16px}
.legend span{display:flex;align-items:center;gap:6px}
.legend .cell{width:12px;height:12px;aspect-ratio:auto}
.rcard{background:var(--bg2);border:1px solid var(--line);border-radius:12px;padding:8px 18px}
.rcard h3{margin:12px 0 6px}
.rrow{display:flex;justify-content:space-between;padding:10px 0;border-top:1px solid var(--line)}
.rrow:first-of-type{border-top:none}
.rrow span{color:var(--muted)}
.rrow b.big{font-size:20px}
.rrow b.bad{color:var(--bad)}
.rnote{color:var(--muted);font-size:14px;margin-top:12px}
.cleanuprow{margin-top:18px}

/* explainer / faq */
.fineprint{color:var(--muted);font-size:13.5px}
code{background:var(--bg2);padding:2px 6px;border-radius:6px;font-size:13px}
details{border-top:1px solid var(--line);padding:12px 0}
details summary{cursor:pointer;font-weight:600}
details p{color:var(--muted);margin:.6em 0 0}
footer{text-align:center;color:var(--muted);padding:30px 0 50px;font-size:14px}