:root{
  --fg:#12161c;
  --muted:#5b6672;
  --line:#e3e7ec;
  --bg:#ffffff;
  --soft:#f6f8fa;
  --accent:#1466d6;
  --accent-soft:#eaf1fc;
  --radius:12px;
  --maxw:820px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--fg);
  font:16px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-text-size-adjust:100%;
  overflow-x:hidden;
}
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:20px 16px 56px;
}
h1{
  font-size:clamp(24px,6vw,34px);
  line-height:1.2;
  margin:4px 0 6px;
  letter-spacing:-.01em;
}
h2{font-size:clamp(19px,4.4vw,23px);margin:34px 0 10px;letter-spacing:-.01em}
h3{font-size:16px;margin:18px 0 6px}
p{margin:10px 0}
ul{margin:10px 0;padding-left:20px}
li{margin:5px 0}
code{
  background:var(--soft);
  border:1px solid var(--line);
  border-radius:5px;
  padding:1px 5px;
  font-size:.92em;
  word-break:break-word;
}
.lede{color:var(--muted);margin:0 0 16px;font-size:15px}
.muted{color:var(--muted);font-size:13.5px}
.hint{color:var(--muted);font-size:12.5px}

/* ---------- tool ---------- */
.tool{margin:0 0 8px}
.dropzone{
  border:2px dashed var(--line);
  border-radius:var(--radius);
  background:var(--soft);
  padding:22px 16px;
  text-align:center;
  transition:border-color .15s,background .15s;
}
.dropzone.over{border-color:var(--accent);background:var(--accent-soft)}
.dz-main{margin:0 0 6px;font-size:16px}
.dz-note{margin:0 0 14px;color:var(--muted);font-size:13px}
.dz-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.btn{
  appearance:none;
  border:1px solid var(--accent);
  background:var(--accent);
  color:#fff;
  font:inherit;
  font-weight:600;
  padding:10px 18px;
  border-radius:9px;
  cursor:pointer;
  min-height:42px;
}
.btn:active{transform:translateY(1px)}
.btn-ghost{background:#fff;color:var(--accent)}
.btn[disabled]{opacity:.5;cursor:default}
.camera{margin-top:14px;text-align:center}
.camera video{
  width:100%;
  max-width:420px;
  border-radius:var(--radius);
  background:#000;
  display:block;
  margin:0 auto 12px;
}
.status{margin:14px 0 0;font-size:14px;min-height:0}
.status.error{color:#b3261e}
.status.ok{color:#0b6b3a}
.stage{margin:16px 0 0}
.stage canvas{
  width:100%;
  height:auto;
  display:block;
  border-radius:var(--radius);
  border:1px solid var(--line);
  background:#000;
}
.stage figcaption{margin-top:8px;color:var(--muted);font-size:12.5px}

/* ---------- results ---------- */
.results{margin-top:20px;border-top:1px solid var(--line);padding-top:18px}
.verdict{
  background:var(--accent-soft);
  border:1px solid #cfe0f8;
  border-radius:var(--radius);
  padding:16px;
}
.verdict-label{font-size:12.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted)}
.shape{font-size:clamp(26px,7vw,36px);font-weight:700;line-height:1.15;margin:2px 0 6px}
.score-line{font-size:14px;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.runner-up{margin-top:6px}
.measures{list-style:none;padding:0;margin:12px 0 8px}
.measures li{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:9px 0;
  border-bottom:1px solid var(--line);
  font-size:15px;
}
.measures .v{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.cols{display:grid;grid-template-columns:1fr;gap:2px 20px}
.copybox{
  width:100%;
  min-height:130px;
  margin-top:14px;
  font:13px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  border:1px solid var(--line);
  border-radius:9px;
  padding:10px;
  resize:vertical;
}

/* ---------- tables / footer ---------- */
.spec{width:100%;border-collapse:collapse;margin:12px 0;font-size:14.5px}
.spec th,.spec td{border:1px solid var(--line);padding:8px 10px;text-align:left}
.spec th{background:var(--soft);font-weight:600}
.foot{margin-top:40px;border-top:1px solid var(--line);padding-top:14px;color:var(--muted);font-size:13px}

@media (min-width:620px){
  .cols{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:420px){
  .btn{width:100%}
  .dz-actions{flex-direction:column}
  .measures li{font-size:14px}
}