:root{--ink:#172033;--muted:#697386;--line:#dfe4ec;--canvas:#f5f7fa;--surface:#fff;--accent:#0b6e69;--gold:#c47b13;--danger:#b54708}
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font:15px/1.5 system-ui,"Microsoft YaHei",sans-serif;-webkit-text-size-adjust:100%}
header{background:#142137;color:#fff;padding:14px 16px;position:sticky;top:0;z-index:5;box-shadow:0 1px 0 rgba(0,0,0,.2)}
.brand{display:flex;align-items:baseline;gap:8px}
.brand strong{font-size:17px}
.brand span{color:#b4ebd4;font-size:12px}
nav{display:flex;gap:6px;margin-top:10px;overflow-x:auto;-webkit-overflow-scrolling:touch}
nav button{flex:1 0 auto;border:1px solid #41516b;background:transparent;color:#dce4ef;padding:8px 0;border-radius:6px;font-size:14px;cursor:pointer;min-width:72px}
nav button.active,button:hover{background:var(--accent);color:#fff;border-color:var(--accent)}
main{max-width:640px;margin:0 auto;padding:16px}
.grid{display:grid;grid-template-columns:1fr;gap:12px}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:9px;padding:16px;margin-bottom:12px}
.hero{border-left:5px solid var(--accent)}
.panel h1{font-size:21px;margin:0 0 8px}
.panel h2{font-size:15px;margin:0 0 10px;display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-wrap:wrap}
.eyebrow{color:var(--accent);font-weight:700;font-size:12px;margin:0 0 4px}
.muted{color:var(--muted)}
.stats-list{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{border-left:3px solid var(--gold);padding-left:10px}
.stat b{font-size:20px;display:block;line-height:1.2}
.stat span{font-size:12px;color:var(--muted)}
.task{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:11px 0;border-top:1px solid var(--line);align-items:start}
.task:first-of-type{border-top:0}
.task b{font-size:14px}
.task p{margin:3px 0 0;font-size:13px}
.mins{color:var(--muted);font-size:12px;white-space:nowrap}
.badge{align-self:start;padding:2px 8px;border-radius:10px;background:#e5f4ef;color:#075e56;font-size:12px;white-space:nowrap}
.badge.completed{background:#e5f4ef;color:#075e56}
.badge.active{background:#fff3dd;color:#8a5a00}
.badge.pending{background:#eef0f4;color:#5a6472}
.badge.score-0,.badge.score-1,.badge.score-2{background:#fff3dd;color:#8a5a00}
.badge.score-3{background:#e8effa;color:#2c5fa8}
.badge.score-4,.badge.score-5{background:#e5f4ef;color:#075e56}
.timeline{display:grid;gap:12px}
.phase{border-left:4px solid var(--accent)}
.phase ul{margin:8px 0 0;padding-left:0;list-style:none}
.phase li{margin:8px 0;padding-left:2px}
.change{border-left:3px solid var(--gold);padding:8px 10px;background:#fff8e6;margin:8px 0;border-radius:0 6px 6px 0;font-size:13px}
.mistakes{display:grid;gap:8px}
.mistake{border:1px solid var(--line);border-radius:8px;padding:11px 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mistake b{flex:1 1 auto}
.mistake p{flex-basis:100%;margin:2px 0 0}
form{display:grid;gap:10px}
label{display:grid;gap:4px;font-size:13px;color:var(--muted)}
input{border:1px solid var(--line);border-radius:6px;padding:10px 11px;font:inherit;color:var(--ink);background:#fff;width:100%}
button{border:1px solid var(--accent);background:var(--accent);color:#fff;padding:11px 14px;border-radius:6px;font:inherit;cursor:pointer}
.row3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.empty{padding:26px 16px;text-align:center;color:var(--muted)}
.gate{max-width:360px;margin:40px auto}
footer{text-align:center;color:var(--muted);font-size:12px;padding:18px 16px 30px}
@media (min-width:700px){
  main{max-width:820px}
  .grid{grid-template-columns:1fr 1fr}
  .panel{margin-bottom:0}
}