:root{color-scheme:light;font-family:Inter,PingFang SC,Microsoft YaHei,Noto Sans SC,system-ui,sans-serif;--bg: #f7f9f8;--surface: #ffffff;--surface-soft: #f2f8f7;--line: #e4eceb;--line-strong: #cddbd9;--text: #172321;--muted: #677471;--subtle: #8a9693;--teal: #0d8f8a;--teal-dark: #08746f;--teal-soft: #e5f5f3;--yellow: #f6c24b;--yellow-soft: #fff7df;--red: #dc625c;--red-soft: #fff0ef;--shadow: 0 12px 34px rgba(20, 49, 48, .08)}*{box-sizing:border-box}html{background:var(--bg)}body{margin:0;min-width:320px;min-height:100vh;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}html,body,#root,.app-shell{overflow-x:hidden}button,input{font:inherit}button{border:0;cursor:pointer}button:disabled{cursor:not-allowed;opacity:.45}.app-shell{min-height:100vh}.topbar{position:sticky;top:0;z-index:20;display:grid;grid-template-columns:220px minmax(260px,1fr) 260px auto 44px;gap:24px;align-items:center;min-height:78px;padding:0 28px;background:#ffffffeb;border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}.brand{display:flex;align-items:center;gap:12px}.brand-mark{display:grid;place-items:center;width:42px;height:42px;color:var(--teal);background:var(--teal-soft);border:1px solid #c5e7e4;border-radius:8px}.brand strong{display:block;font-size:18px;letter-spacing:0}.brand span{display:block;margin-top:3px;color:var(--muted);font-size:12px}.search-box{display:grid;grid-template-columns:20px 1fr auto;align-items:center;gap:10px;max-width:520px;height:44px;padding:0 14px;color:var(--subtle);background:#fbfdfc;border:1px solid var(--line);border-radius:8px}.search-box input{width:100%;min-width:0;color:var(--text);background:transparent;border:0;outline:0}.search-box kbd{color:var(--subtle);font-size:12px}.progress-strip{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;color:var(--muted);font-size:13px}.mini-progress,.pet-progress{overflow:hidden;height:6px;background:#dfe7e5;border-radius:999px}.mini-progress i,.pet-progress i{display:block;height:100%;background:linear-gradient(90deg,var(--teal),#4ab9ad);border-radius:inherit}.progress-strip strong{color:var(--text);font-size:13px}.mode-switch{display:flex;align-items:center;gap:4px;height:42px;padding:3px;background:#f9fbfa;border:1px solid var(--line);border-radius:8px}.mode-switch button,.plain-button,.icon-button{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:34px;padding:0 13px;color:var(--muted);background:transparent;border-radius:7px}.mode-switch button.active{color:var(--teal-dark);background:var(--teal-soft);box-shadow:inset 0 0 0 1px #bfe3df}.mobile-menu,.close-mobile{display:none}.workspace{display:grid;grid-template-columns:236px minmax(480px,1fr) 420px;height:calc(100vh - 78px);min-height:calc(100vh - 78px);overflow:hidden}.sidebar{position:sticky;top:78px;height:calc(100vh - 78px);display:flex;flex-direction:column;padding:26px 16px;overflow:auto;background:#fbfcfc;border-right:1px solid var(--line)}.course-title{padding:0 8px 18px}.course-title span{display:block;color:var(--muted);font-size:13px}.course-title strong{display:block;margin-top:4px;font-size:17px}.lesson-list{display:grid;gap:18px}.lesson-list h3{margin:0 0 8px;color:#2c3b38;font-size:13px;font-weight:700}.lesson-row{display:grid;grid-template-columns:44px 1fr 18px;align-items:center;width:100%;min-height:38px;padding:0 10px;color:var(--muted);text-align:left;background:transparent;border-radius:7px}.lesson-row b{overflow:hidden;color:inherit;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}.lesson-row svg{color:var(--subtle)}.lesson-row.active{color:var(--teal-dark);background:var(--teal-soft)}.lesson-row.active svg{color:var(--teal)}.side-tools{display:grid;gap:4px;margin-top:auto;padding:10px 0 0;border-top:1px solid var(--line)}.side-tools button{display:grid;grid-template-columns:22px 1fr auto;align-items:center;min-height:40px;padding:0 10px;color:#53615e;text-align:left;background:transparent;border-radius:7px}.side-tools button:hover,.lesson-row:hover{background:#eef6f4}.side-tools em{min-width:22px;padding:2px 6px;color:#fff;font-size:11px;font-style:normal;text-align:center;background:var(--red);border-radius:999px}.reader{min-width:0;width:100%;height:calc(100vh - 78px);padding:28px 42px 36px;overflow-x:hidden;overflow-y:auto;background:var(--surface);border-right:1px solid var(--line)}.breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;color:var(--subtle);font-size:13px}.page-pill{padding:3px 8px;color:var(--teal-dark);background:var(--teal-soft);border-radius:999px}.reader-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;margin-top:26px}.eyebrow{display:inline-flex;margin-bottom:8px;color:var(--teal);font-size:13px;font-weight:700}h1{margin:0;font-size:clamp(30px,3vw,42px);line-height:1.18;letter-spacing:0}.reader-actions{display:flex;gap:8px;padding-top:8px}.plain-button{color:#43514f;background:#f9fbfa;border:1px solid var(--line)}.plain-button.primary-outline{color:var(--teal-dark);background:var(--teal-soft);border-color:#bfe3df}.core-box{width:100%;max-width:100%;margin-top:24px;padding:18px 20px;background:linear-gradient(180deg,#f0fbf9,#f8fdfc);border:1px solid #b8e1dd;border-radius:8px}.box-title,.pet-title,.feedback>div,.stats-card div{display:flex;align-items:center;gap:8px}.box-title{color:var(--teal-dark);font-weight:700}.core-box p{max-width:72ch;margin:12px 0 0;color:#3d4a47;font-size:15px;line-height:1.85;overflow-wrap:anywhere}.keyword-row{max-width:100%;display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:20px 0 22px;padding-bottom:18px;border-bottom:1px solid var(--line)}.keyword-row span{color:var(--muted);font-size:13px}.keyword-row button{height:28px;max-width:100%;padding:0 10px;color:var(--teal-dark);background:var(--teal-soft);border-radius:7px}.study-area{display:grid;grid-template-columns:minmax(0,1fr) 130px;gap:26px;align-items:start;max-width:900px}.lesson-article{max-width:100%;min-width:0;line-height:1.86;overflow-wrap:anywhere;word-break:break-word}.lesson-article h2{margin:30px 0 12px;font-size:24px;line-height:1.35}.lesson-article p{margin:0 0 14px;color:#394743}.keypoint-box{margin:18px 0 30px;padding:16px 18px;background:var(--yellow-soft);border:1px solid #f1d489;border-radius:8px}.keypoint-box.essential{margin-top:10px}.keypoint-box.essential li{margin:8px 0;font-weight:600}.note-box{position:sticky;top:110px;padding-left:14px;border-left:1px solid var(--line)}.note-box div{display:flex;align-items:center;gap:7px;margin-bottom:10px;color:var(--muted);font-size:13px;font-weight:700}.note-box textarea{width:100%;min-height:220px;padding:10px;color:var(--text);resize:vertical;background:#fbfcfc;border:1px solid var(--line);border-radius:7px;outline-color:var(--teal);line-height:1.6}.source-callout{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;margin-top:18px;padding:16px;color:#33423f;background:#f8fbfa;border:1px solid var(--line);border-radius:8px}.source-callout svg{color:var(--teal)}.source-callout b,.source-callout span{display:block}.source-callout span{margin-top:3px;color:var(--muted);font-size:13px;line-height:1.6}.source-callout button{min-height:36px;padding:0 12px;color:#fff;background:var(--teal);border-radius:7px}.keypoint-box strong{color:#b27700}.keypoint-box ul{margin:8px 0 0;padding-left:20px}.ocr-panel{max-width:760px;margin-top:8px}.ocr-toolbar{display:flex;justify-content:space-between;gap:16px;padding-top:10px;border-top:1px solid var(--line)}.ocr-toolbar label{display:inline-flex;align-items:center;gap:10px;color:var(--muted);font-size:13px}.ocr-toolbar input{display:none}.ocr-toolbar label i{position:relative;width:42px;height:22px;background:#dbe4e2;border-radius:999px}.ocr-toolbar label i:after{position:absolute;top:3px;left:3px;width:16px;height:16px;content:"";background:#fff;border-radius:50%;box-shadow:0 1px 3px #00000026;transition:transform .18s ease}.ocr-toolbar input:checked+i{background:var(--teal)}.ocr-toolbar input:checked+i:after{transform:translate(20px)}.font-tools{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:13px}.font-tools button{width:34px;height:30px;color:var(--muted);background:#f7faf9;border:1px solid var(--line);border-radius:7px}.ocr-panel p{margin:16px 0 0;padding:16px;color:#465451;line-height:1.9;background:#fbfcfc;border:1px dashed var(--line-strong);border-radius:8px}.reader-footer{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;max-width:760px;margin-top:24px;padding-top:18px;border-top:1px solid var(--line)}.reader-footer button,.panel-actions button,.question-meta button,.pet-card button,.stats-card button,.fill-row button,.judge-row button{display:inline-flex;align-items:center;justify-content:center;gap:7px;min-height:38px;padding:0 14px;color:#42514d;background:#fff;border:1px solid var(--line);border-radius:7px}.reader-footer .study-complete,.panel-actions .primary,.fill-row button{color:#fff;background:var(--teal);border-color:var(--teal)}.practice-panel{position:sticky;top:78px;height:calc(100vh - 78px);display:flex;flex-direction:column;gap:16px;padding:18px 28px 24px;overflow:auto;background:#fbfcfc}.practice-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:0;min-height:44px;border-bottom:1px solid var(--line)}.practice-tabs button{position:relative;color:var(--muted);background:transparent;font-size:14px}.practice-tabs button.active{color:var(--teal-dark);font-weight:700}.practice-tabs button.active:after{position:absolute;right:20%;bottom:-1px;left:20%;height:3px;content:"";background:var(--teal);border-radius:999px 999px 0 0}.question-card,.pet-card,.stats-card{background:var(--surface);border:1px solid var(--line);border-radius:8px}.question-card{padding:18px}.question-meta{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;margin-bottom:18px}.question-meta span{padding:5px 9px;color:#9b7514;font-size:12px;font-weight:700;background:var(--yellow-soft);border-radius:7px}.question-meta strong{justify-self:center;color:var(--teal-dark);font-size:13px}.question-meta button{min-height:30px;color:var(--muted);font-size:12px}.question-card h2{margin:0 0 18px;font-size:17px;line-height:1.65}.answers{display:grid;gap:10px}.answers button{display:grid;grid-template-columns:28px 1fr 18px;align-items:center;min-height:46px;padding:0 12px;color:#33423f;text-align:left;background:#fff;border:1px solid var(--line);border-radius:7px}.answers button:hover,.judge-row button:hover{border-color:#9fd1cc}.answers button.correct,.judge-row .correct{color:var(--teal-dark);background:var(--teal-soft);border-color:var(--teal)}.answers button.wrong,.judge-row .wrong{color:#9d3731;background:var(--red-soft);border-color:var(--red)}.judge-row,.fill-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.fill-row{grid-template-columns:1fr auto}.fill-row input{min-width:0;height:42px;padding:0 12px;color:var(--text);background:#fff;border:1px solid var(--line);border-radius:7px;outline-color:var(--teal)}.feedback{margin-top:18px;padding:16px;border-radius:8px}.feedback.correct{background:#f1fbf8;border:1px solid #b7ddd8}.feedback.wrong{background:var(--red-soft);border:1px solid #efc6c2}.feedback>div{color:var(--teal-dark);font-weight:700}.feedback.wrong>div{color:#9d3731}.feedback p{margin:10px 0 14px;color:#53615e;font-size:14px;line-height:1.7}.feedback dl{display:grid;grid-template-columns:86px 1fr;gap:8px;margin:0;padding-top:12px;border-top:1px solid rgba(50,99,94,.16);font-size:13px}.feedback dt{color:var(--muted);font-weight:700}.feedback dd{margin:0}.wrong-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}.wrong-tags button{display:inline-flex;align-items:center;gap:5px;height:30px;padding:0 10px;color:#9d3731;background:#fff;border:1px solid #efc6c2;border-radius:7px}.pet-card{display:grid;grid-template-columns:1fr 148px;gap:8px;align-items:end;padding:18px 12px 14px 18px;background:linear-gradient(180deg,#fffaf0,#fffdf7);border-color:#efd494}.pet-title{justify-content:space-between}.pet-title h3{margin:0;font-size:18px}.pet-title span{padding:4px 8px;color:#9b7514;font-size:12px;font-weight:800;background:#fff2c7;border-radius:999px}.pet-progress{margin:12px 0}.pet-card p{margin:0 0 14px;color:#5d625d;font-size:13px;line-height:1.65}.pet-card button{color:#9b6b04;background:#fff4cf;border-color:#e6c16a}.pet-card img{width:148px;max-width:100%;aspect-ratio:1 / 1.12;object-fit:cover;object-position:center;border-radius:8px}.panel-actions{display:grid;grid-template-columns:1fr 1fr;gap:12px}.panel-actions button{min-height:48px;font-weight:700}.stats-card{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:14px}.stats-card div{color:var(--muted);font-size:13px}.stats-card strong{margin-left:auto;color:var(--text)}.stats-card button{grid-column:1 / -1;color:var(--red)}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:100;display:grid;place-items:center;padding:28px;background:#0f1c1b6b;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.textbook-modal{display:grid;grid-template-rows:auto 1fr;width:min(1080px,96vw);height:min(860px,92vh);overflow:hidden;background:var(--surface);border:1px solid var(--line);border-radius:8px;box-shadow:var(--shadow)}.textbook-modal header{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 16px;border-bottom:1px solid var(--line)}.textbook-modal header span,.textbook-modal header small{display:block;color:var(--muted);font-size:12px}.textbook-modal header strong{display:block;margin:3px 0;font-size:17px}.textbook-modal header button{display:grid;place-items:center;width:38px;height:38px;color:var(--muted);background:#f8fbfa;border:1px solid var(--line);border-radius:7px}.textbook-pages{overflow:auto;padding:18px;background:#e9efee}.textbook-pages figure{width:min(760px,100%);margin:0 auto 18px}.textbook-pages figcaption{margin-bottom:8px;color:var(--muted);font-size:13px;font-weight:700}.textbook-pages img{display:block;width:100%;height:auto;background:#fff;border:1px solid var(--line-strong);border-radius:6px;box-shadow:0 10px 28px #1431301f}.textbook-unavailable{display:grid;place-items:center;min-height:420px;padding:42px;color:var(--muted);text-align:center;background:#f8fbfa;border:1px dashed var(--line-strong);border-radius:8px}.textbook-unavailable svg{color:var(--teal)}.textbook-unavailable h2{margin:14px 0 8px;color:var(--text);font-size:22px}.textbook-unavailable p{max-width:520px;margin:0;line-height:1.8}@media(max-width:1180px){.topbar{grid-template-columns:210px 1fr auto 44px}.progress-strip{display:none}.workspace{grid-template-columns:220px minmax(420px,1fr) 360px}.reader{padding:26px 30px 34px}.practice-panel{padding:16px 20px 22px}}@media(max-width:960px){.topbar{grid-template-columns:1fr auto;gap:12px;padding:12px 16px}.brand span,.search-box,.mode-switch{display:none}.mobile-menu{display:inline-flex}.workspace{display:block;height:auto;overflow:visible}.sidebar{position:fixed;inset:0 auto 0 0;z-index:40;width:min(82vw,320px);height:100vh;transform:translate(-102%);box-shadow:var(--shadow);transition:transform .2s ease}.sidebar.open{transform:translate(0)}.close-mobile{display:inline-flex;align-self:flex-end;width:34px;height:34px;margin-bottom:8px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:7px}.reader{height:auto;border-right:0;overflow:visible}.practice-panel{position:static;height:auto;border-top:1px solid var(--line)}.reader-head,.reader-footer{flex-direction:column}.study-area{grid-template-columns:1fr}.note-box{position:static;max-width:760px;padding-left:0;border-left:0}.source-callout{grid-template-columns:24px 1fr}.source-callout button{grid-column:1 / -1}}@media(max-width:640px){.reader{padding:22px 18px 28px}.core-box,.keyword-row,.study-area,.lesson-article,.ocr-panel,.reader-footer{width:100%;max-width:min(100%,342px)}.core-box p,.lesson-article p,.keypoint-box li{word-break:break-all}.core-box{padding:16px}.core-box p{font-size:14px;line-height:1.9}.keyword-row{overflow:hidden}.keyword-row button{white-space:normal}h1{font-size:30px}.reader-actions,.ocr-toolbar,.panel-actions,.pet-card,.stats-card{grid-template-columns:1fr}.reader-actions,.ocr-toolbar{display:grid}.pet-card img{justify-self:center}.modal-backdrop{padding:10px}.textbook-modal{width:100%;height:94vh}}