:root{
  --bg:#f5f7fa; --card:#ffffff; --ink:#2b3a4a; --muted:#7b8a99;
  --green:#2e9e6b; --green-d:#227a52; --blue:#3b82c4; --orange:#e8862e;
  --red:#d05252; --line:#e3e9ef; --code-bg:#263238; --code-ink:#e6eeef;
  --radius:14px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:"Microsoft YaHei","PingFang SC","Noto Sans CJK SC",sans-serif; background:var(--bg); color:var(--ink); line-height:1.7;}
.topbar{position:sticky; top:0; z-index:50; background:var(--card); border-bottom:1px solid var(--line); display:flex; align-items:center; gap:16px; padding:10px 20px;}
.brand{font-weight:700; font-size:18px; cursor:pointer; white-space:nowrap;}
.crumbs{color:var(--muted); font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
main{max-width:1080px; margin:0 auto; padding:20px 16px 60px;}
.foot{color:var(--muted); font-size:12px; text-align:center; padding:20px; border-top:1px solid var(--line);}

/* ===== home ===== */
.hero{background:linear-gradient(135deg,#e8f5ee,#e3eef8); border-radius:var(--radius); padding:28px 24px; margin-bottom:24px;}
.hero h1{font-size:24px; margin-bottom:8px;}
.hero p{color:var(--muted); font-size:14px;}
.unit{margin-bottom:26px;}
.unit-title{display:flex; align-items:baseline; gap:10px; margin-bottom:10px;}
.unit-title .uname{font-size:18px; font-weight:700;}
.unit-title .udesc{font-size:13px; color:var(--muted);}
.unit-title .work{font-size:12px; background:#fdf1e3; color:var(--orange); padding:2px 10px; border-radius:20px;}
.lessons{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px;}
.lcard{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px 14px; cursor:pointer; transition:.15s; text-decoration:none; color:var(--ink); display:block;}
.lcard:hover{border-color:var(--green); box-shadow:0 2px 10px rgba(46,158,107,.12); transform:translateY(-1px);}
.lcard .no{font-size:12px; color:var(--muted);}
.lcard .nm{font-size:14px; font-weight:600; margin-top:2px;}
.lcard.work-l{background:#fffaf2; border-color:#f3ddc0;}
.progress-tip{font-size:13px; color:var(--muted); margin:6px 0 18px;}

/* ===== lesson page ===== */
.lesson-head{display:flex; flex-wrap:wrap; align-items:baseline; gap:10px; margin-bottom:6px;}
.lesson-head .lno{font-size:13px; color:#fff; background:var(--green); border-radius:20px; padding:2px 12px;}
.lesson-head h1{font-size:22px;}
.goals{background:#eef7f1; border-left:4px solid var(--green); border-radius:8px; padding:10px 14px; margin:10px 0 18px; font-size:14px;}
.goals li{margin-left:18px;}
.sec{background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; margin-bottom:16px;}
.sec h2{font-size:17px; margin-bottom:10px; display:flex; align-items:center; gap:8px;}
.sec h2 .tag{font-size:12px; font-weight:400; color:var(--muted);}
.teach p{font-size:14px; margin-bottom:8px;}
pre.kc{background:var(--code-bg); color:var(--code-ink); border-radius:10px; padding:14px 16px; overflow-x:auto; font-size:13.5px; line-height:1.6; font-family:Consolas,Menlo,"Courier New",monospace;}
.knote{font-size:13px; color:var(--muted); margin-top:8px;}
.errs{font-size:13.5px;}
.errs li{margin:6px 0 6px 18px;}
.errs b{color:var(--red);}

/* ===== playground ===== */
.play{border:2px solid var(--green); }
.play h2{color:var(--green-d);}
.playbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-bottom:10px;}
.btn{border:none; border-radius:8px; padding:8px 18px; font-size:14px; cursor:pointer; font-family:inherit;}
.btn-run{background:var(--green); color:#fff;}
.btn-run:hover{background:var(--green-d);}
.btn-stop{background:var(--red); color:#fff;}
.btn-ghost{background:#eef2f6; color:var(--ink);}
.btn-sm{padding:5px 12px; font-size:12.5px;}
.playgrid{display:grid; grid-template-columns:minmax(300px,5fr) minmax(300px,6fr); gap:12px;}
@media (max-width:820px){.playgrid{grid-template-columns:1fr;}}
.editor-wrap{display:flex; flex-direction:column; gap:8px;}
textarea.code{width:100%; min-height:300px; background:var(--code-bg); color:var(--code-ink); border:1px solid #37474f; border-radius:10px; padding:12px 14px; font-family:Consolas,Menlo,"Courier New",monospace; font-size:14px; line-height:1.6; resize:vertical; tab-size:4; outline:none;}
textarea.code:focus{border-color:var(--green);}
.io-row{display:flex; gap:8px;}
.io-row input{flex:1; border:1px solid var(--line); border-radius:8px; padding:8px 10px; font-size:13.5px; font-family:inherit;}
.rightpane{display:flex; flex-direction:column; gap:10px;}
.canvas-box{background:#fff; border:1px solid var(--line); border-radius:10px; display:flex; justify-content:center; padding:6px; min-height:400px;}
.canvas-box canvas{max-width:100%; height:auto; border-radius:6px;}
.out{background:#1e272c; color:#cfe3d8; border-radius:10px; padding:10px 14px; font-family:Consolas,Menlo,monospace; font-size:13px; min-height:70px; max-height:180px; overflow-y:auto; white-space:pre-wrap;}
.out .errline{color:#ff9c8a;}
.out .pendline{color:#ffd28a;}
.status{font-size:13px; color:var(--muted);}
.status.running{color:var(--orange);} .status.err{color:var(--red);} .status.ok{color:var(--green);}

/* ===== exercises ===== */
.ex{border-left:4px solid var(--blue); background:#f4f8fc; border-radius:0 10px 10px 0; padding:12px 16px; margin-bottom:12px;}
.ex h3{font-size:15px; margin-bottom:6px;}
.ex .exbody{font-size:14px;}
.ex .exbody li{margin-left:20px;}
details.ans{margin-top:8px;}
details.ans summary{cursor:pointer; color:var(--blue); font-size:13.5px;}
details.ans pre.kc{margin-top:8px;}
.usebtn{margin-left:8px;}
.ext{border-left-color:var(--orange); background:#fdf6ec;}
.ext h3{color:var(--orange);}
.ext .hint{font-size:13px; color:var(--muted); margin-top:4px;}
.navrow{display:flex; justify-content:space-between; margin-top:22px; gap:10px;}
.navbtn{background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 16px; cursor:pointer; font-size:14px; color:var(--ink); max-width:46%;}
.navbtn:hover{border-color:var(--green);}
.navbtn .dir{font-size:12px; color:var(--muted); display:block;}