/* ======================================================
   JSXGraph 高中函数探究平台 · 核心样式 tri-core.css
   蓝白教育风 · 4 栏响应式布局
   ====================================================== */
:root{
  --bg:#eef3fb; --card:#ffffff; --ink:#1f2937; --muted:#64748b;
  --line:#dbe4f0; --primary:#185FA5; --primary-soft:#E6F1FB;
  --primary-deep:#0C447C; --green:#3B6D11; --green-soft:#EAF3DE;
  --amber:#854F0B; --amber-soft:#FAEEDA; --red:#A32D2D; --red-soft:#FCEBEB;
  --cos:#2563eb; --sin:#f59e0b; --tan:#ef4444; --radius:#8b5cf6;
  --ok:#10b981; --shadow:0 6px 20px rgba(24,95,165,.10);
  --radius-lg:16px; --radius-md:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
     background:var(--bg);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased}

/* ===== 顶部栏 ===== */
.topbar{background:linear-gradient(135deg,#185FA5,#0C447C);color:#fff;
        padding:14px 22px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
        box-shadow:var(--shadow);position:sticky;top:0;z-index:30}
.topbar h1{font-size:18px;font-weight:800;letter-spacing:-.3px}
.topbar .page{font-size:12.5px;opacity:.85;background:rgba(255,255,255,.16);
             border:1px solid rgba(255,255,255,.32);border-radius:999px;padding:2px 12px}
.topbar .spacer{flex:1}
.topbar button{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.35);
               border-radius:999px;padding:7px 16px;font-size:13px;cursor:pointer;transition:.15s}
.topbar button:hover{background:rgba(255,255,255,.28)}
.topbar .sound-toggle{display:flex;align-items:center;gap:6px}

/* ===== 章节地图弹层 ===== */
.map-overlay{position:fixed;inset:0;background:rgba(15,23,42,.5);z-index:40;display:none;
             align-items:flex-start;justify-content:center;padding:40px 16px;overflow:auto}
.map-overlay.show{display:flex}
.map-box{background:#fff;border-radius:var(--radius-lg);max-width:920px;width:100%;
          padding:24px 26px;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.map-box h2{color:var(--primary);font-size:18px;margin-bottom:14px}
.cat{margin:14px 0}
.debug-note{background:#FFF7E6;border:1px dashed var(--amber,#D4A017);color:#8a6d3b;
  font-size:12px;font-weight:600;padding:8px 12px;border-radius:10px;margin-bottom:6px}
.cat-title{font-size:13px;font-weight:700;color:var(--muted);text-transform:uppercase;
           letter-spacing:.6px;margin-bottom:8px}
.chip-row{display:flex;flex-wrap:wrap;gap:10px}
.chip{border:1px solid var(--line);background:#fff;border-radius:12px;padding:10px 14px;
      font-size:13.5px;cursor:pointer;transition:.15s;min-width:150px}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.chip.locked{opacity:.5;cursor:not-allowed;background:#f6f8fb}
.chip .c-title{font-weight:700}
.chip .c-state{font-size:11px;margin-top:3px}
.chip .c-state.done{color:var(--green)}
.chip .c-state.lock{color:#9aa4b2}
.chip .c-state.open{color:var(--primary)}

/* ===== 工作区 4 栏 ===== */
.workspace{display:grid;grid-template-columns:1.3fr 1.6fr 0.7fr;gap:16px;
           padding:16px;max-width:1500px;margin:0 auto;align-items:start}
@media(max-width:1100px){
  .workspace{grid-template-columns:1fr 1fr}
  .col-board{grid-column:1 / -1}
}
@media(max-width:680px){
  .workspace{grid-template-columns:1fr}
}
.col{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
     box-shadow:var(--shadow);padding:16px;display:flex;flex-direction:column;min-width:0}
.col h3{font-size:14px;color:var(--primary-deep);margin-bottom:10px;display:flex;align-items:center;gap:8px}
.col h3 .tag{font-size:11px;font-weight:600;color:#fff;background:var(--primary);
             border-radius:8px;padding:1px 9px}

/* 左栏 画板 */
.col-board{min-height:0}
.board-wrap{position:relative;flex:1;min-height:420px;background:#fbfdff;border:1px solid var(--line);
            border-radius:12px;overflow:hidden;display:flex;flex-direction:column}
#board-host{flex:1;position:relative;min-height:0}
#board-host .jxgbox{width:100%!important;height:100%!important}
/* 确保 JSXGraph 曲线（functiongraph 生成的 svg path）始终可见 */
#board-host svg path[stroke="#185FA5"],
#board-host svg path[stroke="rgb(24, 95, 165)"]{display:block!important;visibility:visible!important;opacity:1!important;stroke-width:2.5px!important}

/* 画板工具条：放在图形上方，不叠图 */
.board-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;
               margin-top:10px;padding:8px 10px;background:#f8fbff;border:1px solid var(--line);border-radius:10px}
.board-toolbar:empty{display:none}
.board-toolbar button{border:1px solid var(--line);background:#fff;border-radius:8px;
                       padding:5px 10px;font-size:12px;cursor:pointer;transition:.15s}
.board-toolbar button:hover{border-color:var(--primary);color:var(--primary)}
.board-toolbar input[type=number]{border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:12px;width:50px}
.board-toolbar select{border:1px solid var(--line);border-radius:6px;padding:4px 6px;font-size:12px;background:#fff}

/* 实时读数：紧凑一行 */
.readout{display:flex;gap:6px;flex-wrap:nowrap;overflow:auto;
         margin-top:8px;padding:6px 8px;background:#fff;border:1px solid var(--line);border-radius:10px}
.readout:empty{display:none}
.readout .m{flex:1 0 auto;min-width:58px;max-width:110px;background:#f8fbff;border:1px solid var(--line);border-radius:7px;padding:4px 7px;text-align:center}
.readout .m .lab{font-size:10px;color:var(--muted);white-space:nowrap}
.readout .m .val{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums;white-space:nowrap;color:var(--primary-deep)}

/* 提示气泡：放在读数下方 */
.board-hint{margin-top:8px;background:var(--primary-soft);border:1px solid #bcd6f2;border-radius:10px;
            padding:8px 11px;font-size:12px;color:var(--primary-deep);display:flex;align-items:center;gap:8px}
.board-hint.warn{background:var(--amber-soft);border-color:#f0d9b5;color:var(--amber)}
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;margin-right:4px}

/* 中栏 探究 */
.inquiry-step{background:#f8fbff;border:1px solid var(--line);border-left:4px solid var(--primary);
              border-radius:10px;padding:12px 14px;margin-bottom:10px;font-size:14px;
              animation:fade .25s ease}
.inquiry-step b{color:var(--primary-deep)}
.inquiry-nav{display:flex;gap:8px;margin-top:6px}
.inquiry-nav button{border:1px solid var(--primary);background:var(--primary);color:#fff;
                     border-radius:9px;padding:8px 16px;font-size:13.5px;cursor:pointer;transition:.15s}
.inquiry-nav button.ghost{background:#fff;color:var(--primary)}
.inquiry-nav button:disabled{opacity:.45;cursor:not-allowed}
.inquiry-nav button.primary.big{font-size:15px;padding:11px 20px;font-weight:700;
  box-shadow:0 3px 10px rgba(24,95,165,.28);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 3px 10px rgba(24,95,165,.28)}
  50%{box-shadow:0 3px 18px rgba(24,95,165,.5)}}

/* 阶段指示条：画板探究 → 互动答题 → 总结提升 */
.phase-strip{display:flex;align-items:center;justify-content:center;gap:8px;
  padding:9px 12px;background:#fff;border-bottom:1px solid var(--line)}
.phase{display:flex;align-items:center;gap:7px;padding:5px 14px;border-radius:20px;
  background:#f1f3f5;color:var(--muted);font-size:13px;font-weight:600;transition:.2s}
.phase .n{display:inline-flex;width:20px;height:20px;border-radius:50%;background:#cfd4da;
  color:#fff;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.phase.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px rgba(24,95,165,.25)}
.phase.active .n{background:rgba(255,255,255,.32)}
.phase.done{background:#e8f5ee;color:#2e7d52}
.phase.done .n{background:#2e7d52}
.phase-strip .arrow{color:#c3c9d0;font-size:15px}
.scratch{margin-top:10px;background:#fff;border:1px dashed var(--line);border-radius:10px;
          padding:10px;font-size:13px;color:var(--muted);min-height:54px}
.scratch:focus{outline:2px solid var(--primary-soft);color:var(--ink)}

/* 右栏 题库 */
.quiz{border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin-bottom:12px;
       background:#fff;transition:.2s}
.quiz.active{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft)}
.quiz .q-stem{font-size:14px;margin-bottom:8px}
.quiz .q-stem .qn{display:inline-block;background:var(--primary-soft);color:var(--primary-deep);
                  border-radius:7px;padding:0 8px;font-weight:700;margin-right:6px}
.quiz input[type=text]{width:100%;border:1px solid var(--line);border-radius:9px;
                       padding:9px 11px;font-size:14px;margin-top:4px}
.quiz .opts{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.quiz .opt{border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:13.5px;cursor:pointer;transition:.15s}
.quiz .opt:hover{border-color:var(--primary)}
.quiz .opt.sel{border-color:var(--primary);background:var(--primary-soft)}
.quiz .q-submit{margin-top:10px;border:1px solid var(--primary);background:var(--primary);color:#fff;
                border-radius:9px;padding:8px 16px;font-size:13.5px;cursor:pointer}
.quiz .q-feedback{margin-top:8px;font-size:13px;padding:7px 10px;border-radius:9px;display:none}
.quiz .q-feedback.ok{display:block;background:var(--green-soft);color:var(--green)}
.quiz .q-feedback.no{display:block;background:var(--red-soft);color:var(--red)}
.quiz .q-feedback .exact{font-family:"SFMono-Regular",Consolas,monospace}
.quiz.locked{opacity:.55}
.quiz .q-hint{margin-top:6px;font-size:12.5px;color:var(--amber);display:none}
.quiz .q-hint.show{display:block}

/* 题目模态框 */
.modal{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:16px}
.modal.hidden{display:none!important}
.modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,.55)}
.modal-box{position:relative;background:#fff;border-radius:var(--radius-lg);box-shadow:0 24px 70px rgba(0,0,0,.28);
            width:100%;max-width:560px;max-height:86vh;display:flex;flex-direction:column;animation:fade .2s ease}
.modal-head{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:12px;
            font-weight:700;color:var(--primary-deep)}
.modal-head .modal-close{margin-left:auto;border:none;background:transparent;font-size:22px;color:var(--muted);
                          cursor:pointer;line-height:1}
.modal-head .modal-close:hover{color:var(--primary-deep)}
.modal-body{padding:18px;overflow:auto;font-size:14px}
.modal-body .q-stem{font-size:15px;margin-bottom:12px;line-height:1.7}
.modal-body .q-stem .qn{display:inline-block;background:var(--primary-soft);color:var(--primary-deep);
                        border-radius:7px;padding:1px 9px;font-weight:700;margin-right:6px}
.modal-body input[type=text]{width:100%;border:1px solid var(--line);border-radius:10px;
                             padding:11px 13px;font-size:15px;margin-top:6px}
.modal-body input[type=text]:focus{outline:2px solid var(--primary-soft);border-color:var(--primary)}
.modal-body .opts{display:flex;flex-direction:column;gap:8px;margin-top:10px}
.modal-body .opt{border:1px solid var(--line);border-radius:10px;padding:10px 13px;font-size:14px;
                 cursor:pointer;transition:.15s}
.modal-body .opt:hover{border-color:var(--primary);background:#f8fbff}
.modal-body .opt.sel{border-color:var(--primary);background:var(--primary-soft)}
.modal-body .q-feedback{margin-top:12px;font-size:13.5px;padding:10px 13px;border-radius:10px;display:none}
.modal-body .q-feedback.ok{display:block;background:var(--green-soft);color:var(--green)}
.modal-body .q-feedback.no{display:block;background:var(--red-soft);color:var(--red)}
.modal-body .q-feedback .exact{font-family:"SFMono-Regular",Consolas,monospace}
.modal-body .q-hint{margin-top:12px;font-size:13px;color:var(--amber);background:var(--amber-soft);
                    border-radius:10px;padding:10px 13px;display:none;line-height:1.7}
.modal-body .q-hint.show{display:block}
.modal-foot{padding:12px 18px;border-top:1px solid var(--line);display:flex;align-items:center;gap:10px;
            justify-content:space-between}
.modal-foot button{border:1px solid var(--primary);background:var(--primary);color:#fff;border-radius:9px;
                   padding:9px 18px;font-size:13.5px;cursor:pointer;font-weight:600;transition:.15s}
.modal-foot button.ghost{background:#fff;color:var(--primary)}
.modal-foot button:disabled{background:#cbd5e1;border-color:#cbd5e1;cursor:not-allowed;color:#fff}
.modal-foot #modalProgress{font-size:13px;color:var(--muted)}

/* 右栏答题进度摘要 */
.quiz-summary{text-align:center;padding:24px 10px}
.quiz-summary .big{font-size:38px;font-weight:800;color:var(--primary-deep)}
.quiz-summary .sub{color:var(--muted);font-size:13px;margin-top:4px}
.quiz-summary button{margin-top:16px;border:1px solid var(--primary);background:var(--primary);color:#fff;
                    border-radius:10px;padding:10px 22px;font-size:14px;cursor:pointer;font-weight:600}
.quiz-list{display:flex;flex-direction:column;gap:8px;margin-top:12px}
.quiz-list .qi{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--line);
               border-radius:10px;background:#fff;cursor:pointer;transition:.15s}
.quiz-list .qi:hover{border-color:var(--primary);background:#f8fbff}
.quiz-list .qi.done{border-color:var(--green);background:var(--green-soft);opacity:.8}
.quiz-list .qi .num{width:26px;height:26px;border-radius:50%;background:var(--primary-soft);color:var(--primary-deep);
                    display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700}
.quiz-list .qi.done .num{background:var(--green);color:#fff}
.quiz-list .qi .state{margin-left:auto;font-size:12px;color:var(--muted)}

/* 底栏 */
.bottombar{max-width:1500px;margin:0 auto 28px;padding:0 16px}
.stat-row{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-lg);
           box-shadow:var(--shadow);padding:14px 18px;display:flex;align-items:center;
           gap:18px;flex-wrap:wrap}
.stat-row .acc{font-size:15px;font-weight:700;color:var(--primary-deep)}
.stat-row .bar{flex:1;min-width:160px;height:12px;background:#eef2f7;border-radius:999px;overflow:hidden}
.stat-row .bar>i{display:block;height:100%;background:linear-gradient(90deg,#378ADD,#185FA5);width:0;transition:width .4s}
.stat-row button{border:1px solid var(--green);background:var(--green);color:#fff;border-radius:9px;
                  padding:9px 18px;font-size:13.5px;cursor:pointer;font-weight:600}
.stat-row button:disabled{background:#cbd5e1;border-color:#cbd5e1;cursor:not-allowed}
.summary{margin-top:14px;background:#fff;border:1px solid var(--line);border-radius:var(--radius-lg);
         box-shadow:var(--shadow);padding:0;overflow:hidden}
.summary details>summary{cursor:pointer;padding:13px 18px;font-weight:700;color:var(--primary-deep);
                         list-style:none;background:var(--green-soft)}
.summary details>summary::-webkit-details-marker{display:none}
.summary .body{padding:14px 18px;font-size:13.5px;line-height:1.8}
.summary .body code{background:#f1f5f9;border-radius:6px;padding:1px 6px;font-family:Consolas,monospace;color:var(--primary-deep)}
.summary .kp{margin:8px 0;padding:8px 12px;background:#f8fbff;border-left:3px solid var(--green);border-radius:8px}

@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
.hidden{display:none!important}

/* 语音导读按钮（探究栏标题内） */
.read-btn{border:1px solid var(--primary);background:#fff;color:var(--primary);
          border-radius:999px;padding:3px 12px;font-size:12.5px;cursor:pointer;margin-left:auto;transition:.15s}
.read-btn:hover{background:var(--primary);color:#fff}
/* 步骤/总结朗读小喇叭 */
.step-audio{border:none;background:var(--primary-soft);color:var(--primary);border-radius:8px;
            padding:1px 8px;font-size:12px;cursor:pointer;margin-left:8px;vertical-align:middle;transition:.15s}
.step-audio:hover{background:var(--primary);color:#fff}
.kp{margin:10px 0;padding:10px 12px;background:#f8fbff;border:1px solid var(--line);border-left:3px solid #4A7C59;border-radius:9px}
.kp-head{display:flex;align-items:center;gap:8px;font-weight:700;color:var(--primary-deep);margin-bottom:4px}
.kp-id{background:#EAF2EC;color:#2f5d3f;border-radius:6px;padding:1px 7px;font-size:12px;font-weight:800}
.kp-head .step-audio{margin-left:auto}
.kp-body{font-size:13.5px;color:#1f2d3d;line-height:1.5}
/* 教师总结提示块（学生先自写总结，再点开对照 → details 默认收起） */
.teacher-note{margin-top:9px;padding:9px 11px;background:#fff8ec;
              border:1px solid #f0d9b5;border-radius:9px;cursor:pointer}
.teacher-note summary{font-size:13px;font-weight:700;color:#9a6a12;cursor:pointer;list-style:none;
                      display:flex;align-items:center;gap:6px}
.teacher-note summary::-webkit-details-marker{display:none}
.teacher-note summary::after{content:'▸';margin-left:auto;color:#c9a95f;transition:.15s}
.teacher-note[open] summary::after{content:'▾'}
.teacher-note .t-icon{font-size:18px;line-height:1.3}
.teacher-note .t-body{flex:1;min-width:0;margin-top:8px;padding-top:8px;border-top:1px dashed #ecdcc0}
.teacher-note .t-text{font-size:13px;color:#5b4410;line-height:1.55}
.teacher-note .teacher-audio{margin-top:6px}
/* 填空/计算题：KaTeX 实时预览 */
.q-input-wrap{position:relative}
.q-preview{margin-top:6px;padding:7px 10px;background:#f7f9fc;border:1px dashed #c8d4e8;border-radius:8px;min-height:1.4em;color:#16324f;overflow-x:auto;font-size:1.05rem}
.q-preview:empty{display:none}
/* 公式软键盘 */
.math-keyboard{margin-top:8px;max-width:360px;border:1px solid #dde6f3;border-radius:10px;padding:6px;background:#fafcff}
.math-keyboard.hidden{display:none}
.math-keyboard .mk-row{display:flex;gap:4px;margin-bottom:4px}
.math-keyboard .mk-row:last-child{margin-bottom:0}
.math-keyboard button{flex:1;min-width:0;padding:8px 0;font-size:1rem;border:1px solid #c8d4e8;border-radius:6px;background:#fff;cursor:pointer;font-family:inherit}
.math-keyboard button:active{background:#e8eef9}
.math-keyboard button.k-sym{background:#eef3fb;color:#16324f;font-weight:600}
.math-keyboard button.k-op{background:#fbeeee;color:#c0392b}

/* 中栏：内联随堂小测（紧随每个探究步骤，不再出现在右侧） */
.q-inline{margin-top:12px;background:#fff;border:1px solid var(--line);border-left:4px solid var(--amber);
          border-radius:10px;padding:12px 14px;animation:fade .25s ease}
.q-inline .q-head{font-size:12px;font-weight:700;color:var(--amber);margin-bottom:6px;letter-spacing:.3px}
.q-inline .q-stem{font-size:14px;margin-bottom:8px;line-height:1.6}
.q-inline .opts{display:flex;flex-direction:column;gap:7px;margin-top:6px}
.q-inline .opt{border:1px solid var(--line);border-radius:9px;padding:8px 11px;font-size:13.5px;cursor:pointer;transition:.15s}
.q-inline .opt:hover{border-color:var(--primary)}
.q-inline .opt.sel{border-color:var(--primary);background:var(--primary-soft)}
.q-inline input[type=text]{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;font-size:14px;margin-top:4px}
.q-inline input[type=text]:focus{outline:2px solid var(--primary-soft);border-color:var(--primary)}
.q-inline .q-submit{margin-top:10px;border:1px solid var(--primary);background:var(--primary);color:#fff;
  border-radius:9px;padding:8px 18px;font-size:13.5px;cursor:pointer;font-weight:600}
.q-inline .q-submit:disabled{opacity:.5;cursor:not-allowed}
.q-inline .q-feedback{margin-top:8px;font-size:13px;padding:7px 10px;border-radius:9px;display:none}
.q-inline .q-feedback.ok{display:block;background:var(--green-soft);color:var(--green)}
.q-inline .q-feedback.no{display:block;background:var(--red-soft);color:var(--red)}
.q-inline .q-feedback .exact{font-family:"SFMono-Regular",Consolas,monospace}
.q-inline .q-hint{margin-top:6px;font-size:12.5px;color:var(--amber);display:none;background:var(--amber-soft);
  border-radius:9px;padding:8px 10px;line-height:1.6}
.lesson-extra{background:#fff7ec;border:1px solid #f0d9b5;border-radius:10px;padding:10px 13px;
  font-size:13.5px;color:#7a5a18;margin-bottom:4px}

/* 开放自评题（学生是主体：自由作答 + 自评 + 参考思路折叠） */
.q-inline .q-open-input{width:100%;border:1px solid var(--line);border-radius:9px;padding:9px 11px;
  font-size:13.5px;margin-top:4px;line-height:1.6;font-family:inherit;resize:vertical;min-height:66px}
.q-inline .q-open-input:focus{outline:2px solid var(--primary-soft);border-color:var(--primary)}
.q-inline .self-evals{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.q-inline .self-eval{border:1px solid var(--line);background:#fff;border-radius:999px;padding:6px 13px;
  font-size:12.5px;cursor:pointer;transition:.15s;color:#444}
.q-inline .self-eval:hover{border-color:var(--primary);background:var(--primary-soft)}
.q-inline .self-eval.sel{border-color:var(--primary);background:var(--primary-soft);font-weight:700;color:var(--primary-deep)}
.q-inline .ref-toggle{margin-top:8px;border:none;background:transparent;color:var(--primary);font-size:12.5px;
  cursor:pointer;padding:2px 0;text-decoration:underline dotted}
.q-inline .ref-body{margin-top:8px;background:var(--primary-soft);border:1px dashed var(--primary);
  border-radius:9px;padding:10px 12px;font-size:13px;line-height:1.7;color:#333}

/* POE 先猜后验（预测-验证对比条，不判分不阻塞） */
.predict-box{margin:10px 0 4px;background:#f4f9ff;border:1px solid #c9e2ff;border-radius:10px;padding:10px 13px}
.predict-label{font-size:13px;font-weight:600;color:#1c5fa8;margin-bottom:6px;line-height:1.6}
.predict-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.predict-input{width:120px;border:1px solid #b8d4f2;border-radius:8px;padding:7px 10px;font-size:13.5px}
.predict-input:focus{outline:2px solid #cfe6ff;border-color:#5aa2e0}
.predict-check{border:1px solid #5aa2e0;background:#5aa2e0;color:#fff;border-radius:8px;
  padding:7px 14px;font-size:12.5px;cursor:pointer;font-weight:600}
.predict-check:hover{background:#4792d0}
.predict-result{margin-top:7px;font-size:13px;padding:7px 10px;border-radius:8px;display:none;line-height:1.6}
.predict-result.ok{display:block;background:var(--green-soft);color:var(--green)}
.predict-result.diff{display:block;background:#fff7e6;color:#9a6b00;border:1px solid #f3d9a4}

/* 学习目标自评 */
.lesson-goals{background:#f3f9f4;border:1px solid #cfe7d3;border-radius:10px;padding:10px 13px;margin-bottom:8px}
.lesson-goals .lg-title{font-size:13px;font-weight:700;color:#2e7d46;margin-bottom:6px}
.lesson-goals .lg-item{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:#333;
  padding:4px 0;line-height:1.6}
.lesson-goals .lg-item label{display:flex;gap:7px;align-items:flex-start;cursor:pointer;flex:1}
.lesson-goals input[type=checkbox]{margin-top:3px;accent-color:var(--green)}
.lesson-goals .lg-done{text-decoration:line-through;color:#8a938c}

/* 总结卡反思区 */
.summary-reflect{margin-top:8px;background:#fbf7ef;border:1px solid #ecdcc0;border-radius:9px;padding:9px 12px}
.summary-reflect .sr-title{font-size:12.5px;font-weight:700;color:#8a6d2f;margin-bottom:5px}
.summary-reflect textarea{width:100%;border:1px solid #e2d3b4;border-radius:8px;padding:8px 10px;
  font-size:13px;line-height:1.6;font-family:inherit;resize:vertical;min-height:52px;margin-top:4px}
.summary-reflect textarea:focus{outline:2px solid #f2e3c4;border-color:#c9a95f}
.summary-reflect .sr-note{font-size:11.5px;color:#a08a5c;margin-top:3px}

/* 智能演示播放器（系统自动演示：设系数→高亮→讲解→结论） */
/* ====== 智能演示播放器（两栏布局：左图标 / 中间文字+进度控制） ===== */
.demo-player{margin:10px 0 4px;background:linear-gradient(135deg,#F5F3FF,#EEF2FF);
  border:1px solid #D6C7F5;border-radius:12px;padding:12px 16px;box-shadow:0 2px 10px rgba(124,58,237,.08)}
.demo-player .demo-title{font-size:13px;font-weight:800;color:#6D28D9;margin-bottom:8px;
  display:flex;align-items:center;gap:6px}
.demo-player .demo-body{display:flex;align-items:stretch;gap:14px;min-height:64px}
/* 左栏：视觉/图标区 */
.demo-player .demo-visual{width:72px;flex-shrink:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:4px;
  background:linear-gradient(135deg,#EDE9FE,#DDD6FE);border:1px solid #C4B5FD;
  border-radius:10px;padding:8px 4px}
.demo-player .demo-visual-icon{font-size:26px;line-height:1}
.demo-player .demo-visual-label{font-size:10px;color:#6D28D9;font-weight:600;
  text-align:center;line-height:1.2}
/* 中栏：文字解说 + 底部居中的进度与控制（合为一体） */
.demo-player .demo-center{flex:1;display:flex;flex-direction:column;gap:8px;
  justify-content:center}
.demo-player .demo-msg{display:flex;align-items:center;justify-content:center;
  font-size:14px;color:#374151;line-height:1.75;min-height:48px;
  background:#fff;border:1px solid #E7E0FA;border-radius:10px;padding:10px 16px;
  text-align:center}
/* 进度 + 控制条（在文字下方，整体水平居中） */
.demo-player .demo-footer{display:flex;align-items:center;justify-content:center;
  gap:10px;flex-wrap:wrap}
.demo-player .demo-prog{font-size:12px;color:#8B5CF6;font-weight:700;
  background:#F5F3FF;border:1px solid #DDD6FE;border-radius:999px;padding:3px 12px}
.demo-player .demo-controls{display:flex;gap:5px;flex-wrap:wrap}
.demo-player .demo-controls button{border:1px solid #C9B8F2;background:#fff;color:#6D28D9;
  border-radius:8px;padding:5px 9px;font-size:13px;cursor:pointer;transition:.15s}
.demo-player .demo-controls button:hover{background:#F5F3FF;border-color:#8B5CF6}
.demo-player .demo-controls button[data-demo="close"]{color:#9CA3AF;border-color:#E5E7EB}
.demo-player .demo-controls button[data-demo="close"]:hover{background:#F9FAFB;color:#DC2626;border-color:#FCA5A5}
.demo-player .demo-msg .katex{font-size:1.05em}

/* 兼容旧 class（隐藏） */
.demo-player .demo-side{display:none}

/* 智能演示入口按钮（画板控件区） */
.demo-btn{border:1px solid #8B5CF6;background:#F5F3FF;color:#6D28D9;border-radius:7px;
  padding:5px 10px;font-size:12px;cursor:pointer;font-weight:600;transition:.15s}
.demo-btn:hover{background:#EDE9FE;border-color:#6D28D9}

/* 智能演示入口栏（画板标题下方，醒目位置） */
.demo-entry{display:flex;gap:8px;flex-wrap:wrap;padding:8px 12px;
  background:linear-gradient(135deg,#FEF3C7,#FDE68A);border:1.5px solid #F59E0B;
  border-radius:10px;margin-bottom:8px;align-items:center}
.demo-entry .demo-entry-label{font-size:13px;font-weight:700;color:#92400E;display:flex;align-items:center;gap:4px}
.demo-entry .demo-entry-btn{border:1.5px solid #D97706;background:#fff;color:#B45309;
  border-radius:8px;padding:6px 14px;font-size:13px;cursor:pointer;font-weight:700;
  transition:.15s;white-space:nowrap}
.demo-entry .demo-entry-btn:hover{background:#FEF3C7;border-color:#B45309;
  box-shadow:0 2px 8px rgba(245,158,11,.3)}

/* 右栏：学习进度（替代原先的整列题目罗列） */
.prog-title{font-size:14px;font-weight:700;color:var(--primary-deep);display:flex;align-items:center;
            justify-content:space-between;margin-bottom:10px}
.prog-acc{font-size:12px;font-weight:600;color:var(--green);background:var(--green-soft);border-radius:999px;padding:2px 10px}
.prog-list{display:flex;flex-direction:column;gap:8px}
.prog-item{display:flex;align-items:center;gap:9px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;
           background:#fff;font-size:13px;transition:.15s}
.prog-item .dot{width:9px;height:9px;border-radius:50%;background:#cfd4da;flex:none}
.prog-item.cur{border-color:var(--primary);background:var(--primary-soft);box-shadow:0 0 0 2px var(--primary-soft)}
.prog-item.cur .dot{background:var(--primary)}
.prog-item.done{border-color:var(--green);background:var(--green-soft)}
.prog-item.done .dot{background:var(--green)}
.prog-item .t{flex:1;min-width:0}
.prog-item .st{font-size:12px;color:var(--muted)}
.prog-item.done .st{color:var(--green)}
.prog-item.cur .st{color:var(--primary-deep)}
.review-btn{margin-top:14px;width:100%;border:1px solid var(--amber);background:#fff;color:var(--amber);
  border-radius:10px;padding:9px 14px;font-size:13px;cursor:pointer;font-weight:600;transition:.15s}
.review-btn:hover{background:var(--amber-soft)}