:root{
  --bg:#0b0f14;
  --card:#121a24;
  --text:#e8eef6;
  --muted:#a6b3c2;
  --line:#223042;
  --good:#1fbb6c;
  --bad:#ff5a5f;
  --btn:#2a3a52;
  --btn2:#1a2636;
  --focus:#78a6ff;
}
*{box-sizing:border-box}
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background:linear-gradient(180deg, var(--bg), #070a0d);
  color:var(--text);
}
.wrap{max-width:1100px;margin:0 auto;padding:18px}
h1{margin:0 0 6px 0;font-size:24px}
.sub{margin:0;color:var(--muted)}
.grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px}
.card{
  background:rgba(18,26,36,.95);
  border:1px solid var(--line);
  border-radius:16px;
  padding:14px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
h2{margin:0 0 10px 0;font-size:18px}
h3{margin:14px 0 8px 0;font-size:14px;color:var(--muted)}
.row{display:flex;gap:10px;align-items:center;margin:10px 0}
label{color:var(--muted);font-size:13px}
select,input[type="text"]{
  width:100%;
  background:#0d141d;
  border:1px solid var(--line);
  color:var(--text);
  padding:10px 10px;
  border-radius:12px;
  outline:none;
}
select:focus,input:focus{border-color:var(--focus)}
button{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--line);
  background:var(--btn);
  color:var(--text);
  font-weight:600;
  cursor:pointer;
}
button:disabled{opacity:.45;cursor:not-allowed}
button.ghost{background:transparent}
.controls{display:flex;gap:10px;margin:10px 0}
.controls button{width:33.33%}
.pill{
  display:inline-flex;gap:8px;align-items:center;
  padding:8px 10px;border:1px solid var(--line);
  border-radius:999px;background:var(--btn2);color:var(--text);
  font-size:13px;
}
.status{
  padding:10px;border-radius:12px;background:#0d141d;border:1px dashed var(--line);
  color:var(--muted);min-height:42px
}
.feedback{min-height:58px;padding:10px;border-radius:12px;border:1px solid var(--line);background:#0d141d}
.feedback .good{color:var(--good);font-weight:700}
.feedback .bad{color:var(--bad);font-weight:700}
.scoreline{display:flex;gap:14px;flex-wrap:wrap}
.scoreline .k{color:var(--muted);font-size:12px;margin-right:6px}
.small{color:var(--muted);font-size:12px;line-height:1.45}
.hint{color:var(--muted);font-size:12px;margin-top:10px}
.history{
  max-height:220px;overflow:auto;border:1px solid var(--line);
  border-radius:12px;padding:10px;background:#0d141d
}
.history .item{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px solid rgba(34,48,66,.45)}
.history .item:last-child{border-bottom:none}
.footer{color:var(--muted);font-size:12px}
@media (max-width: 980px){
  .grid{grid-template-columns:1fr}
  .controls button{width:100%}
  .controls{flex-direction:column}
}