:root{--bg:#f4f1ea;--paper:#fffdf8;--ink:#23211d;--muted:#8a857a;--accent:#2f6f5e;--accent2:#e0a43a;--line:#e3ded2;--danger:#b8483c}
*{box-sizing:border-box}html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);font:16px/1.45 -apple-system,"Segoe UI",Roboto,Arial,sans-serif}
.hidden{display:none!important}.muted{color:var(--muted)}.err{color:var(--danger);min-height:1.4em;margin-top:8px}
.overlay{position:fixed;inset:0;display:flex;align-items:flex-start;justify-content:center;overflow:auto;background:var(--bg);z-index:20;padding:16px}
.overlay .card{margin:auto}.card{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:28px;max-width:460px;width:100%;box-shadow:0 8px 30px #0001}
.card h1{margin:0 0 8px;font-size:26px}.card input{width:100%;font-size:20px;padding:12px;border:1px solid var(--line);border-radius:12px;margin:12px 0;text-transform:uppercase;letter-spacing:2px;text-align:center}
button{font:inherit;cursor:pointer;border:1px solid var(--line);background:var(--paper);border-radius:12px;padding:10px 16px;color:var(--ink)}
button.primary{background:var(--accent);color:#fff;border-color:var(--accent)}button.big{width:100%;font-size:19px;padding:16px;margin-top:8px}
button.danger{color:var(--danger);border-color:#e6c4bf}button.mini{padding:5px 10px;font-size:14px}
#app{height:100%;display:flex;flex-direction:column}
header{display:flex;align-items:center;gap:14px;padding:10px 16px;border-bottom:1px solid var(--line);background:var(--paper)}
.brand{font-weight:650;flex:1}.status{display:flex;gap:8px;align-items:center;color:var(--muted);font-size:14px}
.dot{width:10px;height:10px;border-radius:50%;background:#bbb}.dot.live{background:#3aa66b;box-shadow:0 0 0 4px #3aa66b33}.dot.bad{background:var(--danger)}
main{flex:1;min-height:0;display:grid;grid-template-columns:300px 1fr;gap:14px;padding:14px}
#tutor{background:var(--paper);border:1px solid var(--line);border-radius:18px;padding:18px;display:flex;flex-direction:column;align-items:center;gap:8px;overflow:auto}
#avatar{position:relative;width:120px;height:120px;margin-top:6px}
#avatar .face{position:absolute;inset:14px;border-radius:50%;background:linear-gradient(135deg,#2f6f5e,#6fb39d);color:#fff;font-size:44px;display:flex;align-items:center;justify-content:center;font-weight:600}
#avatar .ring{position:absolute;inset:0;border-radius:50%;border:3px solid var(--accent2);opacity:0;transform:scale(.9);transition:.2s}
#avatar.speaking .ring{opacity:1;animation:pulse 1.1s infinite}
@keyframes pulse{0%{transform:scale(.92);opacity:.9}70%{transform:scale(1.12);opacity:.15}100%{transform:scale(1.12);opacity:0}}
.who{text-align:center;font-weight:600}.cap{width:100%;font-size:15px;min-height:3.2em;max-height:9em;overflow:auto;background:#f7f4ec;border-radius:12px;padding:10px;color:#3a372f}
.cap.student{min-height:0;font-style:italic;color:var(--muted);background:none;padding:0 4px;font-size:14px}
.controls{display:flex;gap:10px;margin-top:4px}.round{width:52px;height:52px;border-radius:50%;font-size:22px;padding:0}.round.on{background:var(--accent);border-color:var(--accent)}.round.off{background:#f0d7d3}
#sayForm{display:flex;gap:6px;width:100%;margin-top:auto}#sayForm input{flex:1;font-size:16px;padding:10px;border:1px solid var(--line);border-radius:12px;min-width:0}
#boardWrap{position:relative;background:var(--paper);border:1px solid var(--line);border-radius:18px;overflow:auto;padding:20px;background-image:linear-gradient(#0000000a 1px,transparent 1px),linear-gradient(90deg,#0000000a 1px,transparent 1px);background-size:28px 28px}
.empty{color:var(--muted);text-align:center;margin-top:18vh}
.blk{margin:0 0 18px;animation:rise .35s ease both;border-radius:12px;padding:4px 8px;transition:background .3s}
@keyframes rise{from{opacity:0;transform:translateY(8px)}to{opacity:1}}
.blk.hl-yellow{background:#fff1b8}.blk.hl-green{background:#d7f0d9}.blk.hl-red{background:#f9d6d1}
.blk.title{font-size:22px;font-weight:650}.blk.note{color:#4b473d}.blk.task{font-size:19px}.blk.result{font-weight:650;color:var(--accent);font-size:19px}
.blk .lbl{color:var(--muted);font-size:14px;margin-bottom:2px}
.problem{border:2px solid var(--accent2);border-radius:16px;padding:14px 16px;background:#fffaf0}.problem .badge{display:inline-block;background:var(--accent2);color:#fff;border-radius:99px;padding:1px 10px;font-size:13px;margin-bottom:6px}
.steps{counter-reset:s}.step{display:flex;gap:12px;align-items:flex-start;margin:12px 0;animation:rise .4s both}.step .n{color:#fff;background:var(--accent);border-radius:50%;width:24px;height:24px;flex:none;display:flex;align-items:center;justify-content:center;font-size:13px}
.step .sbody{flex:1;min-width:0}.step .sf{font-size:19px}.step .note{color:#4b473d;font-size:15.5px;line-height:1.45;margin-top:3px;padding-left:10px;border-left:3px solid var(--accent2)}.fig svg{max-width:100%;height:auto;background:#fff;border:1px solid var(--line);border-radius:12px}.fig .cap2{color:var(--muted);font-size:14px;text-align:center}
.cue{background:#fff4d6;border:1px solid #f0d58a;border-radius:12px;padding:10px 14px;margin-bottom:14px;font-weight:600}
.sheet{position:fixed;left:14px;right:14px;bottom:14px;height:46vh;background:var(--paper);border:1px solid var(--line);border-radius:18px;box-shadow:0 -8px 30px #0002;display:flex;flex-direction:column;z-index:10}
.sheetBar{display:flex;gap:8px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line);flex-wrap:wrap}.sheetBar #pens{display:flex;gap:6px;flex:1}
.pen{width:22px;height:22px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--line);padding:0}.pen.sel{box-shadow:0 0 0 2px var(--ink)}
#canvas{flex:1;width:100%;touch-action:none;background:#fff;border-radius:0 0 18px 18px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:#23211d;color:#fff;padding:10px 18px;border-radius:99px;z-index:30;font-size:15px}
@media(max-width:820px){main{grid-template-columns:1fr;grid-template-rows:auto 1fr;padding:8px;gap:8px}#tutor{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;padding:10px}
#avatar{width:64px;height:64px;margin:0}#avatar .face{inset:8px;font-size:26px}.who{text-align:left}.cap{order:5;min-height:2.4em;max-height:6em}#sayForm{order:6;margin-top:0}.sheet{height:52vh}}

.card.wide{max-width:640px}.chips{display:flex;flex-wrap:wrap;gap:10px;margin:12px 0}.chips button{padding:14px 18px;font-size:18px}
details#newProf{margin-top:14px}details summary{cursor:pointer;color:var(--accent);font-weight:600}.row{display:flex;gap:10px;align-items:center;margin:10px 0;flex-wrap:wrap}
#newProf input,#newProf select{font-size:17px;padding:10px;border:1px solid var(--line);border-radius:10px;width:auto}#newProf input{width:100%;margin-top:10px}
.lcards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.lcards button{text-align:left;padding:14px;border-radius:14px;line-height:1.3}.lcards button b{display:block;font-size:16px;margin-bottom:2px}.lcards button span{color:var(--muted);font-size:13.5px}
.lcards button.sel{border:2px solid var(--accent);background:#eef6f2}.lcards button.span2{grid-column:1/3}
.topics{max-height:36vh;overflow:auto;border:1px solid var(--line);border-radius:14px;padding:8px;margin-bottom:12px}.topics h4{margin:8px 6px 4px;color:var(--muted);font-size:14px}.topics button{display:flex;justify-content:space-between;gap:8px;width:100%;text-align:left;margin:3px 0;padding:9px 12px;font-size:15px}
.topics button.sel{border:2px solid var(--accent);background:#eef6f2}.badge2{font-size:12px;border-radius:99px;padding:1px 8px;white-space:nowrap;align-self:center}.b-past{background:#e3efe6;color:#2f6f5e}.b-recent{background:#e3efe6;color:#2f6f5e}.b-now{background:#fff1b8;color:#8a6a10}.b-next{background:#e8eefb;color:#3a5fa8}.b-future{background:#eee;color:#777}
button:disabled{opacity:.5;cursor:default}.mini#backWho{margin-top:10px}
@media(max-width:560px){.lcards{grid-template-columns:1fr}.lcards button.span2{grid-column:auto}}

.chips.subj{margin:6px 0 0}.chips.subj button{padding:9px 16px;font-size:16px;border-radius:99px}.chips.subj button.sel{background:var(--accent);color:#fff;border-color:var(--accent)}
.plink{color:var(--muted);font-size:14px;text-decoration:none;margin-right:6px}#timer.low{color:var(--danger);font-weight:700}

mark.mk-y{background:#fff1b8;padding:0 3px;border-radius:4px}mark.mk-r{background:#f9d6d1;color:#a02d20;padding:0 3px;border-radius:4px}.blk u{text-decoration-thickness:2px;text-underline-offset:3px}