/* HSK sentence construction and cloze drills — independent, accessible practice. */
.hss-root{--hss-border:#d0e3d4;--hss-ink:#1c4433;--hss-muted:#5a7262;--hss-soft:#eff8f2;--hss-panel:#fff;--hss-accent:#237851;background:linear-gradient(118deg,#f7fbf5,#edf8f0);padding:24px;border:1px solid var(--hss-border);border-radius:22px;margin:20px 0 26px;color:var(--hss-ink)}
.hss-header{display:flex;gap:16px;justify-content:space-between;align-items:center}.hss-header>div{flex:1;min-width:0}
.hss-kicker{font-size:11px;letter-spacing:.1em;font-weight:850;color:var(--hss-accent)}
.hss-header h2{margin:8px 0;font-size:clamp(20px,2.3vw,27px);color:var(--hss-ink)}
.hss-header p,.hss-note{line-height:1.8;font-size:12px;color:var(--hss-muted)}
.hss-count{background:#dff3e5;border:1px solid #a8d8b7;padding:13px 15px;border-radius:12px;white-space:nowrap;color:#245c3c;font-size:12px;font-weight:800}
.hss-tabs{display:flex;gap:8px;flex-wrap:wrap;border-bottom:1px solid var(--hss-border);margin:18px 0;padding-bottom:14px}
.hss-tabs button{padding:12px 16px;border:1px solid var(--hss-border);border-radius:11px;background:var(--hss-panel);font-size:12px;color:var(--hss-ink);font-weight:800;cursor:pointer}
.hss-tabs button.active{background:#d6f1e1;border-color:#2c9162;color:#125a3b}
.hss-root h3{color:var(--hss-ink);font-size:18px;margin:17px 0}
.hss-instruction{font-size:12px;line-height:1.7;color:var(--hss-muted);margin:8px 0 15px}
.hss-selected{min-height:95px;border:2px dashed #9fcbb0;border-radius:13px;background:var(--hss-panel);padding:19px;display:flex;gap:5px;flex-wrap:wrap;align-items:center;line-height:1.8}
.hss-selected span{font:650 clamp(19px,2.8vw,26px)/1.7 "Microsoft YaHei",sans-serif;color:var(--hss-ink)}
.hss-selected small{font-size:12px;color:var(--hss-muted)}
.hss-tiles{display:flex;gap:10px;flex-wrap:wrap;margin:16px 0}
.hss-tile{font:650 clamp(15px,2vw,19px)/1.5 "Microsoft YaHei",sans-serif;cursor:pointer;background:var(--hss-panel);border:1px solid #b9d3c1;color:var(--hss-ink);border-radius:12px;min-height:49px;padding:9px 16px}
.hss-tile:hover:not(:disabled){background:#e1f5e9;border-color:#2e9565}
.hss-tile:disabled{opacity:.38;cursor:default}
.hss-actions{display:flex;gap:9px;flex-wrap:wrap;margin:14px 0}
.hss-actions button{font-size:11px;padding:11px 14px}
.hss-actions button:disabled{opacity:.45;cursor:default}
.hss-blank{padding:22px 18px;border-radius:12px;border:1px solid var(--hss-border);background:var(--hss-panel);font:650 clamp(17px,2.6vw,23px)/1.9 "Microsoft YaHei",sans-serif;color:var(--hss-ink);overflow-wrap:anywhere}
.hss-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.hss-choice{font:650 17px/1.5 "Microsoft YaHei",sans-serif;border:1px solid #bad7c5;background:var(--hss-panel);border-radius:11px;padding:16px;min-height:62px;text-align:left;color:var(--hss-ink);cursor:pointer}
.hss-choice:hover:not(:disabled){border-color:#29875b;background:#eaf7ee}
.hss-choice:disabled{opacity:1;cursor:default}
.hss-choice.correct{background:#e1f7e8;border:2px solid #239261;color:#1a5838}
.hss-choice.wrong{background:#ffe8ed;border:2px solid #c74255;color:#873549}
.hss-result{padding:15px 19px;border-radius:12px;margin:16px 0;line-height:1.8;font-size:12px}
.hss-result p{margin:7px 0}.hss-result.good{background:#e0f4e8;color:#1f623f}.hss-result.bad{background:#fee6ea;color:#8d3146}
.hss-root :is(button):focus-visible{outline:3px solid #268961;outline-offset:3px}
body.dark .hss-root{--hss-border:#486f55;--hss-ink:#e8f7e9;--hss-muted:#bfd9c4;--hss-soft:#294434;--hss-panel:#213528;--hss-accent:#a1ebbb;background:linear-gradient(115deg,#273c2e,#1f3025)}
body.dark .hss-count{background:#2f543b;border-color:#5b9470;color:#d1f6dd}
body.dark .hss-tabs button.active{background:#2d563b;border-color:#68b387;color:#d2f5dc}
body.dark .hss-tile{border-color:#5b8465}
body.dark .hss-tile:hover:not(:disabled),body.dark .hss-choice:hover:not(:disabled){background:#375940}
body.dark .hss-choice{border-color:#517a5d}
body.dark .hss-choice.correct{background:#205237;border-color:#7de8a7;color:#e2ffec}
body.dark .hss-choice.wrong{background:#532936;border-color:#ffa1b5;color:#ffe2eb}
body.dark .hss-result.good{background:#234c37;color:#d2f7df}
body.dark .hss-result.bad{background:#572d3b;color:#ffd9e2}
@media(max-width:670px){.hss-root{padding:16px}.hss-header{flex-direction:column;align-items:start}.hss-count{width:100%;text-align:center}.hss-choices{grid-template-columns:1fr}}
@media(max-width:420px){.hss-tabs button{flex:1}.hss-actions button{flex:1}}