:root { color-scheme: light; --ink:#17201c; --muted:#66716b; --line:#dfe5e1; --paper:#f6f8f6; --white:#fff; --green:#1d6b4f; --green-soft:#e5f1eb; --gold:#a76416; --gold-soft:#fbf0df; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--paper); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; letter-spacing:0; }
button,input { font:inherit; letter-spacing:0; }
.topbar { height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 28px; border-bottom:1px solid var(--line); background:var(--white); position:sticky; top:0; z-index:5; }
.brand { display:flex; align-items:center; gap:11px; font-weight:700; }
.brand-mark { width:32px; height:32px; display:grid; place-items:center; background:var(--ink); color:white; font-size:12px; }
.source-status { display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted); }
.status-dot { width:8px; height:8px; border-radius:50%; background:#2d936c; }
.shell { display:grid; grid-template-columns:240px minmax(0,1fr); min-height:calc(100vh - 64px); }
.sidebar { padding:28px 18px; border-right:1px solid var(--line); background:#f0f3f1; }
.nav-label,.kicker { margin:0 10px 12px; color:var(--muted); font-size:11px; font-weight:700; text-transform:uppercase; }
.chapter-button { width:100%; min-height:54px; border:0; background:transparent; color:var(--muted); padding:10px 12px; display:flex; align-items:center; gap:12px; text-align:left; cursor:pointer; }
.chapter-button:hover,.chapter-button.active { background:var(--white); color:var(--ink); box-shadow:inset 3px 0 var(--green); }
.chapter-number { color:var(--green); font-weight:800; font-size:12px; }
.chapter-button span:last-child { font-size:13px; line-height:1.35; }
.evidence-note { margin:36px 8px 0; padding-top:20px; border-top:1px solid #d2d9d5; font-size:12px; color:var(--muted); line-height:1.6; }
.evidence-note strong { color:var(--ink); }
main { padding:46px clamp(28px,5vw,76px); min-width:0; }
.loading { color:var(--muted); }
.chapter-head { display:flex; justify-content:space-between; gap:40px; align-items:flex-end; }
.chapter-head .kicker { margin-left:0; color:var(--green); }
h1 { margin:0; max-width:760px; font-family:Georgia,serif; font-size:clamp(32px,4vw,52px); line-height:1.06; font-weight:500; }
.summary { max-width:720px; color:var(--muted); font-size:16px; line-height:1.7; }
.chapter-stats { display:flex; border:1px solid var(--line); background:var(--white); flex:0 0 auto; }
.chapter-stats div { min-width:104px; padding:18px; display:flex; flex-direction:column; }
.chapter-stats div + div { border-left:1px solid var(--line); }
.chapter-stats strong { font-size:25px; }
.chapter-stats span { color:var(--muted); font-size:12px; margin-top:4px; }
.tabs { display:flex; gap:28px; margin-top:48px; border-bottom:1px solid var(--line); }
.tab { padding:0 0 14px; border:0; background:transparent; color:var(--muted); cursor:pointer; }
.tab.active { color:var(--ink); border-bottom:2px solid var(--green); font-weight:700; }
.panel { padding-top:30px; }
.content-block { background:var(--white); border:1px solid var(--line); padding:26px; }
h2 { margin:0 0 20px; font-size:19px; }
.learning-intro { display:grid; grid-template-columns:1fr; gap:20px; }
.section-heading { display:flex; align-items:flex-start; gap:14px; }
.section-heading>span { width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; background:var(--green-soft); color:var(--green); font-size:11px; font-weight:800; }
.section-heading h2 { margin:1px 0 5px; }
.section-heading p { margin:0; color:var(--muted); font-size:13px; line-height:1.5; }
.prerequisite-list { margin-top:20px; display:grid; gap:12px; }
.prerequisite-card { background:var(--paper); border-left:3px solid #7aa890; }
.prerequisite-card.complete { border-left-color:var(--green); background:#edf6f1; }
.prerequisite-head { padding:14px 16px; display:flex; justify-content:space-between; gap:20px; align-items:start; }
.prerequisite-list strong { font-size:13px; }
.prerequisite-list p { margin:5px 0 0; color:var(--muted); font-size:13px; line-height:1.55; }
.prerequisite-card>details { border-top:1px solid var(--line); }
.prerequisite-card>details>summary { padding:10px 16px; color:var(--green); cursor:pointer; font-size:12px; font-weight:700; }
.prep-body { padding:4px 16px 16px; display:grid; gap:9px; }
.prep-body p { margin:0; padding:11px 13px; background:white; color:var(--ink); }
.prep-body b { display:block; margin-bottom:5px; color:var(--muted); font-size:10px; text-transform:uppercase; }
.answer-reveal { background:#e3eee8; padding:10px 13px; font-size:12px; }
.answer-reveal summary { color:var(--green); cursor:pointer; font-weight:700; }
.answer-reveal p { margin-top:8px; background:transparent; padding:0; }
.prep-body .pass-rule { border-left:3px solid var(--gold); }
.check-button { flex:0 0 auto; border:1px solid #91a49a; background:white; color:var(--green); padding:7px 10px; font-size:11px; cursor:pointer; }
.complete .check-button { background:var(--green); color:white; border-color:var(--green); }
.exercise-chips { display:flex; gap:6px; flex-wrap:wrap; }
.exercise-chip { border:1px solid #70857b; background:transparent; color:#d9eee3; padding:4px 7px; font-size:10px; cursor:pointer; }
.exercise-chip:hover { background:#d9eee3; color:#26342e; }
.no-exercise { color:#aebdb6; font-size:11px; }
.map-section { margin-top:44px; }
.map-section>.section-heading { margin-bottom:18px; }
.section-list { display:grid; gap:10px; }
.lesson-section { background:white; border:1px solid var(--line); }
.lesson-section summary { list-style:none; min-height:78px; display:grid; grid-template-columns:70px minmax(0,1fr) 30px; gap:14px; align-items:center; padding:14px 20px; cursor:pointer; }
.lesson-section summary::-webkit-details-marker { display:none; }
.section-code { color:var(--green); font-family:Georgia,serif; font-size:19px; }
.lesson-section summary strong { display:block; font-size:16px; }
.lesson-section summary small { display:block; margin-top:5px; color:var(--muted); font-size:12px; line-height:1.5; }
.expand-icon { font-size:24px; color:var(--muted); transition:transform .2s; }
.lesson-section[open] .expand-icon { transform:rotate(45deg); }
.lesson-content { padding:0 20px 20px 104px; display:grid; gap:12px; }
.concept-detail { border:1px solid var(--line); }
.concept-title { padding:15px 18px; display:flex; align-items:center; justify-content:space-between; border-bottom:1px solid var(--line); }
.concept-title h3 { margin:0; font-size:15px; }
.concept-title span { color:var(--green); background:var(--green-soft); padding:4px 7px; font-size:10px; font-weight:700; }
.plain-explanation { padding:16px 18px; background:#f0f5f2; }
.plain-explanation b { color:var(--green); font-size:11px; }
.plain-explanation p { margin:6px 0 0; font-family:Georgia,serif; font-size:16px; line-height:1.6; }
.concept-detail dl { margin:0; }
.concept-detail dl>div { display:grid; grid-template-columns:90px minmax(0,1fr); gap:12px; padding:13px 18px; border-top:1px solid var(--line); }
dt { color:var(--muted); font-size:11px; font-weight:700; }
dd { margin:0; font-size:13px; line-height:1.65; }
.concept-detail .pitfall { background:#fff8ed; }
.concept-detail .pitfall dt { color:var(--gold); }
.concept-detail .textbook-original { background:#f5f6f3; }
.textbook-original dd[lang="en"] { font-family:Georgia,serif; font-size:14px; }
.textbook-original small,.algorithm-source small { display:block; margin-top:7px; color:var(--muted); font-family:Arial,sans-serif; font-size:10px; }
.textbook-original a,.algorithm-source a { color:var(--green); font-weight:700; }
.algorithm-list { display:grid; gap:16px; }
.algorithm-card { background:white; border:1px solid var(--line); }
.algorithm-head { display:flex; gap:16px; align-items:flex-start; padding:20px 22px; border-bottom:1px solid var(--line); }
.algorithm-head>span { font-family:Georgia,serif; font-size:24px; color:#91a29a; }
.algorithm-head h3 { margin:1px 0 5px; font-size:17px; }
.algorithm-head p { margin:0; color:var(--muted); font-size:13px; }
.algorithm-body { display:grid; grid-template-columns:1.2fr .8fr; }
.algorithm-body>div { padding:20px 24px; }
.algorithm-body aside { padding:20px 24px; background:#f3f6f4; border-left:1px solid var(--line); }
.algorithm-body h4 { margin:0 0 10px; color:var(--muted); font-size:11px; text-transform:uppercase; }
.algorithm-body ol { margin:0; padding-left:20px; }
.algorithm-body li { padding:5px 0; font-size:13px; line-height:1.5; }
.algorithm-source { margin-top:20px; padding:15px; border:1px solid var(--line); background:#f7f7f5; }
.algorithm-source p { margin:0; font-family:Georgia,serif; font-size:13px; line-height:1.65; }
.algorithm-body code { display:block; margin-bottom:20px; padding:12px; background:#26322d; color:#e1f1e8; white-space:normal; line-height:1.5; }
.algorithm-body aside p { margin:0 0 18px; font-size:12px; line-height:1.6; }
.exam-section { padding:28px; background:#202b26; color:white; }
.exam-section>.section-heading>span { background:#43534b; color:#c9ebd9; }
.exam-section>.section-heading p { color:#afbeb7; }
.exam-detail-list { display:grid; gap:10px; }
.exam-playbook { border:1px solid #46564e; background:#29362f; }
.exam-playbook.complete { border-color:#61a681; }
.exam-playbook>summary { list-style:none; display:grid; grid-template-columns:56px minmax(0,1fr) 30px; gap:16px; align-items:center; min-height:98px; padding:16px 18px; cursor:pointer; }
.exam-playbook>summary::-webkit-details-marker { display:none; }
.exam-order { font-family:Georgia,serif; font-size:25px; color:#8fa299; }
.exam-summary-main>strong { display:block; margin:8px 0 4px; font-size:17px; }
.exam-summary-main>small { display:block; color:#b5c1bb; font-size:12px; line-height:1.5; }
.exam-badges { display:flex; gap:6px; align-items:center; }
.exam-badges b,.exam-badges i { padding:4px 7px; font-size:9px; font-style:normal; }
.exam-badges b { background:#b57122; color:white; }
.exam-badges i { background:#3c4b44; color:#c7d2cd; }
.exam-toggle { color:#aec0b7; font-size:24px; transition:transform .2s; }
.exam-playbook[open] .exam-toggle { transform:rotate(45deg); }
.exam-workspace { display:grid; grid-template-columns:1.2fr .8fr; border-top:1px solid #46564e; }
.workspace-label { margin-bottom:16px; color:#97aaa0; font-size:10px; font-weight:800; text-transform:uppercase; }
.exam-steps { padding:24px; }
.exam-steps ol { list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.exam-steps li { display:grid; grid-template-columns:28px minmax(0,1fr); gap:11px; align-items:start; }
.exam-steps li>span { width:26px; height:26px; display:grid; place-items:center; border:1px solid #5b7066; color:#a9d3bd; font-size:10px; }
.exam-steps li p { margin:3px 0 0; color:#e2e9e5; font-size:13px; line-height:1.5; }
.exam-example { padding:24px; border-left:1px solid #46564e; background:#f4f6f4; color:var(--ink); }
.exam-example .workspace-label { color:var(--green); }
.exam-example>p { margin:0; font-family:Georgia,serif; line-height:1.7; font-size:14px; }
.template-box { margin-top:18px; padding:14px; background:white; border-left:3px solid var(--green); }
.template-box b { color:var(--green); font-size:10px; text-transform:uppercase; }
.template-box p { margin:7px 0 0; color:#3d4943; font-size:12px; line-height:1.65; }
.exam-check { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:16px 20px; border-top:1px solid #46564e; background:#222e28; }
.exam-check>div:first-child { max-width:620px; }
.exam-check span { color:#d7974d; font-size:10px; font-weight:800; text-transform:uppercase; }
.exam-check p { margin:5px 0 0; color:#c1cdc7; font-size:11px; line-height:1.55; }
.exam-actions { flex:0 0 auto; display:flex; align-items:center; gap:12px; }
.exercise-chip.light { border-color:#71877c; color:#d8e7df; }
.master-button { border:1px solid #74aa8d; background:transparent; color:#bfe2cf; padding:8px 11px; font-size:10px; cursor:pointer; }
.complete .master-button { background:#377357; border-color:#377357; color:white; }
.exercise-toolbar { display:flex; align-items:end; justify-content:space-between; gap:20px; }
.exercise-toolbar h2 { margin-bottom:4px; }
.exercise-toolbar p { margin:0; color:var(--muted); font-size:13px; }
.search { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:12px; }
.search input { width:220px; border:1px solid var(--line); background:white; padding:10px 12px; outline:none; }
.search input:focus { border-color:var(--green); }
.verification-dashboard { display:grid; grid-template-columns:1.4fr repeat(3,1fr); margin-bottom:28px; border:1px solid var(--line); background:white; }
.verification-dashboard>div { min-height:86px; padding:16px 18px; display:flex; flex-direction:column; justify-content:center; }
.verification-dashboard>div+div { border-left:1px solid var(--line); }
.verification-dashboard span { color:var(--muted); font-size:10px; font-weight:700; text-transform:uppercase; }
.verification-dashboard strong { margin-top:7px; font-size:20px; }
.progress-track { height:4px; margin-top:10px; overflow:hidden; background:#e5eae7; }
.progress-track i { display:block; width:0; height:100%; background:var(--green); transition:width .25s; }
.model-connection strong { font-size:13px; overflow-wrap:anywhere; }
.model-connection .connected { color:var(--green); }
.model-connection .disconnected { color:var(--gold); }
.exercise-filters { display:flex; gap:7px; margin-top:18px; }
.filter-button { border:1px solid var(--line); background:white; color:var(--muted); padding:7px 11px; font-size:11px; cursor:pointer; }
.filter-button.active { border-color:var(--green); background:var(--green-soft); color:var(--green); font-weight:700; }
.exercise-list { margin-top:20px; border-top:1px solid var(--line); }
.exercise-row { width:100%; display:grid; grid-template-columns:54px minmax(0,1fr) 150px 24px; gap:16px; align-items:center; border:0; border-bottom:1px solid var(--line); background:transparent; padding:18px 10px; text-align:left; cursor:pointer; }
.exercise-row:hover { background:var(--white); }
.exercise-id { color:var(--green); font-weight:800; }
.exercise-preview { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:#3f4944; }
.report-status { justify-self:start; padding:5px 8px; font-size:10px; font-weight:700; }
.report-status.pending { background:#edf0ee; color:#66716b; }
.report-status.consistent { background:var(--green-soft); color:var(--green); }
.report-status.issue { background:#f7e7e4; color:#9a3f35; }
.report-status.uncertain { background:var(--gold-soft); color:var(--gold); }
.row-arrow { color:var(--muted); font-size:20px; }
dialog { width:min(900px,calc(100vw - 32px)); max-height:90vh; padding:0; border:1px solid var(--line); box-shadow:0 24px 80px #1c2e2533; }
dialog::backdrop { background:#15201b99; }
.dialog-head { display:flex; justify-content:space-between; padding:24px 28px 18px; border-bottom:1px solid var(--line); }
.dialog-head .kicker { margin:0 0 5px; }
.dialog-head h2 { margin:0; }
.icon-button { width:36px; height:36px; border:1px solid var(--line); background:white; font-size:25px; cursor:pointer; }
.dialog-body { padding:8px 28px 24px; overflow:auto; max-height:calc(90vh - 160px); }
.dialog-body section { padding:20px 0; }
.dialog-body section + section { border-top:1px solid var(--line); }
.dialog-body h3 { margin:0 0 12px; font-size:14px; }
.document-text { white-space:pre-wrap; line-height:1.75; margin:0; font-family:Georgia,serif; font-size:15px; }
.page-source { color:var(--muted); font-size:11px; margin:12px 0 0; }
.answer-heading { display:flex; align-items:center; gap:10px; }
.evidence-badge { padding:4px 7px; background:var(--gold-soft); color:var(--gold); font-size:10px; font-weight:700; }
.source-viewer-toolbar { min-height:42px; display:flex; justify-content:space-between; align-items:center; gap:16px; margin-top:12px; padding:7px 9px; border:1px solid var(--line); border-bottom:0; background:#f2f5f3; }
.source-viewer-toolbar>span { color:var(--muted); font-size:10px; }
.source-viewer-toolbar .crop-status { padding:4px 7px; background:var(--green-soft); color:var(--green); font-weight:700; }
.official-answer-viewer { display:block; width:100%; height:min(68vh,760px); border:1px solid var(--line); background:#e7ebe8; }
.source-caption { margin:8px 0 0; color:var(--muted); font-size:10px; line-height:1.5; }
.ai-result { background:#f1f5f2; padding:0 !important; }
.verdict { min-height:70px; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:7px 20px; align-items:center; padding:15px 18px; }
.verdict.good { background:#dfeee6; color:#175a42; }
.verdict.attention { background:#f9e9df; color:#8b442d; }
.verdict span { font-size:17px; font-weight:800; }
.verdict strong { font-size:12px; }
.verdict small { grid-column:1/-1; opacity:.75; }
.result-tabs { display:flex; padding:0 18px; border-bottom:1px solid var(--line); background:white; }
.result-tab { border:0; border-bottom:2px solid transparent; background:transparent; padding:13px 0; margin-right:24px; color:var(--muted); font-size:12px; cursor:pointer; }
.result-tab.active { border-color:var(--green); color:var(--ink); font-weight:700; }
#review-panel { padding:18px; }
.review-grid { margin:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); border:1px solid var(--line); background:white; }
.review-grid>div { padding:12px 14px; }
.review-grid>div:nth-child(even) { border-left:1px solid var(--line); }
.review-grid>div:nth-child(n+3) { border-top:1px solid var(--line); }
.review-grid dd { margin-top:5px; }
.review-block,.remediation-block { margin-top:12px; padding:15px; background:white; border:1px solid var(--line); }
.review-block h4,.remediation-block h4 { margin:0 0 9px; font-size:12px; }
.review-block p,.remediation-block p { margin:5px 0; color:#46514b; font-size:12px; line-height:1.65; }
.remediation-block { border-left:3px solid var(--gold); }
.solution-panel { margin:0; padding:20px; max-height:460px; overflow:auto; white-space:pre-wrap; font-family:Georgia,serif; font-size:13px; line-height:1.75; background:white; }
.dialog-actions { min-height:72px; display:flex; align-items:center; justify-content:space-between; gap:20px; padding:14px 28px; border-top:1px solid var(--line); background:white; }
.dialog-actions span { color:var(--muted); font-size:11px; }
.primary-button { border:0; background:var(--green); color:white; padding:11px 16px; cursor:pointer; }
.primary-button:disabled { opacity:.55; cursor:wait; }
@media (max-width:760px) { .topbar{padding:0 16px}.source-status{display:none}.shell{display:block}.sidebar{border:0;border-bottom:1px solid var(--line);padding:12px;overflow:auto}.nav-label,.evidence-note{display:none}#chapter-nav{display:flex;min-width:max-content}.chapter-button{width:190px}.chapter-button.active{box-shadow:inset 0 -3px var(--green)}main{padding:28px 18px}.chapter-head{display:block}.chapter-stats{margin-top:24px;width:max-content}.learning-intro,.algorithm-body{grid-template-columns:1fr}.prerequisite-head{align-items:stretch;flex-direction:column}.lesson-section summary{grid-template-columns:52px minmax(0,1fr) 24px;padding:12px}.lesson-content{padding:0 12px 12px}.algorithm-body aside{border-left:0;border-top:1px solid var(--line)}.concept-detail dl>div{grid-template-columns:1fr;gap:5px}.exam-section{padding:20px 12px}.exam-playbook>summary{grid-template-columns:38px minmax(0,1fr) 22px;padding:13px 10px}.exam-workspace{grid-template-columns:1fr}.exam-example{border-left:0;border-top:1px solid #46564e}.exam-check{align-items:stretch;flex-direction:column}.exam-actions{justify-content:space-between}.verification-dashboard{grid-template-columns:repeat(2,1fr)}.verification-dashboard>div:nth-child(3){border-left:0;border-top:1px solid var(--line)}.verification-dashboard>div:nth-child(4){border-top:1px solid var(--line)}.exercise-toolbar{align-items:stretch;flex-direction:column}.exercise-filters{overflow:auto}.search input{width:100%}.search{display:grid;grid-template-columns:auto 1fr}.exercise-row{grid-template-columns:42px minmax(0,1fr) 24px}.report-status{display:none}.review-grid{grid-template-columns:1fr}.review-grid>div:nth-child(even){border-left:0}.review-grid>div+div{border-top:1px solid var(--line)}.dialog-actions span{display:none} }