:root { color-scheme: light; --ink:#1f2933; --muted:#6b7280; --green:#285747; --line:#e5e7eb; --paper:#fafaf9; --white:#fff; font-family:Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; color:var(--ink); background:var(--paper); font-synthesis:none; }
* { box-sizing:border-box; }
body { margin:0; }
button, input, select, textarea { font:inherit; }
button, select { cursor:pointer; }
button { transition:background .15s, border-color .15s, transform .15s; }
button:disabled { opacity:.4; cursor:not-allowed; }
button:not(:disabled):hover { filter:brightness(.96); }
button:focus-visible, a:focus-visible, select:focus-visible, textarea:focus-visible, input:focus-visible { outline:3px solid #80a87c; outline-offset:3px; }
a { color:inherit; }
h1, h2, h3, p { margin-top:0; }
h1 { font-size:38px; line-height:1.2; letter-spacing:-.8px; font-weight:600; }
h2 { font-size:24px; letter-spacing:-.3px; font-weight:600; }
h3 { font-size:16px; font-weight:600; }
.topbar { height:64px; padding:0 max(5vw, 24px); border-bottom:1px solid var(--line); display:flex; align-items:baseline; gap:14px; background:var(--white); align-items:center; }
.brand { text-decoration:none; font-size:19px; font-weight:600; letter-spacing:-.3px; }
.creator { font-size:14px; color:var(--muted); text-decoration:none; }
.creator:hover, footer a:hover { color:var(--green); text-decoration:underline; }
footer a { color:var(--green); font-weight:600; text-underline-offset:3px; }
main { max-width:960px; margin:auto; padding:0 24px 56px; min-height:calc(100vh - 130px); }
.intro { padding:40px 0 24px; }
.intro h1 { margin-bottom:8px; }
.intro p { margin:0; color:var(--muted); font-size:17px; }
.stats { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.stats > div { display:flex; flex-direction:column; gap:4px; padding:16px 18px; background:var(--white); border:1px solid var(--line); border-radius:10px; }
.stats strong { font-size:30px; letter-spacing:-.5px; font-weight:600; }
.stats strong small { font-size:16px; color:#9ca3af; letter-spacing:0; font-weight:400; }
.stats span { font-size:15px; color:var(--muted); }
.subtle { color:var(--muted); font-size:12px; }
.mode-tabs { display:flex; flex-wrap:wrap; gap:6px; margin:16px 0 10px; }
.mode-tab { border:1px solid var(--line); background:var(--white); color:var(--ink); border-radius:999px; padding:11px 22px; font-size:16px; }
.mode-tab.active { background:var(--green); border-color:var(--green); color:#fff; }
.mode-note { font-size:16px; color:var(--muted); margin:0 0 4px; }
.builder { padding:24px; background:var(--white); border:1px solid var(--line); border-radius:12px; }
.builder h2 { margin:0; }
.builder-heading { margin:22px 0 10px; display:flex; align-items:center; justify-content:space-between; }
.builder-heading h3 { margin:0; font-size:17px; }
.text-button { border:0; background:transparent; color:var(--green); font-size:16px; padding:8px 0; }
.week-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:8px; }
.week { background:var(--white); border:1px solid var(--line); border-radius:8px; padding:14px 4px; color:var(--ink); font-size:16px; }
.week.selected { background:var(--green); border-color:var(--green); color:#fff; }
.field-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:20px; }
.field-grid label { display:flex; flex-direction:column; gap:8px; font-size:15px; font-weight:600; }
select { background:#fff; color:var(--ink); border:1px solid var(--line); border-radius:7px; padding:14px; width:100%; font-size:16px; }
.start-row { display:flex; align-items:center; justify-content:space-between; border-top:1px solid var(--line); margin-top:22px; padding-top:18px; gap:16px; flex-wrap:wrap; }
.start-row .count { font-size:16px; font-weight:600; }
.start-actions { display:flex; gap:8px; }
.primary, .secondary { border-radius:10px; padding:14px 26px; font-size:16px; font-weight:600; border:1px solid var(--green); }
.primary { color:white; background:var(--green); }
.secondary { color:var(--green); background:var(--white); border-color:#d1d5db; }
.history-section { margin-top:32px; }
.history-section h2 { font-size:24px; }
.empty-state { color:var(--muted); font-size:16px; margin:12px 0 0; }
.history-list { border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--white); margin-top:12px; }
.history-row { padding:18px 22px; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); font-size:16px; gap:16px; }
.history-row:last-child { border:0; }
.history-row small { display:block; font-size:14px; margin-top:5px; color:var(--muted); }
.history-row > span { text-align:right; }
.resume { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 18px; background:var(--white); border:1px solid var(--green); border-radius:10px; margin-bottom:24px; }
.resume strong { display:block; font-size:17px; margin-bottom:4px; }
.resume span { font-size:15px; color:var(--muted); }
footer { padding:20px max(5vw, 24px); border-top:1px solid var(--line); display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; font-size:14px; color:var(--muted); background:var(--white); }
footer span { font-size:14px; }
#notice { position:fixed; left:50%; bottom:24px; transform:translate(-50%,20px); opacity:0; pointer-events:none; transition:.2s; padding:14px 22px; background:var(--ink); color:white; border-radius:10px; font-size:16px; max-width:90vw; z-index:10; }
#notice.visible { transform:translate(-50%,0); opacity:1; }
.loading { padding:100px 0; text-align:center; color:var(--muted); }
.results-hero { text-align:center; padding:44px 32px; background:var(--white); border:1px solid var(--line); border-radius:12px; }
.results-hero h1 { font-size:30px; margin-bottom:8px; }
.score { font-size:72px; font-weight:600; letter-spacing:-2px; margin:16px 0; }
.score span { display:block; font-size:16px; letter-spacing:0; font-weight:400; color:var(--muted); }
.result-metrics { display:grid; grid-template-columns:repeat(4,1fr); max-width:650px; margin:30px auto; gap:20px; }
.result-metrics strong { display:block; font-size:32px; margin-bottom:7px; }
.result-metrics span { color:var(--muted); font-size:15px; }
.result-actions { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.review-list { margin-top:35px; }
.review-row { display:flex; justify-content:space-between; gap:20px; align-items:center; width:100%; text-align:left; border:1px solid var(--line); margin-bottom:8px; background:white; border-radius:8px; padding:22px 24px; color:var(--ink); }
.review-row small { display:block; font-size:13px; letter-spacing:1px; color:var(--muted); margin-bottom:8px; }
.review-row strong { font-size:17px; }
.status { color:#92400e; font-size:15px; flex-shrink:0; }
.status.good { color:#166534; }
.empty-inline { color:var(--muted); font-size:12px; margin:15px 0 0; }

/* ---------- Practice screen: one fixed viewport, no page scroll ---------- */
body.practice { height:100vh; height:100dvh; overflow:hidden; display:flex; flex-direction:column; }
body.practice .topbar { height:48px; flex:none; }
body.practice > footer { display:none; }
body.practice main { flex:1; min-height:0; max-width:none; width:100%; padding:0; margin:0; }
.practice-screen { height:100%; display:flex; flex-direction:column; min-height:0; }
.p-top { flex:none; display:flex; align-items:center; gap:20px; padding:10px 20px; background:var(--white); border-bottom:1px solid var(--line); }
.p-title { display:flex; flex-direction:column; min-width:0; flex:1; }
.p-title strong { font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.p-title span { font-size:13px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.p-progress { display:flex; align-items:center; gap:10px; font-size:13px; color:var(--muted); white-space:nowrap; }
.p-progress progress { width:140px; height:6px; }
progress { appearance:none; border:0; background:#e5e7eb; border-radius:10px; overflow:hidden; }
progress::-webkit-progress-bar { background:#e5e7eb; }
progress::-webkit-progress-value { background:var(--green); }
progress::-moz-progress-bar { background:var(--green); }
.bookmark { font-size:14px; background:var(--white); border:1px solid var(--line); border-radius:8px; padding:8px 14px; color:var(--muted); white-space:nowrap; }
.bookmark.saved { background:#f3f6f1; color:#4d6b3e; border-color:#b9cdb0; }

.p-body { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1.25fr) minmax(0,1fr); gap:16px; padding:16px 20px; }
.p-body.mcq { grid-template-columns:minmax(0,1.5fr) minmax(300px,.8fr); }
.p-body.code { grid-template-columns:minmax(240px,1fr) 16px minmax(300px,var(--right,45%)); gap:0; }
.p-resizer { position:relative; cursor:col-resize; touch-action:none; outline:none; }
.p-resizer::before { content:""; position:absolute; top:0; bottom:0; left:50%; width:3px; transform:translateX(-50%); border-radius:3px; background:transparent; transition:background .15s; }
.p-resizer:hover::before, .p-resizer:focus-visible::before, .p-resizer.dragging::before { background:#8fa88a; }
.p-resizer.dragging::before { background:var(--green); }
body.resizing { cursor:col-resize; user-select:none; -webkit-user-select:none; }
body.resizing .p-left, body.resizing .p-right { pointer-events:none; }
.p-left, .p-right { min-height:0; min-width:0; overflow:auto; background:var(--white); border:1px solid var(--line); border-radius:12px; padding:20px; }
.p-right { display:flex; flex-direction:column; }
.pane-heading { font-size:15px; margin:0 0 12px; color:var(--muted); font-weight:600; }
.p-left .pane-heading { margin-top:18px; }

.question-html { font-size:16px; line-height:1.6; overflow-wrap:anywhere; }
.question-html img { display:block; margin:0 auto; width:100%; height:auto; max-height:calc(100dvh - 190px); object-fit:contain; }
.question-html pre, .question-html table { max-width:100%; overflow-x:auto; }
.question-html table { border-collapse:collapse; display:block; }
.question-html td, .question-html th { border:1px solid var(--line); padding:6px 8px; }

.choices { display:flex; flex-direction:column; gap:10px; }
.choice { display:flex; align-items:center; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:10px; cursor:pointer; min-width:0; background:var(--white); }
.choice:hover { border-color:#a9b8a3; }
.choice input { accent-color:var(--green); width:18px; height:18px; flex-shrink:0; margin:0; }
.choice-letter { width:32px; height:32px; border-radius:8px; background:#f3f4f6; color:var(--muted); display:grid; place-items:center; font-size:14px; font-weight:600; flex-shrink:0; }
.choice-content { font-size:17px; flex:1; min-width:0; overflow-wrap:anywhere; line-height:1.5; }
.choice-content img { max-width:100%; }
.choice.chosen { background:#f3f6f1; border-color:#7f9b72; }
.choice.correct { background:#ecf6e9; border-color:#7fae72; }
.choice.incorrect { background:#fff1ed; border-color:#d6a496; }
.answer-tag { font-size:13px; color:var(--green); font-weight:600; }
.choices.compact { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.choices.compact .choice { justify-content:center; padding:22px 12px; }
.choices.compact .choice-letter { display:none; }
.choices.compact .choice-content { flex:0 0 auto; font-size:26px; font-weight:600; line-height:1; }
.choices.compact .choice input { width:22px; height:22px; }
.feedback { margin-top:16px; padding:14px 16px; border-radius:10px; font-size:15px; line-height:1.5; }
.feedback strong, .feedback span { display:block; }
.success { background:#edf5e7; color:#2f5a2f; }
.warning { background:#fff3e4; color:#7a5a30; }
p.warning { padding:12px 14px; border-radius:8px; }

.sample-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:12px; }
.sample { border:1px solid var(--line); border-radius:10px; padding:14px; min-width:0; }
.sample > span { font-size:12px; letter-spacing:.8px; color:var(--muted); }
.sample strong { font-size:13px; display:block; margin-top:10px; }
pre { white-space:pre-wrap; overflow-wrap:anywhere; tab-size:4; font-size:14px; line-height:1.6; font-family:'SFMono-Regular',Consolas,monospace; margin:6px 0 0; }
.sample pre { background:#f5f5f4; padding:8px 10px; border-radius:6px; }
.hidden-note { font-size:14px; color:#7a5f2c; background:#fdf6e3; border-radius:8px; padding:10px 14px; margin:14px 0 0; }
.solution { border:1px solid var(--line); border-radius:10px; padding:12px 16px; margin-top:16px; font-size:15px; background:#fafaf9; }
.solution pre { background:#f5f5f4; padding:12px; border-radius:6px; }
summary { cursor:pointer; font-size:15px; font-weight:600; }
.subtle { color:var(--muted); font-size:14px; margin-top:16px; }

.editor-heading { flex:none; display:flex; justify-content:space-between; gap:10px; background:#21392f; color:#dbe5ce; padding:10px 16px; border-radius:8px 8px 0 0; font-size:14px; }
.editor-heading span { color:#a7bc94; font-size:13px; }
.editor-host { flex:1; min-height:0; background:#172c25; overflow:hidden; display:flex; }
.editor-host .cm-editor { flex:1; min-width:0; height:100%; max-height:none; }
.fallback-editor { flex:1; width:100%; border:0; padding:14px; background:#172c25; color:#e0eacc; font-family:'SFMono-Regular',Consolas,monospace; font-size:15px; line-height:1.7; tab-size:4; white-space:pre; overflow:auto; resize:none; }
.code-actions { flex:none; display:flex; align-items:center; flex-wrap:wrap; gap:18px; padding:10px 4px 0; }
.review-toggle { font-size:14px; display:flex; align-items:center; gap:8px; margin-left:auto; }
.review-toggle input { accent-color:var(--green); width:18px; height:18px; margin:0; }

.p-bottom { flex:none; display:flex; align-items:center; gap:16px; padding:12px 20px; background:var(--white); border-top:1px solid var(--line); }
.p-bottom .question-map { flex:1; min-width:0; display:flex; gap:6px; overflow-x:auto; padding:2px; margin:0; scrollbar-width:thin; }
.question-map button { flex:none; width:36px; height:36px; border:1px solid #d1d5db; border-radius:8px; background:var(--white); color:#4b5563; font-size:14px; }
.question-map button.answered { background:#dbe7d5; color:#2f4a24; border-color:#b9cdb0; }
.question-map button.current { background:var(--green); color:#fff; border-color:var(--green); }
.p-actions { display:flex; align-items:center; gap:10px; }
.p-bottom .primary, .p-bottom .secondary { padding:11px 22px; font-size:15px; }

@media (max-width:900px) {
  body.practice { height:auto; min-height:100dvh; overflow:auto; }
  body.practice main { flex:none; }
  .practice-screen { height:auto; }
  .p-top { flex-wrap:wrap; gap:10px 14px; padding:10px 14px; }
  .p-progress { display:none; }
  .p-body, .p-body.mcq, .p-body.code { display:flex; flex-direction:column; padding:12px 14px; gap:12px; }
  .p-resizer { display:none; }
  .p-left, .p-right { overflow:visible; padding:16px; }
  .question-html img { max-height:none; }
  .editor-host { min-height:320px; flex:none; }
  .p-bottom { position:sticky; bottom:0; flex-wrap:wrap; padding:10px 14px; gap:10px; }
  .p-bottom .question-map { order:3; flex:1 1 100%; }
  .p-actions { margin-left:auto; }
}
@media (max-width:430px) { .choices.compact .choice-content { font-size:22px; } .p-title strong { font-size:14px; } .p-bottom .primary, .p-bottom .secondary { padding:11px 16px; } }
@media (prefers-reduced-motion:reduce) { * { transition:none!important; } }