*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:-apple-system,"PingFang SC","Microsoft YaHei","HarmonyOS Sans","Noto Sans SC",Arial,sans-serif;background:#f6f7f6;color:#1a2a1a;font-size:17px;line-height:1.7;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}
a{text-decoration:none;color:inherit}button{cursor:pointer;border:none;font-family:inherit;background:none;outline:none}
:root{--green:#0c7222;--gl:#1a8a3a;--gbg:#f6faf4;--gbg2:#edf4ea;--gold:#D4A017;--gld2:#FFD700;--dk:#1a2a1a;--mid:#444;--gy:#888;--r:14px;--rb:30px;--sh:0 4px 20px rgba(12,114,34,0.10);--shh:0 8px 32px rgba(12,114,34,0.18)}
.container{max-width:960px;margin:0 auto;padding:0 20px}
.ft{opacity:0;transform:translateY(16px);transition:opacity .45s ease,transform .45s ease}.ft.v{opacity:1;transform:translateY(0)}

/* ===== NAVBAR (全站统一) ===== */
#nv{position:sticky;top:0;z-index:1000;background:#fff;border-top:3px solid #0c7222;border-bottom:1px solid #e8f0e8;box-shadow:0 2px 12px rgba(12,114,34,0.07)}
.ni{display:flex;align-items:center;gap:14px;padding:0 20px;max-width:1200px;margin:0 auto;height:56px}
.nl{display:flex;flex-direction:column;flex-shrink:0}
.nm{font-size:18px;font-weight:800;color:var(--green);white-space:nowrap;letter-spacing:-0.3px}
.ns{font-size:11px;color:var(--gold);font-weight:500;white-space:nowrap;line-height:1;margin-top:-1px}
.nsw{flex:1;display:flex;flex-direction:column;gap:2px;max-width:500px}
.nsb{display:flex;align-items:center;border:1.5px solid var(--green);border-radius:22px;overflow:hidden;background:#f9fbf9;height:36px;transition:box-shadow .2s,border-color .2s}
.nsb:focus-within{border-color:var(--gl);box-shadow:0 0 0 3px rgba(12,114,34,0.12);background:#fff}
.nsb input{flex:1;border:none;outline:none;padding:0 12px;font-size:14px;font-family:inherit;color:var(--dk);background:transparent;min-width:100px}
.nsb input::placeholder{color:#bbb}
.nsb button{display:flex;align-items:center;gap:4px;background:var(--green);color:#fff;padding:0 14px;font-size:14px;font-weight:600;height:100%;transition:background .15s;border-radius:0 21px 21px 0}
.nsb button:hover{background:var(--gl)}
.npt{display:flex;align-items:center;gap:5px;flex-wrap:wrap}
.npl{font-size:11px;color:var(--gy)}
.nptg{font-size:11px;color:var(--gy);cursor:pointer;padding:1px 6px;border-radius:8px;transition:all .15s;white-space:nowrap}
.nptg:hover{color:var(--green);background:var(--gbg)}
.nr{display:flex;align-items:center;gap:8px;flex-shrink:0}
.nra{font-size:14px;color:var(--mid);cursor:pointer;white-space:nowrap;padding:4px 10px;border-radius:6px;transition:all .15s}
.nra:hover{color:var(--green);background:var(--gbg)}
.nra.on{color:var(--green);font-weight:600;background:var(--gbg)}
.nvb{background:linear-gradient(135deg,var(--gold),var(--gld2));color:#7a5800;padding:5px 12px;border-radius:18px;font-size:12px;font-weight:700;white-space:nowrap;box-shadow:0 2px 8px rgba(212,160,23,0.25);transition:transform .15s}
.nvb:hover{transform:translateY(-1px)}
.nlb{width:32px;height:32px;border-radius:50%;background:var(--gbg);display:flex;align-items:center;justify-content:center;font-size:15px;cursor:pointer;transition:background .15s}
.nlb:hover{background:var(--gbg2)}
.nmi{display:none;gap:8px;align-items:center}
.mmo{display:none;position:fixed;top:56px;left:0;right:0;background:#fff;z-index:999;box-shadow:0 4px 20px rgba(0,0,0,0.10);padding:8px 0;max-height:calc(100vh - 56px);overflow-y:auto}
.mmo.o{display:block}
.mmo a{display:flex;align-items:center;gap:8px;padding:12px 20px;font-size:15px;color:var(--mid);border-bottom:1px solid #f5f5f5}
.mmo a:last-child{border-bottom:none}
.mmo a:active{background:var(--gbg);color:var(--green)}
@media(max-width:992px){.ni{gap:10px;height:52px}.nsb{background:#f5f5f5;border-color:#e0e0e0}.nsb input{font-size:12px}.nsb button{padding:0 10px;font-size:12px}.nra{display:none}.nr{gap:6px}}
@media(max-width:768px){.ni{padding:0 12px;height:50px;gap:8px}.nm{font-size:15px}.ns{display:none}.nsw{max-width:none;flex:1}.nsb{height:32px;background:#f5f5f5;border-color:#e0e0e0}.nsb input{font-size:12px;min-width:60px;padding:0 8px}.nsb button{padding:0 8px;font-size:11px}.nsb button span:last-child{display:none}.npt{display:none}.nvb{font-size:11px;padding:3px 8px}.nlb{width:28px;height:28px;font-size:13px}.nmi{display:flex}}

/* ===== 页面头 ===== */
.page-head{background:linear-gradient(160deg,#064e3b,#0c7222);color:#fff;padding:28px 0 22px}
.page-head .container{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px}
.page-head h1{font-size:24px;font-weight:800;letter-spacing:-0.3px}
.page-head .sub{font-size:14px;opacity:.8}
.page-head .badge{background:rgba(255,255,255,0.12);padding:4px 12px;border-radius:14px;font-size:12px}
@media(max-width:768px){.page-head{padding:20px 0 16px}.page-head h1{font-size:20px}}

/* ===== 练习模式选择 ===== */
.mode-section{padding:20px 0 12px}
.mode-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.mode-card{background:#fff;border:1px solid #e8f0e8;border-radius:var(--r);padding:18px;text-align:center;transition:all .2s;cursor:pointer}
.mode-card:hover{border-color:var(--green);box-shadow:var(--sh);transform:translateY(-2px)}
.mode-card.on{border-color:var(--green);background:var(--gbg)}
.mode-card .mi{font-size:28px;margin-bottom:4px}
.mode-card h3{font-size:15px;font-weight:700;color:var(--dk);margin-bottom:2px}
.mode-card p{font-size:12px;color:var(--gy)}
@media(max-width:768px){.mode-grid{gap:8px}.mode-card{padding:12px 8px}.mode-card .mi{font-size:22px}}

/* ===== 筛选区 ===== */
.filter-section{background:#fff;border:1px solid #e8f0e8;border-radius:var(--r);padding:16px 20px;margin-bottom:16px}
.filter-row{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.filter-row select{padding:10px 12px;border:1px solid #e0e0e0;border-radius:10px;font-size:13px;color:var(--mid);background:#fff;font-family:inherit;outline:none;min-width:90px;cursor:pointer;-webkit-appearance:none;appearance:none;padding-right:24px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 6px center;background-size:10px}
.filter-row select:focus{border-color:var(--green)}
.filter-row select:disabled{color:#aaa;background-color:#f5f6f5;cursor:not-allowed;opacity:.85}
.filter-row .practice-chapter-filter[hidden]{display:none}
.filter-row .btn-start{background:var(--green);color:#fff;padding:10px 28px;border-radius:var(--rb);font-size:14px;font-weight:600;transition:background .15s;min-height:44px}
.filter-row .btn-start:hover{background:var(--gl)}
@media(max-width:768px){.filter-section{padding:12px 14px}.filter-row{gap:8px}.filter-row select{flex:1;min-width:0;padding:8px 6px;font-size:12px}.filter-row .btn-start{width:100%;text-align:center}}

/* ===== 题目区 ===== */
.q-area{display:none}
.q-area.active{display:block}
.q-card{background:#fff;border-radius:var(--r);padding:24px;margin-bottom:14px;box-shadow:0 1px 4px rgba(0,0,0,0.04)}
.q-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;flex-wrap:wrap;gap:6px}
.q-num{font-size:13px;color:var(--gy);font-weight:600}
.q-diff{font-size:12px;color:var(--gold)}
.q-sub{font-size:12px;color:var(--gy)}
.q-stem{font-size:17px;font-weight:600;color:var(--dk);margin-bottom:18px;line-height:1.8}
.xkw-practice-question-html{width:100%;overflow-x:auto;word-break:break-word}
.q-opts{display:flex;flex-direction:column;gap:8px}
.q-opt{display:block;width:100%;text-align:left;padding:14px 18px;border:2px solid #e0e0e0;border-radius:12px;font-size:15px;background:#fff;color:var(--dk);transition:all .15s;min-height:48px}
.q-opt:hover{border-color:var(--green);background:var(--gbg)}
.q-opt.sel{border-color:var(--green);background:var(--gbg);color:var(--green);font-weight:600}
.q-opt.ok{border-color:var(--green);background:#e7f7ee;color:var(--green)}
.q-opt.no{border-color:#c53d3d;background:#fde8e8;color:#c53d3d}
.q-act{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.q-btn{padding:12px 28px;border-radius:var(--rb);font-size:15px;font-weight:600;transition:all .15s;min-height:48px}
.q-btn.submit{background:var(--green);color:#fff}
.q-btn.submit:disabled{background:#c9d2cf;cursor:not-allowed}
.q-btn.submit:hover:not(:disabled){background:var(--gl)}
.q-btn.skip{background:#f0f0f0;color:var(--gy)}
.q-btn.next{background:var(--gl);color:#fff;display:none}
.q-btn.next.show{display:inline-block}

/* ===== 解析区 ===== */
.analysis{display:none;margin-top:14px;padding:16px;background:var(--gbg);border-radius:12px;border-left:3px solid var(--green)}
.analysis.show{display:block}
.analysis .ar{font-size:15px;font-weight:700;margin-bottom:6px}
.analysis .ar.ok{color:var(--green)}
.analysis .ar.no{color:#c53d3d}
.analysis .ad{font-size:14px;color:var(--mid);line-height:1.8}
.analysis .ad b{color:var(--green)}
.analysis .ad .wrong{color:#c53d3d;text-decoration:line-through}
.analysis .ad .right{color:var(--green);font-weight:700}
.practice-answer-section+.practice-answer-section{margin-top:16px;padding-top:16px;border-top:1px solid #dfe9df}
.practice-answer-title{font-size:14px;font-weight:700;color:var(--green);margin-bottom:8px}
.analysis .xkw-practice-question-html{background:transparent}

/* ===== 进度条 ===== */
.progress{background:#fff;border-radius:var(--r);padding:14px 20px;margin-top:12px;box-shadow:0 1px 4px rgba(0,0,0,0.04);display:none}
.progress.active{display:block}
.progress-row{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.progress-track{flex:1;height:8px;background:#e0e0e0;border-radius:4px;overflow:hidden;min-width:100px}
.progress-fill{height:100%;background:var(--green);border-radius:4px;transition:width .3s}
.progress-info{font-size:13px;color:var(--mid)}
.progress-info .ok{color:var(--green);font-weight:700}
.progress-info .no{color:#c53d3d;font-weight:700}

/* ===== 空状态 ===== */
.empty-state{text-align:center;padding:60px 20px}
.empty-state .em{font-size:48px;margin-bottom:12px}
.empty-state p{font-size:15px;color:var(--gy)}
.empty-state .hint{font-size:13px;color:var(--gy);margin-top:6px}

/* ===== 完成页 ===== */
.complete{display:none;text-align:center;padding:40px 20px}
.complete.active{display:block}
.complete .emoji{font-size:56px;margin-bottom:12px}
.complete h3{font-size:22px;font-weight:800;color:var(--dk);margin-bottom:6px}
.complete p{font-size:14px;color:var(--gy);margin-bottom:16px}
.complete .score-card{display:inline-block;background:var(--gbg);border-radius:var(--r);padding:20px 36px;margin-bottom:16px}
.complete .score{font-size:36px;font-weight:800;color:var(--green)}
.complete .score-label{font-size:13px;color:var(--mid)}
.complete .btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.complete .btns button{padding:10px 28px;border-radius:var(--rb);font-size:14px;font-weight:600;transition:all .15s}
.complete .btns .primary{background:var(--green);color:#fff}
.complete .btns .primary:hover{background:var(--gl)}
.complete .btns .ghost{background:#fff;color:var(--green);border:2px solid var(--green)}
.complete .btns .ghost:hover{background:var(--gbg)}

/* 试题内容通过学科网接口 POST /xopqbm/questions 获取。 */

/* ===== FOOTER ===== */
footer{background:#1a2a1a;color:rgba(255,255,255,0.75);padding:32px 0 16px;margin-top:32px}
.fi{max-width:1200px;margin:0 auto;padding:0 20px}
.fc{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:20px;margin-bottom:16px}
.fln{font-size:16px;font-weight:700;color:#fff;margin-bottom:6px}
.fd{font-size:12px;line-height:1.7;opacity:.65}
.fct{font-size:14px;font-weight:600;color:#fff;margin-bottom:8px}
.fl{display:flex;flex-direction:column;gap:5px}
.fl a{font-size:13px;opacity:.65;transition:opacity .15s}
.fl a:hover{opacity:1;color:#fff}
.fpi{font-size:12px;opacity:.65;margin-bottom:3px}
.fpi span{color:var(--gld2)}
.fb2{display:flex;justify-content:space-between;align-items:center;padding-top:12px;border-top:1px solid rgba(255,255,255,0.08);font-size:11px;opacity:.4;flex-wrap:wrap;gap:6px}
.fb2 a{margin-left:10px}
.fb2 a:hover{opacity:1;color:#fff}
@media(max-width:992px){.fc{grid-template-columns:1fr 1fr}}
@media(max-width:768px){.fc{grid-template-columns:1fr;gap:14px}}