/* HSK 1–6 listening-first and reading comprehension practice */
.hs-lab{--hs-green:#206e52;--hs-ink:#213c32;--hs-muted:#587063;--hs-line:#d8e5da;--hs-white:#fff;--hs-soft:#f0f8f2;background:linear-gradient(128deg,#f3faf5,#edf6ee);border:1px solid var(--hs-line);border-radius:21px;padding:25px;margin:24px 0}
.hs-head{display:flex;gap:18px;align-items:center;justify-content:space-between}
.hs-head>div{flex:1;min-width:0}.hs-eyebrow{font-size:10px;font-weight:800;letter-spacing:.11em;color:var(--hs-green)}
.hs-head h2{font-size:clamp(21px,2.6vw,29px);margin:9px 0;color:var(--hs-ink)}
.hs-head p{font-size:12px;line-height:1.75;color:var(--hs-muted)}
.hs-count{display:grid;gap:5px;text-align:center;min-width:142px;border:1px solid #a7d5b6;background:#e4f5e8;color:var(--hs-green);padding:18px;border-radius:15px;font-size:11px}
.hs-count b{font-size:25px}
.hs-disclaimer{border:1px solid #e4d8b7;background:#fcf9ed;color:#625634;padding:13px 16px;font-size:11px;line-height:1.7;border-radius:12px;margin:15px 0}
.hs-levels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px;margin:20px 0}
.hs-level{font-size:12px;font-weight:800;padding:12px 5px;border:1px solid var(--hs-line);background:var(--hs-white);border-radius:10px;color:var(--hs-ink);cursor:pointer}
.hs-level.selected,.hs-level:hover{border-color:#3f9c6e;background:#e1f4e7;color:#165e40}
.hs-overview{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)) auto;gap:10px;margin-bottom:19px}
.hs-overview>div{display:grid;gap:5px;border:1px solid var(--hs-line);background:var(--hs-white);padding:12px 16px;border-radius:13px}
.hs-overview b{font-size:21px;color:var(--hs-green)}.hs-overview small{font-size:10.5px;color:var(--hs-muted)}
.hs-overview button{font-size:11px;align-self:stretch}
.hs-layout{display:grid;grid-template-columns:minmax(195px,240px) minmax(0,1fr);gap:14px;align-items:start}
.hs-sidebar,.hs-paper{border:1px solid var(--hs-line);background:var(--hs-white);border-radius:16px;padding:19px;min-width:0}
.hs-sidebar h3{font-size:14px;margin:3px 0 12px;color:var(--hs-ink)}
.hs-sidebar>p{font-size:11px;line-height:1.75;color:var(--hs-muted)}
.hs-story-list{display:grid;gap:9px}
.hs-card{border:1px solid var(--hs-line);background:var(--hs-white);border-radius:10px;padding:12px;text-align:left;display:grid;gap:6px;cursor:pointer}
.hs-card b{font-size:12px;color:var(--hs-ink)}
.hs-card span{font-size:10px;color:var(--hs-muted)}
.hs-card.selected,.hs-card:hover{background:var(--hs-soft);border-color:#54a47b}
.hs-paper-top{display:flex;gap:13px;justify-content:space-between;align-items:start;flex-wrap:wrap}
.hs-paper h3{font-size:20px;color:var(--hs-ink);margin:7px 0 15px}
.hs-modes{display:flex;flex-wrap:wrap;gap:6px}
.hs-modes button{border:1px solid #b8d6c0;background:var(--hs-white);padding:9px 12px;border-radius:9px;color:var(--hs-ink);font-size:11px;font-weight:750;cursor:pointer}
.hs-modes button.active{background:#dbf1e3;border-color:#2b8d60;color:#1b643f}
.hs-text{font:550 clamp(17px,2vw,21px)/1.9 "Microsoft YaHei","PingFang SC",sans-serif;color:var(--hs-ink);background:var(--hs-soft);border:1px solid var(--hs-line);border-radius:11px;padding:18px;overflow-wrap:anywhere}
.hs-audio{border:1px dashed #7db79a;background:var(--hs-soft);border-radius:13px;padding:17px;margin:8px 0}
.hs-audio>b{font-size:13px;color:var(--hs-ink)}.hs-audio p{font-size:12px;line-height:1.8;color:var(--hs-muted)}
.hs-audio-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.hs-audio-tools label{font-size:11px;color:var(--hs-ink);font-weight:750}
.hs-audio-tools select{margin-left:5px;padding:9px;border:1px solid #b0d1ba;border-radius:8px;background:var(--hs-white);color:var(--hs-ink)}
.hs-audio-tools button{font-size:11px;padding:10px 12px}
.hs-question{font:700 17px/1.8 "Microsoft YaHei",sans-serif;color:var(--hs-ink);margin:18px 0 12px}
.hs-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hs-option{border:1px solid #bfd6c6;background:#fafcfb;color:#214a32;min-height:60px;padding:14px;border-radius:11px;text-align:left;line-height:1.65;font-size:13px;cursor:pointer}
.hs-option:hover:not(:disabled){border-color:#26875f;background:#e9f7ee}
.hs-option:disabled{opacity:1;cursor:default}
.hs-option.correct{background:#dcf7e7;border:2px solid #238b58;color:#165b33}
.hs-option.wrong{background:#ffe5e9;border:2px solid #c54158;color:#902b42}
.hs-feedback{padding:14px 17px;border-radius:12px;margin:14px 0;font-size:12px;line-height:1.8}
.hs-feedback.good{background:#e0f5e7;color:#1d603c}.hs-feedback.bad{background:#ffebed;color:#873244}
.hs-feedback>p{margin:4px 0 9px}.hs-feedback details{border-top:1px solid #8bae9c55;padding-top:9px}
.hs-feedback details p{line-height:1.85;margin:8px 0}
.hs-feedback summary{cursor:pointer;font-weight:750}
.hs-tip{font-size:10.5px;line-height:1.75;color:var(--hs-muted);margin-top:13px}
.hs-lab :is(button,select):focus-visible{outline:3px solid #338c66;outline-offset:3px}
body.dark .hs-lab{--hs-green:#afe8c1;--hs-ink:#e4f3e8;--hs-muted:#b7d0be;--hs-line:#49634f;--hs-white:#1f3025;--hs-soft:#263b2d;background:linear-gradient(128deg,#263a2e,#1e3225)}
body.dark .hs-count{background:#2b4c36;border-color:#4b8660}
body.dark .hs-disclaimer{background:#413b2a;border-color:#706347;color:#f1e1b4}
body.dark .hs-level.selected,body.dark .hs-level:hover,body.dark .hs-modes button.active{background:#31593e;color:#e3ffe9}
body.dark .hs-option{background:#2c4032;color:#e9f4e9;border-color:#5d7d63}
body.dark .hs-option.correct{background:#205237;border-color:#76dfa4;color:#e3ffee}
body.dark .hs-option.wrong{background:#592936;border-color:#ff95ac;color:#ffe5ee}
body.dark .hs-feedback.good{background:#25513a;color:#d4f8df}
body.dark .hs-feedback.bad{background:#582e38;color:#ffe0e6}
@media(max-width:1100px){.hs-levels{grid-template-columns:repeat(3,minmax(0,1fr))}.hs-overview{grid-template-columns:repeat(3,minmax(0,1fr))}.hs-overview button{grid-column:1/-1}}
@media(max-width:690px){.hs-lab{padding:15px}.hs-head{align-items:stretch;flex-direction:column}.hs-count{display:block}.hs-count b{font-size:20px;margin-right:8px}.hs-layout{grid-template-columns:1fr}.hs-options{grid-template-columns:1fr}.hs-paper{padding:15px}}
@media(max-width:410px){.hs-overview{grid-template-columns:1fr 1fr}.hs-overview>div:nth-child(3){grid-column:1/-1}.hs-levels{grid-template-columns:repeat(3,minmax(0,1fr))}}