/* v2.30.3: 由 sync_shell.js 从主 HTML 的 5 个内联 <style> 块按原顺序合并生成 —— 不要手改本文件。 */
*{margin:0;padding:0;box-sizing:border-box}
body{background:#E6E2D8;color:#262624;font-family:Georgia,'Times New Roman',serif;line-height:1.7;padding:0 16px 60px;-webkit-overflow-scrolling:touch;overflow-x:hidden;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0.05)}
table,th,td{font-family:Georgia,'Times New Roman',serif}
.wrap{max-width:900px;margin:0 auto;position:relative;z-index:1;transform:translateZ(0)}
header{text-align:center;padding:48px 0 36px}
h1{font-size:28px;font-weight:400;letter-spacing:3px;color:#1A1A18;margin-bottom:6px}
.subtitle{font-size:13px;color:#5e5a55;letter-spacing:1px;font-style:italic}.how-to-use{max-width:800px;margin:20px auto 28px;padding:18px 24px;background:#f5f3ee;border-radius:6px;font-family:Georgia,'Times New Roman',serif}
.htu-title{font-size:20px;font-weight:normal;color:#262624;margin-bottom:16px;letter-spacing:2px;text-transform:uppercase;text-align:center}
/* Scoring map card */
.score-map{max-width:800px;margin:26px auto 28px;padding:26px 26px 20px;background:#f5f3ee;border-radius:6px;font-family:Georgia,'Times New Roman',serif}
.sm-title{font-size:20px;font-weight:normal;color:#262624;letter-spacing:2px;text-transform:uppercase;text-align:center;margin-bottom:4px}
.sm-sub{font-size:14px;color:#5e5a55;font-style:italic;text-align:center;margin:0 auto 22px;width:max-content;max-width:100%;line-height:1.7;white-space:nowrap}
.sm-map{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:24px}
.sm-branch{background:#fffdf9;border:1px solid #e4e0d8;border-top:3px solid var(--smc);border-radius:6px;padding:14px 16px;position:relative;min-height:104px;text-align:center}
.sm-branch.sm-fc{--smc:#1E3D5C}.sm-branch.sm-lr{--smc:#8B5E00}.sm-branch.sm-gr{--smc:#8B2E2E}.sm-branch.sm-pr{--smc:#1F5C2E}
.sm-branch:nth-child(2){padding-bottom:66px}
.sm-branch:nth-child(3){padding-bottom:66px}
.sm-branch:nth-child(4){padding-top:66px}
.sm-branch:nth-child(5){padding-top:66px}
.sm-headwrap{position:absolute;top:12px;left:0;right:0;text-align:center}
.sm-head{display:block;font-size:14px;letter-spacing:1.6px;text-transform:uppercase;font-weight:700;color:var(--smc);margin:0 0 4px}
.sm-c1{display:inline-block;font-size:10px;letter-spacing:1.2px;text-transform:uppercase;font-weight:700;color:#fff;background:var(--smc);border-radius:3px;padding:1px 7px}
.sm-body{font-size:18px;color:#4a4540;line-height:1.7;font-style:italic;margin:84px 0 0;text-align:left}
.sm-body .sm-key{font-style:normal;font-weight:700;color:#262624;border-bottom:2px solid var(--smc)}
.sm-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:112px;height:112px;border-radius:50%;background:#4A3F35;color:#F3EFE7;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:2;box-shadow:0 0 0 8px #f5f3ee,0 0 0 9px #e0dcd4,0 6px 18px rgba(74,63,53,.35)}
.sm-center .b2{font-size:36px;font-weight:700;letter-spacing:3px;line-height:1}
.sm-center .lbl{font-size:9.5px;letter-spacing:1.2px;text-transform:uppercase;color:#D9CBBA;margin-top:6px;max-width:88px;line-height:1.5}
.sm-foot{margin-top:20px;text-align:center;font-size:13px;color:#4a4540;font-style:italic;border-top:1px solid #e0dcd4;padding-top:14px;letter-spacing:.3px;line-height:1.9;white-space:normal}
.sm-scale{display:grid;grid-template-columns:repeat(3,1fr);gap:2px 14px;margin-top:6px}
.sm-scale span{white-space:nowrap}
.sm-foot b{font-style:normal;font-weight:700;color:#262624}
.sm-src{text-align:left;font-size:12.5px;color:#5e5a55;font-style:italic;margin-top:8px;line-height:1.7}
.sm-src a{color:#1E3D5C;text-decoration:underline;text-underline-offset:2px}
.how-to-use p{font-size:18px;color:#4a4540;line-height:1.85;margin:0;padding:0;font-style:italic;text-align:left}
.tabs{display:flex;justify-content:center;gap:4px;flex-wrap:wrap}
.tabs input{display:none}
.tabs label{padding:10px 20px;cursor:pointer;font-size:14px;letter-spacing:1.5px;color:#5e5a55;border-bottom:2px solid transparent;transition:all .2s;user-select:none}
.tabs label:hover{color:#4a4540}
#tab-econ:checked ~ .sticky-bar .tabs label[for=tab-econ],
#tab-inter:checked ~ .sticky-bar .tabs label[for=tab-inter],
#tab-minds:checked ~ .sticky-bar .tabs label[for=tab-minds],
#tab-env:checked ~ .sticky-bar .tabs label[for=tab-env],
#tab-tech:checked ~ .sticky-bar .tabs label[for=tab-tech],
#tab-toolkit:checked ~ .sticky-bar .tabs label[for=tab-toolkit]{color:var(--tc,#333);border-bottom-color:var(--tc,#333);background:var(--tb,transparent)}
.tab-content{display:none}
#tab-econ:checked ~ #content-econ,
#tab-inter:checked ~ #content-inter,
#tab-minds:checked ~ #content-minds,
#tab-env:checked ~ #content-env,
#tab-tech:checked ~ #content-tech,
#tab-toolkit:checked ~ #content-toolkit{display:block}

/* Sticky bar with tabs + search */
.sticky-bar{position:sticky;top:0;z-index:100;background:rgba(240,237,229,0.9);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-bottom:1px solid #d8d4cc;padding:10px 16px 0;margin:0 -16px 28px}
.search-wrap{display:flex;justify-content:center;padding:8px 0 10px}
.search-inner{position:relative;width:100%;max-width:560px;display:flex;align-items:center;gap:8px}
#search-input{flex:1;font-family:Georgia,serif;font-size:14px;padding:7px 32px 7px 12px;border:1px solid #d8d4cc;border-radius:4px;background:#faf9f6;color:#2a2825;width:100%;outline:none;transition:border-color .2s}
#search-input:focus{border-color:#6e6861;box-shadow:0 0 0 2px rgba(120,115,108,0.1)}
#search-input::placeholder{color:#6e6861;font-style:italic}
#search-clear{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:17px;color:#6e6861;cursor:pointer;padding:2px 4px;line-height:1;display:none;border-radius:3px}
#search-clear:hover{color:#5C5650;background:rgba(0,0,0,.05)}
.tab-icon{display:inline-block;vertical-align:-1px;margin-right:4px}
.tab-badge{display:inline-flex;align-items:center;justify-content:center;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--tc,#6e6861);color:#fff;font-size:10px;font-weight:700;margin-left:5px;vertical-align:middle;letter-spacing:0}

/* Practice divider */
.practice-divider{display:flex;align-items:center;gap:14px;margin:28px 0 14px}
.practice-divider::before,.practice-divider::after{content:'';flex:1;height:1px;background:#d8d4cc}
.practice-divider span{font-size:12px;letter-spacing:3px;color:#5e5a55;font-weight:700;text-transform:uppercase}

/* Tooltip overlay */
#tip-overlay{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(30,25,20,0.18);opacity:0;pointer-events:none;transition:opacity .15s;z-index:15}
#tip-overlay.show{opacity:1;pointer-events:auto}

/* Search highlight */
.search-hl{background:rgba(139,94,0,0.22);padding:0 2px;border-radius:2px;color:inherit}
.no-results{text-align:center;padding:40px 20px;color:#5e5a55;font-style:italic;font-size:16px;display:none}

/* Mind map */
.mindmap{background:var(--mb,#f5f3ee);border:1px solid #e0dcd4;border-radius:8px;padding:28px 24px 20px;margin-bottom:28px;overflow-x:auto}
.mm-label{font-size:16px;letter-spacing:2px;color:#7a7570;text-align:center;margin-bottom:16px;font-weight:400}
.mm-root-wrap{text-align:center;margin-bottom:20px;position:relative}.mm-root-wrap::after{content:'';position:absolute;bottom:-20px;left:50%;width:1.5px;height:20px;background:var(--mc);opacity:.4;transform:translateX(-50%)}
.mm-root{display:inline-block;font-size:18px;letter-spacing:3px;color:var(--mc);padding:6px 22px;border:1.5px solid var(--mc);border-radius:20px}
.mm-branches{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;min-width:600px}
.mm-branch{flex:1;min-width:140px;max-width:180px}
.mm-node{font-size:15px;font-weight:700;color:var(--mc);text-align:center;height:52px;line-height:1.3;display:flex;align-items:center;justify-content:center;padding:5px 0;border-bottom:2px solid var(--mc);margin-bottom:8px;letter-spacing:.5px;box-sizing:border-box}
.mm-leaves{display:flex;flex-direction:column;gap:4px}
.mm-leaf{font-size:14px;color:#666058;text-align:center;padding:3px 6px;border-radius:3px;line-height:1.4;transition:background .15s}.mm-leaf-ref{opacity:.6;cursor:default}
.mm-leaf-link{cursor:pointer}
.mm-leaf-link:hover{background:rgba(0,0,0,.04);color:#333}
.mm-legend{margin-top:18px;text-align:center}
.lg-divider{height:1px;background:#d8d4cc;margin-bottom:10px}
.lg-title{font-size:10px;letter-spacing:2px;color:#7a7570;margin-bottom:8px}
.lg-row{display:flex;justify-content:center;gap:20px}
.lg-item{display:flex;align-items:center;gap:6px}
.lg-circle{display:inline-flex;align-items:center;justify-content:center;width:19px;height:19px;border-radius:50%;font-size:11px;font-weight:700}
.lg-label{font-size:11px;color:#5e5a55;letter-spacing:.5px}

/* Question cards */
.q-card{background:#faf9f6;border:1px solid #e4e0d8;border-radius:6px;margin-bottom:10px;transition:border-color .2s}
.q-card:hover{border-color:#ccc8c0}
.q-head{cursor:pointer;list-style:none;padding:14px 18px;display:flex;align-items:center}
.q-head::-webkit-details-marker{display:none}
.q-head-inner{display:flex;align-items:center;justify-content:space-between;width:100%;gap:12px;flex-wrap:wrap}
.q-text{font-size:16px;color:#2a2825;flex:1;font-weight:400}
/* v2.25.4: cards open the single-question view with one click - the expand/collapse
   affordance is retired, so the chevron is hidden entirely */
.q-arrow{display:none}.chev{display:none}
.q-body{padding:0 18px 16px}
.q-body.static{padding-top:14px}
/* v2.25.4: PRACTICE cards (div type) become the same compact directory rows as the
   question cards - title left, status pills right, one click opens the single view.
   The scoped selectors stop matching once the body moves into #qv-cardwrap, so the
   full chain is always shown inside the single-question view. */
div.q-card>.q-body.static{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 18px}
/* v2.25.6: PRACTICE row matches the question cards - title left, chain icon, status pills right */
div.q-card>.q-body.static>.q-num-static{flex:1;margin-bottom:0;order:1}
div.q-card>.q-body.static>.card-link-ic{order:2}
div.q-card>.q-body.static>.q-status{margin:0;order:3}
div.q-card>.q-body.static>:not(.q-num-static):not(.q-status):not(.card-link-ic){display:none!important}
.q-num-static{font-size:16px;color:#2a2825;margin-bottom:10px;font-weight:400}
.from-row{margin-bottom:10px}
.section-label{font-size:10px;letter-spacing:1.5px;color:#5e5a55;margin-bottom:6px;font-weight:700}
.tag-row{display:flex;flex-wrap:wrap;gap:5px}
.from-tag{display:inline-flex;align-items:center;gap:4px;font-size:14px;padding:3px 9px;border-radius:3px;color:#3a3835}
.from-num{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;border-radius:50%;font-size:10px;font-weight:700;background:rgba(255,255,255,.6)}
.answer-block{margin-bottom:10px}
.answer-text{font-size:16px;line-height:1.85;color:#2a2825}
.hl{padding:1px 3px;border-radius:2px}
.phrase-tag{display:inline-block;font-size:14px;padding:3px 10px;border-radius:12px;background:#f0ede7;color:#5C5650;border:1px solid #e0dcd4}

/* v9 new: collocations */
.colloc-label{color:#5e5a55}
.colloc-tag{display:inline-block;font-size:14px;padding:3px 10px;border-radius:3px;background:rgba(120,115,108,0.08);color:#5C5650;border:1px solid rgba(120,115,108,0.12)}

/* v9 new: DM and vocab markers with tooltips */
.dm,.lex{position:relative;cursor:help;z-index:1}
.dm:hover,.lex:hover,.dm.tip-show,.lex.tip-show{z-index:30}
.dm{border-bottom:1.5px dotted #A09A92}
.lex{border-bottom:1.5px solid rgba(120,115,108,0.45)}
.dm::after,.lex::after{
  content:attr(data-tip);
  position:absolute;bottom:calc(100% + 5px);left:50%;transform:translateX(-50%);
  background:#2A2825;color:#F0EDE5;
  padding:6px 11px;border-radius:4px;
  font-size:14px;font-style:italic;
  white-space:normal;max-width:300px;width:max-content;
  opacity:0;pointer-events:none;
  transition:opacity .15s;z-index:20;
  font-family:Georgia,serif;line-height:1.5;
  box-shadow:0 2px 8px rgba(0,0,0,.18);
}
.dm::before,.lex::before{
  content:'';position:absolute;bottom:calc(100% + 1px);left:50%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:#2A2825;
  opacity:0;pointer-events:none;transition:opacity .15s;z-index:20;
}
.dm:hover::after,.lex:hover::after,
.dm.tip-show::after,.lex.tip-show::after,
.dm:hover::before,.lex:hover::before,
.dm.tip-show::before,.lex.tip-show::before{opacity:1}

/* v9 new: register note */
.register-note{font-size:14px;color:#5e5a55;font-style:italic;padding:8px 12px;background:rgba(120,115,108,0.05);border-radius:4px;margin-top:6px;line-height:1.6}
.register-note em{font-style:italic;color:#5C5650}

/* v9 new: TOOLKIT tab */
.toolkit-intro{font-size:15px;color:#5C5650;text-align:center;margin-bottom:24px;font-style:italic;line-height:1.7}
.toolkit-section{background:#faf9f6;border:1px solid #e4e0d8;border-left:3px solid #5C5650;border-radius:6px;margin-bottom:10px;overflow:hidden}
.toolkit-section summary{cursor:pointer;list-style:none;padding:14px 18px;display:flex;align-items:center;justify-content:space-between}
.toolkit-section summary::-webkit-details-marker{display:none}
.toolkit-section .tk-title{font-size:15px;letter-spacing:1px;color:#4A4540;font-weight:700}
.toolkit-section .tk-arrow{color:#5e5a55;display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px}
/* chevron rotation handled by details[open] .chev */
.tk-body{padding:0 18px 16px}
.tk-example{font-size:16px;line-height:1.8;color:#3a3835;padding:10px 14px;background:#f5f3ee;border-radius:4px;margin-bottom:8px;border-left:3px solid #b0aba5}
.tk-example .tk-em{color:#8B5E00;font-style:italic}
.tk-principle{font-size:14px;color:#5e5a55;font-style:italic;padding:10px 14px;line-height:1.6;margin-top:8px;border-top:1px solid #e8e4dc}

/* Flash animation */
@keyframes q-flash{0%,100%{box-shadow:none}20%{box-shadow:0 0 0 2px var(--mc,#999) inset;border-radius:6px}50%{box-shadow:0 0 0 2px var(--mc,#999) inset;border-radius:6px}}
.q-flash{animation:q-flash 1.6s ease}

/* Footer */
footer{position:relative;z-index:1;text-align:center;padding:40px 0 0;font-size:13px;color:#5C5650;letter-spacing:1px}

/* Mobile */
@media(max-width:768px){
  h1{font-size:22px;letter-spacing:2px}
  .subtitle{font-size:12px}
  .score-map{margin:22px auto 24px;padding:20px 14px 16px}
  .sm-title{font-size:17px;letter-spacing:1.5px}
  .sm-sub{font-size:13px;margin-bottom:16px;white-space:normal;width:auto}
  .sm-map{grid-template-columns:1fr;gap:10px}
  .sm-center{position:static;transform:none;margin:0 auto 8px;width:104px;height:104px;box-shadow:0 0 0 6px #f5f3ee,0 0 0 7px #e0dcd4}
  .sm-center .b2{font-size:32px}
  .sm-branch:nth-child(2),.sm-branch:nth-child(3),.sm-branch:nth-child(4),.sm-branch:nth-child(5){padding:12px 14px;min-height:0}
  .sm-body{font-size:16px}
  .sm-foot{font-size:13px;white-space:normal}
  .sm-scale{grid-template-columns:repeat(2,1fr)}
  .sm-src{font-size:12px}
  body{padding:0 12px 50px;line-height:1.65;padding-bottom:calc(50px + env(safe-area-inset-bottom))}
  .sticky-bar{padding-top:env(safe-area-inset-top)}
  .wrap{max-width:100%}
  .sticky-bar{padding:8px 12px 0;margin:0 -12px 20px}
  .tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;justify-content:flex-start;gap:0;scrollbar-width:none;-ms-overflow-style:none}
  .tabs::-webkit-scrollbar{display:none}
  .tabs label{padding:12px 14px;font-size:13px;white-space:nowrap;letter-spacing:1px;min-height:44px;display:inline-flex;align-items:center}
  .tab-badge{min-width:16px;height:16px;font-size:9px}
  .search-wrap{padding:8px 0 10px}
  .search-inner{max-width:100%}
  #search-input{font-size:16px;padding:10px 36px 10px 12px;height:44px;box-sizing:border-box}
  #search-clear{width:44px;height:44px;font-size:18px}
  #status-filter{font-size:15px;padding:5px 30px 5px 12px;min-height:44px;background-position:right 12px center}
  .mm-container{padding:14px 8px}
  .mm-label{font-size:13px;margin-bottom:10px;letter-spacing:1.5px}
  .mm-root{font-size:15px;padding:5px 16px;letter-spacing:2px}
  .mm-root-wrap{margin-bottom:12px}
  .mm-root-wrap::after{height:12px;bottom:-12px}
  .mm-branches{flex-direction:column;min-width:0;gap:0}
  .mm-branch{max-width:100%;min-width:0;padding:6px 0;border-bottom:1px solid rgba(0,0,0,0.06)}
  .mm-branch:last-child{border-bottom:none}
  .mm-branch::before{display:none}
  .mm-node{height:auto;min-height:40px;border-bottom:none;border-left:3px solid var(--mc);text-align:left;padding:8px 0 8px 12px;display:flex;align-items:center;justify-content:flex-start;font-size:15px;margin-bottom:2px;line-height:1.3}
  .mm-leaves{gap:2px;padding-left:12px}
  .mm-leaf{text-align:left;padding:6px 8px;font-size:13.5px;line-height:1.4;min-height:32px;display:inline-flex;align-items:center}
  .arg-legend{gap:12px;margin-top:12px;flex-wrap:wrap}
  .lg-title{font-size:10px;letter-spacing:1.5px}
  .lg-circle{width:20px;height:20px;font-size:11px}
  .lg-label{font-size:11px}
  .q-card{margin-bottom:8px;border-radius:5px}
  .q-head{padding:12px 14px;min-height:48px}
  .q-head-inner{gap:8px}
  .q-num-static{font-size:16px;margin-bottom:6px}
  .q-text{font-size:16px;line-height:1.55}
  .q-body{padding:0 14px 14px}
  .answer-block{margin-bottom:12px}
  .answer-text{font-size:16px;line-height:1.75}
  .section-label{font-size:10px;margin-bottom:5px;letter-spacing:1.5px}
  .from-tags{gap:6px;margin-bottom:8px}
  .from-tag{font-size:12.5px;padding:4px 8px}
  .from-num{width:16px;height:16px;font-size:9px}
  .key-phrases{gap:5px}
  .phrase-tag,.colloc-tag{font-size:12.5px;padding:4px 9px}
  .practice-divider{margin:20px 0 10px;gap:10px}
  .practice-divider span{font-size:11px;letter-spacing:1.5px}
  .toolkit-intro{font-size:14px;padding:0 2px;line-height:1.65}
  .toolkit-section{border-radius:5px;margin-bottom:8px}
  .toolkit-section summary{padding:12px 14px;min-height:48px}
  .tk-title{font-size:14px}
  .toolkit-content{padding:0 14px 14px}
  .tk-example{font-size:15px;padding:8px 12px;line-height:1.7}
  .tk-principle{font-size:13.5px;padding:8px 12px;line-height:1.65}
  .register-note{font-size:13px;line-height:1.6}
  .table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 -14px;padding:0 14px}
  table{font-size:13.5px}
  th,td{padding:6px 8px}
  .dm::after,.lex::after{max-width:calc(100vw - 48px);font-size:12.5px;padding:6px 10px;white-space:normal;line-height:1.5}
  .no-results{font-size:16px;padding:30px 20px}
  footer{font-size:12px;padding:30px 0 0;letter-spacing:0.5px}
  footer > div{font-size:11px;line-height:1.7}
  .how-to-use{padding:12px 14px;margin-bottom:20px}
  .htu-title{font-size:17px;letter-spacing:1.5px}
  .how-to-use p{font-size:16px;line-height:1.8}
}
@media(max-width:480px){
  h1{font-size:20px;letter-spacing:1.5px}
  .subtitle{font-size:11px}
  body{padding:0 10px 40px}
  .sticky-bar{margin:0 -10px 16px;padding:6px 10px 0}
  .tabs label{padding:10px 10px;font-size:12px;letter-spacing:0.5px;min-height:44px}
  .tab-badge{min-width:14px;height:14px;font-size:8px}
  .mm-container{padding:10px 6px}
  .mm-label{font-size:12px}
  .mm-root{font-size:14px;padding:4px 14px;letter-spacing:1.5px}
  .mm-node{font-size:14px;padding:7px 0 7px 10px;min-height:36px}
  .mm-leaf{font-size:13px;padding:5px 6px;min-height:30px}
  .q-head{padding:10px 12px}
  .q-num-static{font-size:15px}
  .q-text{font-size:15px;line-height:1.5}
  .q-body{padding:0 12px 12px}
  .answer-text{font-size:15px;line-height:1.7}
  .section-label{font-size:9px}
  .tk-example{font-size:14.5px;padding:7px 10px}
  .tk-principle{font-size:13px;padding:7px 10px}
  .from-tag{font-size:12px;padding:3px 7px}
  .from-num{width:15px;height:15px;font-size:8px}
  .phrase-tag,.colloc-tag{font-size:12px;padding:3px 8px}
  .toolkit-content{padding:0 12px 12px}
  .toolkit-section summary{padding:10px 12px}
  .table-wrap{margin:0 -12px;padding:0 12px}
  table{font-size:12.5px}
  th,td{padding:5px 6px}
  .dm::after,.lex::after{max-width:calc(100vw - 36px);font-size:12px}
  .how-to-use{padding:10px 12px}
  .how-to-use p{font-size:15px}
  .htu-title{font-size:15px;letter-spacing:1px}
  footer{font-size:11px}
  footer > div{font-size:10px}
}
input[name="tabs"]{display:none}

/* ============ v11 additions ============ */
/* theme consolidation (Morandi palette, per-tab variables) */
:root{
  --c-econ:#8B5E00;--b-econ:rgba(139,94,0,.06);
  --c-inter:#8B2E2E;--b-inter:rgba(139,46,46,.06);
  --c-minds:#4A3F35;--b-minds:rgba(74,63,53,.06);
  --c-env:#1F5C2E;--b-env:rgba(31,92,46,.06);
  --c-tech:#1E3D5C;--b-tech:rgba(30,61,92,.06);
  --c-toolkit:#5C5650;--b-toolkit:rgba(92,86,80,.06);
}
#content-econ{--mc:var(--c-econ);--mb:rgba(139,94,0,.05)}
#content-inter{--mc:var(--c-inter);--mb:rgba(139,46,46,.05)}
#content-minds{--mc:var(--c-minds);--mb:rgba(74,63,53,.05)}
#content-env{--mc:var(--c-env);--mb:rgba(31,92,46,.05)}
#content-tech{--mc:var(--c-tech);--mb:rgba(30,61,92,.05)}
#content-toolkit{--mc:var(--c-toolkit);--mb:rgba(92,86,80,.05)}
#tab-econ:checked ~ .sticky-bar .tabs label[for=tab-econ]{--tc:var(--c-econ);--tb:var(--b-econ)}
#tab-inter:checked ~ .sticky-bar .tabs label[for=tab-inter]{--tc:var(--c-inter);--tb:var(--b-inter)}
#tab-minds:checked ~ .sticky-bar .tabs label[for=tab-minds]{--tc:var(--c-minds);--tb:var(--b-minds)}
#tab-env:checked ~ .sticky-bar .tabs label[for=tab-env]{--tc:var(--c-env);--tb:var(--b-env)}
#tab-tech:checked ~ .sticky-bar .tabs label[for=tab-tech]{--tc:var(--c-tech);--tb:var(--b-tech)}
#tab-toolkit:checked ~ .sticky-bar .tabs label[for=tab-toolkit]{--tc:var(--c-toolkit);--tb:var(--b-toolkit)}

/* keyboard focus (visible for all interactive elements) */
:focus-visible{outline:2px solid var(--tc,var(--mc,#8B5E00));outline-offset:2px;border-radius:2px}
label:focus-visible,button:focus-visible,summary:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible{outline-color:#8B5E00}

/* practice status (check-in) buttons */
.q-status{display:inline-flex;gap:3px;flex-shrink:0;margin-left:6px}
.q-head-inner .q-status{margin-right:2px}
.q-body.static .q-status{margin:0 0 10px}
.st-btn{font-family:Georgia,'Times New Roman',serif;font-size:11px;line-height:1.5;padding:3px 13px;border:1px solid #d8d4cc;border-radius:999px;background:#faf9f6;color:#6e6861;cursor:pointer;letter-spacing:.4px;white-space:nowrap;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform .22s cubic-bezier(.34,1.56,.64,1),background .18s ease,border-color .18s ease,color .18s ease,box-shadow .22s ease}
.st-btn:hover{border-color:#b0aba5;color:#4A4540;background-color:#fff}
.st-btn:active{transform:scale(.94)}
.st-btn.on{font-weight:700;box-shadow:0 1px 3px rgba(0,0,0,.07)}
.st-btn[data-st="done"].on{background:rgba(78,122,90,.16);border-color:rgba(78,122,90,.7);color:#3E634A}
.st-btn[data-st="review"].on{background:rgba(166,94,78,.15);border-color:rgba(166,94,78,.65);color:#8A4A3C}
.st-btn[data-st="master"].on{background:rgba(138,109,59,.16);border-color:rgba(138,109,59,.65);color:#6F5A30}
.tab-progress{margin-left:6px;font-size:10px;letter-spacing:.5px;color:var(--tc,#6e6861);font-weight:700;vertical-align:middle}

/* status filter sits beside the search box (Export/Print/Reset removed in v2.26.9);
   carries the same 3D depth language as the panel buttons */
#status-filter{flex:none;font-family:Georgia,'Times New Roman',serif;font-size:13px;color:#4A4540;background:#FFFDF8;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238a8580' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px;-webkit-appearance:none;appearance:none;border:1px solid #C9C3B8;border-radius:10px;padding:6px 30px 6px 14px;min-height:32px;cursor:pointer;letter-spacing:.4px;line-height:1.2;-webkit-tap-highlight-color:transparent;touch-action:manipulation;box-shadow:0 2px 0 #C9C3B8,0 3px 6px rgba(92,88,82,.12),inset 0 1px 0 rgba(255,255,255,.85);transition:transform .22s cubic-bezier(.34,1.56,.64,1),background .18s ease,border-color .18s ease,box-shadow .22s ease}
#status-filter:hover{border-color:#b0aba5;background-color:#fff}
#status-filter:active{transform:translateY(1px);background-color:#f0ede7}

/* toast notification */
#toast{position:fixed;bottom:26px;left:50%;transform:translateX(-50%) translateY(8px);background:#2A2825;color:#F0EDE5;padding:10px 18px;border-radius:4px;font-size:14px;font-family:Georgia,serif;letter-spacing:.5px;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;z-index:300;box-shadow:0 4px 14px rgba(0,0,0,.2);max-width:88vw;text-align:center}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* print */
@media print{
  body{background:#fff;color:#000;padding:0}
  .sticky-bar,.search-wrap,#search-input,#search-clear,#tip-overlay,.q-status,.q-arrow,.tab-badge,.tab-progress,#toast,#ms-view,#ach-view,#fb-view,.ms-toast,#w-view,.mw-tools,.mw-cats{display:none!important}
  .tab-content{display:block!important}
  .wrap{max-width:100%}
  header{padding:20px 0 10px}
  .mindmap{background:#fff;border:1px solid #999;border-radius:0;padding:12px;margin-bottom:16px}
  .q-card,.toolkit-section{background:#fff;border:1px solid #999;border-radius:0;margin-bottom:8px;break-inside:avoid}
  details .q-body,.tk-body{display:block}
  .answer-text,.q-text,.q-num-static,.tk-example{color:#000}
  .hl,.dm,.lex{-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .mm-leaf-ref{opacity:.75}
  footer{color:#333}
}
@page{margin:12mm}

/* mobile tweaks */
@media(max-width:768px){
  .q-status{gap:2px;margin-left:4px}
  .st-btn{font-size:10px;padding:4px 10px;min-height:40px;display:inline-flex;align-items:center;justify-content:center}
}
@media(max-width:480px){
  .st-btn{font-size:9.5px;padding:4px 9px;letter-spacing:0;min-height:40px}
  .tab-progress{margin-left:3px;font-size:9px}
}

[hidden]{display:none!important}
/* ============ v2.26.13 About me: eye button + about page + carousel ============ */
.about-open{display:inline-flex;align-items:center;gap:7px;border:1.5px solid #B08A4F;background:#FBF7EE;border-radius:999px;padding:3px 13px 3px 8px;font-family:Georgia,serif;font-style:italic;font-size:12.5px;letter-spacing:.5px;color:#5C3F00;cursor:pointer;vertical-align:middle;margin-left:10px;box-shadow:0 1px 0 #B08A4F,0 3px 6px rgba(92,63,0,.12),inset 0 1px 0 rgba(255,255,255,.85);transition:transform .22s cubic-bezier(.34,1.56,.64,1),border-color .15s,color .15s}
.about-open:hover{border-color:#8B5E00;transform:translateY(-1px)}
.about-open:active{transform:translateY(1px)}
.about-open .eye-svg{flex:none}
.about-open .eye-pupil{transition:transform .16s ease-out}
#about-view{background:#EDEAE3;display:none}
body.ab #about-view{display:block}
body.ab #landing,body.ab #gs-app,body.ab #lv-view,body.ab #hu-view{display:none!important}
.about-inner{max-width:960px;margin:0 auto;padding:24px 20px 60px}
.about-head{text-align:center;margin-bottom:22px}
.about-title{font-family:Georgia,serif;font-size:30px;letter-spacing:2px;color:#2A2825}
.about-sub{font-family:Georgia,serif;font-style:italic;font-size:14px;color:#6e6861;margin-top:6px}
.about-contact{text-align:center;margin-top:12px;font-family:Georgia,serif;font-size:13px;color:#5C5650}
.about-mail{color:#8B5E00;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
.about-carousel{overflow:hidden;padding:6px 0 14px;-webkit-mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent);mask-image:linear-gradient(90deg,transparent,#000 2%,#000 98%,transparent)}
.about-track{display:flex;gap:16px;width:max-content;animation:aboutScroll 30s linear infinite}
.about-carousel:hover .about-track{animation-play-state:paused}
@keyframes aboutScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.mo-allin .about-track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
.about-card{width:240px;flex:none;background:#FBF7EE;border:1px solid #E6E1D7;border-radius:14px;padding:20px 18px 22px;box-shadow:0 4px 12px rgba(74,63,53,.07);display:flex;flex-direction:column;align-items:center;text-align:left}
.about-ill{height:106px;flex:none;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.about-ill svg{width:118px;height:88px}
.about-txt{width:100%;font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC',sans-serif;font-size:13px;line-height:1.85;color:#3A342E;text-align:left}
@media(max-width:768px){
  .about-title{font-size:24px}
  .about-card{width:214px;padding:16px 14px 18px}
  .about-ill{height:96px;margin-bottom:14px}
  .about-ill svg{width:106px;height:80px}
  .about-txt{font-size:12.5px}
}
/* ============ Desktop large-screen scaling (1200px+) ============ */
@media(min-width:1200px){
  .wrap{max-width:1080px}
  h1{font-size:34px}
  .subtitle{font-size:15px}
  .htu-title{font-size:24px}
  .how-to-use p{font-size:20px;line-height:1.9}
  .sm-title{font-size:24px}
  .sm-sub{font-size:16px}
  .sm-head{font-size:16px}
  .sm-c1{font-size:11px}
  .sm-body{font-size:20px;margin-top:96px}
  .sm-branch{min-height:118px}
  .sm-center .b2{font-size:40px}
  .sm-center .lbl{font-size:11px}
  .sm-foot{font-size:15px}
  .sm-src{font-size:14px}
  .tabs label{font-size:16px;padding:12px 24px}
  .tab-badge{min-width:19px;height:19px;font-size:11px}
  #search-input{font-size:16px;padding:9px 34px 9px 14px}
  #search-clear{font-size:19px}
  #status-filter{font-size:15px;padding:7px 32px 7px 16px;min-height:38px}
  .st-btn{font-size:13px;padding:5px 16px}
  .tab-progress{font-size:11.5px}
  .no-results{font-size:18px}
  .practice-divider span{font-size:13.5px}
  .mm-label{font-size:18px}
  .mm-root{font-size:20px;padding:7px 26px}
  .mm-node{font-size:17px;height:60px}
  .mm-leaf{font-size:16px}
  .lg-title{font-size:11px}
  .lg-circle{width:21px;height:21px;font-size:12px}
  .lg-label{font-size:12.5px}
  .q-num-static{font-size:18.5px}
  .q-text{font-size:18.5px}
  .section-label{font-size:11.5px}
  .from-tag{font-size:16px;padding:4px 10px}
  .from-num{width:18px;height:18px;font-size:11px}
  .answer-text{font-size:18.5px;line-height:1.9}
  .phrase-tag,.colloc-tag{font-size:16px;padding:4px 11px}
  .register-note{font-size:16px}
  .toolkit-intro{font-size:17px}
  .qv-share{font-size:17px}
  .toolkit-section .tk-title{font-size:17px}
  .tk-example{font-size:18px}
  .tk-principle{font-size:16px}
  table{font-size:15px}
  .dm::after,.lex::after{font-size:15px;padding:8px 12px}
  footer{font-size:14px}
  #toast{font-size:15px}
  p[style*="font-size:15px"]{font-size:17px!important}
}
/* ---- Single-question view (Option B) ---- */
#q-view{background:#EDEAE3;display:none}
/* v2.26.4: the single-question view is an in-flow page - the page scrollbar (far
   right) carries it, it opens at the very top, Back stays pinned top-left */
body.qv #landing,body.qv #gs-app,body.qv #lv-view,body.qv #hu-view{display:none!important}
body.qv .ms-view.on,body.qv .ach-view.on,body.qv .fb-view.on,body.qv #w-view.on{display:none!important}
#q-view .qv-back{position:fixed;top:14px;left:14px;z-index:2;border-radius:999px}
#q-view.on{display:block}
/* v2.28.2: the opaque 300ms swap curtain is retired. It blanked the screen on every
   navigation and could swallow clicks while it was up, which is what made the swaps
   feel abrupt. The stale-tile guard is now a synchronous reflow at swap time plus a
   very short non-blocking reveal. The element is kept for compatibility, is never
   displayed, and can never intercept pointer events. */
#qv-curtain{position:fixed;left:0;top:0;right:0;bottom:0;background:#EDEAE3;z-index:80;display:none;pointer-events:none}
.qv-top{position:sticky;top:0;z-index:2;background:#EDEAE3;border-bottom:1px solid #E0DCD4;padding:10px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.qv-back{background:#4A3F35;color:#EDEAE3;border:none;border-radius:6px;font-size:13px;padding:8px 14px;cursor:pointer;font-family:Georgia,serif}
.qv-crumb{font-size:12.5px;color:#5e5a55;font-family:Georgia,serif;letter-spacing:.5px}
.qv-nav{display:flex;gap:6px;margin-left:auto}
.qv-nav button{width:36px;height:36px;border:1px solid #D8D4CC;background:#FAF9F6;border-radius:6px;font-size:17px;color:#4A3F35;cursor:pointer;line-height:1;padding:0}
.qv-nav button:disabled{opacity:.35;cursor:default}
.qv-status{display:none}
.qv-status .stb{display:none}
.qv-status .stb.on{display:none}
.qv-sharebar{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-start;text-align:center;gap:8px;margin:12px 14px 0;padding:10px 0;background:transparent}
#qv-cardwrap{position:relative;z-index:1}
.qv-share{display:inline-flex;align-items:center;gap:0;border:1px solid #B8B2A8;background:#FAF9F6;border-radius:16px;padding:6px 10px;font-size:15px;font-style:italic;color:#5C5650;cursor:pointer;font-family:Georgia,serif;transition:border-color .15s,background-color .15s,color .15s}
.qv-share .sic-link{width:17px;height:17px;display:inline-block;flex:none;color:#5C5650}
.qv-share:hover{border-color:#8B5E00;background:#FBF7EE;color:#5C3F00}
/* 2.1 read & score (Tencent SOE) */
.soe-row{margin-top:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.soe-accent{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#5e5a55;background:#F3F0EA;border:1px solid #E4E0D8;border-radius:999px;padding:3px 10px;box-shadow:0 1px 0 #D8D2C7,0 2px 4px rgba(94,90,85,.12),inset 0 1px 0 rgba(255,255,255,.9)}
.soe-accent select{border:none;background:transparent;font-size:12px;color:#4C473F;outline:none;cursor:pointer;font-family:inherit}
/* v2.25.4: 3D depth for the five answer buttons - bevel highlight, solid bottom edge
   and a soft drop shadow; pressing pushes the button down. Morandi colours kept. */
.soe-btn{display:inline-flex;align-items:center;gap:6px;border:2px solid #8B5E00;background:#FBF7EE;background-image:linear-gradient(#FFFDF7,#F3EAD7);border-radius:16px;padding:6px 12px;font-family:Georgia,serif;font-style:italic;font-size:13px;color:#5C3F00;cursor:pointer;box-shadow:0 2px 0 #B08A4F,0 4px 8px rgba(92,63,0,.16),inset 0 1px 0 rgba(255,255,255,.85);transition:box-shadow .12s,transform .1s,border-color .15s,background-color .15s,color .15s}
.soe-btn:hover{border-color:#6B4A00;background:#F5EFDF;background-image:linear-gradient(#FFFDF7,#F0E5CB);color:#4A3F35;box-shadow:0 2px 0 #9A7437,0 5px 10px rgba(92,63,0,.2),inset 0 1px 0 rgba(255,255,255,.85)}
.soe-btn:active{transform:translateY(1px);box-shadow:0 1px 0 #B08A4F,0 2px 3px rgba(92,63,0,.12),inset 0 1px 0 rgba(255,255,255,.85)}
.soe-btn.rec{background:#8B2E2E;background-image:linear-gradient(#A03A3A,#7E2525);border-color:#8B2E2E;color:#FBF7EE;box-shadow:0 2px 0 #571818,0 4px 8px rgba(139,46,46,.2),inset 0 1px 0 rgba(255,255,255,.22)}
.soe-btn.rec:hover{border-color:#8B2E2E;background:#8B2E2E;background-image:linear-gradient(#A03A3A,#7E2525);color:#FBF7EE;box-shadow:0 2px 0 #571818,0 5px 10px rgba(139,46,46,.24),inset 0 1px 0 rgba(255,255,255,.22)}
.soe-btn.grey{border-color:#B8B2A8;background:#FAF9F6;background-image:linear-gradient(#FFFEFB,#EFECE5);color:#5C5650;box-shadow:0 2px 0 #A39C92,0 4px 8px rgba(92,88,82,.13),inset 0 1px 0 rgba(255,255,255,.9)}
.soe-btn.grey:hover{border-color:#8B5E00;color:#5C3F00}
.soe-btn.paused{background:#B08A4F;background-image:linear-gradient(#C09A5F,#A17C3F);border-color:#B08A4F;color:#FBF7EE;box-shadow:0 2px 0 #6E5226,0 4px 8px rgba(138,109,59,.2),inset 0 1px 0 rgba(255,255,255,.25)}
/* v2.26.18: "Try another one" - deep-teal 3D CTA at the bottom of the scorecard.
   Deep teal #2F5D6B is a fresh hue: no button, topic colour or chart uses it.
   Rendered only inside a scored card (soeRender), so it never shows before practice. */
.soe-try-row{margin-top:12px;padding-top:12px;border-top:1px dashed #DCD3C6;display:flex;justify-content:center}
.soe-btn.soe-try-another{border:2px solid #2F5D6B;background:#3A6E7C;background-image:linear-gradient(#43798A,#2F5D6B);color:#F7F4EC;font-size:14px;padding:9px 26px;box-shadow:0 2px 0 #1D3C46,0 5px 12px rgba(47,93,107,.28),inset 0 1px 0 rgba(255,255,255,.3)}
.soe-btn.soe-try-another:hover{border-color:#26505B;background-image:linear-gradient(#4A8496,#34636F);color:#FFFFFF;box-shadow:0 2px 0 #1D3C46,0 6px 16px rgba(47,93,107,.34),inset 0 1px 0 rgba(255,255,255,.32)}
.soe-btn.soe-try-another:active{transform:translateY(1px);box-shadow:0 1px 0 #1D3C46,0 2px 4px rgba(47,93,107,.2),inset 0 1px 0 rgba(255,255,255,.28)}
/* v2.10.0 in-recording controls (pause / resume / reset) */
.soe-ctl{display:inline-flex;gap:6px;align-items:center}
.soe-ctl .soe-btn{font-size:11.5px;padding:5px 11px;border-width:1.5px}
.soe-acts{margin-top:10px;display:flex;gap:8px}
.soe-restore{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:12.5px;color:#5C5650;background:#FBF7EE;border:1px solid #D8D4CC;border-left:3px solid #8B5E00;border-radius:6px;padding:8px 12px}
.soe-restore .soe-btn{font-size:11.5px;padding:4px 11px;border-width:1.5px}
.soe-panel{margin-top:10px;background:#FAF6EF;border:1px solid #DCD3C6;border-radius:10px;padding:12px 14px;font-family:Georgia,serif;width:100%;color:#3A322A}
/* v2.27.9: 未使用的 .soe-score / .soe-bars 规则已删除 */
.soe-bar-row{display:flex;align-items:center;gap:8px;font-size:12px;color:#5C5650;margin-bottom:5px}
.soe-bar-row .lb{width:86px;flex:none}
.soe-bar{flex:1;height:8px;background:#E4E0D8;border-radius:4px;overflow:hidden}
.soe-bar i{display:block;height:100%;background:#1F5C2E}
.soe-words{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px}
.soe-w{font-size:13px;padding:3px 8px;border-radius:4px;position:relative}
.soe-trans{font-family:Georgia,serif;font-size:15px;line-height:1.85;color:#3A322A;margin:2px 0 4px}
.soe-sent{display:flex;flex-wrap:wrap;gap:7px 2px;align-items:center}
.soe-sbar{position:relative;height:5px;background:#E4E0D8;border-radius:3px;margin:3px 0 10px;overflow:hidden}
.soe-sbar b{position:absolute;top:0;bottom:0;background:#9C4A3C}
.soe-warn{margin-top:8px;font-size:12.5px;color:#7A5E30;font-family:'Microsoft YaHei',sans-serif;line-height:1.7;background:rgba(176,138,79,.1);border-left:3px solid #B08A4F;padding:5px 10px;border-radius:4px}
.soe-arcs{top:0;left:0}
.soe-w.g{background:rgba(95,115,85,.18);color:#43543D}
.soe-w.y{background:rgba(176,138,79,.18);color:#7A5E30}
.soe-w.r{background:rgba(156,74,60,.18);color:#6E3128}
.soe-w.fl{background:transparent;border:1px dashed #CFC6B8;color:#96877A;padding:2px 7px}
.soe-lk{color:#B08A4F;font-size:11px;margin:0 -2px;align-self:flex-end;padding-bottom:2px;font-family:Georgia,serif}
.soe-note{font-size:13.5px;color:#96877A;margin-top:8px;font-style:italic;line-height:1.7}
.soe-note.soe-foot{font-weight:bold;color:#4A3A30;font-style:normal}
.soe-status{font-size:18px;line-height:1.6;color:#5e5a55;margin-top:10px;font-style:italic}
.soe-crit{display:flex;align-items:center;gap:8px;font-size:13px;color:#3A322A;margin-bottom:6px}
.soe-crit .cl{white-space:nowrap;flex:none}
.soe-crit .v{font-weight:bold;min-width:34px;display:inline-block;text-align:center}
.soe-crit .v.g{color:#5F7355}
.soe-crit .v.y{color:#B08A4F}
.soe-crit .v.r{color:#B0574A}
.soe-crit .v.r2{color:#5E1F1A}
.soe-crit .v.o{color:#96877A}
/* v2.13.1 IELTS band pills: one Morandi dark per integer band 0-9 (no .5 steps) */
.soe-crit .v.b0,.soe-crit .v.b1,.soe-crit .v.b2,.soe-crit .v.b3,.soe-crit .v.b4,.soe-crit .v.b5,.soe-crit .v.b6,.soe-crit .v.b7,.soe-crit .v.b8,.soe-crit .v.b9{border-radius:4px;padding:1px 7px;font-size:12px;line-height:1.5}
.soe-crit .v.b9{background:#3E5240;color:#F5F1E8}
.soe-crit .v.b8{background:#4E6B54;color:#F5F1E8}
.soe-crit .v.b7{background:#5F7355;color:#F5F1E8}
.soe-crit .v.b6{background:#8B5E00;color:#F7EFDF}
.soe-crit .v.b5{background:#7A5316;color:#F7EFDF}
.soe-crit .v.b4{background:#B0574A;color:#F9EFEA}
.soe-crit .v.b3{background:#9C4A3C;color:#F9EFEA}
.soe-crit .v.b2{background:#8A3F34;color:#F9EFEA}
.soe-crit .v.b1{background:#7A2E26;color:#F9EFEA}
.soe-crit .v.b0{background:#5E1F1A;color:#F9EFEA}
.soe-crit.soe-total{border-top:1px dashed #DCD3C6;padding-top:6px;margin-top:2px}
.soe-crit.soe-total .cl{font-weight:bold;color:#4A3F35}
.soe-delta{font-size:11.5px;color:#96877A;margin-left:4px}
.soe-delta.up{color:#5F7355}
.soe-delta.dn{color:#9C4A3C}
.soe-dots{display:inline-flex;gap:3px;margin-left:8px;align-items:center}
.soe-dots i{width:7px;height:7px;border-radius:50%;display:inline-block;background:#CFC6B8}
.soe-dots i.g{background:#5F7355}
.soe-dots i.y{background:#B08A4F}
.soe-dots i.r{background:#9C4A3C}
.soe-ph{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px}
.soe-ph-cap{font-size:11px;color:#96877A;margin-top:6px;font-family:'Microsoft YaHei',sans-serif}
.soe-miss{margin-top:8px;font-size:12.5px;color:#9C4A3C;font-family:'Microsoft YaHei',sans-serif;line-height:1.7;background:rgba(156,74,60,.08);border-left:3px solid #9C4A3C;padding:5px 10px;border-radius:4px}
.soe-pt{font-size:11.5px;padding:3px 8px;border-radius:4px;border:1px solid rgba(95,115,85,.4);background:rgba(95,115,85,.1);color:#43543D}
.soe-pt.no{border:1px dashed #CFC6B8;background:transparent;color:#96877A}
.soe-sec{font-family:Georgia,serif;font-style:italic;font-size:13.5px;color:#96877A;letter-spacing:2px;white-space:nowrap;margin:12px 0 6px}
.soe-err{font-size:12.5px;color:#6E3128;margin-top:5px;line-height:1.65}
.soe-err i{color:#96877A;font-size:11px}
.soe-comment{margin-top:8px;font-size:13px;color:#3A322A;font-family:'Microsoft YaHei',sans-serif;line-height:1.7;background:rgba(176,138,79,.08);border-left:3px solid #B08A4F;padding:6px 10px;border-radius:4px}
/* v2.28.9 前置项 0-2: 发音"待定"角标(语调证据未返回时) —— 只挂在格子旁边,
   不写进格子文本, 避免影响按 textContent 取值的既有逻辑 */
.soe-pron-pending{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;font-family:'Microsoft YaHei',sans-serif;font-size:11px;color:#8B5E00;background:rgba(176,138,79,.14);border:1px solid rgba(176,138,79,.45);vertical-align:middle}
/* v2.28.12 (1-4): 跟读卡的模式说明行 —— 说明跟读分数与自由表达不可直接比较 */
.soe-mode-note{margin-top:8px;font-family:'Microsoft YaHei',sans-serif;font-size:11.5px;color:#6E6861;line-height:1.7;font-style:normal}
/* ---- v2.29.0 设计打磨(依据 taste-skill 与 impeccable craft-floor, 只增不改) ----
   ① 浏览器表面: craft-floor 要求"你没画的部分也在承担设计" —— 选中色/光标色/滚动条配色此前全缺;
   ② 阅读行宽: 正文控制在 65~75ch, 长段落不再一行拉到 900px;
   ③ 对比度: 次要文字原 #6E6861 在纸底 #E6E2D8 上约 4.1:1, 未达 WCAG AA(4.5:1); 统一提到 #5A544E(约 5.1:1);
   ④ 纯声明式改动: 不新增动画、不改布局与任何交互路径。 */
::selection{background:rgba(139,94,0,.22);color:#2A2825}
html{caret-color:#8B5E00;scrollbar-color:#C9C3B8 #EDEAE3}
.soe-trans,.pp-body,.soe-comment,.qv-title{max-width:72ch}
.gs-back,.soe-mode-note,.pp-date,.subtitle{color:#5A544E}
/* ==== v2.29.1 非落地页统一(依据 DESIGN.md;落地页 #landing / .hero 明确豁免) ====
   ① 版式尺度收敛为四档; ② 标题上方留白 > 下方; ③ 题卡改为连续纸面分隔行(去"卡片汤");
   ④ 按钮统一边框/圆角/过渡与按压方向 —— 颜色与投影强度差有意保留, 故既有视觉断言不受影响。
   全部为声明式覆盖: 不新增请求、不新增动画、不改动任何交互与类名。 */
#gs-app,#about-view,#privacy-view,#lv-view,#hu-view,#q-view,#w-view,#ms-view,#ach-view,#fb-view{--p3-t1:22px;--p3-t2:15px;--p3-t3:12.5px;--p3-line:#E0DCD4}
#about-view h2,#privacy-view h2,#lv-view h2,#hu-view h2,#hu-view .htu-title,#privacy-view .pp-title{font-size:var(--p3-t1);font-weight:400;letter-spacing:.02em;margin-bottom:14px}
#gs-app .soe-sec,#q-view .soe-sec,#w-view .soe-sec,#ms-view .soe-sec,#ach-view .soe-sec,#fb-view .soe-sec,
#gs-app .section-label,#q-view .section-label,#w-view .section-label,#ms-view .section-label,#ach-view .section-label,#fb-view .section-label,
#about-view .soe-sec,#privacy-view .soe-sec,#lv-view .soe-sec,#hu-view .soe-sec{font-size:var(--p3-t2);font-weight:400;letter-spacing:.06em;margin:26px 0 10px}
#gs-app .htu-phase,#hu-view .htu-phase,#w-view .soe-ph-cap,#ms-view .ms-chart-cap,#gs-app .soe-ph-cap{font-size:var(--p3-t3);letter-spacing:.04em}
#lv-view .score-map,#hu-view .how-to-use{padding-top:28px;padding-bottom:48px}
#gs-app .q-card{background:transparent;border:0;border-bottom:1px solid var(--p3-line);border-radius:0;box-shadow:none;margin:0}
#gs-app .q-card:hover{background:rgba(255,255,255,.42)}
#gs-app .q-card.q-flash{background:rgba(176,138,79,.13)}
#gs-app .st-btn,#gs-app .soe-btn,#gs-app .soe-try-another,#q-view .soe-btn,#q-view .qv-share,#q-view .qv-back,
#w-view .mw-tool,#w-view .mw-cat,#w-view .mw-open,#w-view .mw-review-acts button,#ms-view button,#ach-view button,#fb-view button,
#about-view button,#privacy-view button,#lv-view button,#hu-view button{
  border-width:1.5px;border-radius:999px;
  transition:box-shadow .14s ease,transform .12s ease,border-color .14s ease,color .14s ease,background-color .14s ease;
}
#gs-app .q-card .st-btn:active,#gs-app .soe-btn:active,#q-view .soe-btn:active,#q-view .qv-share:active,#w-view button:active,#q-view button:active{transform:translateY(1px)}
/* ==== v2.29.2 四个面板: 内容统一收进**一张卡片**(单词卡与反馈条目本身除外) ====
   My Words / My Stats / Achievements / Feedback 此前内容直接摊在面板底色上, 现统一为单张纸白卡;
   内部的单词卡(#mw-wall 内)与反馈条目(.fb-item)仍保持各自卡片 —— 它们是真正独立的对象。 */
#w-view .qv-body,#ms-view .ms-body,#ach-view .ms-body,#fb-view .ms-body{
  max-width:900px;margin:14px auto 48px;background:transparent;border:0;box-shadow:none;padding:6px 4px 40px;
}
/* v2.29.3(教师指出截图中的大白卡是多余的): 四个面板**去掉外层卡片** ——
   文字内容(标题/空状态/说明/统计文本)直接落在页面纸上, 与整站连续纸张一致;
   只保留**真正的对象卡**: 单词卡(#mw-wall 内)与反馈条目(.fb-item)。 */
#w-view .qv-body :is(.mw-head,.mw-tools,.mw-note,#mw-cats,#mw-sync-panel,#mw-review),
#ms-view .ms-body :is(.ms-head,.ms-title,.ms-empty,.ms-note),
#ach-view .ms-body :is(.ms-head,.ms-title,.ach-empty,.ach-count),
#fb-view .ms-body :is(.ms-head,.ms-title,.fb-empty){background:transparent;border:0;box-shadow:none}
/* ==== v2.29.5 面板层收尾(最高优先 + 中优先; 细节层按要求不动) ====
   ① **一条阅读列**: 面板/入口页原先并存 860 / 880 / 900 / 960 四套宽度, 换页时视觉轴线左右跳;
      现统一为 880px(.ms-head / .ms-body / .w-teacher-in / .about-inner / #w-view .qv-body / .score-map / .how-to-use);
   ② **一种纸**: 四个面板底色原为 #EDEAE3, 与页面纸张 #E6E2D8 不同材质; 现统一为纸张色,
      并把在纸上几乎看不见的分隔线换成可见但不喧哗的 #DAD5CB(去卡片化后的层级由细线 + 间距承担);
   ③ **退出语义**: 回上层一律 "← Back", 只有首页用 "Back to start"(按钮文案见标记处);
   ④ 中优先: 空状态口径统一、My Words 工具条降级、单题页答案块加分隔、My Words 面包屑按"全不给"处理。 */
html body #w-view,html body #ms-view,html body #ach-view,html body #fb-view{background:#E6E2D8}
html body .ms-head,html body .ms-body,html body .w-teacher .w-teacher-in,html body .about-inner,
html body #w-view .qv-body,html body #lv-view .score-map,html body #hu-view .how-to-use,html body .qv-body{max-width:880px}
html body .ms-head{border-bottom:1px solid #DAD5CB;padding-bottom:10px;margin-bottom:8px}
html body #w-view .qv-crumb{display:none}
/* 中优先 · 空状态统一口径(第一行说状态, 第二行说下一步), 与 .ms-empty 同一套排版 */
html body .fb-empty,html body .ms-empty{font-family:'Microsoft YaHei',sans-serif;font-size:12.5px;color:#4A4540;line-height:1.85;text-align:left;margin-top:14px}
html body .fb-empty b,html body .ms-empty b{font-family:Georgia,serif;color:#2A2825}
/* 中优先 · My Words 工具条降级为幽灵按钮: 不再与单词卡争层级 */
html body .mw-tool{background:transparent;border:0;box-shadow:none;padding:4px 0;color:#6F6459;text-decoration:underline;text-underline-offset:3px}
html body .mw-tool:hover{color:#8B5E00;background:transparent;border:0;box-shadow:none}
/* 中优先 · 单题页答案块之间加分隔线, 便于数清是第几段答案 */
html body #q-view .answer-block+.answer-block{border-top:1px solid #DAD5CB;padding-top:12px;margin-top:12px}
/* ==== v2.29.7 悬停补漏(深度 DEBUG 实测发现) ====
   状态胶囊 .st-btn 与主评分按钮 .soe-btn 的既有 :hover 规则**存在但被更具体的选择器压住**
   (进入 Practised/Review/Mastered 等状态后更是完全无反馈), 于是"看似有悬停、实际不生效"。
   这里用足够具体的选择器把悬停反馈补回来; 题卡行的悬停底色也略微加强以便察觉。 */
html body #gs-app .q-card .st-btn:hover{border-color:#8A847C;color:#2A2825;background-color:#FFFDF8}
html body #gs-app .st-btn:hover,html body #q-view .st-btn:hover{border-color:#8A847C;color:#2A2825;background-color:#FFFDF8}
html body #q-view .soe-btn:hover,html body #gs-app .soe-btn:hover,html body .soe-try-another:hover{
  border-color:#6B4A00 !important;color:#4A3F35 !important;background:#F5EFDF !important;background-image:linear-gradient(#FFFDF7,#F0E5CB) !important;
  box-shadow:0 2px 0 #9A7437,0 5px 10px rgba(92,63,0,.2),inset 0 1px 0 rgba(255,255,255,.85);
}
html body #gs-app .q-card:hover{background:rgba(255,255,255,.55)}
/* ==== v2.29.10(教师指示)My Words 说明文字: 字体 Constantia, 去斜体、去加粗, **字号不变**;
   末句改为更醒目的说法 —— 用"独立成行 + 赭金色 + 左侧竖线"做强调, 而不是靠加粗。 */
html body .mw-note{font-family:Constantia,Georgia,'Times New Roman',serif;font-style:normal;font-weight:400}
html body .mw-note .mw-note-hi{display:block;margin-top:12px;padding-left:12px;border-left:3px solid #B08A4F;color:#8B5E00}
/* ==== v2.29.11(教师反馈) ====
   ① "20 min goal" 脱离卡片: 它是目标虚线上的绝对定位标签(top:-14px 在线的上方), 目标线靠近卡片顶部时
      标签就顶出圆角。修法: 目标线高于 78% 时加 .ms-goal-in, 标签移到线的下方(top:3px), 始终留在卡片内。
      刻意不用 overflow:hidden —— 那会把日期标签(.bl 在 bottom:-18px)一起裁掉。
   ② 评分卡四维标签("Pronunciation" 等)字体改 Constantia(直立、常规字重)。 */
html body .ms-goal span{font-family:Constantia,Georgia,'Times New Roman',serif}
html body .ms-goal.ms-goal-in span{top:3px}
.hero-actions a.hero-btn{display:block;text-align:center;text-decoration:none;line-height:1.35}
#parola-loading{position:fixed;inset:0;z-index:99;background:#E6E2D8;display:none;align-items:center;justify-content:center;font-family:Constantia,Georgia,serif;color:#5C3F00;font-size:17px;letter-spacing:.08em}
#parola-loading.on{display:flex}
html body .soe-crit .cl{font-family:Constantia,Georgia,'Times New Roman',serif;font-style:normal}
/* v2.29.12(教师反馈): UK / US 旁的 "Pronunciation" 改 Constantia。
   ① 词卡上的标签是 .mw-accent-lbl(原为无衬线体), 直接改族不改字号与颜色;
   ② 跟读卡上的 "My Pronunciation" 用 .soe-txt, 但 .soe-txt 与 Record / Play back 等**按钮文字共用**,
      整体替换会把按钮也改掉 —— 故用 :has(+select) 只命中"紧邻 UK/US 下拉框"的那一个标签。
      (浏览器不支持 :has() 时该条规则被忽略, 不影响任何既有样式) */
html body .mw-accent-lbl{font-family:Constantia,Georgia,'Times New Roman',serif}
html body .soe-txt:has(+select){font-family:Constantia,Georgia,'Times New Roman',serif}
#ms-view .ms-body :is(.ms-head,.ms-title),#ach-view .ms-body :is(.ms-head,.ms-title),#fb-view .ms-body :is(.ms-head,.ms-title){background:transparent;border:0}
/* ==== 手机端: 左上角 Close 不再压住标题(原为 position:fixed 与标题同处左上角) ====
   注: 其他样式块/媒体查询对 .ms-close 亦有声明, 故此处用 id 级选择器确保生效。 */
@media(max-width:700px){
  #ms-view .ms-head,#ach-view .ms-head,#fb-view .ms-head{padding:14px 14px 4px}
  #ms-view .ms-close,#ach-view .ms-close,#fb-view .ms-close{position:static;top:auto;left:auto;flex:none}
  #w-view .qv-body,#ms-view .ms-body,#ach-view .ms-body,#fb-view .ms-body{padding:16px 14px;margin:10px auto 36px;border-radius:12px}
}
/* ==== 首页(A 方案, 零新增内容): 内容不再只占上半屏 —— 首屏垂直居中, 保持简约 ====
   注: 其他样式块对 #landing 的 flex 有后置声明, 故提高一级特异性确保居中生效。 */
html body #landing{min-height:calc(100vh - 210px);display:flex;flex-direction:column;justify-content:center}
@media(max-width:700px){html body #landing{min-height:calc(100vh - 170px)}}
/* v2.28.10 (第三批 1-2): 自由说评分卡片**逐张出现** —— 数据到一张显示一张, 每张一次性成型,
   不再"先把卡片全摆出来、细节再往里填"。移动端沿用既有 .mo 规则(动画关闭)。 */
.soe-stage{display:none}
.soe-stage.on{display:block;animation:soeStageIn .22s ease-out}
@keyframes soeStageIn{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.soe-stage.on{animation:none}}
.soe-prog{font-size:12.5px;color:#8B5E00;font-style:italic;margin:0 0 8px}
/* brand mark: in-flow (scrolls with the page), borderless wordmark */
.relief{display:flex;justify-content:flex-end;pointer-events:none;opacity:.6;font-size:clamp(72px,16vw,180px);line-height:0;margin:34px 30px 0 0;z-index:0}
.qv-relief{display:flex;justify-content:flex-end;pointer-events:none;opacity:.5;font-size:clamp(64px,14vw,160px);line-height:0;margin:18px 14px 0 0}
.relief .rt,.qv-relief .rt{position:relative;width:1em;height:1em;display:block}
.relief .rp3,.qv-relief .rp3{position:absolute;top:27%;left:0;right:0;text-align:center;font-family:Georgia,serif;font-style:italic;font-size:37%;color:#4A3F35}
.relief .rr,.qv-relief .rr{position:absolute;top:58.5%;left:50%;width:36%;height:1.1%;margin-left:-18%;background:#8B5E00}
.relief .rex,.qv-relief .rex{position:absolute;top:72%;left:0;right:0;text-align:center;font-family:Georgia,serif;font-size:10.5%;letter-spacing:.3em;text-indent:.3em;color:#8B5E00}
@media (max-width:768px){.relief,.qv-relief{opacity:.5}}
.qv-share-img{border-color:#8B5E00;border-width:2px;color:#5C3F00;background:#FBF7EE}
.qv-share-img:hover{color:#4A3F35;background:#F5EFDF;border-color:#8B5E00}
.qv-share .img-ic{width:15px;height:15px;flex:none}
#qv-imgmenu{position:fixed;z-index:110;background:#FAF9F6;border:1px solid #B8B2A8;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.2);padding:6px;display:none;min-width:210px}
#qv-imgmenu.on{display:block}
#qv-imgmenu button{display:flex;width:100%;gap:8px;align-items:center;border:none;background:transparent;font-family:Georgia,serif;font-style:italic;font-size:13px;color:#4A3F35;padding:9px 12px;border-radius:6px;cursor:pointer;text-align:left}
#qv-imgmenu button:hover{background:rgba(139,94,0,.08);color:#5C3F00}
#qv-imgmenu button svg{width:14px;height:14px;color:#8B5E00;flex:none}
.qv-share .sd{width:8px;height:8px;border-radius:50%;display:inline-block;flex:none}
.sic{width:19px;height:19px;border-radius:5px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.sic svg{width:12px;height:12px;display:block}
#qr-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(42,40,37,.55);z-index:120;display:none;align-items:center;justify-content:center;padding:16px}
#qr-modal.on{display:flex}
.qr-card{background:#EDEAE3;border:1px solid #D8D4CC;border-radius:12px;padding:22px 22px 18px;max-width:340px;width:100%;text-align:center;box-shadow:0 12px 40px rgba(0,0,0,.25)}
.qr-title{font-family:Georgia,serif;font-size:17px;color:#4A3F35}
.qr-sub{font-size:12px;color:#5e5a55;font-family:'Microsoft YaHei',sans-serif;margin:5px 0 14px;line-height:1.6}
.qr-canvas{background:#fff;padding:10px;border-radius:8px;display:inline-block;line-height:0}
.qr-canvas canvas{display:block;border-radius:4px}
.qr-link{font-size:11px;color:#5e5a55;font-family:Consolas,monospace;word-break:break-all;margin:12px 0 2px;line-height:1.5}
.qr-hint{font-size:11px;color:#8B5E00;font-family:'Microsoft YaHei',sans-serif}
#qr-close{margin-top:14px;border:1px solid #D8D4CC;background:#fff;border-radius:16px;padding:7px 20px;font-size:13px;color:#4A3F35;cursor:pointer;font-family:Georgia,serif}
#qr-close:hover{border-color:#8B5E00;color:#5C3F00}
/* v2.26.16: Privacy is its own in-flow page (no overlay, no mask)
   v2.28.2: page background is transparent so it continues the site paper instead of
   painting a lighter rectangle over it (same treatment as About / My level / How to use) */
#privacy-view{background:transparent;display:none}
body.pv #privacy-view{display:block}
body.pv #landing,body.pv #gs-app,body.pv #lv-view,body.pv #hu-view,body.pv #about-view{display:none!important}
body.qv #privacy-view{display:none!important}
.pp-sheet{max-width:760px;width:100%;margin:56px auto 0;background:#FBF9F3;border:1px solid #E6E1D7;border-radius:14px;padding:28px 34px 30px;box-shadow:0 4px 14px rgba(74,63,53,.07)}
/* v2.28.2: privacy page keeps the site paper - no standalone sheet card. The 1px
   border is kept but transparent (not removed) so the box metrics never shift. */
#privacy-view .pp-sheet{background:transparent;border-color:transparent;border-radius:0;box-shadow:none}
.pp-title{font-family:Georgia,serif;font-size:19px;color:#4A3F35}
.pp-date{font-family:Georgia,serif;font-style:italic;font-size:12px;color:#6e6861;margin-top:4px;letter-spacing:.5px}
.pp-body{font-family:Georgia,serif;font-size:13.5px;color:#4A3F35;line-height:1.75;margin:12px 0 2px}
.pp-body ol{padding-left:22px}
.pp-body li{margin-bottom:8px}
.pp-body .pp-zh{font-family:'Microsoft YaHei',sans-serif;font-size:12.5px;color:#5e5a55;line-height:1.9;border-top:1px solid #E0DCD4;margin-top:14px;padding-top:12px}
.pp-contact{margin-top:10px;font-size:13px;color:#5e5a55}
.pp-copy{margin-top:14px;padding-top:12px;border-top:1px solid #D8D4CC;font-size:11.5px;line-height:1.7;color:#635d57}
.qv-body{max-width:880px;margin:0 auto;padding:0 16px 48px}
.qv-title{font-family:Georgia,serif;font-size:19px;color:#2A2825;line-height:1.5;margin:16px 0 8px;border-left:4px solid #4A3F35;padding-left:12px}
.qv-cardwrap{background:#FAF9F6;border:1px solid #D8D4CC;border-radius:10px;padding:14px 16px}
.qv-cardwrap .q-body{margin:0;padding:0}
.q-text,.q-num-static{cursor:pointer}
.q-text:hover,.q-num-static:hover{color:#1F5C2E}
/* chain-link icon on each question card (opens single-question view) */
.card-link-ic{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-left:6px;border-radius:50%;cursor:pointer;color:#A09A92;transition:color .15s,background-color .15s,transform .15s;vertical-align:middle;flex:none}
.card-link-ic svg{width:15px;height:15px}
.card-link-ic:hover,.card-link-ic:focus{color:#8B5E00;background:rgba(139,94,0,.1);transform:scale(1.1);outline:none}
/* mobile tip bar: a viewport-fixed element OUTSIDE the transformed page wrapper,
   filled by JS on tap (the ::after bubbles are disabled on mobile) */
#tip-bar{position:fixed;left:14px;right:14px;bottom:14px;z-index:95;background:#2A2825;color:#F0EDE5;
  font-family:Georgia,serif;font-style:italic;font-size:14px;line-height:1.55;padding:11px 14px;border-radius:8px;
  box-shadow:0 6px 24px rgba(0,0,0,.3);opacity:0;pointer-events:none;transform:translateY(8px);
  transition:opacity .15s,transform .15s;max-height:40vh;overflow-y:auto}
#tip-bar.show{opacity:1;transform:translateY(0)}
@media (max-width:768px){
  .qv-top{padding:8px 10px;gap:8px}
  .qv-back{font-size:14px;padding:10px 14px;min-height:44px}
  .qv-nav button{width:44px;height:44px;font-size:18px}
  .qv-sharebar{margin:10px 10px 0;padding:9px 10px}
  .qv-share{font-size:14px;padding:10px 14px;min-height:44px}
  .soe-btn{font-size:14px;padding:10px 14px;min-height:44px}
  .sic{width:22px;height:22px;border-radius:6px}
  .sic svg{width:14px;height:14px}
  .card-link-ic{width:34px;height:34px}
  .card-link-ic svg{width:19px;height:19px}
  .qr-card{padding:18px 14px 16px}
  .qv-body{padding:0 12px 40px}
  .qv-title{font-size:18px;margin:12px 0 6px}
  .qv-cardwrap{padding:10px 12px}
  /* mobile tips: kill the broken fixed ::after bubbles (transformed wrapper hijacks fixed positioning);
     the dedicated #tip-bar outside the wrapper takes over */
  .dm::after,.lex::after{display:none}
  .dm::before,.lex::before{display:none}
  #tip-bar{font-size:14px}
}

/* ================= v2.9.0 VOCABULARY NOTEBOOK ================= */
/* v2.21.6: row nudged 10px down from the tabs; keep a healthy 16px gap above the search box */
.mw-row{padding:10px 0 8px;display:flex;justify-content:center;gap:16px;flex-wrap:wrap}
.mw-open{position:relative;display:inline-flex;align-items:center;gap:8px;border:2px solid #8B5E00;background:#FBF7EE;color:#5C3F00;border-radius:20px;padding:7px 22px;font-family:Georgia,serif;font-style:italic;font-size:14px;letter-spacing:3px;cursor:pointer;transition:background .15s,box-shadow .15s}
/* v2.25.9: due-review corner badge on the My Words button */
.mw-due-badge{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;line-height:20px;padding:0 6px;border-radius:999px;background:#8B2E2E;color:#FBF7EE;font-family:Georgia,serif;font-size:11px;font-weight:700;text-align:center;letter-spacing:0;font-style:normal;box-shadow:0 2px 0 #571818,0 3px 6px rgba(139,46,46,.25)}
.mw-open:hover{background:#F3E9D2;box-shadow:0 2px 8px rgba(139,94,0,.18)}
/* ============ v2.15.0 MY STATS ============ */
.ms-open{border-color:#364450;background:#F2F5F6;color:#2C3A44}
.ms-open:hover{background:#E3EAED;box-shadow:0 2px 8px rgba(54,68,80,.2)}
/* ============ v2.16.0 ACHIEVEMENTS (own Morandi-red button + view) ============ */
.ach-open{border-color:#9C4A3C;background:#F9EFED;color:#6E2F26}
.ach-open:hover{background:#F2E1DD;box-shadow:0 2px 8px rgba(156,74,60,.18)}
/* v2.21.2 FEEDBACK: deeper ink-green button (distinct from gold/slate/red) + overlay
   background matches the main page */
.fb-open{border-color:#173F22;background:#E9F0EA;color:#122F19}
.fb-open:hover{background:#DDE9DF;box-shadow:0 2px 8px rgba(23,63,34,.18)}
.fb-view{background:#EDEAE3;display:none}
.fb-view.on{display:block}
.fb-item{border:1px solid #E4E0D8;border-radius:10px;background:#FFFDF8;padding:12px 14px;margin-top:10px}
.fb-item .fb-top{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-family:Georgia,serif;font-size:13px;color:#4A3F35}
.fb-item .fb-time{font-size:10px;color:#96877A;letter-spacing:.5px}
.fb-item .fb-meta{font-family:'Microsoft YaHei',sans-serif;font-size:10px;color:#96877A;margin-top:4px}
.fb-item .fb-badge{font-size:9px;border-radius:999px;padding:1px 8px;background:#EFEAE2;color:#96877A}
.fb-item .fb-badge.wait{background:#F2E1DD;color:#6E2F26}
.fb-item .fb-reply{font-family:Georgia,'Microsoft YaHei',serif;font-size:11px;color:#4A3F35;line-height:1.8;background:#FAF9F6;border:1px solid #EDEAE3;border-radius:6px;padding:10px 12px;margin-top:8px}
.fb-empty{font-family:Georgia,'Microsoft YaHei',serif;font-size:12px;color:#96877A;line-height:1.8;margin-top:16px}
.ach-view{background:#EDEAE3;display:none}
.ach-view.on{display:block}
.ach-count{font-family:Georgia,serif;font-size:14px;color:#6F6459;letter-spacing:1.5px;margin-top:4px;line-height:1.7}
/* ============ v2.21.0 REPORT 反馈闭环 ============ */
.soe-btn.rep{border-style:dashed;border-color:#9C4A3C;color:#6E2F26;background:#F9EFED;font-size:11px;padding:5px 12px;flex:none;box-shadow:0 2px 0 rgba(156,74,60,.45),0 3px 6px rgba(110,47,38,.14),inset 0 1px 0 rgba(255,255,255,.8)}
.soe-btn.rep:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(156,74,60,.4),0 1px 3px rgba(110,47,38,.1),inset 0 1px 0 rgba(255,255,255,.8)}
/* v2.22.0 Play back: distinct slate-blue pill (recorder is gold, Report is dashed red);
   v2.25.4: matching 3D depth + press state */
.soe-btn.play{border-color:#1E3D5C;color:#1E3D5C;background:#EEF2F6;background-image:linear-gradient(#F6F9FC,#E2EAF2);font-size:11px;padding:5px 12px;flex:none;box-shadow:0 2px 0 #14293F,0 4px 8px rgba(30,61,92,.16),inset 0 1px 0 rgba(255,255,255,.9)}
.soe-btn.play:hover{border-color:#1E3D5C;background:#DFE8F0;background-image:linear-gradient(#F6F9FC,#D8E3EC);box-shadow:0 2px 0 #14293F,0 5px 10px rgba(30,61,92,.2),inset 0 1px 0 rgba(255,255,255,.9)}
.soe-btn.play:active{transform:translateY(1px);box-shadow:0 1px 0 #14293F,0 2px 3px rgba(30,61,92,.12),inset 0 1px 0 rgba(255,255,255,.9)}
.soe-btn.play.dim{border-color:#C6CDD4;color:#74818d;background:#F4F6F8;background-image:none;cursor:default;box-shadow:0 1px 0 #B9C0C8,0 2px 3px rgba(90,98,106,.08),inset 0 1px 0 rgba(255,255,255,.9)}
.soe-btn.play.dim:hover{background:#F4F6F8;background-image:none}
/* v2.22.0 Weak Spots (error profile) rows in My Stats; v2.22.1 sized to the
   dashboard's row typography for comfort */
.ms-err-line{display:flex;align-items:baseline;gap:10px;font-family:Georgia,'Microsoft YaHei',serif;font-size:14px;color:#4A3F35}
.ms-err-k{flex:none;border-radius:999px;padding:2px 10px;font-size:10.5px;font-family:Georgia,serif;letter-spacing:.5px}
.ms-err-k.g{background:#F2E1DD;color:#6E2F26}
.ms-err-k.p{background:#EEF2F6;color:#1E3D5C}
.ms-err-t{width:150px;letter-spacing:1px;font-size:13.5px}
.ms-err-n{font-size:16px;min-width:40px;color:#8B5E00}
.ms-err-ex{font-family:Georgia,'Microsoft YaHei',serif;font-size:11.5px;color:#96877A;margin:2px 0 0 62px;line-height:1.8}
.w-report{position:fixed;top:0;left:0;right:0;bottom:0;z-index:400;display:flex;align-items:center;justify-content:center;background:rgba(42,40,37,.55);padding:16px}
.w-rep-box{background:#FFFDF8;border:1px solid #D8D4CC;border-radius:12px;padding:18px 20px;width:520px;max-width:94%;max-height:86%;overflow-y:auto;box-shadow:0 12px 36px rgba(42,40,37,.25)}
.w-rep-title{font-family:Georgia,serif;font-size:16px;font-weight:bold;color:#4A3F35;margin-bottom:8px}
.w-rep-lbl{font-family:Georgia,serif;font-size:11px;color:#6F6459;margin:10px 0 4px;letter-spacing:.5px}
.w-rep-hint{font-family:'Microsoft YaHei',sans-serif;font-size:9px;color:#B8B2A8}
.w-rep-opts{display:flex;gap:6px;flex-wrap:wrap}
.w-rep-opt{display:inline-flex;align-items:center;gap:5px;border:1px solid #D8D4CC;border-radius:999px;padding:4px 12px;font-family:'Microsoft YaHei',sans-serif;font-size:10px;color:#5C5650;background:#FAF9F6;cursor:pointer}
.w-rep-opt input{accent-color:#8B5E00}
.w-rep-box textarea{border:1px solid #D8D4CC;border-radius:6px;background:#FAF9F6;padding:8px 10px;font-family:Georgia,'Microsoft YaHei',serif;font-size:11px;color:#5C534A;width:100%;box-sizing:border-box;resize:vertical}
.w-rep-chk{display:block;font-family:'Microsoft YaHei',sans-serif;font-size:10.5px;color:#4A3F35;margin:10px 0 4px}
.w-rep-chk input{accent-color:#8B5E00;margin-right:5px}
.w-rep-priv{font-family:'Microsoft YaHei',sans-serif;font-size:9px;color:#96877A}
.w-rep-foot{display:flex;justify-content:flex-end;gap:10px;margin-top:12px;align-items:center}
.w-rep-foot .w-rep-x{font-family:Georgia,serif;font-size:12px;border:1px solid #B8B2A8;background:#FAF9F6;color:#5C5650;border-radius:999px;padding:6px 18px;cursor:pointer}
.w-rep-foot .w-rep-send{font-family:Georgia,serif;font-size:12px;border:1px solid #8B5E00;background:#8B5E00;color:#FBF7EE;border-radius:999px;padding:6px 18px;cursor:pointer}
.w-rep-code{font-family:Georgia,serif;font-size:28px;letter-spacing:3px;color:#8B5E00;margin:8px 0 2px}
.w-rep-sub{font-family:'Microsoft YaHei',sans-serif;font-size:10.5px;color:#6F6459;line-height:1.7}
.w-rep-checklink{font-family:'Microsoft YaHei',sans-serif;font-size:10px;color:#8B5E00;text-decoration:underline;cursor:pointer;margin-top:12px;background:none;border:none;padding:0}
.w-rep-reply{font-family:Georgia,'Microsoft YaHei',serif;font-size:11px;color:#4A3F35;line-height:1.8;background:#FAF9F6;border:1px solid #EDEAE3;border-radius:6px;padding:10px 12px;margin-top:8px}
.w-lesson-card{display:flex;gap:12px;align-items:center;border:1px solid #8B5E00;border-radius:10px;background:#FBF7EE;padding:10px 14px;margin-top:10px}
.w-lesson-l{flex:none;font-family:Georgia,serif;font-size:13px;color:#5C3F00;width:110px}
.w-lesson-r{font-family:'Microsoft YaHei',sans-serif;font-size:10px;color:#4A3F35}
.w-lesson-c{display:block;margin-top:2px;color:#6F6459}
.w-teacher{position:fixed;top:0;left:0;right:0;bottom:0;z-index:450;background:#FAF9F6;overflow-y:auto;display:none}
.w-teacher .w-teacher-in{max-width:860px;margin:0 auto;padding:22px 18px 60px}
.w-teacher h2{font-family:Georgia,serif;font-size:20px;color:#4A3F35;letter-spacing:2px;margin-bottom:12px}
.w-teacher .wt-row{border:1px solid #E4E0D8;border-radius:8px;background:#FFFDF8;padding:10px 14px;margin-top:8px;cursor:pointer}
.w-teacher .wt-row:hover{border-color:#8B5E00}
.w-teacher .wt-top{display:flex;justify-content:space-between;gap:10px;font-family:Georgia,serif;font-size:12px;color:#4A3F35}
.w-teacher .wt-code{font-size:10px;color:#96877A}
.w-teacher .wt-msg{font-family:'Microsoft YaHei',sans-serif;font-size:10.5px;color:#5C534A;margin-top:4px}
.w-teacher .wt-st{font-size:9px;border-radius:999px;padding:1px 8px;background:#EFEAE2;color:#96877A}
.w-teacher .wt-st.new{background:#F2E1DD;color:#6E2F26}
.w-teacher .wt-audio{display:flex;align-items:center;gap:10px;border:1px solid #D8D4CC;border-radius:999px;padding:6px 14px;margin:10px 0;background:#F2F5F6}
.w-teacher .wt-play{color:#8B5E00;font-size:13px;cursor:pointer}
.w-teacher .wt-pills{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}
.w-teacher .wt-pill{display:inline-block;border-radius:999px;padding:3px 12px;font-family:Georgia,serif;font-size:11px;color:#F5F1E8;background:#364450}
.w-teacher .wt-pill.gold{background:#8B5E00}
.w-teacher .wt-trans{font-family:Georgia,'Microsoft YaHei',serif;font-size:10.5px;color:#5C534A;background:#FAF9F6;border:1px solid #EDEAE3;border-radius:6px;padding:8px 10px;margin:6px 0}
.w-teacher .wt-tpl{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0}
.w-teacher .wt-tpl button{font-family:'Microsoft YaHei',sans-serif;font-size:9.5px;border:1px solid #D8D4CC;border-radius:999px;padding:3px 12px;background:#FAF9F6;color:#5C5650;cursor:pointer}
.w-teacher .wt-tpl button.on{border-color:#8B5E00;color:#5C3F00;background:#F4EFE2}
.w-teacher .wt-lesson{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0;align-items:center;font-family:'Microsoft YaHei',sans-serif;font-size:10px;color:#5C5650}
.ms-view{background:#EDEAE3;display:none}
.ms-view.on{display:block}
.ms-head{max-width:860px;margin:0 auto;padding:22px 18px 6px;display:flex;align-items:center;justify-content:space-between}
.ms-title{font-family:Georgia,serif;font-size:22px;color:#4A3F35;letter-spacing:2px}
.ms-close{position:fixed;top:14px;left:14px;z-index:2;font-family:Georgia,serif;font-style:italic;font-size:14px;color:#5C3F00;border:1.5px solid #B8B2A8;background:#FAF9F6;background-image:linear-gradient(#FFFEFB,#EFECE5);border-radius:999px;padding:7px 16px;cursor:pointer;box-shadow:0 2px 0 #A39C92,0 3px 6px rgba(92,88,82,.13),inset 0 1px 0 rgba(255,255,255,.9)}
.ms-close:hover{border-color:#364450;color:#2C3A44}
/* v2.26.3: the four panels are in-flow pages; the page scrollbar carries them and
   only one page-type is visible at a time */
body.pview #landing,body.pview #gs-app,body.pview #lv-view,body.pview #hu-view{display:none!important}
#w-view #mw-back{position:fixed;top:14px;left:14px;z-index:2}
.ms-body{max-width:860px;margin:0 auto;padding:6px 18px 60px}
.ms-dash{display:flex;gap:10px;flex-wrap:wrap;margin-top:12px}
.ms-card{flex:1;min-width:200px;border:1px solid #E0DCD4;border-radius:10px;background:#FFFDF8;padding:12px 14px}
.ms-card h4{font-family:Georgia,serif;font-size:11px;letter-spacing:2px;color:#96877A;margin-bottom:8px;text-transform:uppercase}
.ms-num{font-family:Georgia,serif;font-size:32px;color:#4A3F35}
.ms-num small{font-size:13px;color:#96877A}
.ms-sub{font-family:Georgia,serif;font-size:11px;color:#96877A;margin-top:4px;line-height:1.6;text-align:left}
.ms-sec{font-family:Georgia,serif;font-size:13px;letter-spacing:2.5px;color:#96877A;text-transform:uppercase;margin:22px 0 8px}
.ms-bars{display:flex;align-items:flex-end;gap:8px;height:120px;padding-top:6px}
.ms-bar{flex:1;max-width:46px;border-radius:4px 4px 0 0;background:#C9D6CE;position:relative;min-height:4px}
.ms-bar.hi{background:#364450}
.ms-bar .bl{position:absolute;bottom:-18px;left:50%;transform:translateX(-50%);font-family:Georgia,serif;font-size:10px;color:#96877A}
.ms-chart-cap{font-family:Georgia,serif;font-size:12.5px;color:#6F6459;margin-top:26px;line-height:1.7;text-align:left}
.ms-heat{display:flex;gap:4px;flex-wrap:wrap}
.ms-heat i{width:15px;height:15px;border-radius:4px;background:#EFEAE2;display:inline-block}
.ms-heat i.l1{background:#C9D6CE}.ms-heat i.l2{background:#8FA99A}.ms-heat i.l3{background:#5F7355}
.ms-top-row{display:flex;flex-direction:column;gap:6px;margin-top:6px}
.ms-top-line{display:flex;align-items:baseline;gap:10px;font-family:Georgia,serif;font-size:14px;color:#4A3F35}
.ms-top-name{width:150px;letter-spacing:1px;font-size:12.5px}
.ms-top-num{font-size:16px;min-width:40px}
.ms-donut{display:flex;align-items:center;gap:14px}
.ms-leg{font-family:Georgia,serif;font-size:12px;color:#5C534A;line-height:1.9;text-align:left}
.ms-leg i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.ms-ach{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin-top:6px}
.ms-a{border:1px solid #E4E0D8;border-radius:10px;background:#FFFDF8;padding:8px 10px;display:flex;gap:9px;align-items:flex-start}
.ms-a.lock{opacity:.45;filter:grayscale(1)}
.ms-a-ic{flex:none;width:38px;height:38px;border-radius:10px;padding:6px}
.ms-a-ic svg{width:26px;height:26px;display:block}
.ms-a-tx b{font-family:Georgia,serif;font-size:12px;color:#4A3F35;display:block;text-align:left}
.ms-a-tx span{font-family:'Microsoft YaHei',sans-serif;font-size:10px;color:#96877A;line-height:1.55;display:block;margin-top:2px;text-align:left}
.ms-a-tx b .ms-tier{display:inline-block;font-family:Georgia,serif;font-size:8px;border-radius:8px;margin-left:5px;vertical-align:1px;letter-spacing:.5px;text-transform:uppercase;color:#FBF7EE;width:60px;text-align:center;padding:1px 0;box-sizing:border-box}
.ms-toast{position:fixed;right:18px;bottom:18px;width:320px;border:1px solid #E0DCD4;border-radius:12px;background:#FFFDF8;box-shadow:0 10px 30px rgba(74,63,53,.22);padding:13px;display:flex;gap:11px;align-items:flex-start;z-index:300;animation:msPop .35s ease}
@keyframes msPop{from{transform:translateY(14px);opacity:0}to{transform:translateY(0);opacity:1}}
.ms-toast-ic{flex:none;width:48px;height:48px;border-radius:13px;padding:10px}
.ms-toast-ic svg{width:28px;height:28px;display:block}
.ms-toast-k{font-family:Georgia,serif;font-size:8.5px;letter-spacing:2.5px;color:#96877A}
.ms-toast-n{font-family:Georgia,serif;font-size:16.5px;color:#4A3F35;margin-top:2px}
.ms-toast-d{font-family:'Microsoft YaHei',sans-serif;font-size:10.5px;color:#96877A;margin-top:2px;line-height:1.5}
.ms-toast-btn{margin-top:9px;background:#8B5E00;color:#FBF7EE;border:none;border-radius:999px;padding:6px 18px;font-family:Georgia,serif;font-size:12.5px;cursor:pointer}
.ms-toast-btn:hover{background:#6E4800}
@media (max-width:640px){
  /* v2.25.9: full-width bottom toast; no centering transform, so the entrance
     animations (msPop / moSlideIn) can never shove it past the viewport edge */
  .ms-toast{left:12px;right:12px;bottom:18px;top:auto;width:auto;max-width:none;transform:none}
  .ms-toast-btn{width:100%}
  .ms-top-name{width:120px}
}
.mw-count{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#8B5E00;color:#FBF7EE;font-size:11px;font-style:normal;letter-spacing:0}
.mw-accent{display:inline-flex;gap:6px;margin-left:12px;vertical-align:middle}
.mw-acc{font-family:Georgia,serif;font-size:16px;letter-spacing:.5px;border:1px solid #4A3F35;background:#4A3F35;color:#EDEAE3;border-radius:999px;padding:4px 14px;cursor:pointer;line-height:1.3;font-style:italic}
.mw-acc.on{border-color:#8B5E00;color:#FBF7EE;background:#8B5E00}
.w-sense{font-family:'Microsoft YaHei',sans-serif;font-size:12px;color:#3A322A;margin-top:5px;line-height:1.6}
.w-sense .w-pos{font-family:Georgia,serif;font-style:italic;color:#8B5E00;margin-right:2px}
.w-sen-ex{font-family:Georgia,serif;font-style:italic;font-size:11px;color:#5e5a55;border-left:3px solid #B08A4F;padding-left:8px;margin-top:2px;line-height:1.5}
#w-view{background:#EDEAE3;display:none}
#w-view.on{display:block}
/* v2.26.0 landing gateway: know your level / set your goal / start now */
#landing{display:block}
body.gs #landing{display:none}
#gs-app{display:none}
body.gs #gs-app{display:block}
.landing-hero{display:flex;align-items:center;justify-content:center;gap:44px;flex-wrap:wrap;max-width:1020px;margin:0 auto;padding:38px 24px 54px}
.hero-lines{flex:1;min-width:250px;display:flex;flex-direction:column;gap:10px}
.hero-line{font-family:Georgia,'Times New Roman',serif;font-size:clamp(37px,6vw,62px);line-height:1.14;color:#2A2825;letter-spacing:.4px;font-weight:400;white-space:nowrap}
.hero-line:last-child{color:#8B5E00}
.hero-actions{flex:none;display:flex;flex-direction:column;gap:14px;width:232px;align-items:center}
.hero-btn{width:100%;font-family:Georgia,serif;font-style:italic;font-size:21px;letter-spacing:1px;border:2px solid #8B5E00;background:#FBF7EE;background-image:linear-gradient(#FFFDF7,#F3EAD7);color:#5C3F00;border-radius:999px;padding:15px 22px;cursor:pointer;box-shadow:0 3px 0 #B08A4F,0 6px 12px rgba(92,63,0,.18),inset 0 1px 0 rgba(255,255,255,.85);transition:box-shadow .12s,transform .1s,border-color .15s,background-color .15s,color .15s}
.hero-btn:hover{border-color:#6B4A00;color:#4A3F35;box-shadow:0 3px 0 #9A7437,0 7px 14px rgba(92,63,0,.22),inset 0 1px 0 rgba(255,255,255,.85)}
.hero-btn:active{transform:translateY(1px);box-shadow:0 2px 0 #B08A4F,0 3px 6px rgba(92,63,0,.14),inset 0 1px 0 rgba(255,255,255,.85)}
.hero-gold{border-color:#8B5E00;color:#FBF7EE;background:#8B5E00;background-image:linear-gradient(#A06F14,#7A5316);box-shadow:0 3px 0 #5C3F00,0 6px 12px rgba(139,94,0,.25),inset 0 1px 0 rgba(255,255,255,.15)}
.hero-gold:hover{border-color:#6B4A00;color:#FBF7EE;box-shadow:0 3px 0 #5C3F00,0 7px 14px rgba(139,94,0,.3),inset 0 1px 0 rgba(255,255,255,.15)}
/* gateway views: My level / How to use */
/* v2.26.2: gateway views live IN the page flow - the page scrollbar (far right)
   carries them, no inner scrollbar */
#lv-view,#hu-view{display:none}
body.lv #lv-view,body.hu #hu-view{display:block}
body.lv #landing,body.hu #landing,body.lv #gs-app,body.hu #gs-app{display:none!important}
#lv-view .score-map{max-width:880px;margin:0 auto;padding:64px 24px 80px}
#hu-view .how-to-use{max-width:880px;margin:0 auto;padding:64px 24px 80px}
/* v2.26.0: the how-to page stands alone now, so its type can breathe */
#hu-view .htu-title{font-size:26px}
#hu-view .htu-phase{font-size:14px}
#hu-view .htu-step b{font-size:16.5px}
#hu-view .htu-step p{font-size:14px;line-height:1.8}
#hu-view .htu-n{width:34px;height:34px;font-size:15px}
#hu-view .htu-grid{gap:12px}
.view-back{position:fixed;top:14px;left:14px;z-index:2;font-family:Georgia,serif;font-style:italic;font-size:14px;color:#5C3F00;border:1.5px solid #B8B2A8;background:#FAF9F6;background-image:linear-gradient(#FFFEFB,#EFECE5);border-radius:999px;padding:7px 16px;cursor:pointer;box-shadow:0 2px 0 #A39C92,0 3px 6px rgba(92,88,82,.13),inset 0 1px 0 rgba(255,255,255,.9)}
.view-back:hover{border-color:#8B5E00;color:#4A3F35}
.view-back:active{transform:translateY(1px)}
/* v2.26.9: ghost back button - no fill, floats just above the sticky deck */
.gs-back{flex:none;font-family:Georgia,serif;font-style:italic;font-size:12.5px;color:#6E6861;border:none;background:transparent;border-radius:999px;padding:5px 12px;cursor:pointer;margin:0 0 10px;transition:color .18s}
.gs-back:hover{color:#8B5E00}
.gs-back:active{transform:translateY(1px)}
@media(max-width:700px){
  .landing-hero{flex-direction:column;gap:28px;align-items:center;padding:26px 20px 40px}
  .hero-lines{align-items:center;min-width:0;text-align:center}
  .hero-actions{width:min(264px,86vw)}
  .hero-btn{font-size:19px;padding:13px 20px}
}
#w-view .qv-body{max-width:880px}
.mw-head{margin:6px 0 14px}
.mw-title{font-family:Georgia,serif;font-size:20px;color:#2A2825;border-left:4px solid #8B5E00;padding-left:12px;letter-spacing:1px}
.mw-sub{font-family:Georgia,serif;font-style:italic;font-size:12.5px;color:#5e5a55;margin-top:6px;letter-spacing:.5px}
.mw-note{font-family:Georgia,serif;font-style:italic;font-weight:700;font-size:15.5px;color:#3A322A;margin-top:12px;line-height:1.65;letter-spacing:.4px;border-top:1px solid #E3DFD7;padding-top:10px}
/* v2.25.6: Words/Review tabs - 3D depth + deeper letter contrast (Morandi kept).
   Scoped to qv-nav so the generic .qv-nav button rule cannot override it. */
#w-view .qv-nav .mw-tab{width:auto;height:auto;font-family:Georgia,serif;font-size:13px;letter-spacing:1px;line-height:1.3;border:1px solid #A09A92;background:#FAF9F6;background-image:linear-gradient(#FFFEFB,#EFECE5);color:#4A453E;border-radius:16px;padding:5px 14px;cursor:pointer;box-shadow:0 2px 0 #A39C92,0 3px 6px rgba(92,88,82,.13),inset 0 1px 0 rgba(255,255,255,.9);transition:box-shadow .12s,transform .1s,border-color .15s,color .15s,background-color .15s}
#w-view .qv-nav .mw-tab.on{border-color:#8B5E00;color:#4A3F35;background:#FBF7EE;background-image:linear-gradient(#FBF0DC,#F0E3C6);box-shadow:0 2px 0 #8B5E00,0 4px 8px rgba(139,94,0,.18),inset 0 1px 0 rgba(255,255,255,.85)}
#w-view .qv-nav .mw-tab:active{transform:translateY(1px);box-shadow:0 1px 0 #A39C92,0 2px 3px rgba(92,88,82,.1),inset 0 1px 0 rgba(255,255,255,.9)}
#w-view .qv-nav .mw-tab.on:active{box-shadow:0 1px 0 #8B5E00,0 2px 3px rgba(139,94,0,.14),inset 0 1px 0 rgba(255,255,255,.85)}
@media(max-width:768px){
  #w-view .qv-nav .mw-tab{width:auto;height:auto;min-height:36px;font-size:13px;padding:5px 12px}
}
.mw-wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:10px;position:relative}
/* v2.10.0 categories, tags, exports & sync; v2.25.6: uniform sizing (Export cards PDF
   is the reference) + 3D depth for every pill in the My Words rows */
.mw-tools{display:flex;gap:8px;flex-wrap:wrap;margin:0 0 10px}
.mw-tool{font-family:Georgia,serif;font-size:12.5px;border:1px solid #B8B2A8;background:#FAF9F6;color:#5C5650;border-radius:999px;padding:5px 14px;cursor:pointer;box-shadow:0 2px 0 #B8B2A8,0 3px 6px rgba(92,88,82,.13),inset 0 1px 0 rgba(255,255,255,.85);transition:box-shadow .12s,transform .1s,border-color .15s,color .15s,background-color .15s}
.mw-tool:hover{border-color:#8B5E00;color:#5C3F00;background:#FBF7EE}
.mw-tool:active{transform:translateY(1px);box-shadow:0 1px 0 #B8B2A8,0 2px 3px rgba(92,88,82,.1),inset 0 1px 0 rgba(255,255,255,.85)}
.mw-cats{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:0 0 10px}
.mw-cat{font-family:Georgia,serif;font-size:12.5px;border:1px solid #B8B2A8;background:#FAF9F6;color:#5C5650;border-radius:999px;padding:5px 14px;cursor:pointer;box-shadow:0 2px 0 #B8B2A8,0 3px 6px rgba(92,88,82,.13),inset 0 1px 0 rgba(255,255,255,.85);transition:box-shadow .12s,transform .1s,border-color .15s,color .15s,background-color .15s}
.mw-cat:hover{border-color:#8B5E00;color:#5C3F00}
.mw-cat:active{transform:translateY(1px);box-shadow:0 1px 0 #B8B2A8,0 2px 3px rgba(92,88,82,.1),inset 0 1px 0 rgba(255,255,255,.85)}
.mw-cat.on{border-color:#8B5E00;color:#FBF7EE;background:#8B5E00;background-image:linear-gradient(#A06F14,#7A5316);box-shadow:0 2px 0 #5C3F00,0 4px 8px rgba(139,94,0,.22),inset 0 1px 0 rgba(255,255,255,.15)}
.mw-cat-n{opacity:.72}
.mw-tagsep{font-family:Georgia,serif;font-style:italic;font-size:12.5px;color:#96877A;margin:0 4px 0 6px;letter-spacing:.5px}
.w-tag{margin-top:8px;display:flex;align-items:center;gap:6px}
.w-tag label{font-family:Georgia,serif;font-style:italic;font-size:10.5px;color:#96877A;letter-spacing:.5px}
.w-tag-sel{font-family:Georgia,serif;font-size:11px;color:#5C5650;border:1px solid #D8D4CC;background:#FAF9F6;border-radius:6px;padding:2px 6px;cursor:pointer;max-width:118px}
.mw-sync-panel{background:#FAF9F6;border:1px solid #D8D4CC;border-radius:8px;padding:12px 14px;margin:0 0 12px;font-family:Georgia,serif;font-size:13px;color:#3A322A;position:relative}
.mw-sync-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
.mw-sync-title{font-size:14px;color:#5C3F00;letter-spacing:2px}
.mw-sync-close{border:none;background:none;font-size:20px;line-height:1;color:#96877A;cursor:pointer;padding:2px 6px}
.mw-sync-close:hover{color:#9C4A3C}
.mw-sync-card{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:#FBF7EE;border:1px dashed #B08A4F;border-radius:8px;padding:10px 12px;cursor:pointer;margin-bottom:8px}
.mw-sync-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.mw-sync-row:first-child{margin-top:0}
.mw-sync-code{font-family:Georgia,serif;font-size:16px;letter-spacing:2px;color:#5C3F00;background:#FBF7EE;border:1px dashed #B08A4F;border-radius:6px;padding:5px 12px;display:inline-block}
.mw-sync-in{font-family:Georgia,serif;font-size:13px;border:1px solid #B8B2A8;background:#fff;border-radius:6px;padding:5px 10px;color:#3A322A;min-width:190px;max-width:100%}
.mw-sync-note{font-family:'Microsoft YaHei',sans-serif;font-size:11.5px;color:#96877A;margin-top:9px;line-height:1.8}
.mw-bf-note{font-family:'Microsoft YaHei',sans-serif;font-size:12px;color:#96877A;margin:0 0 10px;grid-column:1/-1}
/* v2.12.1 games: five badges numbered 1-5, each a different dark Morandi tone */
.mw-gc-n.g-cue{background:#4A3F35}
.mw-gc-n.g-dev{background:#8B2E2E}
.mw-gc-n.g-ghost{background:#4A5B66}
.mw-gc-n.g-mirror{background:#7A5316}
.mw-gc-n.g-cook{background:#5F7355}
.mw-fun-line{font-family:Georgia,serif;font-style:italic;font-size:16px;color:#5C3F00;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:520px){.mw-fun-line{font-size:12.5px}}
.w-ban{display:inline-block;border:1px solid #B0574A;color:#8A3F34;border-radius:999px;padding:1px 10px;font-size:11px;background:#FBF4F2;text-decoration:line-through}
.w-ban.hit{background:#B0574A;color:#FBF7EE;text-decoration:none}
.w-gres-lives{font-size:13px;color:#8A3F34;margin-top:6px;letter-spacing:2px}
.w-gcook-title{font-family:Georgia,serif;font-style:italic;font-size:14px;color:#5C3F00;border:2px solid #5F7355;background:#F5F8F3;border-radius:999px;padding:2px 12px}
.w-bingo{display:inline-block;margin-top:8px;font-family:Georgia,serif;font-style:italic;font-size:13px;border:1px dashed #B08A4F;color:#96877A;border-radius:8px;padding:4px 12px}
.w-bingo.on{border:2px solid #5F7355;color:#3E5240;background:#F5F8F3;font-weight:bold}
.w-mirror-v{border:1px solid #E4E0D8;border-radius:8px;padding:8px 10px;margin-bottom:8px;background:#FAF9F6}
.w-mirror-q{font-family:Georgia,serif;font-size:12.5px;color:#5C3F00;font-style:italic}
.w-mirror-r{font-family:Georgia,serif;font-size:11.5px;color:#5e5a55;margin-top:4px}
.w-mirror-j{font-family:Georgia,serif;font-size:11.5px;color:#9C4A3C;margin-top:4px}
.w-mirror-j.ok{color:#5F7355}
.soe-btn.rec-ghost{background:#4A5B66;border-color:#4A5B66;color:#FBF7EE}
.soe-btn.rec-mirror{background:#7A5316;border-color:#7A5316;color:#FBF7EE}
.soe-btn.rec-cook{background:#5F7355;border-color:#5F7355;color:#FBF7EE}
/* v2.12.1 Cook how-to: three precise model sentences (reason / example / conclusion) */
.w-cook-ex{margin-top:8px;background:#F5F8F3;border:1px solid #D8DCCF;border-left:3px solid #5F7355;border-radius:6px;padding:8px 12px}
.w-cook-ex div{font-family:Georgia,serif;font-style:italic;font-size:12px;color:#3A322A;line-height:1.7;margin-top:3px}
.w-cook-ex div:first-child{margin-top:0}
.w-cook-ex i{font-style:normal;font-size:10px;letter-spacing:1px;color:#5F7355;margin-right:6px;text-transform:uppercase}
.w-cook-seg{display:inline-block;border:1px solid #B8B2A8;background:#FAF9F6;color:#5C5650;border-radius:999px;padding:1px 10px;font-size:11px;margin-right:6px}
.w-cook-seg.ok{border-color:#5F7355;color:#3E5240;background:#F5F8F3}
.w-cook-seg.no{border-color:#B0574A;color:#8A3F34;background:#FBF4F2}
/* v2.12.3 SpeechSuper A/B comparison block */
.soe-ss{margin-top:10px;border:1px solid #D8D4CC;border-left:3px solid #4A5B66;background:#F7F5F0;border-radius:6px;padding:8px 12px}
.soe-ss-title{font-family:Georgia,serif;font-size:11px;letter-spacing:1px;color:#4A5B66;margin-bottom:6px;text-transform:uppercase}
.soe-ss-row{display:flex;gap:8px;font-family:Georgia,serif;font-size:11px;line-height:1.6;color:#3A322A}
.soe-ss-row span{flex:0 0 42%;color:#96877A;word-break:break-all}
.soe-ss-row b{flex:1;color:#3A322A;word-break:break-all}
.soe-ss-note{font-family:'Microsoft YaHei',sans-serif;font-size:11.5px;color:#5C3F00;margin:8px 0 2px;letter-spacing:.5px}
.w-card{background:#FAF9F6;border:1px solid #D8D4CC;border-radius:8px;padding:10px 12px;position:relative}
.w-card-top{display:flex;align-items:center;gap:7px}
.w-word{font-family:Georgia,serif;font-size:16px;color:#2A2825;font-weight:700}
.w-spk{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:50%;background:#4A3F35;color:#F0EDE5;font-size:10px;cursor:pointer;flex:none}
.w-spk:hover{background:#6B6157}
.w-cefr{font-family:Georgia,serif;font-style:italic;font-size:10.5px;color:#5C3F00;border:1px solid rgba(139,94,0,.45);border-radius:999px;padding:1px 7px}
.w-rm{margin-left:auto;border:none;background:none;color:#96877A;font-size:13px;cursor:pointer;padding:2px 4px}
.w-rm:hover{color:#9C4A3C}
.w-phon{font-family:Georgia,serif;font-size:11px;color:#5e5a55;margin-top:3px}
.w-zh{font-family:'Microsoft YaHei',sans-serif;font-size:12px;color:#3A322A;margin-top:4px;line-height:1.6}
.w-ex{font-family:Georgia,serif;font-style:italic;font-size:11px;color:#5e5a55;margin-top:4px;line-height:1.55;border-left:3px solid #B08A4F;padding-left:8px}
.w-src{font-family:Georgia,serif;font-size:10px;color:#96877A;letter-spacing:.8px;margin-top:6px}
.w-acts{display:flex;align-items:center;gap:8px;margin-top:8px}
.w-practice{font-family:Georgia,serif;font-style:italic;font-size:11.5px;border:1px solid #B08A4F;background:#FBF7EE;color:#5C3F00;border-radius:999px;padding:3px 12px;cursor:pointer}
.w-best{font-family:Georgia,serif;font-size:10.5px;color:#5F7355;font-style:italic}
.w-zone{margin-top:9px;border-top:1px dashed #DCD3C6;padding-top:9px;font-family:Georgia,serif;font-size:12px;color:#3A322A;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.w-zone-score{font-family:Georgia,serif;font-size:13px;color:#3A322A}
.w-zone-score b{color:#5F7355}
.w-zone-status{font-family:Georgia,serif;font-style:italic;font-size:11.5px;color:#96877A}
.mw-empty{text-align:left;max-width:760px;margin:44px auto 0;padding:0 24px;font-family:Georgia,serif;font-size:16px;color:#5e5a55}
.mw-empty-sub{font-family:'Microsoft YaHei',sans-serif;font-size:14px;color:#96877A;font-style:normal;margin-top:8px;line-height:1.9;white-space:nowrap}
@media(max-width:640px){.mw-empty-sub{white-space:normal;font-size:13px}}
.mw-review-card{max-width:520px;margin:0 auto;background:#FAF9F6;border:2px solid #8B5E00;border-radius:12px;padding:30px 24px;text-align:center;cursor:pointer;position:relative;min-height:220px}
.mw-rv-front{font-family:Georgia,serif;font-size:30px;color:#2A2825;letter-spacing:1px}
.mw-rv-hint{font-family:Georgia,serif;font-style:italic;font-size:11.5px;color:#96877A;letter-spacing:1px;margin-top:14px}
.mw-review-card.flip .mw-rv-front{display:none}
.mw-rv-back{display:none}
.mw-review-card.flip .mw-rv-back{display:block}
.mw-rv-back .w-phon{font-size:13px;margin-top:2px}
.mw-rv-back .w-zh{font-size:13.5px;margin-top:8px}
.mw-rv-back .w-ex{margin-top:8px;font-size:12px}
.mw-review-acts{margin-top:20px;display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* v2.25.5: the three verdict buttons get 3D depth - bevel highlight, solid bottom
   edge, soft drop shadow and a press-down state; they sit below the always-fit card */
.mw-review-acts button{font-family:Georgia,serif;font-size:13px;border-radius:999px;padding:8px 20px;cursor:pointer;background:#FAF9F6;border:1px solid #B8B2A8;color:#5C5650;box-shadow:0 2px 0 #B8B2A8,0 3px 6px rgba(92,88,82,.13),inset 0 1px 0 rgba(255,255,255,.85);transition:box-shadow .12s,transform .1s,border-color .15s,color .15s,background-color .15s}
.mw-review-acts button:hover{border-color:#6E6861;color:#3A3835}
.mw-review-acts button:active{transform:translateY(1px);box-shadow:0 1px 0 #B8B2A8,0 2px 3px rgba(92,88,82,.1),inset 0 1px 0 rgba(255,255,255,.85)}
.mw-review-acts .got{border-color:#5F7355;color:#3E5240;background-image:linear-gradient(#FCFDFB,#EEF4EE);box-shadow:0 2px 0 #4A6B50,0 4px 8px rgba(95,115,85,.18),inset 0 1px 0 rgba(255,255,255,.85)}
.mw-review-acts .got:hover{border-color:#4A6B50;color:#33513A}
.mw-review-acts .got:active{transform:translateY(1px);box-shadow:0 1px 0 #4A6B50,0 2px 3px rgba(95,115,85,.14),inset 0 1px 0 rgba(255,255,255,.85)}
.mw-review-acts .almost{border-color:#B08A4F;color:#5C3F00;background-image:linear-gradient(#FFFDF7,#F6EDD9);box-shadow:0 2px 0 #8A6A33,0 4px 8px rgba(138,109,59,.18),inset 0 1px 0 rgba(255,255,255,.85)}
.mw-review-acts .almost:hover{border-color:#8A6A33;color:#4A3F35}
.mw-review-acts .almost:active{transform:translateY(1px);box-shadow:0 1px 0 #8A6A33,0 2px 3px rgba(138,109,59,.14),inset 0 1px 0 rgba(255,255,255,.85)}
.mw-review-acts .notyet{border-color:#B0574A;color:#8A3F34;background-image:linear-gradient(#FDFBFB,#F8E9E6);box-shadow:0 2px 0 #8A3F34,0 4px 8px rgba(176,87,74,.18),inset 0 1px 0 rgba(255,255,255,.85)}
.mw-review-acts .notyet:hover{border-color:#8A3F34;color:#6E2F26}
.mw-review-acts .notyet:active{transform:translateY(1px);box-shadow:0 1px 0 #8A3F34,0 2px 3px rgba(176,87,74,.14),inset 0 1px 0 rgba(255,255,255,.85)}
.mw-review-pos{font-family:Georgia,serif;font-style:italic;font-size:11.5px;color:#96877A;letter-spacing:1px;text-align:center;margin-top:10px}
/* popover: anchored to the tapped word (absolute) so it scrolls WITH the page content;
   body scrolls internally; the actions row stays pinned so Add is always clickable */
#w-pop{position:absolute;z-index:400;background:#FAF9F6;border:1px solid #D8D4CC;border-radius:10px;box-shadow:0 8px 26px rgba(42,40,37,.18);padding:10px 14px 12px;max-width:380px;min-width:248px;width:max-content;max-height:calc(100vh - 24px);box-sizing:border-box;display:flex;flex-direction:column}
.w-pop-head{display:flex;align-items:center;gap:9px;flex:none;min-width:0}
.w-pop-word{font-family:Georgia,serif;font-size:19px;color:#2A2825;white-space:nowrap}
.w-pop-phon{font-family:Georgia,serif;font-size:12px;color:#5e5a55;margin-top:4px;flex:none}
.w-pop-body{overflow-y:auto;margin-top:6px;min-height:0;overscroll-behavior:contain}
.w-pop-zh{font-family:'Microsoft YaHei',sans-serif;font-size:12.5px;color:#3A322A;line-height:1.65}
.w-pop-acts{margin-top:10px;display:flex;gap:8px;align-items:center;flex:none;border-top:1px solid #E4E0D8;padding-top:9px}
.w-add{font-family:Georgia,serif;font-style:italic;font-size:12px;border:2px solid #8B5E00;background:#FBF7EE;color:#5C3F00;border-radius:999px;padding:3px 14px;cursor:pointer}
.w-add.off{opacity:.5;cursor:default}
.w-close{font-family:Georgia,serif;font-size:12px;border:1px solid #D8D4CC;background:#FAF9F6;color:#4A4540;border-radius:999px;padding:3px 12px;cursor:pointer;margin-left:auto}
/* NEW WORDS in the speaking report */
.soe-nw{margin-top:10px;border-top:1px dashed #DCD3C6;padding-top:8px}
.soe-nw-row{display:flex;align-items:center;gap:8px;border:1px solid #E4E0D8;background:#FAF9F6;border-radius:8px;padding:5px 10px;margin-top:6px;font-size:12px;color:#3A322A}
.soe-nw-word{font-family:Georgia,serif;font-weight:700;color:#2A2825;min-width:96px}
.soe-nw-zh{font-family:'Microsoft YaHei',sans-serif;font-size:11px;color:#5e5a55;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.soe-nw-add{font-family:Georgia,serif;font-style:italic;font-size:11px;color:#8B5E00;border:1px solid rgba(139,94,0,.4);border-radius:999px;padding:1px 9px;cursor:pointer;background:none;flex:none}
.soe-nw-all{font-family:Georgia,serif;font-style:italic;font-size:11.5px;border:2px solid #8B5E00;background:#FBF7EE;color:#5C3F00;border-radius:999px;padding:3px 14px;cursor:pointer;margin-top:8px}
/* collocations drawer: below the card, full width, comfortable type sizes */
.w-drawer{background:#FAF6EF;border:1px solid #DCD3C6;border-radius:10px;padding:12px 16px;margin-top:14px}
.w-drawer .soe-sec{margin-top:0}
.w-drow{display:flex;align-items:center;gap:8px;font-size:13.5px;color:#3A322A;margin-top:8px;flex-wrap:nowrap;min-width:0}
.w-drow .w-spk{width:22px;height:22px;font-size:10px;flex:none}
.w-dword{font-family:Georgia,serif;color:#2A2825;font-weight:700;font-size:14.5px;white-space:nowrap;flex:none;max-width:46%;overflow:hidden;text-overflow:ellipsis}
.w-dgloss{font-family:'Microsoft YaHei',sans-serif;font-size:12.5px;color:#5e5a55;flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.w-dadd{font-family:Georgia,serif;font-style:italic;font-size:12px;color:#8B5E00;border:1px solid rgba(139,94,0,.4);border-radius:999px;padding:1px 11px;cursor:pointer;background:none;flex:none;white-space:nowrap}
.w-dadd.off{color:#96877A;border-color:#D8D4CC;cursor:default}
.w-dsenses{padding:1px 0 0 30px}
.w-dsenses .w-sense{font-size:13px;margin-top:2px;color:#5e5a55;line-height:1.7}
.w-dsenses .w-sen-ex{font-size:12.5px;color:#96877A;padding-left:7px;margin-top:1px;line-height:1.6}
.w-dsenses .w-pos{font-size:12.5px}
.w-dall-wrap{margin-top:10px;border-top:1px dashed #DCD3C6;padding-top:8px}
/* How-to-use 9-step cards (v2.9.5) */
.htu-phase{font-size:11px;letter-spacing:2px;margin:12px 0 6px;font-style:italic}
.htu-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;text-align:left}
.htu-step{display:flex;gap:9px;background:#FAF9F6;border:1px solid #E4E0D8;border-radius:8px;padding:9px 11px;align-items:flex-start;min-width:0;text-align:left}
.htu-step>div{min-width:0}
.htu-n{flex:none;width:24px;height:24px;border-radius:50%;background:#4A3F35;color:#F0EDE5;display:flex;align-items:center;justify-content:center;font-size:12.5px;font-style:italic}
.htu-step b{font-size:12.5px;color:#2A2825;display:block;line-height:1.4;font-style:normal;white-space:normal;overflow-wrap:break-word}
.htu-step p{font-size:11.5px;color:#5e5a55;margin-top:3px;font-family:'Microsoft YaHei',sans-serif;line-height:1.7;font-style:normal;white-space:normal;overflow-wrap:break-word;text-align:left}
.htu-more{display:none;margin-top:12px;border:1px solid #D8D4CC;background:#FAF9F6;color:#4A4540;border-radius:16px;padding:6px 18px;font-size:12.5px;cursor:pointer;font-family:Georgia,serif;font-style:italic}
@media(max-width:859px){
  .htu-grid{grid-template-columns:1fr}
  .htu-rest{display:none}
  .how-to-use.open .htu-rest{display:block}
  .htu-more{display:inline-block}
}
/* review games (v2.9.5) */
.mw-games{margin:18px auto 0;max-width:760px;padding:0 24px}
.mw-games-title{font-size:16px;color:#5e5a55;font-family:Georgia,serif;margin-bottom:10px}
.mw-game-card{display:flex;gap:10px;align-items:flex-start;background:#FAF9F6;border:1px solid #E4E0D8;border-radius:10px;padding:10px 13px;margin-bottom:8px;cursor:pointer;transition:border-color .15s}
.mw-game-card:hover{border-color:#B08A4F}
.mw-gc-n{flex:none;width:26px;height:26px;border-radius:50%;background:#4A3F35;color:#F0EDE5;display:flex;align-items:center;justify-content:center;font-size:13px;font-style:italic;font-family:Georgia,serif}
.mw-game-card b{font-size:13.5px;color:#2A2825;display:block;font-family:Georgia,serif}
.mw-game-card span{font-size:11.5px;color:#5e5a55;font-family:'Microsoft YaHei',sans-serif;line-height:1.6}
.w-game{max-width:760px;margin:0 auto;background:#FAF6EF;border:1px solid #DCD3C6;border-radius:10px;padding:12px 14px;color:#3A322A}
.w-game-head{display:flex;align-items:center;gap:8px}
.w-gt{font-family:Georgia,serif;font-style:italic;font-size:15px;color:#2A2825;letter-spacing:1px}
.w-grnd{font-size:11px;color:#96877A;letter-spacing:1px;font-style:italic}
.w-gclose{margin-left:auto;border:1px solid #D8D4CC;background:#FAF9F6;color:#4A4540;border-radius:999px;padding:2px 11px;font-size:11.5px;cursor:pointer;font-family:Georgia,serif}
.w-game-q{margin-top:8px;font-size:14px;color:#2A2825;border-left:3px solid #B08A4F;padding-left:9px;font-family:Georgia,serif;line-height:1.5}
.w-game-cues{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.w-gcue{display:inline-flex;align-items:center;gap:4px;border:2px solid #8B5E00;background:#FBF7EE;color:#5C3F00;border-radius:999px;padding:2px 12px;font-size:12.5px;font-style:italic;font-family:Georgia,serif}
.w-gcue.ok{border-color:#5F7355;color:#3E5240}
.w-gcue.no{border-color:#B0574A;color:#8A3F34}
.w-gstance{font-size:12px;color:#5C3F00;font-style:italic;font-family:Georgia,serif;letter-spacing:1px}
.w-gtimer{font-size:11.5px;color:#96877A;font-style:italic}
/* v2.22.4 non-word-bank coaching tips inside each game (teaching prompts, not words) */
.w-gtip{margin-top:6px;font-family:Georgia,serif;font-style:italic;font-size:12px;color:#6F6459;border-top:1px dashed #E0DCD4;padding-top:6px;line-height:1.6}
.w-game-acts{margin-top:10px;display:flex;gap:10px;align-items:center}
.w-gres{margin-top:10px}
.w-gres-trans{font-size:12.5px;color:#3A322A;font-family:Georgia,serif;font-style:italic;line-height:1.6}
.w-gres-row{font-size:12px;color:#3A322A;margin-bottom:4px;font-family:Georgia,serif}
.w-gres-crit{display:grid;grid-template-columns:auto 1fr;gap:3px 12px;margin-top:8px;font-size:12.5px;color:#3A322A;font-family:Georgia,serif}
.w-gres-cues{margin-top:8px;display:flex;gap:8px;flex-wrap:wrap}

/* ============ v2.23.0 MOTION (页面动效方案 v1 实施) ============
   纪律：只做装饰不做控制；全部 transform/opacity；IE11 无 IntersectionObserver
   时走 html.mo-allin（直接显示最终态）；系统"减弱动态效果"一键全关。 */
@keyframes moRise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}
@keyframes moPop{0%{opacity:0;transform:scale(.6)}70%{transform:scale(1.06)}100%{opacity:1;transform:scale(1)}}
@keyframes moBreath{0%,100%{box-shadow:0 0 0 rgba(139,94,0,0)}50%{box-shadow:0 0 16px rgba(139,94,0,.35)}}
@keyframes moShake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-4px)}80%{transform:translateX(4px)}}
@keyframes moStamp{0%{opacity:0;transform:scale(.3) rotate(-14deg)}60%{transform:scale(1.18) rotate(-4deg)}100%{opacity:1;transform:scale(1) rotate(-6deg)}}
@keyframes moSlideIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes moFlash{0%{box-shadow:0 0 0 rgba(139,94,0,.45)}100%{box-shadow:0 0 0 rgba(139,94,0,0)}}
@keyframes moSpot{0%{box-shadow:0 0 0 2px rgba(139,94,0,.5)}100%{box-shadow:0 0 0 2px rgba(139,94,0,.12)}}
@keyframes moInk{from{background-size:0% 100%}to{background-size:100% 100%}}
@media (prefers-reduced-motion: reduce){
  .mo *{animation:none!important;transition:none!important}
}
/* ---------- ① 首页：链式浮现 ---------- */
.mo-hero-t{display:inline-block;animation:moRise .5s cubic-bezier(.2,.7,.2,1) both}
.mo .tabs label{animation:moRise .4s ease-out both}
/* ---------- ② 逻辑链地图：逐层点亮 ---------- */
.mo .mm-branch,.mo .mm-root-wrap{opacity:0;transform:translateY(10px)}
.mo .mm-branch.in,.mo .mm-root-wrap.in{animation:moRise .5s ease-out both}
.mo .mm-leaf{opacity:0}
.mo .mm-leaf.in{animation:moPop .35s cubic-bezier(.3,.7,.3,1) both}
.mo .tabs label.chain-on{animation:moBreath 2.4s ease-in-out infinite}
.mo .mm-leaf{position:relative;overflow:visible}
.mo .mm-leaf::after{content:'';position:absolute;inset:-4px;border:2px solid rgba(139,94,0,.55);border-radius:999px;opacity:0;transform:scale(.6);transition:all .35s ease-out;pointer-events:none}
.mo .mm-leaf:hover::after{opacity:1;transform:scale(1)}
.mo .q-card.link-hl{animation:moFlash .9s ease-out both}
/* ---------- ③ 题目卡与双答案：书页展开 ---------- */
.mo .q-card{transition:transform .2s ease-out,border-color .2s,box-shadow .2s}
.mo .q-card:hover{transform:translateY(-4px);border-color:#B08A4F;box-shadow:0 8px 20px rgba(74,63,53,.12)}
.mo .q-view.on.mo-first #qv-cardwrap{animation:moRise .35s cubic-bezier(.3,.7,.3,1) both}
/* v2.26.7: no per-block stagger on the single-question view - late-arriving blocks
   (0.5s-0.74s) read as a flash of the previous screen; everything paints together */
.mo .q-view.on.mo-first .lex,.mo .q-view.on.mo-first .dm{background-image:linear-gradient(rgba(139,94,0,.22),rgba(139,94,0,.22));background-repeat:no-repeat;background-size:0% 100%;animation:moInk .7s ease-out forwards}
.mo .q-view.on.mo-first .phrase-tag{opacity:0;animation:moPop .3s ease-out forwards}
/* ---------- ④ 评分卡：逐项落子 ---------- */
.mo .soe-panel .soe-crit{animation:moRise .28s ease-out both}
.mo .soe-panel .soe-crit:nth-child(2){animation-delay:.12s}
.mo .soe-panel .soe-crit:nth-child(3){animation-delay:.24s}
.mo .soe-panel .soe-crit:nth-child(4){animation-delay:.36s}
.mo .soe-panel .soe-total{animation:moPop .4s cubic-bezier(.2,.8,.2,1) both .48s}
.mo .soe-panel .soe-comment{animation:moRise .4s ease-out both .55s}
.mo .soe-panel .soe-err{animation:moRise .3s ease-out both}
/* ---------- ⑤ 生词本：卡片呼吸与遗忘曲线 ---------- */
.mo .w-card{opacity:0;animation:moRise .3s ease-out forwards}
.mo .w-card:nth-child(1){animation-delay:.02s}.mo .w-card:nth-child(2){animation-delay:.05s}.mo .w-card:nth-child(3){animation-delay:.08s}.mo .w-card:nth-child(4){animation-delay:.11s}.mo .w-card:nth-child(5){animation-delay:.14s}.mo .w-card:nth-child(6){animation-delay:.17s}.mo .w-card:nth-child(7){animation-delay:.2s}.mo .w-card:nth-child(8){animation-delay:.23s}.mo .w-card:nth-child(9){animation-delay:.26s}.mo .w-card:nth-child(10){animation-delay:.29s}.mo .w-card:nth-child(11){animation-delay:.32s}.mo .w-card:nth-child(12){animation-delay:.35s}
.mo .w-card.due{animation:moRise .3s ease-out forwards,moBreath 2.4s ease-in-out .3s infinite}
.mo .w-card.due{border-color:#B08A4F}
.mo .mw-review-card{position:relative;perspective:1000px}
.mo .mw-rv-front,.mo .mw-rv-back{transition:transform .5s cubic-bezier(.4,.1,.2,1);backface-visibility:hidden;-webkit-backface-visibility:hidden}
/* v2.25.5: the back face stays in normal flow so the card ALWAYS fits the tallest face -
   long example sentences no longer overflow the card. The front overlays it, centred,
   and the card height (and the answer buttons below) never jumps on flip. */
.mo .mw-rv-front{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;transform:rotateY(0)}
.mo .mw-rv-back{display:block!important;position:relative;transform:rotateY(180deg)}
.mo .mw-review-card.flip .mw-rv-front{transform:rotateY(180deg)}
.mo .mw-review-card.flip .mw-rv-back{transform:rotateY(0)}
.mo .mw-review-card.mo-got::after{content:'Got \2713 ';position:absolute;right:-4px;bottom:-4px;background:#3E7A4E;color:#F3E9D2;border:2px solid #1A1712;border-radius:6px;padding:4px 12px;font-size:13px;font-style:italic;animation:moStamp .45s ease-out both;z-index:5}
.mo .mw-review-card.mo-no{animation:moShake .35s ease-in-out both}
/* ---------- ⑥ My Stats：数据生长 ---------- */
.mo .ms-view.on .ms-card{animation:moRise .4s ease-out both}
.mo .ms-view.on .ms-card:nth-child(2){animation-delay:.06s}.mo .ms-view.on .ms-card:nth-child(3){animation-delay:.12s}.mo .ms-view.on .ms-card:nth-child(4){animation-delay:.18s}
.mo .ms-view.on .ms-bar{transform-origin:bottom;animation:moPop .5s ease-out both}
.mo .ms-view.on .ms-heat i{opacity:0;animation:moPop .25s ease-out forwards}
.mo .ms-view.on .ms-err-line:first-child{animation:moSpot 1s ease-out both}
.mo .ms-toast{animation:moSlideIn .4s cubic-bezier(.2,.8,.2,1) both}
/* 静态回退：IE11 等无 IO 环境直接显示最终态 */
html.mo-allin .mo .mm-branch,html.mo-allin .mo .mm-root-wrap,html.mo-allin .mo .mm-leaf,html.mo-allin .mo .w-card,html.mo-allin .mo .answer-block,html.mo-allin .mo .phrase-tag,html.mo-allin .mo .ms-heat i{opacity:1;transform:none;animation:none}

/* ==================== v2.27.9 版面与可读性优化 ====================
   教师审查 1-23 项 + 可访问性 + 性能感知文案。只改版面/文案, 不动评分逻辑。
   第 21(emoji)、22(平台色)项按教师要求保持不变。 */
/* ---- ① 首页: 整屏铺满, 内容垂直居中, 页脚贴底 ---- */
.wrap{display:flex;flex-direction:column;min-height:100vh}
#landing{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:center}
#landing .landing-hero{width:100%;padding:10px 24px 12px;gap:26px}
.hero-line{font-size:clamp(29px,4.4vw,45px);line-height:1.1}
.hero-lines{gap:6px}
.hero-actions{gap:10px}
.hero-btn{padding:10px 20px}
header{padding:20px 0 16px}
footer{margin-top:auto}
@media(max-width:768px){
  #landing{justify-content:flex-start}
  #landing .landing-hero{padding:14px 20px 18px;gap:20px}
}
/* ---- ② 页头: 应用内压缩, 单题页/面板内隐藏(面板自带标题) ---- */
body.gs header{padding:16px 0 8px}
body.gs h1{font-size:21px;letter-spacing:2px;margin-bottom:3px}
body.gs .subtitle{font-size:12px}
body.qv header,body.pview header,body.ab header,body.pv header,body.lv header,body.hu header{display:none}
/* ---- ③ 移动端粘性栏瘦身 + tabs 横向滑动提示 ---- */
@media(max-width:768px){
  .sticky-bar{position:sticky}
  .sticky-bar::after{content:'';position:absolute;top:0;right:0;width:32px;height:46px;pointer-events:none;background:linear-gradient(90deg,rgba(240,237,229,0),rgba(240,237,229,.94))}
  .mw-row{flex-wrap:wrap;gap:8px;padding:4px 0 6px}
  .mw-open{padding:6px 13px;font-size:12px;letter-spacing:1.4px;min-height:38px}
  .search-wrap{padding:6px 0 6px}
}
/* ---- ④ 成就提示: 底部窄条, 不压正文, 不拦截点击 ---- */
@keyframes vToastIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
.ms-toast{left:50%;right:auto;bottom:14px;top:auto;transform:translateX(-50%);width:min(560px,94vw);padding:9px 12px;border-radius:11px;align-items:center;gap:10px;pointer-events:none;box-shadow:0 8px 22px rgba(74,63,53,.2)}
.mo .ms-toast{animation:vToastIn .32s cubic-bezier(.2,.8,.2,1) both}
.ms-toast-ic{width:34px;height:34px;border-radius:9px;padding:6px}
.ms-toast-ic svg{width:22px;height:22px}
.ms-toast-k{font-size:8px;letter-spacing:2px}
.ms-toast-n{font-size:15px;margin-top:1px}
.ms-toast-d{margin-top:1px;font-size:10.5px}
.ms-toast-btn{margin-top:0;flex:none;pointer-events:auto;padding:6px 16px;font-size:12.5px}
@media(max-width:480px){.ms-toast{width:94vw;padding:8px 10px}.ms-toast-n{font-size:14px}}
/* ---- ⑤ 跟读卡: 逐词药丸 -> 内联标注(下划线+浅底), 段落可读 ---- */
.soe-words{display:block;margin-top:12px;padding-top:12px;border-top:1px dashed #E4DED4}
.soe-sent{display:block;font-family:Georgia,serif;font-size:15px;line-height:2.1;color:#3A322A;margin:0 0 2px}
.soe-sent .soe-w{display:inline;background:none;padding:0;border-radius:0;font-size:15px;border-bottom:2px solid transparent;margin-right:.3em}
.soe-w.g{border-bottom-color:rgba(95,115,85,.55)}
.soe-w.y{border-bottom-color:rgba(176,138,79,.65)}
.soe-w.r{border-bottom-color:rgba(156,74,60,.65);color:#6E3128}
.soe-w.fl{border-bottom:1px dashed #CFC6B8;color:#96877A}
.soe-sbar{height:3px;border-radius:2px;margin:1px 0 12px}
/* ---- ⑥ 注释说明条(就地图例, 不再依赖页脚) ---- */
.annot-legend{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:center;margin:8px 0 10px;padding:7px 10px;background:#F7F4EC;border:1px solid #E7E2D9;border-radius:8px;font-family:'Microsoft YaHei',sans-serif;font-size:11px;color:#4A4540;line-height:1.6}
.annot-legend em{font-style:normal;color:#6F6459}
.annot-legend i{display:inline-block;width:20px;height:9px;border-radius:3px;margin-right:4px;vertical-align:-1px}
.annot-legend .al-1{background:rgba(139,94,0,.42)}
.annot-legend .al-2{background:rgba(139,46,46,.38)}
.annot-legend .al-3{background:rgba(31,92,46,.38)}
/* ---- ⑦ 数据中心: 统一网格 + 空状态 ---- */
#ms-body .ms-dash{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
#ms-body .ms-dash .ms-card{min-width:0}
@media(max-width:900px){#ms-body .ms-dash{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:480px){#ms-body .ms-dash{grid-template-columns:1fr 1fr;gap:8px}}
.ms-empty{padding:14px 4px 6px;font-family:'Microsoft YaHei',sans-serif;font-size:12.5px;color:#4A4540;line-height:1.8;text-align:left}
.ms-empty b{font-family:Georgia,serif;color:#2A2825}
.ms-empty-cta{margin-top:10px}
.ms-empty-cta button{font-family:Georgia,serif;font-style:italic;font-size:13px;border:2px solid #8B5E00;background:#FBF7EE;background-image:linear-gradient(#FFFDF7,#F3EAD7);color:#5C3F00;border-radius:999px;padding:7px 20px;cursor:pointer;box-shadow:0 2px 0 #B08A4F,0 4px 8px rgba(92,63,0,.16),inset 0 1px 0 rgba(255,255,255,.85)}
.ms-chart-blank{display:flex;align-items:center;justify-content:center;min-height:74px;background:#F7F4EC;border:1px dashed #E0DCD4;border-radius:8px;font-family:'Microsoft YaHei',sans-serif;font-size:12px;color:#5C5650}
/* ---- ⑧ 成就页: 锁定项差异化 + 下一个目标 + 可读性 ---- */
.ms-a.lock{border-style:dashed;background:#FCFBF7}
.ms-a.next{border-style:solid;border-color:#B08A4F;background:#FFFDF6;box-shadow:0 3px 10px rgba(139,94,0,.1)}
.ms-a-next{display:inline-block;margin-left:6px;font-family:Georgia,serif;font-size:8px;letter-spacing:.5px;text-transform:uppercase;color:#FBF7EE;background:#8B5E00;border-radius:8px;padding:1px 7px;vertical-align:1px}
.ms-a-tx span{color:#5C5650}
.ms-a.lock .ms-a-tx span{color:#6F6459}
.ach-count{color:#5C5650}
/* ---- ⑨ 单题页: 分享条几何统一(颜色不动) + 返回常驻 + 操作行分组 ---- */
.qv-sharebar{gap:10px}
.qv-share{width:44px;height:44px;padding:0;justify-content:center;border-radius:50%;flex:none}
.qv-share.qv-share-img{width:auto;border-radius:999px;padding:0 14px;gap:7px}
.qv-share .sd{width:22px;height:22px}
.qv-share .sic-link{width:20px;height:20px}
#q-view .qv-back{position:static;top:auto;left:auto;border-radius:999px}
.qv-nav button{width:44px;height:44px;font-size:19px}
.soe-row{gap:8px 10px;row-gap:10px;padding:2px 0}
.soe-row .soe-btn{min-height:38px}
@media(max-width:768px){
  .soe-row .soe-btn{min-height:46px;padding:9px 14px;font-size:13.5px}
  .soe-acts .soe-btn{min-height:46px}
  .qv-share{width:46px;height:46px}
}
.soe-accent{min-height:34px}
.soe-acts{margin-top:12px}
/* ---- ⑩ 可读性(对比度)与点击区 ---- */
.soe-note{color:#6F6459}
.ms-chart-cap{color:#5C5650}
.ms-err-ex{color:#6F6459}
.ms-sub,.ms-card h4,.ms-sec{color:#6F6459}
.ms-a-tx span{font-size:10.5px}
.soe-nw-zh{color:#4A4540}
.w-dsenses .w-sen-ex{color:#6F6459}
.w-sen-ex{color:#5C5650}
.mw-game-card span{color:#4A4540;font-size:12px}
.mw-note{color:#332C26}
.mw-sub{color:#4A4540}
/* 链图标: 版心尺寸不变(保持卡片宽度/药丸内嵌的既有约束), 用伪元素扩大触摸区 */
.card-link-ic{position:relative}
.card-link-ic::after{content:'';position:absolute;inset:-8px;border-radius:50%}
.st-btn{min-height:29px;padding:4px 13px}
.st-btn:not(.on){border-color:#E4E0D8;color:#6F6459;background:#FCFBF7}
.st-btn.on{border-color:#B08A4F;background:#FBF7EE}
@media(max-width:768px){.st-btn{min-height:34px}}
/* ---- ⑪ 键盘可见焦点(仅键盘操作时出现) ---- */
:focus-visible{outline:2px solid #8B5E00;outline-offset:2px}
.qv-share:focus-visible,.soe-btn:focus-visible,.hero-btn:focus-visible,.mw-open:focus-visible,.st-btn:focus-visible{outline:2px solid #5C3F00;outline-offset:2px}
/* ---- ⑫ 思维导图: 移动端可折叠(默认收起, 桌面与小屏桌面不受影响) ---- */
.mm-toggle{display:none}
@media(max-width:600px){
  .mm-toggle{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;margin:0 0 10px;padding:10px 12px;min-height:44px;background:#FBF9F4;border:1px solid #E0DCD4;border-radius:10px;font-family:Georgia,serif;font-style:italic;font-size:13px;color:#5C3F00;cursor:pointer}
  .mindmap.mm-collapsed .mm-root-wrap,.mindmap.mm-collapsed .mm-branches{display:none}
  .mindmap.mm-collapsed{padding-bottom:10px}
}
/* ---- ⑬ 生词本/复习页: 等级说明移到功能之后(字重与深色保持, 测试与可读性均依赖) ---- */
.mw-note{margin-top:22px;font-size:14px;font-weight:700;line-height:1.75}
/* ---- ⑭ 游戏卡: 去掉数字序号感, 改为类型标记 ---- */
.mw-gc-n{width:26px;height:26px;font-size:12px}
/* ---- ⑮ 口音选择器说明 ---- */
.mw-accent{display:inline-flex;align-items:center;gap:6px}
.mw-accent-lbl{font-family:'Microsoft YaHei',sans-serif;font-size:10.5px;color:#5C5650;letter-spacing:.4px}
/* ---- ⑯ 出分等待: 约 X 秒 说明行 ---- */
.soe-prog small{display:block;font-style:normal;font-size:11.5px;color:#6F6459;margin-top:2px}
.soe-prog{line-height:1.6}
/* ---- ⑰ 搜索行: 清除按钮锚定输入框(不再压住 All questions 下拉) ---- */
.search-field{position:relative;flex:1;display:flex;align-items:center;min-width:0}
.search-field #search-input{width:100%}
#search-clear{right:8px}
/* ---- ⑱ 生词本返回按钮: 回到粘性栏内(不再压住 MY WORDS 面包屑) ---- */
#w-view #mw-back{position:static;top:auto;left:auto}
/* ---- ⑲ About 页面: 内容垂直居中 ---- */
body.ab #about-view{display:flex;flex-direction:column;justify-content:center;min-height:100vh;padding:28px 0}
body.ab .about-inner{margin:0 auto;width:100%}
/* ---- ⑳ 跟读卡: 句下红条标记取消(逐词下划线已足够) ---- */
.soe-sbar{display:none!important}
/* ---- ㉑ My Stats 图表(lieflat-charts 结构规则 + 本站 Morandi 单一色系) ---- */
.ms-bars{position:relative;padding-top:10px}
.ms-goal{position:absolute;left:0;right:0;height:0;border-top:1px dashed #B8B2A8;pointer-events:none}
.ms-goal span{position:absolute;right:0;top:-14px;font-family:Georgia,serif;font-size:9.5px;color:#6F6459;background:#FFFDF8;padding:0 4px;letter-spacing:.4px}
.ms-bar{border-radius:5px 5px 0 0}
.ms-heat-head{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:206px;margin-bottom:4px}
.ms-heat-head span{font-family:Georgia,serif;font-size:9.5px;color:#6F6459;text-align:center}
.ms-heat{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;max-width:206px}
.ms-heat i{width:100%;height:26px;border-radius:5px}
.ms-heat i.pad{background:transparent}
.ms-heat i.l0{background:#EFEAE2}
.ms-top-line{align-items:center}
.ms-top-track{flex:1;min-width:40px;height:9px;background:#EFEAE2;border-radius:5px;overflow:hidden}
.ms-top-track i{display:block;height:100%;border-radius:5px}
.ms-top-num{margin-left:auto;text-align:right}
.ms-top-num small{font-size:10px;color:#6F6459}
.ms-chart-cap b{color:#2A2825}
/* ---- ㉒ v2.28.1 页面统一: About / My level / How to use 去掉"独立卡片"外层 ----
   原先 #about-view 铺了一层比页面更浅的 #EDEAE3, .how-to-use / .score-map 各有一块
   #f5f3ee 的浅色面板, 两侧露出深色页面底, 看起来像浮在页面上的单独卡片。
   现在外层全部回到页面底色(连续纸张感), 只保留内部内容卡片:
   轮播卡 .about-card / 步骤卡 .htu-step / 评分表内部结构 一律不动,
   因此 .about-track 的滚动动画与遮罩渐隐完全不受影响。 */
#about-view{background:transparent}
#lv-view .score-map,#hu-view .how-to-use{background:transparent;border-radius:0;box-shadow:none;border:none}
#lv-view .score-map{padding:44px 24px 64px}
#hu-view .how-to-use{padding:40px 24px 64px}
@media(max-width:480px){.ms-heat,.ms-heat-head{max-width:100%}}