:root {
  --bg: #0d1117;
  --card: #161b22;
  --card2: #1c232c;
  --border: #30363d;
  --text: #e6edf3;
  --muted: #8b949e;
  --primary: #1f6feb;
  --primary-d: #1858c4;
  --correct: #2ea043;
  --wrong: #da3633;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Yu Gothic", sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
}
.app { max-width: 640px; margin: 0 auto; padding: 20px 16px 48px; min-height: 100vh; }
.hidden { display: none !important; }

h1 { font-size: 1.5rem; line-height: 1.35; margin: 8px 0 4px; }
h2 { font-size: 1.25rem; margin: 0 0 12px; }
.sub { color: var(--muted); margin: 0 0 24px; font-size: .95rem; }

.field { display: block; margin-bottom: 16px; }
.field span { display: block; font-size: .85rem; color: var(--muted); margin-bottom: 6px; }
input[type=email], input[type=password] {
  width: 100%; padding: 12px; font-size: 1rem;
  background: var(--card); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
}
.btn {
  display: block; width: 100%; padding: 14px; font-size: 1.05rem; font-weight: 600;
  border: 1px solid var(--border); border-radius: 12px;
  background: var(--card); color: var(--text); cursor: pointer; margin-top: 10px;
}
.btn.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn.primary:active { background: var(--primary-d); }
.btn:disabled { opacity: .5; cursor: default; }

.link { color: #58a6ff; background: none; border: none; cursor: pointer; font-size: .9rem; padding: 0; }
.msg { margin: 14px 0 0; font-size: .9rem; min-height: 1.2em; }
.msg.error { color: var(--wrong); }
.msg.ok { color: var(--correct); }

.topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; }
.topbar .user { color: var(--muted); font-size: .85rem; }
.card {
  background: var(--card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; margin-bottom: 14px;
}
.card h3 { margin: 0 0 6px; font-size: 1.05rem; }
.card p { margin: 0; color: var(--muted); font-size: .9rem; }
.badge { display: inline-block; background: #388bfd1a; color: #58a6ff; border-radius: 99px; padding: 2px 10px; font-size: .75rem; margin-left: 8px; }
.tag { display:inline-block; background:#388bfd1a; color:#58a6ff; border-radius:99px; padding:3px 10px; font-size:.72rem; }
.tag.b { background:#a371f71a; color:#bc8cff; }

select { width:100%; padding:12px; font-size:1rem; background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:10px; }
.row { display:flex; gap:10px; }
.row > * { flex:1; }
.muted { color:var(--muted); }
.center { text-align:center; }

/* 出題（練習・本番共通） */
.quiz-head { margin-bottom:16px; }
.progress { height:6px; background:var(--card); border-radius:99px; overflow:hidden; }
.progress-bar { height:100%; width:0; background:var(--primary); transition:width .3s ease; }
.meta { display:flex; justify-content:space-between; align-items:center; margin-top:10px; font-size:.82rem; color:var(--muted); }
.scenario { background:var(--card2); border:1px solid var(--border); border-left:4px solid #bc8cff; border-radius:10px; padding:12px 14px; margin-bottom:14px; font-size:.9rem; white-space:pre-wrap; }
.q-text { font-size:1.08rem; font-weight:500; margin:0 0 18px; white-space:pre-wrap; }
.choices { display:flex; flex-direction:column; gap:10px; }
.choice { text-align:left; padding:13px 15px; font-size:1rem; background:var(--card); color:var(--text); border:1px solid var(--border); border-radius:12px; cursor:pointer; display:flex; gap:10px; align-items:flex-start; }
.choice:active { border-color:var(--primary); }
.choice .lbl { font-weight:700; color:var(--muted); flex:0 0 auto; }
.choice.correct { border-color:var(--correct); background:#2ea04322; }
.choice.wrong { border-color:var(--wrong); background:#da363322; }
.choice.correct .lbl { color:var(--correct); }
.choice.wrong .lbl { color:var(--wrong); }
.choice:disabled { cursor:default; }
.feedback { margin-top:20px; }
.verdict { font-size:1.12rem; font-weight:700; margin-bottom:10px; }
.verdict.ok { color:var(--correct); }
.verdict.ng { color:var(--wrong); }
.explanation { background:var(--card2); border:1px solid var(--border); border-radius:12px; padding:14px 16px; font-size:.93rem; margin:0 0 16px; white-space:pre-wrap; }

/* 結果 */
.score { text-align:center; margin:10px 0; }
.score .num { font-size:3.2rem; font-weight:800; }
.score .num.pass { color:var(--correct); }
.score .num.fail { color:var(--wrong); }
.score .of { font-size:1.3rem; color:var(--muted); }
.result-line { text-align:center; font-size:1.05rem; margin-bottom:6px; }

/* 問題一覧 */
.qitem { background:var(--card); border:1px solid var(--border); border-radius:10px; margin-bottom:10px; overflow:hidden; }
.qitem summary { list-style:none; cursor:pointer; padding:12px 14px; display:flex; flex-direction:column; gap:6px; }
.qitem summary::-webkit-details-marker { display:none; }
.qitem .q-row1 { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:.75rem; }
.qitem .q-body { font-size:.92rem; }
.qitem .q-stat { color:var(--muted); font-size:.78rem; }
.qitem .detail { padding:0 14px 14px; border-top:1px solid var(--border); }
.qitem .detail ol { margin:12px 0; padding-left:1.4em; }
.qitem .detail li { margin-bottom:6px; font-size:.9rem; }
.qitem .detail li.ans { color:var(--correct); font-weight:600; }

/* マイページ */
.stats-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:20px; }
.stat { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px; text-align:center; }
.stat .k { color:var(--muted); font-size:.78rem; margin-bottom:4px; }
.stat .v { font-size:1.6rem; font-weight:800; }
.stat .v small { font-size:.9rem; font-weight:600; color:var(--muted); }
.section-title { font-size:1.05rem; margin:24px 0 10px; }
.hist { display:flex; flex-direction:column; gap:8px; }
.hist-item { display:flex; justify-content:space-between; align-items:center; background:var(--card); border:1px solid var(--border); border-radius:10px; padding:10px 14px; font-size:.9rem; }
.hist-item .score { font-weight:700; }
.hist-item .score.pass { color:var(--correct); }
.hist-item .score.fail { color:var(--wrong); }
.barrow { margin-bottom:12px; }
.barrow .top { display:flex; justify-content:space-between; font-size:.85rem; margin-bottom:4px; }
.barrow .top .nm { color:var(--text); }
.barrow .top .pct { color:var(--muted); }
.barrow .top .pct.weak { color:var(--wrong); font-weight:700; }
.bar { height:10px; background:var(--card); border:1px solid var(--border); border-radius:99px; overflow:hidden; }
.bar > span { display:block; height:100%; background:var(--correct); }
.bar > span.weak { background:var(--wrong); }
.bar > span.mid { background:#d29922; }