:root{
  --bg:#0b0d10;
  --fg:#e8edf2;
  --muted:#a6b0bb;
  --accent:#7cc2ff;
  --ok:#42c78a;
  --bad:#ff6b6b;
  --card:#141922;
  --ghost:#232a36;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
}
.app{ max-width:980px; margin:40px auto; padding:20px; }
header h1{ margin:0 0 6px 0; font-weight:700; letter-spacing:.2px; }
.sub{ color:var(--muted); margin-top:0; }
.statusbar{
  display:flex; gap:16px; flex-wrap:wrap; align-items:stretch; margin:18px 0 8px;
}
.key-box, .progress-box{
  background:var(--card); border-radius:14px; padding:14px 16px; flex:1; min-width:260px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.key-name{ font-size:28px; font-weight:800; margin-top:6px; color:var(--accent); }
.progress-box .grid{ display:grid; grid-template-columns:repeat(5, 1fr); gap:6px; margin-top:10px; }
.badge{
  background:var(--ghost); border-radius:10px; padding:8px; text-align:center; font-size:13px; color:var(--muted);
}
.badge .k{ display:block; font-weight:700; color:var(--fg); }
.badge.passed{ outline:2px solid var(--ok); }
.badge .c{ font-variant-numeric:tabular-nums; }
.input-area{ display:flex; gap:10px; margin:14px 0 6px; }
input#answer{
  flex:1; padding:14px 16px; border-radius:12px; border:1px solid #2a3241; background:#0f141c; color:var(--fg);
  font-size:16px; outline:none;
}
button{
  padding:12px 16px; border-radius:12px; border:0; font-weight:700; cursor:pointer;
  background:var(--accent); color:#051018;
}
button.ghost{ background:transparent; color:var(--muted); border:1px solid #2a3241; }
.feedback{ min-height:28px; margin-top:8px; font-weight:700; }
.feedback.ok{ color:var(--ok); }
.feedback.bad{ color:var(--bad); }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); border:0;
}
.pad{
  background:var(--card); border-radius:14px; padding:12px; margin-top:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.row{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0; }
.note-btn{
  background:#182032; color:var(--fg); border:1px solid #2a3241;
  border-radius:10px; padding:10px 12px; min-width:54px; text-align:center; font-weight:700;
}
.note-btn:hover{ outline:2px solid #31405a; }
.tools .control{ background:#243049; color:var(--fg); border:1px solid #2a3241; }