:root{
  --bg:#0e1116; --panel:#161b22; --panel2:#1c2430; --ink:#e6edf3; --sub:#8b98a5; --line:#252d38;
  --accent:#4c9aff; --accent2:#1f6feb;
  --ok:#3fb950; --ok-bg:#12261a;
  --ng:#f85149; --ng-bg:#2a1416;
  --warn:#d29922;
  --code:#0b0e13;
  --r:12px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Yu Gothic UI","Noto Sans JP",system-ui,sans-serif;
  font-size:15px; line-height:1.65; -webkit-text-size-adjust:100%;
}
.sc{min-height:100dvh; display:flex; flex-direction:column}
.hidden{display:none !important}
.pad{padding:14px 16px 48px; max-width:760px; width:100%; margin:0 auto}

.head{padding:26px 16px 8px; max-width:760px; width:100%; margin:0 auto}
h1{font-size:24px; margin:0 0 4px; letter-spacing:.02em}
h2{font-size:13px; color:var(--sub); margin:24px 0 9px; font-weight:600; letter-spacing:.04em}
.sub{color:var(--sub); font-size:13px}

button{font:inherit; cursor:pointer; border-radius:10px; border:1px solid var(--line);
  background:var(--panel); color:var(--ink); padding:11px 15px}
button:active{opacity:.75}
button.primary{background:var(--accent2); border-color:var(--accent2); color:#fff; font-weight:600}
button.big{display:block; width:100%; padding:15px; font-size:16px; margin-bottom:10px}
button.ghost{background:none; color:var(--sub); border-color:var(--line); font-size:13px; padding:8px 14px}

/* 数字タイル */
.tiles{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:9px}
.tile{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 13px}
.tile .k{color:var(--sub); font-size:11.5px; margin-bottom:2px}
.tile .v{font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.2}
.tile .v small{font-size:12px; font-weight:400; color:var(--sub); margin-left:2px}

/* 分野カード */
.cat{display:flex; align-items:center; gap:12px; width:100%; text-align:left;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:13px 14px; margin-bottom:8px}
.cat:hover{border-color:var(--accent)}
.cat .nm{flex:1; min-width:0}
.cat .nm b{display:block; font-size:14.5px; font-weight:600}
.cat .nm span{color:var(--sub); font-size:11.5px}
.cat .rate{font-variant-numeric:tabular-nums; font-weight:700; font-size:16px; flex:none}
.cat .rate small{font-size:11px; color:var(--sub); font-weight:400}
.cat.star{border-color:var(--accent); background:var(--panel2)}

.chips{display:flex; gap:7px; flex-wrap:wrap}
.chips button{padding:7px 14px; font-size:13px}
.chips button[aria-pressed="true"]{background:var(--accent2); border-color:var(--accent2); color:#fff}

/* 出題 */
.qbar{display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--line)}
.back{background:none; border:0; color:var(--accent); padding:0; font-size:14px}
.qmeta{flex:1; min-width:0; display:flex; gap:10px; align-items:baseline; font-size:12px; color:var(--sub)}
.qmeta #qPos{font-variant-numeric:tabular-nums; color:var(--ink); font-weight:600}
.timer{font-variant-numeric:tabular-nums; font-size:15px; font-weight:700; color:var(--sub)}
.timer.run{color:var(--accent)}
.bar-progress{height:3px; background:var(--line)}
.bar-progress div{height:100%; background:var(--accent); width:0; transition:width .2s}

.qbody{flex:1; padding:16px 16px 20px; max-width:760px; width:100%; margin:0 auto}
.qsub{color:var(--sub); font-size:12px; margin-bottom:10px}
.qtext{font-size:16px; font-weight:600; margin:14px 0 14px; line-height:1.6}

pre.code{
  background:var(--code); border:1px solid var(--line); border-radius:10px;
  padding:13px 14px; overflow-x:auto; margin:0;
  font-family:"SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
  font-size:12.5px; line-height:1.75; white-space:pre; -webkit-overflow-scrolling:touch;
}

.ch{display:block; width:100%; text-align:left; margin-bottom:9px; padding:13px 15px;
  background:var(--panel); border:1px solid var(--line); border-radius:10px; line-height:1.6}
.ch:hover{border-color:var(--accent)}
.ch .lb{display:inline-block; width:22px; color:var(--sub); font-weight:700}
.ch.ok{background:var(--ok-bg); border-color:var(--ok)}
.ch.ok .lb{color:var(--ok)}
.ch.ng{background:var(--ng-bg); border-color:var(--ng)}
.ch.ng .lb{color:var(--ng)}
.ch[disabled]{cursor:default; opacity:1}

#qExplain{margin-top:18px}
.exp{background:var(--panel); border-left:3px solid var(--accent); border-radius:8px; padding:13px 15px; margin-bottom:9px}
.exp .h{font-size:11.5px; color:var(--sub); margin-bottom:4px; letter-spacing:.04em}
.exp.trap{border-left-color:var(--warn)}
.exp.res{border-left-color:var(--ok)}
.exp.res.miss{border-left-color:var(--ng)}
.exp b{font-weight:700}

#qaAnswer .exp{border-left-color:var(--ok)}

.qfoot{padding:12px 16px calc(16px + env(safe-area-inset-bottom)); border-top:1px solid var(--line);
  max-width:760px; width:100%; margin:0 auto}

/* 記録 */
.prow{display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13px}
.prow:last-child{border-bottom:0}
.prow .nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.prow .n{color:var(--sub); font-size:11.5px; font-variant-numeric:tabular-nums}
.meter{width:78px; height:5px; background:var(--line); border-radius:99px; overflow:hidden; flex:none}
.meter i{display:block; height:100%; background:var(--ok)}
.meter i.low{background:var(--ng)}
.meter i.mid{background:var(--warn)}

.miss{background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:12px 14px; margin-bottom:8px}
.miss .q{font-size:13.5px; font-weight:600; margin-bottom:5px}
.miss .c{color:var(--sub); font-size:12px}
.note{color:var(--sub); font-size:12.5px; margin-top:12px; line-height:1.7}

/* 講座 */
.modes{margin-bottom:4px}
.modes button{flex:1; padding:11px; font-size:14px}
.lgoal{background:var(--panel2); border-left:3px solid var(--accent); border-radius:8px;
  padding:12px 14px; margin-bottom:22px; font-size:14px}
.lgoal .k{color:var(--sub); font-size:11.5px; margin-bottom:3px}
.lsec{margin-bottom:26px}
.lsec h3{font-size:16px; margin:0 0 10px; line-height:1.5; border-left:3px solid var(--accent); padding-left:10px}
.lsec p{margin:0 0 12px; font-size:14.5px; line-height:1.9}
.lsec pre.code{margin-bottom:8px}
.lnote{color:var(--sub); font-size:12.5px; margin-bottom:8px; line-height:1.7}
.lpts{margin:0; padding-left:20px}
.lpts li{margin-bottom:7px; font-size:14px; line-height:1.75}