:root {
  --bg: #0e1116;
  --card: #171b22;
  --text: #e8eef6;
  --muted: #a8b3c7;
  --accent: #5aa9ff;
  --good: #2ecc71;
  --bad: #ff5a7a;
  --border: #273043;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif; }

.app-header {
  display: grid; gap: 12px; padding: 16px; border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, #121720, #0e1116);
}
.app-header h1 { margin: 0; font-size: 1.4rem; }
.selectors { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
label { display: flex; gap: 6px; align-items: center; font-size: 0.95rem; color: var(--muted); }
select, button {
  background: var(--card); color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px 10px;
}
button:hover { border-color: var(--accent); cursor: pointer; }

.app-main { display: grid; gap: 16px; padding: 16px; max-width: 900px; margin: 0 auto; }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 16px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.25);
}
#status-bar { color: var(--muted); }

.controls { display: flex; gap: 10px; margin-top: 16px; }
.controls button { flex: 0 0 auto; }

.question {
  display: grid; gap: 12px;
}
.question h2 {
  margin: 0; font-size: 1.1rem;
}
.question .meta {
  color: var(--muted); font-size: 0.9rem;
}
.options { display: grid; gap: 8px; margin-top: 6px; }
.option {
  display: grid; grid-template-columns: 24px 1fr; align-items: start; gap: 8px;
  padding: 8px; border-radius: 8px; border: 1px solid var(--border);
}
.option.correct { border-color: var(--good); background: rgba(46, 204, 113, 0.08); }
.option.incorrect { border-color: var(--bad); background: rgba(255, 90, 122, 0.08); }

.fillin {
  display: grid; gap: 8px; margin-top: 6px;
}
.fillin input {
  background: #0d1015; color: var(--text); border: 1px solid var(--border);
  border-radius: 8px; padding: 8px; width: 100%;
}

.feedback { margin-top: 12px; min-height: 1.2em; }
.feedback .ok { color: var(--good); }
.feedback .no { color: var(--bad); }
.feedback .explain { color: var(--muted); margin-top: 6px; }

.app-footer { padding: 16px; border-top: 1px solid var(--border); color: var(--muted); }
#session-info { color: var(--muted); font-size: 0.9rem; }
#results-log { color: var(--muted); max-height: 220px; overflow: auto; }