:root{
  --bg:#fffaf0;--bg2:#ffffff;--panel:#ffffff;--line:#d8e9f8;--text:#20344c;--muted:#6c8095;
  --cyan:#2fa8ff;--red:#ff5b5b;--yellow:#ffad0a;--purple:#8b5cf6;--green:#32d05f;--orange:#ff8133;
  --side:300px;--radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
button:disabled{opacity:.35;cursor:default}
h1,h2,h3,p{margin:0}
.app{display:flex;min-height:100vh}

/* ───── 侧栏 / 抽屉 ───── */
.sidebar{width:var(--side);flex:0 0 var(--side);background:var(--bg2);border-right:1px solid var(--line);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow:hidden}
.brand{display:flex;gap:12px;align-items:center;padding:18px 16px 12px;border-bottom:1px solid var(--line)}
.brand .logo{width:42px;height:42px;border-radius:14px;display:grid;place-items:center;font-size:22px;font-weight:900;color:#fff;background:linear-gradient(145deg,#5bc0ff,var(--cyan) 48%,var(--purple));box-shadow:0 5px 0 #157bcc,0 10px 22px rgba(47,168,255,.24)}
.brand h1{font-size:15px;font-weight:800;letter-spacing:.3px}
.brand p{font-size:11.5px;color:var(--muted);margin-top:3px}
.brand .icon-btn{display:none;margin-left:auto}
.subject-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;padding:12px 14px}
.subject-bar[hidden]{display:none}
.subject{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:11px 12px;border-radius:15px;border:2px solid var(--line);background:#fff;text-align:left;transition:.2s;box-shadow:0 3px 0 #d8e9f8}
.subject .ic{font-size:15px;color:var(--muted)}
.subject small{font-size:11px;color:var(--muted)}
.subject.active{border-color:var(--cyan);background:linear-gradient(135deg,#def3ff,#eef8ff);box-shadow:0 3px 0 #168ad4,0 7px 17px rgba(47,168,255,.16)}
.subject.active .ic{color:var(--cyan)}
.tree{overflow-y:auto;padding:4px 10px 24px;flex:1}
.tree-empty{color:var(--muted);text-align:center;padding:30px 10px;font-size:13px}
.cat{border:1px solid transparent;border-radius:14px;margin:6px 0;transition:.2s}
.cat.active{border-color:#cfe7f8;background:#f8fcff}
.cat-head{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;text-align:left}
.cat-head:hover{background:#edf8ff}
.cat-ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;font-size:15px;background:#e2f3ff;color:#168bd8}
.cat.active .cat-ic{background:rgba(255,192,68,.15)}
.cat-name{display:flex;flex-direction:column;flex:1;font-weight:700;font-size:14px}
.cat-name small{font-weight:500;font-size:11px;color:var(--muted);margin-top:2px}
.chev{color:var(--muted);font-size:20px;transition:transform .2s}
.cat.open .chev{transform:rotate(90deg)}
.models{list-style:none;margin:0;padding:0 8px 8px 14px;display:none;border-left:2px dashed var(--line);margin-left:26px}
.cat.open .models{display:block}
.model{width:100%;display:flex;gap:10px;align-items:center;padding:8px 10px;border-radius:10px;text-align:left;color:#354250}
.model b{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:11px;background:#e9f3fc;color:var(--muted);flex:none}
.model span{display:flex;flex-direction:column;font-size:13px;line-height:1.25}
.model small{color:var(--muted);font-size:11px;margin-top:2px}
.model:hover{background:#eaf7ff}
.models .group{margin:10px 0 4px 10px;font-size:11px;font-weight:800;letter-spacing:.08em;color:var(--yellow);text-transform:uppercase}
.models .group::before{content:"◆ ";opacity:.7}
.model.active{background:linear-gradient(90deg,#dff3ff,#fff0e4);color:var(--text);box-shadow:inset 4px 0 0 var(--cyan)}
.model.active b{background:var(--cyan);color:#fff}
.scrim{display:none}

/* ───── 主区 ───── */
.main{flex:1;min-width:0;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;gap:12px;padding:12px 22px;border-bottom:2px solid #d9ecfa;position:sticky;top:0;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);z-index:5}
.drawer-btn{display:none}
.crumb{display:flex;align-items:center;flex-wrap:wrap;gap:6px;font-size:13px;color:var(--muted);flex:1;min-width:0}
.crumb button{color:var(--muted);padding:4px 8px;border-radius:8px}
.crumb button:hover{background:#edf1f5;color:var(--text)}
.crumb i{opacity:.5;font-style:normal}
.crumb .cur{color:var(--text);font-weight:700;padding:4px 8px;background:#edf1f5;border-radius:8px}
.crumb .cur.fig{color:var(--yellow);background:rgba(255,192,68,.12)}
.pager{display:flex;gap:6px;margin-left:auto}
.icon-btn{width:34px;height:34px;border-radius:11px;border:2px solid var(--line);display:grid;place-items:center;font-size:18px;color:#38536c;background:#fff;box-shadow:0 2px 0 #d7e7f4}
.icon-btn:hover:not(:disabled){background:#edf1f5}

.workspace{padding:16px 22px 40px;display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,.75fr);grid-template-areas:"head head" "figs figs" "stage panel";gap:14px 20px;align-items:start}
body.has-teacher .workspace{grid-template-areas:"head head" "figs figs" "teacher teacher" "stage panel"}
.model-head{grid-area:head;display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.model-head h2{font-size:22px;font-weight:900;letter-spacing:.3px}
.model-head p{color:var(--muted);font-size:13.5px}
.figure-bar{grid-area:figs;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.figure-bar .lbl{font-size:12px;color:var(--muted);padding-right:2px;white-space:nowrap}
.chip{padding:8px 13px;border-radius:999px;border:2px solid var(--line);background:#fff;font-size:12.5px;font-weight:750;color:#425b72;transition:.15s;box-shadow:0 2px 0 #dce9f3}
.chip:hover{border-color:#9ba7b4}
.chip.active{border-color:var(--orange);color:#e25700;background:#fff0df;box-shadow:0 3px 0 #dd5d13,0 7px 16px rgba(255,129,51,.16)}

.teacher-guide{grid-area:teacher;min-height:112px;display:grid;grid-template-columns:106px minmax(0,1fr) auto;align-items:center;gap:16px;padding:0 18px 0 6px;overflow:hidden;border:2px solid #bfe4ff;border-radius:20px;background:linear-gradient(105deg,#e8f6ff,#f8fcff 55%,#fff0dd);box-shadow:0 5px 0 #d4ebfb,0 11px 26px rgba(47,168,255,.1)}
.teacher-avatar{align-self:end;width:104px;height:112px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 14px rgba(0,0,0,.42));user-select:none}
.teacher-talk{min-width:0}
.teacher-kicker{display:block;margin-bottom:6px;color:var(--orange);font-size:12px;font-weight:900;letter-spacing:.08em}
.teacher-talk p{color:#394654;font-size:14px;line-height:1.55}
.teacher-contact{flex:none;padding:11px 16px;border:2px solid #ff7625;border-radius:14px;color:#fff;background:linear-gradient(135deg,#ffa64f,var(--orange));font-size:13px;font-weight:900;box-shadow:0 4px 0 #d95b15,0 9px 22px rgba(255,129,51,.22);transition:transform .15s,box-shadow .15s}
.teacher-contact:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,116,23,.3)}

.stage{grid-area:stage;min-width:0}
.canvas-wrap{position:relative;border-radius:20px;border:2px solid #bfe3ff;background:
  radial-gradient(circle at 12% 12%,rgba(255,205,72,.13),transparent 25%),
  radial-gradient(circle at 88% 10%,rgba(47,168,255,.14),transparent 27%),#fff;overflow:hidden;
  height:clamp(380px,calc(100vh - 330px),720px);box-shadow:0 6px 0 #d8edfc,0 15px 36px rgba(39,123,190,.13)}
.canvas-wrap canvas{width:100%;height:100%;display:block;touch-action:none}
.stage-lecturer{display:none}
body[data-active-subject="math"] .stage-lecturer{display:block;position:absolute;left:0;bottom:0;height:56%;max-height:400px;aspect-ratio:643/891;z-index:2;pointer-events:none;user-select:none}
body[data-active-subject="math"] .stage-lecturer img{width:100%;height:100%;display:block;object-fit:fill;filter:drop-shadow(0 10px 14px rgba(36,64,96,.16))}
.stage-lecturer-name{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.canvas-wrap.dragging canvas,.canvas-wrap canvas.dragging{cursor:grabbing}
.canvas-message{position:absolute;z-index:3;bottom:12px;left:50%;transform:translateX(-50%);font-size:14.5px;font-weight:850;color:#20344c;
  background:rgba(255,255,255,.94);border:2px solid #d4e8f7;padding:7px 13px;border-radius:16px;pointer-events:none;text-align:center;max-width:92%;line-height:1.35;backdrop-filter:blur(6px);box-shadow:0 3px 0 #dbeaf5,0 7px 16px rgba(45,100,145,.1)}
.canvas-message.ok{color:var(--green);border-color:rgba(22,123,69,.35);text-shadow:none}
.toolbar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:12px}
.demos{display:flex;flex-wrap:wrap;gap:8px;flex:1}
.btn{padding:10px 15px;border-radius:14px;border:2px solid #d1e5f5;background:#fff;font-weight:800;font-size:13px;transition:.15s;box-shadow:0 3px 0 #d8e8f4}
.btn:hover{border-color:#8ccfff;background:#f7fcff;transform:translateY(-1px)}
.btn.demo.on{background:#ebffe9;border-color:var(--green);color:#218c35;box-shadow:0 3px 0 #239b37}
.btn.reset{border-color:#ffbd89;color:#e45b06;background:#fff5e9;box-shadow:0 3px 0 #ffc491}
.btn.ghost{background:transparent}
.hint{font-size:12px;color:var(--muted);margin-top:10px}
.readout{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.ro{display:flex;gap:8px;align-items:center;padding:8px 12px;border-radius:12px;background:#fff;border:2px solid var(--line);font-size:12.5px}
.ro span{color:var(--muted)}
.ro b{font-weight:800}
.ro.ok{border-color:rgba(97,228,156,.4)} .ro.ok b{color:var(--green)}
.ro.no{border-color:rgba(255,96,72,.35)} .ro.no b{color:var(--red)}

.panel{grid-area:panel;display:flex;flex-direction:column;gap:12px}
.card{background:var(--panel);border:2px solid var(--line);border-radius:18px;padding:14px 16px;box-shadow:0 4px 0 #e1edf6,0 9px 20px rgba(39,98,150,.06)}
.card h3{display:flex;align-items:center;gap:8px;font-size:14px;margin-bottom:8px}
.badge{font-size:11px;padding:3px 8px;border-radius:999px;color:#fff;font-weight:800}
.badge.why{background:var(--yellow)} .badge.condition{background:var(--cyan)} .badge.inference{background:var(--purple)} .badge.conclusion{background:var(--green)}
.steps{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.55;color:#34414e}
.plain{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;font-size:13.5px;line-height:1.5}
.plain li{padding:8px 10px;border-radius:11px;background:#f1f8fe}
.result{font-size:16px;font-weight:900;color:var(--green);text-shadow:none;line-height:1.5}

.empty{padding:60px 22px;display:grid;place-items:center}
.empty[hidden]{display:none}
.empty-card{text-align:center;color:var(--muted);border:1px dashed var(--line);padding:40px 50px;border-radius:20px}
.empty-ic{font-size:40px;margin-bottom:10px}
.empty h2{color:var(--text);font-size:20px;margin-bottom:6px}

.contact-modal{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:20px}
.contact-modal[hidden]{display:none}
.contact-backdrop{position:absolute;inset:0;background:rgba(31,42,54,.42);backdrop-filter:blur(9px)}
.contact-dialog{position:relative;width:min(92vw,430px);padding:28px 28px 24px;text-align:center;border:1px solid rgba(112,71,184,.28);border-radius:24px;background:linear-gradient(160deg,#ffffff,#f6f3fb 72%);box-shadow:0 28px 90px rgba(31,42,54,.25)}
.contact-close{position:absolute;right:14px;top:12px;width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line);border-radius:10px;color:var(--muted);font-size:25px;line-height:1}
.contact-close:hover{color:var(--text);background:#edf1f5}
.contact-eyebrow{display:block;padding:0 34px;color:var(--yellow);font-size:12px;font-weight:900;letter-spacing:.08em}
.contact-dialog h2{margin-top:9px;font-size:22px;line-height:1.4}
.contact-dialog p{margin:8px auto 16px;max-width:340px;color:var(--muted);font-size:13px;line-height:1.6}
.qr-frame{width:min(62vw,244px);aspect-ratio:1;margin:0 auto 14px;padding:10px;border-radius:20px;background:#fff;box-shadow:0 0 0 1px rgba(255,255,255,.18),0 16px 42px rgba(0,0,0,.34)}
.qr-frame img{display:block;width:100%;height:100%;object-fit:contain}
.contact-dialog strong{color:var(--green);font-size:13px}
body.contact-open{overflow:hidden}

.invite-gate{position:fixed;inset:0;z-index:120;display:grid;place-items:center;padding:20px}
.invite-gate[hidden]{display:none}
.invite-backdrop{position:absolute;inset:0;background:rgba(31,42,54,.48);backdrop-filter:blur(10px)}
.invite-dialog{position:relative;width:min(92vw,400px);padding:28px 28px 24px;display:flex;flex-direction:column;gap:14px;border:1px solid rgba(22,141,240,.3);border-radius:24px;background:linear-gradient(160deg,#ffffff,#edf7ff 72%);box-shadow:0 28px 90px rgba(31,72,110,.24)}
.invite-dialog label{color:var(--text);font-size:18px;font-weight:800}
.invite-dialog input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#fff;color:var(--text);font-size:18px;font-weight:800;letter-spacing:.18em;text-transform:uppercase}
.invite-dialog input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(67,203,211,.18)}
.invite-dialog button{padding:11px 16px;border-radius:12px;border:1px solid rgba(22,141,240,.55);background:linear-gradient(135deg,#42a9ff,var(--cyan));color:#fff;font-size:15px;font-weight:900}
.invite-error{margin:0;color:var(--red);font-size:13px;font-weight:700}
.invite-error[hidden]{display:none}
body.invite-locked{overflow:hidden}
body.invite-locked .app{pointer-events:none;user-select:none}

/* ───── 平板 / 手机 ───── */
@media (max-width:1100px){
  .workspace{grid-template-columns:1fr;grid-template-areas:"head" "figs" "stage" "panel"}
  body.has-teacher .workspace{grid-template-areas:"head" "figs" "teacher" "stage" "panel"}
}
@media (max-width:900px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:30;transform:translateX(-105%);transition:transform .25s;width:min(86vw,340px);flex-basis:auto;box-shadow:0 0 60px rgba(31,42,54,.24)}
  body.drawer-open .sidebar{transform:none}
  .brand .icon-btn{display:grid}
  .scrim{display:block;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:20;opacity:0;pointer-events:none;transition:.25s}
  body.drawer-open .scrim{opacity:1;pointer-events:auto}
  .drawer-btn{display:inline-flex;padding:8px 12px}
  .topbar{padding:10px 12px;gap:8px}
  .crumb{font-size:12px;flex-wrap:nowrap;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
  .crumb::-webkit-scrollbar{display:none}
  .crumb button[data-sub]{display:none}
  .figure-bar{flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
  .figure-bar::-webkit-scrollbar{display:none}
  .chip{white-space:nowrap;flex:none}
  .workspace{padding:12px 12px 40px;gap:12px}
  .model-head h2{font-size:19px}
  .teacher-guide{grid-template-columns:54px minmax(0,1fr) auto;min-height:0;align-items:center;padding:6px 8px 6px 4px;gap:8px;border-radius:14px}
  .teacher-avatar{width:54px;height:58px;align-self:center}
  .teacher-kicker{margin-bottom:2px;font-size:10px;letter-spacing:.04em}
  .teacher-talk p{display:none}
  .teacher-contact{grid-column:auto;padding:7px 10px;margin:0;justify-self:end;font-size:11px;white-space:nowrap;box-shadow:none}
  body.has-teacher .canvas-wrap{height:clamp(280px,46vh,460px)}
  body[data-active-subject="math"] .stage-lecturer{height:46%;max-height:210px}
  /* 说明条拉满画布宽度，少折行，避免盖住图 */
  .canvas-message{left:8px;right:8px;width:auto;max-width:none;transform:none;border-radius:12px;line-height:1.3;bottom:8px}
  body[data-active-subject="math"] .canvas-message{left:3px;right:3px;padding-left:8px;padding-right:8px}
  .btn{padding:9px 12px;font-size:12.5px}
}
@media (max-width:480px){
  .drawer-btn{padding:8px 10px}
  .model-head h2{font-size:17px}
  .canvas-message{font-size:12.5px;padding:5px 10px}
  .pager .icon-btn{width:30px;height:30px}
  .teacher-guide{grid-template-columns:46px minmax(0,1fr) auto;padding:5px 7px 5px 3px;gap:6px}
  .teacher-avatar{width:46px;height:50px}
  .teacher-contact{padding:6px 8px;font-size:10.5px}
  .contact-dialog{padding:25px 18px 21px}
  .contact-dialog h2{font-size:19px}
  .invite-dialog{padding:25px 18px 21px}
  .invite-dialog label{font-size:16px}
}