:root{
  --bg:#0b1020; --card:#121936; --ink:#e9ecff; --muted:#aeb7e6; --accent:#7aa2ff; --good:#3ee48f; --bad:#ff6b6b;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; font-family:system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
  background: radial-gradient(1200px 700px at 70% -10%, #1d2752 0%, var(--bg) 40%, var(--bg) 100%);
  color:var(--ink); display:flex; align-items:center; justify-content:center; padding:24px;
}
.app{width:min(1024px, 100%);}
header{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:16px}
h1{font-size:clamp(20px, 3vw, 32px); margin:0}
.pill{border:1px solid #2a3570; color:var(--muted); padding:6px 10px; border-radius:999px; font-size:12px}

.wrap{display:grid; grid-template-columns: 1.2fr .8fr; gap:16px}
@media (max-width:900px){ .wrap{grid-template-columns:1fr} }

/* SOLO layout when Settings is hidden */
.wrap.solo {
  grid-template-columns: 1fr;
  justify-content: center;
  align-content: start;
}
.wrap.solo > .card {
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

/* Show after Start */
.settings-toggle{ display:none; }

.card{background:linear-gradient(180deg, #12193a 0%, #0f1531 100%); border:1px solid #24307a; border-radius:16px; box-shadow:var(--shadow)}
.card h2{margin:0 0 8px 0; font-size:18px; color:#d7ddff}
.card .head{display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid #2a3570}
.card .body{padding:16px}

.controls{display:grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap:12px}
.controls .row{display:flex; flex-direction:column; gap:6px}
label{font-size:12px; color:var(--muted)}
select, input[type="number"], .btn{background:#0e1533; color:var(--ink); border:1px solid #2a3570; border-radius:10px; padding:10px 12px}
select:focus, input:focus, .btn:focus{outline:2px solid var(--accent); outline-offset:2px}
.btn{cursor:pointer; user-select:none}
.btn.primary{background:linear-gradient(180deg, #1b3fa8, #163684); border-color:#1f47c6}
.btn.ghost{background:transparent}

.stats{display:flex; gap:10px; flex-wrap:wrap}
.stat{padding:8px 10px; border:1px solid #2a3570; border-radius:10px; background:#0e1533; font-size:12px}
.stat strong{font-size:16px; display:block}

.qa{display:grid; gap:10px}
.prompt{font-size:18px; letter-spacing:.3px}
.prompt code{background:#0e1533; padding:4px 8px; border:1px solid #2a3570; border-radius:8px}

.answerRow{display:grid; grid-template-columns: 1fr auto; gap:10px}
input.answer{font-size:18px}
.feedback{min-height:24px; font-size:14px}
.feedback.good{color:var(--good)}
.feedback.bad{color:var(--bad)}

.bits{display:flex; gap:8px; flex-wrap:wrap; padding:8px; border:1px dashed #2a3570; border-radius:12px; background:rgba(18,25,58,.35)}
.bit{display:grid; place-items:center; width:42px; height:54px; border-radius:10px; border:1px solid #2a3570; background:#0e1533; cursor:pointer; position:relative}
.bit.active{background:#1a2a66}
.bit .value{font-weight:700; font-size:20px}
.bit .place{position:absolute; bottom:4px; font-size:10px; color:var(--muted)}

.kbd{font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; background:#0e1533; border:1px solid #2a3570; padding:2px 6px; border-radius:6px}

.foot{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:8px; color:var(--muted); font-size:12px}
.link{color:var(--accent); text-decoration:none}