/* Focus Study Mode, an evidence-based companion to the HSK Learning Dashboard */
.fs-root{--fs-bg:#f6f6fc;--fs-surface:#fff;--fs-line:#dcdcf0;--fs-ink:#25304e;--fs-muted:#65708b;--fs-soft:#edecfa;--fs-accent:#6055bb;border-radius:21px;border:1px solid var(--fs-line);padding:22px;margin:18px 0;background:linear-gradient(110deg,#f2f1fa,#fafaff);color:var(--fs-ink)}
.fs-header{display:flex;justify-content:space-between;align-items:center;gap:20px}
.fs-header>div:first-child{flex:1;min-width:0}
.fs-kicker{font-size:10px;letter-spacing:.12em;font-weight:850;color:var(--fs-accent)}
.fs-header h2{font-size:clamp(21px,3vw,29px);margin:9px 0 10px;color:var(--fs-ink)}
.fs-header p,.fs-disclaimer{font-size:12px;line-height:1.8;color:var(--fs-muted)}
.fs-tag{display:grid;gap:5px;text-align:center;min-width:140px;max-width:195px;border-radius:14px;padding:16px;background:#e8e5fd;border:1px solid #c5bdf3;color:#5244a0}
.fs-tag b{font-size:27px;font-variant-numeric:tabular-nums}.fs-tag span{font-size:11px;line-height:1.65}
.fs-start{background:var(--fs-surface);padding:18px;border:1px solid var(--fs-line);border-radius:13px;margin:19px 0;display:flex;justify-content:space-between;gap:15px;align-items:center}
.fs-start strong{font-size:14px;color:var(--fs-ink)}.fs-start p{font-size:11px;line-height:1.75;color:var(--fs-muted);margin:6px 0 0}
.fs-start button,.fs-active-title button,.fs-end button{font-size:11px;white-space:nowrap}
.fs-active{border:1px solid var(--fs-line);background:var(--fs-surface);border-radius:14px;padding:18px;margin:18px 0}
.fs-active-title{display:flex;justify-content:space-between;align-items:center;gap:15px}
.fs-active-title h3{font-size:17px;margin:7px 0;color:var(--fs-ink)}
.fs-active-title p{font-size:11px;line-height:1.7;color:var(--fs-muted)}
.fs-progress{height:11px;background:#e7e5f3;border-radius:20px;overflow:hidden;margin:14px 0}
.fs-progress i{background:linear-gradient(90deg,#6558c3,#a0a2ee);height:100%;border-radius:20px;display:block;max-width:100%;transition:width .2s}
.fs-steps{display:grid;gap:9px;margin-top:15px}
.fs-step{display:flex;align-items:center;gap:15px;padding:14px;background:var(--fs-soft);border:1px solid var(--fs-line);border-radius:12px}
.fs-step.done{border-left:4px solid #42a577}
.fs-num{width:38px;height:38px;flex-shrink:0;background:#dcd9f5;border-radius:11px;display:grid;place-items:center;font-weight:850;color:#5145a3;font-size:14px}
.fs-step.done .fs-num{background:#d3f1e2;color:#237c51}
.fs-step>div:nth-child(2){flex:1;min-width:0}
.fs-step h4{font-size:13px;color:var(--fs-ink);line-height:1.45;margin:6px 0;overflow-wrap:anywhere}
.fs-step small,.fs-meta{font-size:10px;line-height:1.65;color:var(--fs-muted)}
.fs-meta{color:var(--fs-accent);font-weight:750}
.fs-step button{font-size:11px;white-space:nowrap}
.fs-done{font-size:11px;color:#378761;font-weight:800}
.fs-end{display:flex;justify-content:space-between;align-items:center;gap:14px;border-top:1px solid var(--fs-line);padding-top:15px;margin-top:17px}
.fs-end p{font-size:11px;line-height:1.65;color:var(--fs-muted);margin:0;flex:1}
.fs-history{background:var(--fs-surface);border:1px solid var(--fs-line);padding:18px;border-radius:14px;margin-top:16px}
.fs-history h3{font-size:15px;color:var(--fs-ink);margin:6px 0 14px}
.fs-history-list{display:grid;gap:7px}
.fs-history-row{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:9px;background:var(--fs-soft);border-radius:9px;padding:11px 13px}
.fs-history-row span,.fs-history-row small,.fs-empty{font-size:11px;color:var(--fs-muted)}
.fs-history-row strong{font-size:12px;color:var(--fs-ink)}
.fs-empty{line-height:1.6}
.fs-notice{min-height:17px;color:var(--fs-accent);font-size:11px;margin:8px 0}
.fs-root :is(button,input):focus-visible{outline:3px solid #8f82ec;outline-offset:3px}
body.dark .fs-root{--fs-bg:#26243d;--fs-surface:#282b3d;--fs-line:#555371;--fs-ink:#f1efff;--fs-muted:#c4c2dc;--fs-soft:#32344b;--fs-accent:#c0b4ff;background:linear-gradient(110deg,#2d2b44,#25283c)}
body.dark .fs-tag{background:#3d3c66;color:#e6ddff;border-color:#70689c}
body.dark .fs-num{background:#48416d;color:#efddff}
body.dark .fs-step.done .fs-num{background:#315742;color:#c2f6da}
body.dark .fs-progress{background:#42445a}
body.dark .fs-done{color:#a1eac0}
@media(max-width:760px){.fs-header{flex-direction:column;align-items:stretch}.fs-tag{min-width:0;max-width:none}.fs-start,.fs-active-title,.fs-end{flex-direction:column;align-items:stretch}.fs-start button,.fs-active-title button,.fs-end button{align-self:flex-start}}
@media(max-width:560px){.fs-root{padding:14px}.fs-active,.fs-history{padding:13px}.fs-step{flex-wrap:wrap}.fs-step button{width:100%}.fs-done{margin-left:auto}}
@media(prefers-reduced-motion:reduce){.fs-progress i{transition:none}}