/* Writing workshop: learner-owned review and drafts, not automatic grading. */
.hw-root{--hw-panel:#fff;--hw-soft:#ecf7ed;--hw-line:#d6e7dc;--hw-ink:#224536;--hw-muted:#557265;--hw-accent:#26734d;background:linear-gradient(125deg,#f4faf4,#eef7ef);padding:24px;border:1px solid var(--hw-line);border-radius:21px;margin:24px 0;color:var(--hw-ink)}
.hw-header{display:flex;gap:18px;align-items:center;justify-content:space-between}.hw-header>div{flex:1;min-width:0}.hw-kicker{letter-spacing:.1em;font-size:10px;font-weight:850;color:var(--hw-accent)}
.hw-header h2{font-size:clamp(21px,2.5vw,29px);line-height:1.3;margin:8px 0;color:var(--hw-ink)}
.hw-header p,.hw-disclaimer{font-size:12px;line-height:1.75;color:var(--hw-muted)}
.hw-progress{border:1px solid #b3d6c0;background:#e3f4e8;border-radius:12px;color:#1a6544;padding:13px;text-align:center;font-size:11px;line-height:1.5;font-weight:800;max-width:174px}
.hw-card{background:var(--hw-panel);border:1px solid var(--hw-line);border-radius:16px;padding:22px;margin-top:19px}
.hw-card h3{font-size:17px;color:var(--hw-ink);margin:10px 0}.hw-prompt{font-size:14px;line-height:1.8;font-weight:750;color:var(--hw-ink)}
.hw-rule{border-left:3px solid #248358;background:var(--hw-soft);padding:13px 18px;border-radius:10px;margin:14px 0 22px}
.hw-rule b{display:block;font-size:11px;margin-bottom:8px;color:var(--hw-ink)}
.hw-rule span{font:650 17px/1.75 "Microsoft YaHei",sans-serif;color:var(--hw-ink)}
.hw-rule p{font-size:11px;line-height:1.75;color:var(--hw-muted);margin:7px 0 0}
.hw-draft-label{display:block;font-size:12px;font-weight:750;margin-bottom:10px}
.hw-card textarea{width:100%;min-height:154px;padding:15px;border:1px solid #b5d0bc;border-radius:13px;background:var(--hw-panel);color:var(--hw-ink);font:15px/1.85 "Microsoft YaHei","PingFang SC",sans-serif;resize:vertical}
.hw-counter{display:flex;gap:13px;justify-content:space-between;flex-wrap:wrap;margin-top:9px}
.hw-counter span{font-size:11px;line-height:1.7;color:var(--hw-muted)}.hw-counter span.matched{color:#197e50;font-weight:750}
.hw-sample{margin:20px 0;border-top:1px solid var(--hw-line);padding-top:17px}.hw-sample button{font-size:12px}
.hw-example{padding:15px 18px;background:var(--hw-soft);border-radius:11px;margin-top:14px}
.hw-example strong{font-size:12px;color:var(--hw-ink)}.hw-example p{font-size:14px;line-height:1.9;color:var(--hw-ink)}
.hw-self-review{border-top:1px solid var(--hw-line);padding-top:15px}
.hw-self-review h3{margin:8px 0}.hw-self-review>p{font-size:11px;line-height:1.75;color:var(--hw-muted)}
.hw-checks{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:16px 0}
.hw-check{display:flex;align-items:start;gap:12px;border:1px solid var(--hw-line);background:var(--hw-soft);padding:14px;border-radius:11px;cursor:pointer}
.hw-check input{width:18px;height:18px;accent-color:#20875b;flex-shrink:0;margin-top:3px}.hw-check span{display:grid;gap:6px;min-width:0}
.hw-check strong{font-size:12px;color:var(--hw-ink)}.hw-check small{font-size:10.5px;line-height:1.7;color:var(--hw-muted)}
.hw-actions{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.hw-actions button{font-size:11px;padding:11px 15px}
.hw-notice{min-height:23px;font-size:11px;margin:10px 0;color:var(--hw-accent)}
.hw-result{padding:13px 17px;border-radius:12px;margin-top:13px;font-size:12px;line-height:1.7}
.hw-result p{margin:5px 0}.hw-result.complete{background:#e0f6e7;color:#215f3b}
.hw-result.again{background:#fbf1dc;color:#785521}
.hw-root :is(button,textarea,input):focus-visible{outline:3px solid #25865a;outline-offset:3px}
body.dark .hw-root{--hw-panel:#203529;--hw-soft:#294735;--hw-line:#4b6851;--hw-ink:#e3f5e9;--hw-muted:#b7d4bf;--hw-accent:#a0e6b7;background:linear-gradient(130deg,#24392b,#1c3125)}
body.dark .hw-progress{background:#2f553c;color:#d9f9e4;border-color:#5c9270}
body.dark .hw-counter span.matched{color:#a5efbb}
body.dark .hw-result.complete{background:#2a553a;color:#d1fbe2}
body.dark .hw-result.again{background:#55432d;color:#ffe0ab}
@media(max-width:730px){.hw-root{padding:15px}.hw-header{flex-direction:column;align-items:stretch}.hw-progress{max-width:100%}.hw-card{padding:15px}.hw-checks{grid-template-columns:1fr}.hw-actions button{flex:1}}
@media(prefers-reduced-motion:reduce){.hw-root button{transition:none}}

.hw-diagnostics,.hw-versions{border-top:1px solid var(--hw-line);padding:17px 0;margin-top:17px}
.hw-diagnostics h3,.hw-versions h3{margin:3px 0 8px;font-size:16px;color:var(--hw-ink)}
.hw-diagnostics>p,.hw-versions-header p,.hw-empty{font-size:11px;line-height:1.7;color:var(--hw-muted);margin:0 0 12px}
.hw-diagnostics-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.hw-diagnostic{border:1px solid var(--hw-line);background:var(--hw-soft);border-radius:10px;padding:12px 13px;display:grid;gap:6px;min-width:0}
.hw-diagnostic strong{color:var(--hw-ink);font-size:11.5px}
.hw-diagnostic span{color:var(--hw-muted);font-size:11px;line-height:1.75}
.hw-diagnostic.ready{border-left:3px solid #31945b}
.hw-diagnostic.todo{border-left:3px solid #bf9248}
.hw-versions-header{display:flex;align-items:center;justify-content:space-between;gap:12px}
.hw-versions-header>div{flex:1;min-width:0}.hw-versions-header button{font-size:11px;white-space:nowrap}
.hw-version-list{display:grid;gap:8px;margin-top:9px}
.hw-version-item{background:var(--hw-soft);border:1px solid var(--hw-line);border-radius:11px;padding:12px 15px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.hw-version-item>div{min-width:0;flex:1}.hw-version-item strong{font-size:11px;color:var(--hw-ink)}
.hw-version-item p{font:13px/1.7 "Microsoft YaHei",sans-serif;color:var(--hw-muted);margin:5px 0 0;overflow-wrap:anywhere}
.hw-version-item button{font-size:10px;padding:9px 11px;flex-shrink:0}
body.dark .hw-diagnostic.todo{border-left-color:#d8ae63}
body.dark .hw-diagnostic.ready{border-left-color:#7edfac}
@media(max-width:710px){.hw-diagnostics-list{grid-template-columns:1fr}.hw-versions-header{align-items:stretch;flex-direction:column}.hw-version-item{align-items:start;flex-direction:column}.hw-version-item button{align-self:end}}