:root {
  color-scheme: light dark;
  --bg:#f3f5f7; --card:#fff; --text:#17202a; --muted:#66717d; --line:#d8dee4;
  --accent:#2563eb; --accent-soft:#eff6ff; --ok:#15803d; --ok-bg:#f0fdf4;
  --ng:#b91c1c; --ng-bg:#fef2f2; --warn:#a16207; --warn-bg:#fefce8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#111827; --card:#1f2937; --text:#f3f4f6; --muted:#9ca3af; --line:#374151;
    --accent:#60a5fa; --accent-soft:#172554; --ok:#4ade80; --ok-bg:#14301f;
    --ng:#f87171; --ng-bg:#3b1717; --warn:#facc15; --warn-bg:#332d12;
  }
}
* { box-sizing:border-box; }
body {
  margin:0; background:var(--bg); color:var(--text);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif;
}
main { width:min(980px,calc(100% - 28px)); margin:28px auto 60px; }
h1 { font-size:22px; margin:0; }
h2 { font-size:19px; margin:0 0 14px; }
p { line-height:1.65; }
code { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; }
.topbar,.section-head,.quiz-meta {
  display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;
}
.topbar { margin-bottom:16px; }
.section-head { margin-bottom:12px; }
.section-head h2 { margin:0; }
.userbar { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.card {
  background:var(--card); border:1px solid var(--line); border-radius:14px;
  padding:22px; box-shadow:0 6px 22px rgba(0,0,0,.06);
}
.list-card { margin-top:16px; }
.auth-card { max-width:680px; margin:70px auto 0; }
button,input { font:inherit; }
button {
  border:1px solid var(--line); border-radius:9px; padding:10px 16px;
  background:var(--card); color:var(--text); cursor:pointer;
}
button.primary {
  background:var(--accent); color:white; border-color:var(--accent); font-weight:700;
}
button:disabled { opacity:.45; cursor:default; }
button.wide { width:100%; }
input[type=email],input[type=number] {
  padding:10px 12px; border:1px solid var(--line); border-radius:9px;
  background:var(--card); color:var(--text);
}
input[type=number] { width:100%; }
.hidden { display:none !important; }
.small { font-size:13px; color:var(--muted); }
.status { min-height:1.4em; margin-bottom:0; }
.field-label { display:block; font-size:13px; color:var(--muted); margin-bottom:6px; }
.email-row { display:grid; grid-template-columns:1fr auto; gap:10px; }
.divider {
  display:flex; align-items:center; gap:10px; color:var(--muted); margin:18px 0; font-size:13px;
}
.divider::before,.divider::after { content:""; height:1px; flex:1; background:var(--line); }
.start-grid {
  display:grid; grid-template-columns:minmax(160px,220px) auto; gap:12px;
  align-items:end; margin-top:14px;
}
.checkbox-row { display:flex; align-items:center; gap:8px; margin:12px 0 10px; font-size:14px; }
.checkbox-row input { transform:scale(1.1); }
.migration {
  margin-top:14px; padding:12px; border:1px solid var(--line); border-radius:10px;
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  background:var(--accent-soft);
}
.question-list { display:grid; gap:8px; }
.question-row {
  display:grid; grid-template-columns:140px 1fr auto; gap:12px; align-items:center;
  border:1px solid var(--line); border-radius:10px; padding:11px 12px;
}
.question-label { display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.mastered-badge {
  display:inline-block; padding:3px 7px; border-radius:999px; font-size:12px; font-weight:700;
  color:var(--ok); background:var(--ok-bg); border:1px solid var(--ok);
}
.question-row .intro,.summary-row .intro {
  overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0;
}
.history { display:flex; gap:4px; }
.hist {
  width:24px; height:24px; border-radius:50%; border:1px solid var(--line);
  display:grid; place-items:center; font-weight:800; font-size:12px;
}
.hist.ok { color:var(--ok); background:var(--ok-bg); }
.hist.ng { color:var(--ng); background:var(--ng-bg); }
.hist.empty { color:var(--muted); }
.question {
  white-space:pre-line; font-size:18px; line-height:1.7; font-weight:650;
  margin:18px 0 16px;
}
.hint { color:var(--muted); font-size:13px; margin:-8px 0 14px; }
.options { display:grid; gap:10px; }
.option {
  display:flex; gap:12px; align-items:flex-start; padding:13px 14px;
  border:1px solid var(--line); border-radius:10px; cursor:pointer; line-height:1.55;
}
.option:hover { background:var(--accent-soft); }
.option input { margin-top:4px; transform:scale(1.15); }
.option.correct { border-color:var(--ok); background:var(--ok-bg); }
.option.wrong { border-color:var(--ng); background:var(--ng-bg); }
.option-key { font-weight:800; min-width:20px; }
.actions { display:flex; gap:10px; margin-top:20px; flex-wrap:wrap; }
.result {
  margin-top:16px; padding:12px 14px; border-radius:10px; display:none; font-weight:700;
}
.result.ok { display:block; color:var(--ok); background:var(--ok-bg); }
.result.ng { display:block; color:var(--ng); background:var(--ng-bg); }
.summary-score { font-size:34px; font-weight:800; margin:8px 0 2px; }
.summary-list { display:grid; gap:8px; margin-top:18px; }
.summary-row {
  display:grid; grid-template-columns:72px 1fr 48px; gap:12px; align-items:center;
  border:1px solid var(--line); border-radius:10px; padding:11px 12px;
}
.summary-result { font-size:20px; font-weight:900; text-align:center; }
.summary-result.ok { color:var(--ok); }
.summary-result.ng { color:var(--ng); }

@media (max-width:650px) {
  main { width:min(100% - 18px,980px); margin-top:12px; }
  .card { padding:17px; }
  .auth-card { margin-top:20px; }
  .start-grid,.email-row { grid-template-columns:1fr; }
  .question-row { grid-template-columns:1fr; gap:7px; }
  .question-row .history { justify-self:start; }
  .summary-row { grid-template-columns:56px 1fr; }
  .summary-result { grid-column:2; justify-self:start; }
  .question { font-size:16px; }
  .wide-on-mobile { width:100%; }
}