/* 工作坊流程看板 — 暖米白、墨色字、橙棕强调。
   布局：手机单列；≥940px 两栏（左清单 / 右数字+进度+汇报），整体限宽居中。 */
:root{
  --bg:#f7f2ea; --card:#fffaf2; --ink:#211c18; --muted:#8a7d6d; --faint:#b7ab99;
  --line:#e6dccc; --line2:#f0e8db; --accent:#b5643a; --accentSoft:rgba(181,100,58,.12);
  --ok:#4c7a4c; --bad:#b23a2f; --radius:16px; --max:1120px;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",system-ui,sans-serif}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:#fff;color:var(--ink);
  border-radius:10px;padding:9px 12px;transition:background .15s,border-color .15s}
button:hover{border-color:#d8c9b4}
button.primary{background:var(--accent);border-color:var(--accent);color:#fff}
button.primary:hover{background:#a4572f}
button.ghost{background:transparent;border-color:transparent;color:var(--muted)}
button.wide{width:100%}
button:disabled{opacity:.5;cursor:default}
input,select{font:inherit;color:var(--ink);background:#fff;border:1px solid var(--line);
  border-radius:10px;padding:9px 10px;width:100%}
input:focus,select:focus,button:focus-visible{outline:2px solid var(--accentSoft);outline-offset:1px}
h1,h2{margin:0;font-weight:600}
[hidden]{display:none!important}
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}

/* 登录 */
.login{max-width:360px;margin:16vh auto 0;padding:0 20px;text-align:center}
.login h1{font-size:20px;margin-bottom:6px}
.login .hint{color:var(--muted);font-size:13px;margin:0 0 18px}
.login form{display:grid;gap:10px}
.err{color:var(--bad);font-size:13px;margin-top:12px}

/* 顶栏 */
#top{position:sticky;top:0;z-index:20;background:rgba(247,242,234,.95);
  backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line);
  padding:calc(env(safe-area-inset-top) + 10px) 0 8px}
.headRow{display:flex;align-items:flex-end;gap:12px}
.brandBox{flex:1;min-width:0}
#cohortTitle{font-size:19px;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.meta{color:var(--muted);font-size:12.5px;margin-top:2px}
.headActions{display:flex;gap:4px;flex-shrink:0}

/* 时间轴 */
.timeline{display:flex;overflow-x:auto;scroll-snap-type:x proximity;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;position:relative;margin:10px 0 2px}
.timeline::-webkit-scrollbar{display:none}
.tl{flex:0 0 auto;min-width:104px;scroll-snap-align:center;background:none;border:none;
  padding:2px 6px 4px;position:relative;text-align:center;color:var(--muted)}
.tl::before{content:'';position:absolute;top:13px;left:0;right:0;height:2px;background:var(--line)}
.tl:first-child::before{left:50%}
.tl:last-child::before{right:50%}
.tlDot{display:block;width:11px;height:11px;border-radius:50%;background:#cfc3b0;
  margin:0 auto 7px;position:relative;z-index:1;transition:transform .18s,box-shadow .18s}
.tlName{display:block;font-size:12.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:104px}
.tlDate{display:block;font-size:11px;color:var(--faint);font-variant-numeric:tabular-nums}
.tl.done .tlDot{background:var(--ok)}
.tl.closed .tlDot{background:#c3b8a6}
.tl.cur{color:var(--accent)}
.tl.cur .tlDot{background:var(--accent);transform:scale(1.4);box-shadow:0 0 0 5px var(--accentSoft)}
.tl.cur .tlName{color:var(--accent);font-weight:700}
.tl:hover .tlDot{transform:scale(1.2)}
.tl.cur:hover .tlDot{transform:scale(1.5)}

/* 速记 */
.quick input{background:#fff;border-style:dashed;font-size:14px}

/* 主体两栏 */
.body{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;padding-top:14px;padding-bottom:110px}
@media(min-width:940px){
  .body{grid-template-columns:minmax(0,1fr) 316px;gap:22px;padding-top:20px;padding-bottom:40px}
  #list{order:1}
  #side{order:2}
}

/* 清单 */
.group{margin-bottom:10px;border:1px solid var(--line);border-radius:var(--radius);
  background:var(--card);overflow:hidden;transition:border-color .15s}
.group:hover{border-color:#dccfbb}
.gh{display:flex;align-items:center;gap:10px;padding:13px 15px;user-select:none;cursor:pointer}
.gh .t{flex:1;font-weight:600;font-size:14.5px}
.gh .n{font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.gh .warn{color:var(--bad)}
.gh .chev{width:9px;height:9px;border-right:1.6px solid var(--faint);border-bottom:1.6px solid var(--faint);
  transform:rotate(-45deg);transition:transform .2s;flex:0 0 auto}
.group.open .gh .chev{transform:rotate(45deg)}
.group.done > .gh .t{color:var(--muted)}
.group .items{display:none;border-top:1px solid var(--line2)}
.group.open .items{display:block}
.it{display:flex;gap:11px;padding:11px 15px;border-bottom:1px solid var(--line2);align-items:flex-start}
.it:last-child{border-bottom:none}
.it:hover{background:#fffdf9}
.box{flex:0 0 21px;width:21px;height:21px;border:1.5px solid #c9bfae;border-radius:6px;
  margin-top:1px;display:grid;place-items:center;background:#fff;cursor:pointer;transition:.15s}
.box:hover{border-color:var(--ok)}
.it.on .box{background:var(--ok);border-color:var(--ok);color:#fff}
.box svg{opacity:0;width:13px;height:13px}
.it.on .box svg{opacity:1}
.txt{flex:1;min-width:0;font-size:14px;line-height:1.55;word-break:break-word}
.it.on .txt > span:first-child{color:#9b9081;text-decoration:line-through;text-decoration-color:#c9bfae}
.due{display:inline-block;font-size:11px;color:var(--faint);margin-left:7px;font-variant-numeric:tabular-nums}
.it.overdue .due{color:var(--bad);font-weight:600}
.noteBtn{flex:0 0 auto;font-size:12px;color:var(--faint);border:none;background:none;padding:2px 0 0}
.noteBtn:hover{color:var(--accent)}
.noteText{font-size:12.5px;color:var(--muted);margin-top:4px;white-space:pre-wrap;
  border-left:2px solid var(--line);padding-left:8px}

/* 侧栏 */
#side{display:grid;gap:12px;align-content:start}
@media(min-width:940px){#side{position:sticky;top:158px}}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:14px}
.cardHead{font-size:12px;color:var(--muted);letter-spacing:.08em;margin-bottom:10px}
.cardHint{font-size:11.5px;color:var(--faint);margin:8px 0 0}

.metrics{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.metrics .m{background:#fff;border:1px solid var(--line2);border-radius:11px;padding:9px 10px}
.metrics .m span{display:block;font-size:11.5px;color:var(--muted);margin-bottom:3px}
.metrics .m input{border:none;background:transparent;padding:0;font-size:17px;font-weight:600;
  letter-spacing:.01em;width:100%}
.metrics .m input::placeholder{color:#d6cbb9;font-weight:400}

.ringWrap{display:flex;align-items:center;gap:16px}
.ring{--p:0%;width:82px;height:82px;border-radius:50%;flex:0 0 auto;
  background:conic-gradient(var(--accent) var(--p),#eae0d1 0);display:grid;place-items:center;
  transition:background .3s}
.ringIn{width:64px;height:64px;border-radius:50%;background:var(--card);display:grid;place-items:center}
.ringIn b{font-size:16px;font-variant-numeric:tabular-nums}
.ringSide{flex:1;min-width:0;font-size:13px;color:var(--muted);display:grid;gap:4px}
.ptext{display:grid;gap:3px}
.ptext b{color:var(--bad)}

/* 手机底部条 */
#bottomBar{position:fixed;left:0;right:0;bottom:0;z-index:25;
  padding:8px 16px calc(env(safe-area-inset-bottom) + 10px);
  background:linear-gradient(to top,var(--bg) 62%,rgba(247,242,234,0))}
#bottomBar button{max-width:520px;margin:0 auto;display:block;width:100%;padding:12px}
@media(min-width:940px){#bottomBar{display:none}}

/* 抽屉 */
.panel{position:fixed;inset:0;z-index:40;background:var(--bg);display:flex;flex-direction:column;
  padding-top:env(safe-area-inset-top)}
.panelHead{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;
  border-bottom:1px solid var(--line);max-width:var(--max);margin:0 auto;width:100%}
.panelHead h2{font-size:16px}
.panelBody{flex:1;overflow:auto;padding:16px;padding-bottom:calc(env(safe-area-inset-bottom) + 24px);
  max-width:var(--max);margin:0 auto;width:100%}
.panelFoot{padding:10px 16px calc(env(safe-area-inset-bottom) + 12px);border-top:1px solid var(--line);
  max-width:var(--max);margin:0 auto;width:100%}
.panelBody .row{display:block;width:100%;text-align:left;margin-bottom:8px}
.form{display:grid;gap:10px;align-content:start;max-width:460px}
.form label{display:grid;gap:5px;font-size:13px;color:var(--muted)}
.report{white-space:pre-wrap;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px;font-size:14px;margin:0 0 12px;font-family:inherit;max-width:640px}

/* 期卡片（列表） */
.cohorts{display:grid;gap:10px}
@media(min-width:700px){.cohorts{grid-template-columns:1fr 1fr}}
.cohort{background:var(--card);border:1px solid var(--line);border-radius:13px;padding:13px;cursor:pointer;
  transition:border-color .15s,transform .15s}
.cohort:hover{border-color:var(--accent);transform:translateY(-1px)}
.cohort.cur{border-color:var(--accent);box-shadow:0 0 0 3px var(--accentSoft)}
.cohort .h{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.cohort .h b{font-size:15px}
.badge{font-size:11px;color:var(--accent);border:1px solid var(--accent);border-radius:99px;padding:1px 7px;white-space:nowrap}
.cohort .sub{color:var(--muted);font-size:12px;margin-top:3px}
.bar2{height:4px;background:#eae0d1;border-radius:99px;margin-top:9px;overflow:hidden}
.bar2 i{display:block;height:100%;background:var(--accent)}
.cohort .stat{font-size:12px;color:var(--muted);margin-top:6px;display:flex;justify-content:space-between}
.cohort .stat .bad{color:var(--bad)}

.toast{position:fixed;left:50%;bottom:calc(env(safe-area-inset-bottom) + 84px);transform:translateX(-50%);
  background:#211c18;color:#fff;padding:9px 15px;border-radius:99px;font-size:13px;z-index:60;max-width:86vw}
.toast.bad{background:var(--bad)}