
:root{--bg:#f4f6fb;--card:#fff;--text:#172033;--muted:#6f7a90;--p:#3158c8;--p2:#e8eeff;--good:#17854b;--goodbg:#eaf8f0;--bad:#bf3f3f;--badbg:#fff0f0;--border:#e3e8f2;--shadow:0 8px 24px rgba(31,45,80,.08);--warn:#9b5b00;--warnbg:#fff5e8}
*{box-sizing:border-box}html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",system-ui,sans-serif}body{min-height:100vh}button{font:inherit;-webkit-tap-highlight-color:transparent}
.app{max-width:760px;margin:0 auto;padding-bottom:calc(36px + env(safe-area-inset-bottom))}.top{position:sticky;top:0;z-index:5;background:rgba(244,246,251,.95);backdrop-filter:blur(12px);padding:14px 16px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center}.eyebrow{font-size:11px;font-weight:800;color:var(--p);letter-spacing:.08em}.top h1{font-size:19px;margin:2px 0 0}.homebtn{width:42px;height:42px;border:1px solid var(--border);background:#fff;border-radius:13px;font-size:20px}
main{padding:16px}.view{display:none}.view.active{display:block}.card{background:var(--card);border:1px solid var(--border);border-radius:20px;box-shadow:var(--shadow);padding:18px}.hero{margin-bottom:12px}.hero h2{font-size:24px;margin:6px 0}.muted{color:var(--muted);line-height:1.6}.modes{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.wide{grid-column:1/-1;width:100%}.btn{border:0;border-radius:14px;padding:14px 12px;font-weight:800;cursor:pointer}.primary{background:var(--p);color:white}.secondary{background:var(--p2);color:var(--p)}.outline{background:white;border:1px solid var(--border);color:var(--text)}.btn:disabled{opacity:.5}.textbtn{border:0;background:transparent;color:var(--p);font-weight:800;padding:5px 0 13px}.chapter-all{margin-top:12px}
.chapter-title{font-size:15px;margin:20px 2px 10px}.chapters{display:grid;gap:10px}.chapter-card{display:flex;justify-content:space-between;gap:12px;text-align:left;background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px;cursor:pointer;width:100%;color:var(--text)}.chapter-card strong{display:block}.chapter-card small{display:block;color:var(--muted);margin-top:4px;line-height:1.4}.chapter-card .rate{white-space:nowrap;color:var(--p);font-weight:900;text-align:right}.chapter-card .rate small{white-space:nowrap;font-weight:500}
.quizmeta{display:flex;justify-content:space-between;gap:8px;align-items:center;font-size:12px;color:var(--muted)}.badge{background:var(--p2);color:var(--p);padding:6px 9px;border-radius:999px;font-weight:800;max-width:75%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.progress{height:8px;background:#e8ebf2;border-radius:999px;overflow:hidden;margin:10px 0 16px}.progress div{height:100%;background:var(--p);width:0;transition:width .18s ease}
.question h2{font-size:21px;line-height:1.55;white-space:pre-line;margin:8px 0 16px}.choices{display:grid;gap:10px}.choice{display:flex;gap:11px;align-items:flex-start;text-align:left;background:#fff;border:1px solid var(--border);border-radius:14px;padding:13px;line-height:1.5;color:var(--text);cursor:pointer}.letter{width:28px;height:28px;flex:0 0 28px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--p2);color:var(--p);font-weight:900}.choice.correct{background:var(--goodbg);border-color:var(--good)}.choice.wrong{background:var(--badbg);border-color:var(--bad)}.choice:disabled{color:var(--text);opacity:1;cursor:default}
.feedback{border-top:1px solid var(--border);margin-top:17px;padding-top:17px;line-height:1.7}.feedback h3{margin:0 0 6px;font-size:21px}.good{color:var(--good)}.bad{color:var(--bad)}.answerbox{background:var(--warnbg);border:1px solid #efc887;color:#6b4100;border-radius:14px;padding:12px 13px;margin:10px 0;font-weight:800;line-height:1.6}.memory{background:#f7f9fd;border-radius:14px;padding:13px;margin:12px 0}.memory small{display:block;color:var(--muted);font-weight:700;margin-bottom:4px}.keyword{font-size:12px;color:var(--muted);margin:8px 1px 2px}.next{width:100%;margin-top:8px}.hidden{display:none!important}
.result{text-align:center}.score{font-size:48px;font-weight:900;color:var(--p);margin:10px 0 0}.result h2{margin:4px 0}.result .btn{width:100%;margin-top:10px}.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:14px 0}.summary div{background:#f7f9fd;border-radius:14px;padding:12px 6px}.summary strong{display:block;font-size:20px}.summary small{color:var(--muted)}
@media(max-width:480px){.modes{grid-template-columns:1fr}.wide{grid-column:auto}.hero h2{font-size:22px}.question h2{font-size:20px}}
