/* Listening-first grammar comprehension, HSK 1–9 */
.gl-root{--gl-ink:#243b4a;--gl-muted:#627581;--gl-line:#cfe1e6;--gl-surface:#fff;--gl-soft:#eef7f8;--gl-accent:#117b86;background:linear-gradient(125deg,#eff9fa,#f8fbf7);border:1px solid var(--gl-line);border-radius:22px;padding:23px;margin:20px 0;color:var(--gl-ink)}
.gl-header{display:flex;align-items:center;justify-content:space-between;gap:20px}
.gl-header>div:first-child{flex:1;min-width:0}
.gl-kicker{font-size:10px;letter-spacing:.12em;font-weight:850;color:var(--gl-accent)}
.gl-header h2{font-size:clamp(22px,2.9vw,29px);color:var(--gl-ink);margin:9px 0}
.gl-header p,.gl-audio-note,.gl-disclaimer{font-size:11px;line-height:1.78;color:var(--gl-muted)}
.gl-total{background:#dff4f1;border:1px solid #acd9d9;padding:16px;min-width:145px;max-width:185px;border-radius:14px;text-align:center;display:grid;gap:5px}
.gl-total strong{font-size:27px;color:#187783}.gl-total span{font-size:10px;line-height:1.6;color:#3f737b}
.gl-metrics{display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;background:var(--gl-soft);padding:12px 15px;border-radius:11px;margin:18px 0}
.gl-metrics span{font-size:11px;color:var(--gl-ink)}.gl-metrics button{font-size:11px;margin-left:auto}
.gl-panel{background:var(--gl-surface);border:1px solid var(--gl-line);border-radius:17px;padding:18px}
.gl-panel-head{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px}
.gl-panel-head strong{font-size:11px;color:var(--gl-ink)}
.gl-player{background:var(--gl-soft);border-radius:14px;padding:18px;display:flex;align-items:center;gap:13px;margin:15px 0}
.gl-speaker{width:44px;height:44px;flex-shrink:0;display:grid;place-items:center;border-radius:50%;background:#c9eae8;color:#0d7c82;font-size:24px}
.gl-player>div:nth-child(2){flex:1;min-width:0}.gl-player h3{font-size:15px;color:var(--gl-ink);margin:0 0 5px}
.gl-player p{font-size:11px;color:var(--gl-muted);margin:0;line-height:1.7}
.gl-player button{font-size:11px;white-space:nowrap}
.gl-controls{display:flex;gap:12px;flex-wrap:wrap;margin:12px 0}.gl-controls label{font-size:11px;font-weight:750;color:var(--gl-ink);display:flex;align-items:center;gap:8px}
.gl-controls select{border:1px solid #abd0d5;background:var(--gl-surface);color:var(--gl-ink);border-radius:8px;padding:9px 12px}
.gl-audio-note{background:var(--gl-soft);border-radius:9px;padding:9px 11px}
.gl-answers{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:17px}
.gl-option{border:1px solid #bad7da;background:var(--gl-surface);color:var(--gl-ink);border-radius:13px;text-align:left;display:flex;gap:12px;align-items:flex-start;padding:14px 13px;min-width:0;font:500 12px/1.75 inherit;cursor:pointer}
.gl-option>span:first-child{border-radius:8px;background:#def1ee;color:#0f7c80;font-weight:850;padding:5px 10px}
.gl-option>span:last-child{flex:1;overflow-wrap:anywhere}
.gl-option:disabled{cursor:default;opacity:.77}
.gl-option.correct{border-color:#3c9c76;background:#e2f7eb}
.gl-option.incorrect{border-color:#cb765c;background:#fff0e8}
.gl-feedback{background:var(--gl-soft);border:1px solid var(--gl-line);border-radius:12px;padding:16px;margin:17px 0}
.gl-feedback strong{font-size:14px;color:var(--gl-accent)}
.gl-feedback p{font-size:12px;color:var(--gl-ink);line-height:1.75}
.gl-feedback .gl-hanzi{font:600 clamp(19px,2.5vw,24px)/1.85 "Microsoft YaHei",sans-serif}
.gl-feedback .gl-pinyin{font-size:12px;color:var(--gl-muted);font-style:italic}
.gl-feedback button{font-size:11px}
.gl-transcript{background:var(--gl-soft);border-radius:10px;padding:12px 15px;margin:12px 0}
.gl-transcript span,.gl-transcript small{font-size:11px;color:var(--gl-muted)}
.gl-transcript p{font:600 20px/1.85 "Microsoft YaHei",sans-serif;margin:6px 0;color:var(--gl-ink)}
.gl-history{font-size:11px;color:var(--gl-muted);margin:13px 0 1px}
.gl-actions{display:flex;flex-wrap:wrap;align-items:center;gap:13px;margin:16px 0}
.gl-actions button{font-size:11px}
.gl-actions span{font-size:10px;line-height:1.7;color:var(--gl-muted)}
.gl-status{min-height:17px;font-size:11px;color:var(--gl-accent)}
.gl-root :is(button,select):focus-visible{outline:3px solid #26999f;outline-offset:3px}
body.dark .gl-root{--gl-ink:#e6f7f7;--gl-muted:#b6d1d7;--gl-line:#506f74;--gl-surface:#243940;--gl-soft:#2e4951;--gl-accent:#a1e9e8;background:linear-gradient(130deg,#263f44,#21353a)}
body.dark .gl-total{background:#2b5356;border-color:#51898f}
body.dark .gl-total strong,body.dark .gl-total span{color:#b7f5ed}
body.dark .gl-speaker{background:#396b70;color:#b4f1f0}
body.dark .gl-option>span:first-child{background:#305d62;color:#bff3ed}
body.dark .gl-option.correct{background:#255044;border-color:#54a982}
body.dark .gl-option.incorrect{background:#513a34;border-color:#d48e71}
@media(max-width:840px){.gl-player{flex-wrap:wrap}.gl-player>div:nth-child(2){flex-basis:calc(100% - 65px)}.gl-answers{grid-template-columns:1fr}}
@media(max-width:640px){.gl-root{padding:14px}.gl-header{align-items:stretch;flex-direction:column}.gl-total{min-width:0;max-width:none}.gl-panel{padding:13px}.gl-player{padding:13px}.gl-player button{flex:1}.gl-metrics button{margin-left:0;width:100%}.gl-actions button{width:100%}}