:root{
  --bg:#15151b;--bg2:#1c1c24;--panel:#20202a;--line:#2d2d3a;--text:#f2f2f7;--muted:#9a9aab;
  --cyan:#43cbd3;--red:#ff6048;--yellow:#ffc044;--purple:#ad7cff;--green:#61e49c;--orange:#ff934f;
  --side:300px;--radius:16px;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,"PingFang SC","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:12px;display:grid;place-items:center;font-size:22px;font-weight:900;color:#111;background:linear-gradient(135deg,var(--cyan),var(--purple));box-shadow:0 0 22px rgba(67,203,211,.45)}
.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:10px 12px;border-radius:12px;border:1px solid var(--line);background:#23232e;text-align:left;transition:.2s}
.subject .ic{font-size:15px;color:var(--muted)}
.subject small{font-size:11px;color:var(--muted)}
.subject.active{border-color:var(--cyan);background:rgba(67,203,211,.12);box-shadow:inset 0 0 0 1px rgba(67,203,211,.35)}
.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:var(--line);background:#22222c}
.cat-head{width:100%;display:flex;align-items:center;gap:10px;padding:11px 12px;border-radius:14px;text-align:left}
.cat-head:hover{background:#262633}
.cat-ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-size:15px;background:#2b2b38;color:var(--yellow)}
.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:#d8d8e2}
.model b{width:20px;height:20px;border-radius:6px;display:grid;place-items:center;font-size:11px;background:#2b2b38;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:#2a2a36}
.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,rgba(67,203,211,.2),rgba(173,124,255,.14));color:#fff}
.model.active b{background:var(--cyan);color:#111}
.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:1px solid var(--line);position:sticky;top:0;background:rgba(21,21,27,.85);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:#262633;color:#fff}
.crumb i{opacity:.5;font-style:normal}
.crumb .cur{color:#fff;font-weight:700;padding:4px 8px;background:#262633;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:10px;border:1px solid var(--line);display:grid;place-items:center;font-size:18px;color:#ddd}
.icon-btn:hover:not(:disabled){background:#262633}

.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:7px 12px;border-radius:999px;border:1px solid var(--line);background:#20202a;font-size:12.5px;color:#cfcfda;transition:.15s}
.chip:hover{border-color:#444457}
.chip.active{border-color:var(--yellow);color:var(--yellow);background:rgba(255,192,68,.12);box-shadow:0 0 12px rgba(255,192,68,.25)}

.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:1px solid rgba(173,124,255,.38);border-radius:18px;background:linear-gradient(105deg,rgba(173,124,255,.16),rgba(67,203,211,.08) 58%,rgba(255,192,68,.08));box-shadow:0 14px 36px rgba(0,0,0,.2)}
.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(--yellow);font-size:12px;font-weight:900;letter-spacing:.08em}
.teacher-talk p{color:#e8e8f2;font-size:14px;line-height:1.55}
.teacher-contact{flex:none;padding:11px 16px;border:1px solid rgba(255,192,68,.6);border-radius:12px;color:#17120a;background:linear-gradient(135deg,#ffd56d,var(--yellow));font-size:13px;font-weight:900;box-shadow:0 8px 24px rgba(255,192,68,.2);transition:transform .15s,box-shadow .15s}
.teacher-contact:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(255,192,68,.3)}

.stage{grid-area:stage;min-width:0}
.canvas-wrap{position:relative;border-radius:var(--radius);border:1px solid var(--line);background:radial-gradient(circle at 50% 40%,#22222c,#17171e 70%);overflow:hidden;
  height:clamp(380px,calc(100vh - 330px),720px);box-shadow:0 20px 60px rgba(0,0,0,.35)}
.canvas-wrap canvas{width:100%;height:100%;display:block;touch-action:none}
.canvas-wrap.dragging canvas,.canvas-wrap canvas.dragging{cursor:grabbing}
.canvas-message{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-size:14.5px;font-weight:800;color:#e8e8f0;
  background:rgba(20,20,26,.72);border:1px solid var(--line);padding:6px 12px;border-radius:999px;pointer-events:none;text-align:center;max-width:92%;line-height:1.35;backdrop-filter:blur(6px)}
.canvas-message.ok{color:var(--green);border-color:rgba(97,228,156,.4);text-shadow:0 0 10px rgba(97,228,156,.6)}
.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:9px 14px;border-radius:12px;border:1px solid var(--line);background:#23232e;font-weight:700;font-size:13px;transition:.15s}
.btn:hover{border-color:#4a4a5e}
.btn.demo.on{background:rgba(97,228,156,.14);border-color:var(--green);color:var(--green)}
.btn.reset{border-color:rgba(255,192,68,.35);color:var(--yellow)}
.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:7px 11px;border-radius:10px;background:#20202a;border:1px 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:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.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:#111;font-weight:800}
.badge.why{background:var(--yellow)} .badge.condition{background:var(--cyan)} .badge.inference{background:var(--purple);color:#fff} .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:#dcdce6}
.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:10px;background:#262633}
.result{font-size:16px;font-weight:900;color:var(--green);text-shadow:0 0 14px rgba(97,228,156,.35);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:#fff;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(5,5,10,.76);backdrop-filter:blur(9px)}
.contact-dialog{position:relative;width:min(92vw,430px);padding:28px 28px 24px;text-align:center;border:1px solid rgba(173,124,255,.48);border-radius:24px;background:linear-gradient(160deg,#262433,#17171f 72%);box-shadow:0 28px 90px rgba(0,0,0,.65),0 0 44px rgba(173,124,255,.14)}
.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:#fff;background:#30303d}
.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(5,5,10,.82);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(67,203,211,.42);border-radius:24px;background:linear-gradient(160deg,#262433,#17171f 72%);box-shadow:0 28px 90px rgba(0,0,0,.65),0 0 44px rgba(67,203,211,.12)}
.invite-dialog label{color:#fff;font-size:18px;font-weight:800}
.invite-dialog input{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:#12121a;color:#fff;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(67,203,211,.55);background:linear-gradient(135deg,#5be3ea,var(--cyan));color:#111;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(0,0,0,.6)}
  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)}
  /* 说明条拉满画布宽度，少折行，避免盖住图 */
  .canvas-message{left:8px;right:8px;width:auto;max-width:none;transform:none;border-radius:12px;line-height:1.3;bottom: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}
}