:root {
  --accent: #0b7dda;
  --bg: #f6f9fc;
  --card: #ffffff;
  --text: #111;
}

* { box-sizing: border-box; }
html,body{ height:100%; margin:0; font-family:system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial; background:var(--bg); color:var(--text); }
main{ max-width:960px; margin:20px auto; padding:18px; background:var(--card); border-radius:10px; box-shadow:0 6px 18px rgba(20,30,40,0.06); }
h1{ margin:0 0 12px 0; font-size:20px; }
#video-section{ position:relative; width:100%; max-height:60vh; background:#000; display:flex; align-items:center; justify-content:center; overflow:hidden; }
video#video{ width:100%; height:auto; max-height:60vh; /* mirror for phone */ }
canvas#overlay{ position:absolute; left:0; top:0; pointer-events:none; }

#controls{ margin-top:12px; }
.row{ display:flex; gap:8px; margin-bottom:8px; flex-wrap:wrap; }
button{ padding:10px 12px; border-radius:8px; border:1px solid rgba(0,0,0,0.06); background:linear-gradient(#fff,#f3f7fb); cursor:pointer; }
button:active{ transform:translateY(1px); }
small{ color:#666; }

#status{ margin-top:6px; color:#333; }

#result{ margin-top:16px; padding:12px; border-radius:8px; background:linear-gradient(#fff,#fcfdff); border:1px solid rgba(0,0,0,0.04); }
#score{ font-size:36px; font-weight:700; color:var(--accent); }
#details{ color:#444; margin-top:6px; }

#manual-correction{ margin-top:10px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
select{ padding:6px; border-radius:6px; }

#history{
  margin-top:16px;
  padding:12px;
  border-radius:8px;
  background:#fff;
  border:1px solid rgba(0,0,0,0.04);
}
.history-controls{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
#history-list{ list-style:none; padding:0; margin:8px 0 0 0; max-height:220px; overflow:auto; }
#history-list li{ padding:8px; border-bottom:1px solid #f0f0f0; font-size:14px; }

footer{ margin-top:14px; color:#666; font-size:13px; }