/* css/02-practice.css —— 答题与阅读面：纸墨质感 / 选项 / 答题导航 / 夜读
 * 拆分自 public/index.html 单文件版（第 2/5 段，保持原始顺序）。
 * 本项目的 CSS 为多轮迭代叠加：后引入的文件覆盖先前的同名规则，
 * 修改样式请优先在本段内追加；不要调整 index.html 中的引入顺序。
 * 本段包含的迭代：
 *   - Paper, ink and deliberate actions: a quiet study desk
 *   - Reading contrast and the action row
 *   - One hierarchy for the current question; lower-luminance night reading
 *   - A continuous reading surface and a compact answer rail
 *   - A consistent state grammar, with the next task clearly leading
 */
/* Paper, ink and deliberate actions: a quiet study desk */
:root{--bg:#f4f2eb;--paper:#fffdf7;--ink:#29332b;--muted:#647060;--line:#ddded3;--soft:#edf1e5}
body{background:#f4f2eb;color:#29332b}
.topbar{background:#f8f7f0;border-bottom-color:#ddded3}
.workspace-brand .brand-name{color:#293b2d}
.overview-heading h1,.task-title-line h2,.study-chapters>.between h2{font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;font-weight:600;letter-spacing:0}
.task-title-line h2{font-size:29px;line-height:1.35}
.study-chapters>.between h2{font-size:22px}
.overview-summary{border-bottom-color:#d9ddd0}
.chapter-table th{border-bottom-color:#d9ddd0}
.chapter-table td{border-bottom-color:#e0e2d7}
.chapter-table tr.recommended{background:#eef1e6}
.chapter-table tr.recommended .chapter-quantity,.chapter-table tr.recommended .quantity-done{font-weight:400}
.chapter-table tr.recommended .chapter-accuracy{font-weight:600;color:#314e37}
.chapter-progress-stack .track{height:5px;background:#d3dacb}
.chapter-progress-stack .chapter-quantity{font-size:15px;color:#2e4032;font-weight:400}
.chapter-progress-stack .track span{background:#829c86}
.chapter-table tr.recommended .track span{background:#52735a}
.exam-shortcut{border-top-color:#d9ddd0}
.button{border-radius:5px;background:linear-gradient(180deg,#3c634e,#335740);box-shadow:inset 0 1px 0 #ffffff1f,0 1px 0 #254730;transition:background .15s,transform .12s,box-shadow .12s}
.button:hover{background:#31533f;transform:none}
.button:active{transform:translateY(1px);box-shadow:inset 0 1px 2px #20392829}
.button.secondary{background:linear-gradient(180deg,#fffdf6,#f0eee4);border-color:#d9dbcc;color:#354d3b;box-shadow:inset 0 1px 0 #fff,0 1px 0 #ddddcf}
.button.secondary:hover{background:#efeee3}
.segmented{background:#eceee4}
.segmented button.active{background:#fbfcf5}
body.practice-mode{background:#eeeee6}
body.practice-mode .topbar{background:#f3f3eb;border-bottom:1px solid #d8ddcf}
body.practice-mode .content{max-width:824px;width:calc(100% - 48px);margin:26px auto 38px;padding:32px 68px 48px;min-height:0;background:#fffdf7;border:1px solid #deddd0;border-radius:3px;box-shadow:none;background-image:linear-gradient(90deg,#a39c7804,transparent 4%,transparent 96%,#a39c7805)}
.focus-actions{display:flex;align-items:center;gap:21px}
.reading-mode{display:flex;align-items:center;gap:7px;height:31px;padding:0 10px;background:linear-gradient(#fcfcf4,#eaedde);border:1px solid #d7ddcb;border-radius:5px;color:#41563e;font-size:13px;box-shadow:inset 0 1px 0 #fff,0 1px 0 #d7dacd}
.reading-mode:active{transform:translateY(1px);box-shadow:inset 0 1px 2px #59604a1f}
.lamp-dot{width:6px;height:6px;border:1px solid #94a28a;border-radius:50%;background:#a6b399;box-shadow:inset 0 1px 1px #67735d33}
.quiz-context{border-bottom-color:#dde2d3;gap:8px 20px;margin-bottom:12px}
.question-title{font-family:inherit;font-size:26px;line-height:40px;font-weight:450;letter-spacing:0;color:#253225;text-wrap:pretty}
.options .option{border-color:#e0e3d6;background:transparent}
.options .option .option-text{font-size:18px;line-height:1.8}
.options .option.selected{background:transparent;border:1px solid #7a916f}
.options .option.correct{background:#edf2e4;border-color:#c5d4ba}
.options .option.incorrect{background:#f6ebe1;border-color:#d9bba4}
.option:not(.selected) .choice-indicator{border-color:#7b8e71}
.option.selected .choice-indicator{background:#36593d;border-color:#36593d}
.option .letter{color:#58664d}
.question-actions .button{background:linear-gradient(#3c634e,#335740);border-radius:5px;box-shadow:inset 0 1px 0 #ffffff1f,0 1px 0 #254730}
.question-actions .button:hover{background:#31533f}
.question-actions .button:disabled{background:#e4e7da;color:#87917a;box-shadow:none}
.quiz-navigation .answer-grid button{border:1px solid transparent}
.quiz-navigation .answer-grid button:not(.current):not(.is-correct):not(.is-wrong){background:transparent;border:1px solid #c4ccbc;color:#4c6043}
.quiz-navigation .answer-grid button.current{background:transparent;border:1px solid #426643;box-shadow:none;color:#264331}
.quiz-navigation .answer-grid button.current.is-correct{background:#dbe8d1}
.quiz-navigation .answer-grid button.current.is-wrong{background:#eedaca;box-shadow:none}
.quiz-navigation .answer-grid button.current .icon{color:#365e4c}
.quiz-navigation .answer-grid button.current.is-wrong .icon{color:#8e5b3a}
.answer-grid button.is-correct:not(.current){background:#dbe8d1}
.answer-grid button.is-wrong:not(.current){background:#eedaca}
.paper-page.page-turn{animation:paper-settle .24s cubic-bezier(.2,.7,.2,1) both}
@keyframes paper-settle{from{transform:translateY(7px);opacity:.6}to{transform:translateY(0);opacity:1}}
.practice-mode .completion{background:transparent;border:0;box-shadow:none;padding:24px 0 0}
.completion h1{font-family:"Songti SC","STSong","Noto Serif CJK SC",serif;font-size:28px;font-weight:600}
body.practice-mode.reading-night{background:#252d26;background-image:none}
body.practice-mode.reading-night .topbar{background:#292f25;border-color:#3e4935}
.reading-night .focus-course,.reading-night .focus-back{color:#c9d0bc}
.reading-night .demo-label{color:#abb79c}
body.practice-mode.reading-night .content{background-color:#f1eedf;border-color:#d4d5c4;box-shadow:0 1px 0 #c2c0a6}
.reading-night .reading-mode{background:linear-gradient(#454b35,#343e2b);color:#d4d9c2;border-color:#59654c;box-shadow:inset 0 1px 0 #5a6548,0 1px 0 #182519}
.reading-night .lamp-dot{background:#a4b981;border-color:#b7c498;box-shadow:0 0 5px #a4b9814d}
.reading-night .options .option.selected{background:transparent;border-color:#6e8154}
.reading-night .options .option.correct{background:#e1e8cd;border-color:#bacba4}
.reading-night .options .option.incorrect{background:#efdfcc;border-color:#d0af93}
.reading-night .options .option{border-color:#d4dbc5}
.reading-night .answer-grid button.is-correct:not(.current){background:#d7e5c8}
.reading-night .answer-grid button.is-wrong:not(.current){background:#eedaca}
@media(max-width:960px){body.practice-mode .content{max-width:780px;padding-left:48px;padding-right:48px}.task-title-line h2{font-size:26px}}
@media(max-width:760px){body.practice-mode .content{width:calc(100% - 24px);margin:18px auto 26px;padding:30px 22px 35px;min-height:0}.question-title{font-size:21px;line-height:1.85}.focus-actions{gap:12px}.reading-mode{height:29px;padding:0 8px;font-size:12px}.focus-course{font-size:11px}.task-title-line h2{font-size:25px}.study-chapters>.between h2{font-size:20px}}
.rhythm-side{display:flex;flex-direction:column;justify-content:space-between;gap:0}
.rhythm-stat{display:flex;flex-direction:column;gap:3px}
.rhythm-stat>span{font-size:13px;line-height:18px;color:#52664d}
.rhythm-stat strong{font-family:Arial,sans-serif;font-variant-numeric:tabular-nums;font-size:26px;font-weight:400;line-height:30px;color:#36523c}
.rhythm-stat small{font-size:13px;font-weight:400;margin-left:5px}
@media(max-width:440px){.rhythm-side{flex-direction:row;justify-content:flex-start;gap:30px}.rhythm-stat{gap:2px}}
.chart .axis-value,.chart .axis-date,.chart .gap-annotation text{font-size:14px;fill:#525a4e;font-weight:400}
.chart .mean-caption{font-size:14px;fill:#626a61;font-weight:400}
.chart .latest-caption{font-size:14px;fill:#365e4c;font-weight:500}
.heat-key{font-size:14px;color:#41483c}
.question-actions .quiz-tools .keyboard-note,.question-actions .quiz-tools .keyboard-note kbd{font-size:14px;color:#4d554b;font-weight:400}
.summary-stat.coverage-stat strong{font-size:22px;line-height:34px;color:#586352;font-weight:400}
.summary-stat .mistake-entry{display:flex;flex-direction:column;align-items:flex-start;gap:5px;text-align:left;padding:0;color:#36543b}
.summary-stat .mistake-entry>span{display:flex;align-items:center;gap:6px;font-size:14px;line-height:20px}
.mistake-entry .icon{width:14px;height:14px}
.summary-stat .mistake-entry strong{font-size:28px;line-height:34px;color:#2d4933;font-weight:400}
.mistake-entry:hover>span{text-decoration:underline;text-underline-offset:4px}
.summary-stat p{font-size:14px;color:#454f42}
.chart-period{font-family:Arial,sans-serif;font-variant-numeric:tabular-nums;font-size:14px;color:#454f42;line-height:22px}
.chapter-table th{color:#344035;font-weight:400}
.chart .axis-value,.chart .axis-date,.chart .gap-annotation text{fill:#394235}
.heat-key{color:#374033}
.question-actions .quiz-tools .keyboard-note,.question-actions .quiz-tools .keyboard-note kbd{color:#3f483c}
.heat-cell.today{position:relative;border:0;box-shadow:none;outline:none}
.heat-cell.today.is-empty{border:1px solid #8ca18d}
.heat-cell.today:after{content:"";position:absolute;bottom:-7px;left:calc(50% - 2px);width:4px;height:4px;background:#29332b;border-radius:50%}
/* Reading contrast and the action row */
.chapter-name{color:#27362b}
.chapter-table .chapter-accuracy{color:#2b392e}
.chapter-progress-stack .quantity-done{color:#2a3a2e}
.chapter-progress-stack .quantity-total,.quantity-slash{color:#62705d}
.chart .axis-value,.chart .axis-date{fill:#5b6655}
.quiz-navigation .answer-grid button.current>span:first-child{font-weight:600}
.question-panel .question-actions{margin-top:10px;padding-top:10px;border-top:1px solid #d8ddd0}
.reading-night .question-panel .question-actions{border-top-color:#d3d8c7}
/* One hierarchy for the current question; lower-luminance night reading */
.chart .axis-value,.chart .axis-date{fill:#435044}
.chart .gap-annotation text{font-size:13px;fill:#56644f}
.summary-stat p,.chart-period,.rhythm-meta{color:#3e4e3e}
.heat-key{color:#344332}
.quiz-navigation .answer-grid button:not(.current){background:transparent;border:1px solid #c4ccbc;color:#526049;box-shadow:none}
.quiz-navigation .answer-grid button.is-correct:not(.current) .icon{color:#476c42}
.quiz-navigation .answer-grid button.is-wrong:not(.current) .icon{color:#925837}
.quiz-navigation .answer-grid button.current,.quiz-navigation .answer-grid button.current.is-correct,.quiz-navigation .answer-grid button.current.is-wrong{background:#365e4c;border:1px solid #365e4c;color:#fffdf7;box-shadow:none}
.quiz-navigation .answer-grid button.current .icon{color:#cfdec5}
.quiz-navigation .answer-grid button.current.is-wrong .icon{color:#f0d0b5}
body.practice-mode.reading-night{background:#252d26;color:#e4e5d8;--ink:#e4e5d8;--muted:#b6c3ad;--line:#4b5747;--green:#bdd2a8;--red:#d9b08b}
body.practice-mode.reading-night .topbar{background:#252d26;border-color:#3f4939}
body.practice-mode.reading-night .content{background:#343d33;border-color:#444d3f;box-shadow:none;background-image:none}
.reading-night .reading-mode{background:#3b4736;border-color:#516349;color:#cfd9c4;box-shadow:inset 0 1px 0 #ffffff08}
.reading-night .lamp-dot{background:#a8bb94;border-color:#bbcca9;box-shadow:none}
.reading-night .quiz-context{border-color:#4b5747}
.reading-night .quiz-context>div:first-child,.reading-night .quiz-context>div:first-child strong,.reading-night .quiz-context>div:first-child>span,.reading-night .quiz-context .answer-card-label,.reading-night .quiz-context .fav-toggle{color:#c3cfb8}
.reading-night .question-title{color:#e5e6dc}
.reading-night .options .option{border-color:#4b5747;color:#e0e3d6}
.reading-night .options .option .option-text{color:#e0e3d6}
.reading-night .options .option .letter{color:#b9c8ad}
.reading-night .options .option:hover:not(:disabled){background:#3a4637;border-color:#788b66}
.reading-night .options .option.selected{background:transparent;border-color:#92b081}
.reading-night .option:not(.selected) .choice-indicator{border-color:#95a785}
.reading-night .option.selected .choice-indicator{background:#bfd2ab;border-color:#bfd2ab}
.reading-night .option.selected .choice-indicator:after{background:#283922}
.reading-night .options .option.correct{background:#435338;border-color:#819c68}
.reading-night .options .option.incorrect{background:#58483b;border-color:#9b7858}
.reading-night .quiz-navigation .answer-grid button:not(.current){background:transparent;border-color:#59654f;color:#c1cfb6}
.reading-night .quiz-navigation .answer-grid button.is-correct:not(.current) .icon{color:#acc997}
.reading-night .quiz-navigation .answer-grid button.is-wrong:not(.current) .icon{color:#d0a684}
.reading-night .quiz-navigation .answer-grid button.current,.reading-night .quiz-navigation .answer-grid button.current.is-correct,.reading-night .quiz-navigation .answer-grid button.current.is-wrong{background:#bfd2ab;border-color:#bfd2ab;color:#253720}
.reading-night .quiz-navigation .answer-grid button.current .icon{color:#365d2a}
.reading-night .quiz-navigation .answer-grid button.current.is-wrong .icon{color:#885132}
.reading-night .question-panel .question-actions{border-color:#4b5747}
.reading-night .question-actions .quiz-tools .keyboard-note,.reading-night .question-actions .quiz-tools .keyboard-note kbd{color:#bcc9b1}
.reading-night .shortcut-separator{color:#88977b}
.reading-night .button,.reading-night .question-actions .button{background:#bed1aa;border-color:#c6d6b7;color:#223120;box-shadow:inset 0 1px 0 #ffffff1a,0 1px 0 #1f2f1c}
.reading-night .button:hover,.reading-night .question-actions .button:hover{background:#ccdabd}
.reading-night .question-actions .button:disabled{background:#43513c;border-color:#516147;color:#95a38b;opacity:1;box-shadow:none}
.reading-night .button.secondary{background:#3b4534;border-color:#627354;color:#d0ddc4;box-shadow:none}
.reading-night .explanation{background:#3d4c34;border-color:#92b278;color:#d1dbc4}
.reading-night .explanation .feedback-title{color:#c4d6b4}
.reading-night .explanation.wrong{background:#4a4034;border-color:#bb9570;color:#ded3c2}
.reading-night .explanation.wrong .feedback-title{color:#dab18a}
.reading-night .completion-ring .ring-track{stroke:#4b5844}
.reading-night .completion-ring .ring-value{stroke:#a8c591}
.reading-night .review-list button{color:#d1dbc4;border-color:#4b5747}
.reading-night .quiz-navigation .answer-grid button:not(.current):not(.is-correct):not(.is-wrong){background:transparent;border-color:#59654f;color:#c1cfb6}
.reading-night .options{border-color:#4b5747}
/* A continuous reading surface and a compact answer rail */
body.practice-mode{background:#f4f2eb}
body.practice-mode .topbar{background:#f8f7f0;border-color:#ddded3}
body.practice-mode .content{max-width:760px;width:calc(100% - 48px);padding:32px 36px 58px;background:none;border:0;border-radius:0;box-shadow:none;background-image:none}
body.practice-mode.reading-night{background:#2c302c}
body.practice-mode.reading-night .topbar{background:#2c302c;border-color:#42493f}
body.practice-mode.reading-night .content{background:none;border:0;box-shadow:none;background-image:none}
.quiz-navigation .answer-grid{gap:4px}
.quiz-navigation .answer-grid button{width:40px;height:44px;border:0;border-radius:4px;box-shadow:none;font-size:14px}
.quiz-navigation .answer-grid button:not(.current):not(.is-correct):not(.is-wrong),.quiz-navigation .answer-grid button.is-correct:not(.current),.quiz-navigation .answer-grid button.is-wrong:not(.current){border:0;background:transparent;color:#58674f;box-shadow:none}
.quiz-navigation .answer-grid button.current,.quiz-navigation .answer-grid button.current.is-correct,.quiz-navigation .answer-grid button.current.is-wrong{border:0;background:#365e4c}
.quiz-navigation .answer-grid button>span:first-child{left:0;right:0;top:7px;width:100%;line-height:17px;text-align:center}
.quiz-navigation .answer-grid button .icon{left:14px;right:auto;top:28px;width:12px;height:12px;stroke-width:2.6}
.reading-night .quiz-navigation .answer-grid button:not(.current){border:0;background:transparent;color:#c1cfb6}
.reading-night .quiz-navigation .answer-grid button:not(.current):not(.is-correct):not(.is-wrong){border:0;background:transparent;color:#a7b69b}
.reading-night .quiz-navigation .answer-grid button.current,.reading-night .quiz-navigation .answer-grid button.current.is-correct,.reading-night .quiz-navigation .answer-grid button.current.is-wrong{border:0;background:#bfd2ab}
.trend-panel .chart-readout{display:flex;align-items:center;justify-content:space-between;gap:14px}
.trend-panel .daily-mean{font-size:13px;font-weight:400;color:#596650}
.trend-panel .chart-note{font-size:13px;line-height:18px;color:#596650;margin:2px 0 0;text-align:center;letter-spacing:0}
@media(max-width:760px){body.practice-mode .content{max-width:none;width:calc(100% - 32px);margin:12px auto 24px;padding:24px 8px 38px}.quiz-navigation .answer-grid button{width:34px;height:44px}.quiz-navigation .answer-grid button .icon{left:11px}}
/* A consistent state grammar, with the next task clearly leading */
.study-chapters>.between h2{font-family:inherit;font-size:20px;line-height:28px;font-weight:550;letter-spacing:0}
.chart .mean-caption{font-size:13px;font-weight:400;fill:#65715d}
.chart .gap-annotation text{font-size:13px;font-weight:400;fill:#65715d}
.quiz-navigation .answer-grid button{width:48px;height:36px;display:flex;align-items:center;justify-content:center;gap:4px}
.quiz-navigation .answer-grid button>span:first-child{position:static;width:auto;line-height:16px;text-align:center;font-weight:500}
.quiz-navigation .answer-grid button.current>span:first-child{font-weight:600}
.quiz-navigation .answer-grid button .icon{position:static;left:auto;right:auto;top:auto;width:13px;height:13px;stroke-width:2.5;flex:none}
.quiz-navigation .answer-grid button.is-correct:not(.current){background:#e5eddb;color:#375337}
.quiz-navigation .answer-grid button.is-wrong:not(.current){background:#f0e4d9;color:#825634}
.reading-night .quiz-navigation .answer-grid button.is-correct:not(.current){background:#35442f;color:#c5d7b8}
.reading-night .quiz-navigation .answer-grid button.is-wrong:not(.current){background:#463b30;color:#ddba96}
.question-panel .options{border-bottom:0}
.options .option.selected{border:0;background:#edf1e3}
.reading-night .options .option.selected{border:0;background:#364330}
.question-panel .question-actions{border-top:0;padding-top:0;margin-top:16px}
.reading-night .question-panel .question-actions{border-top:0}
@media(max-width:760px){.study-chapters>.between h2{font-size:18px}.quiz-navigation .answer-grid button{width:44px}.quiz-navigation .answer-grid button .icon{position:static;left:auto}}