/**
 * 青少年AI工程与科学实验基地 - C++课程教学系统
 * 护眼色调三列布局：目录 | 动画演示 | 教程讲义
 * 点击触发教学模式，适合课堂教学
 */
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600;700&display=swap');

*{margin:0;padding:0;box-sizing:border-box}

:root{
  --bg:#0b1018;--bg-deep:#070c14;--bg-panel:#101820;--bg-card:#141e2a;--bg-elevated:#182632;
  --text:#b4c0cc;--text-dim:#8090a0;--text-muted:#6a7a8a;--text-faint:#4a5a6a;--text-bright:#dce4ec;
  --primary:#6eb4e8;--primary-dim:#3a7cb8;--primary-glow:rgba(110,180,232,.10);--primary-border:rgba(110,180,232,.15);
  --accent:#b088f0;--secondary:#4ec8c0;--success:#4ec870;--warning:#d4a830;--danger:#e86058;--info:#6eb4e8;
  --heading:'Microsoft YaHei','微软雅黑',sans-serif;--body:'Microsoft YaHei','微软雅黑',sans-serif;--code:'JetBrains Mono','Fira Code','Cascadia Code','Consolas',monospace;
  --sidebar-w:280px;--lecture-w:1 1 0;--demo-w:520px;
  --radius:12px;--radius-sm:10px;
  --shadow:0 2px 16px rgba(0,0,0,.25);--shadow-lg:0 6px 32px rgba(0,0,0,.35);
}

html,body{height:100%;overflow:hidden;font-family:var(--body);font-size:16px;background:var(--bg);color:var(--text)}

/* ═══ 三列布局 ═══ */
#app{width:100%;height:100%;display:flex;position:relative;overflow:hidden}

/* ═══ 全局顶部进度条 ═══ */
#global-progress{
  position:fixed;top:0;left:0;right:0;height:3px;z-index:50;
  background:rgba(255,255,255,.03);
}
#global-progress-fill{
  height:100%;background:linear-gradient(90deg,var(--success),var(--accent));
  border-radius:0 2px 2px 0;transition:width .6s ease;width:0%;
}

/* ═══ 移动端侧边栏折叠按钮 ═══ */
#sidebar-toggle{
  display:none;position:fixed;top:10px;left:10px;z-index:30;
  width:36px;height:36px;border-radius:8px;border:1px solid var(--primary-border);
  background:var(--bg-deep);color:var(--primary);font-size:1.35rem;
  cursor:pointer;align-items:center;justify-content:center;transition:all .2s;
}
#sidebar-toggle:hover{background:var(--bg-card);border-color:var(--primary)}

/* ═══ 左侧：课程目录 ═══ */
#sidebar{
  flex:0 0 var(--sidebar-w);display:flex;flex-direction:column;
  background:var(--bg-deep);border-right:1px solid rgba(88,166,255,.06);
  z-index:20;overflow:hidden;
}
#sidebar-header{
  flex:0 0 auto;padding:20px 16px 14px;
  background:linear-gradient(180deg,rgba(88,166,255,.05) 0%,transparent 100%);
  border-bottom:1px solid rgba(88,166,255,.06);
}
#sidebar-header h1{font-size:1.35rem;font-weight:800;color:var(--primary);margin-bottom:4px;line-height:1.4}
#sidebar-header p{font-size:.92rem;color:var(--text-dim);line-height:1.5}
#sidebar-nav{flex:1 1 0;overflow-y:auto;padding:6px 0;scrollbar-width:thin;scrollbar-color:rgba(88,166,255,.12) transparent}
#sidebar-nav::-webkit-scrollbar{width:4px}
#sidebar-nav::-webkit-scrollbar-track{background:transparent}
#sidebar-nav::-webkit-scrollbar-thumb{background:rgba(88,166,255,.15);border-radius:4px}

.stage-group{margin-bottom:2px}
.stage-header{
  padding:10px 14px 8px;font-size:.95rem;font-weight:700;letter-spacing:.3px;
  color:var(--text-faint);cursor:pointer;user-select:none;
  display:flex;align-items:center;gap:6px;transition:all .2s;
  border-radius:6px;margin:1px 4px;
}
.stage-header:hover{color:var(--text-dim);background:rgba(255,255,255,.02)}
.stage-header .arrow{transition:transform .3s;font-size:.5rem;flex-shrink:0}
.stage-header.collapsed .arrow{transform:rotate(-90deg)}
.stage-1 .stage-header,.stage-2 .stage-header{color:#4ec870}
.stage-3 .stage-header,.stage-4 .stage-header,.stage-5 .stage-header,.stage-6 .stage-header,.stage-7 .stage-header{color:#6eb4e8}
.stage-8 .stage-header,.stage-9 .stage-header,.stage-10 .stage-header,.stage-11 .stage-header,.stage-12 .stage-header,.stage-13 .stage-header{color:#b088f0}
.stage-14 .stage-header,.stage-15 .stage-header,.stage-16 .stage-header{color:#ff9f43}
.stage-17 .stage-header,.stage-18 .stage-header,.stage-19 .stage-header,.stage-20 .stage-header{color:#e86058}
.stage-name{font-size:.92rem}

.stage-items{max-height:2000px;overflow:hidden;transition:max-height .4s ease,opacity .3s;opacity:1}
.stage-items.collapsed{max-height:0;opacity:0}

.lesson-link{
  display:flex;align-items:center;gap:8px;padding:6px 12px 6px 20px;
  text-decoration:none;color:var(--text-dim);font-size:.88rem;
  border-left:3px solid transparent;transition:all .2s;cursor:pointer;
}
.lesson-link .ln{font-family:var(--code);font-size:.88rem;font-weight:600;color:var(--text-faint);min-width:28px;text-align:right}
.lesson-link.active .ln{color:var(--primary)}
.lesson-link .lt{font-size:1rem;flex:1}

/* ═══ 中间：课程讲义（加宽，方便插入图片）══ */
#lecture{
  flex:1 1 0;display:flex;flex-direction:column;
  background:var(--bg-deep);border-right:1px solid rgba(110,180,232,.06);
  overflow:hidden;min-width:400px;
}

/* ═══ 右侧：动画互动区（动画、代码、运行结果、答题）══ */
#demo{
  flex:0 0 var(--demo-w);display:flex;flex-direction:column;
  background:var(--bg);overflow:hidden;border-left:1px solid rgba(110,180,232,.06);
}

#demo-header{
  flex:0 0 auto;padding:8px 20px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-deep);border-bottom:1px solid rgba(110,180,232,.06);min-height:36px;
}
.progress-dots{display:flex;gap:6px;align-items:center;justify-content:center;flex-wrap:wrap}
.dot{width:8px;height:8px;border-radius:50%;background:var(--text-faint);transition:all .4s;cursor:pointer}
.dot:hover{transform:scale(1.3);background:var(--text-dim)}
.dot.active{background:var(--primary);box-shadow:0 0 10px rgba(110,180,232,.5);transform:scale(1.2)}
.dot.done{background:var(--success);box-shadow:0 0 6px rgba(78,200,112,.3)}

#demo-stage{
  flex:1 1 0;display:flex;flex-direction:column;position:relative;overflow-y:auto;padding:16px;
}

/* 代码面板 - IDE风格 */
#code-panel{
  width:100%;max-width:580px;margin:0 auto 16px;
  background:var(--bg-panel);border:1px solid var(--primary-border);border-radius:var(--radius);
  overflow:hidden;box-shadow:var(--shadow);
}
#code-panel .cp-header{
  display:flex;align-items:center;gap:10px;padding:10px 16px;
  background:rgba(110,180,232,.03);border-bottom:1px solid rgba(110,180,232,.05);
}
.cp-dot{width:12px;height:12px;border-radius:50%}
.cp-dot:nth-child(1){background:#e86058}
.cp-dot:nth-child(2){background:#d4a830}
.cp-dot:nth-child(3){background:#4ec870}
.cp-title{font-size:1.05rem;color:var(--text-dim);margin-left:8px;font-family:var(--code)}
.btn-copy-code{
  padding:6px 14px;border:1px solid rgba(110,180,232,.2);border-radius:6px;
  background:rgba(110,180,232,.06);color:var(--primary);
  font-size:.92rem;font-weight:600;cursor:pointer;transition:all .2s;
}
.btn-copy-code:hover{background:rgba(110,180,232,.14);transform:translateY(-1px);box-shadow:0 3px 10px rgba(110,180,232,.2)}
.btn-copy-code.copied{background:rgba(78,200,112,.1);border-color:var(--success);color:var(--success)}
.btn-run{
  margin-left:auto;padding:6px 16px;border:none;border-radius:6px;
  background:linear-gradient(135deg,#238636,var(--success));color:#fff;
  font-size:.98rem;font-weight:600;cursor:pointer;transition:all .2s;
}
.btn-run:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(78,200,112,.3)}
#code-box{
  padding:14px 18px;font-family:var(--code);font-size:1.05rem;line-height:1.8;
  overflow-x:auto;overflow-y:auto;min-height:70px;max-height:320px;
  scrollbar-width:thin;scrollbar-color:rgba(110,180,232,.15) transparent;
}
#code-box::-webkit-scrollbar{width:5px;height:5px}
#code-box::-webkit-scrollbar-track{background:transparent}
#code-box::-webkit-scrollbar-thumb{background:rgba(110,180,232,.2);border-radius:5px}
#code-box .line{
  display:inline;padding:1px 4px;border-radius:2px;transition:all .2s;
}
#code-box .line-wrap{
  display:flex;align-items:center;gap:8px;padding:0 4px;border-radius:4px;transition:all .15s;
}
#code-box .line-num{
  display:inline-flex;align-items:center;justify-content:flex-end;
  width:28px;flex-shrink:0;color:rgba(255,255,255,.2);font-size:.88rem;
  font-family:var(--code);user-select:none;transition:color .15s;
}
#code-box .line-wrap.lit{background:rgba(63,185,80,.12);}
#code-box .line-wrap.lit .line-num{color:var(--success);font-weight:700}
#code-box .line-wrap.lit .line{color:#fff}

/* 语法高亮 */
.kw{color:#f0889a;font-weight:600}
.fn{color:#c8a0f8}
.vr{color:#e8a870}
.num{color:#88c8f0}
.str{color:#b0d8f8}
.cmt{color:#5a6a7a;font-style:italic}
.op{color:#88c8f0}

/* ═══ 动画演示区 ═══ */
#anim-area{
  width:100%;max-width:680px;margin:0 auto 12px;min-height:160px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
}

.anim-stage{
  background:var(--bg-panel);border:2px dashed var(--primary-border);border-radius:12px;
  height:500px;width:100%;max-width:560px;display:flex;flex-direction:column;align-items:center;
  padding:20px;position:relative;overflow-y:auto;box-sizing:border-box;
  transition:border .3s,background .3s;
}
.anim-stage:not(:has(.arr-viz,.sort-bar,.v-row)){justify-content:center}
.anim-stage:has(.arr-viz,.sort-bar,.v-row){justify-content:flex-start}
.anim-stage.playing{border-style:solid;border-color:rgba(110,180,232,.25);background:var(--bg-card);}
.anim-placeholder{color:var(--text-dim);font-size:1.05rem;text-align:center}
.anim-placeholder .ph-icon{font-size:2rem;margin-bottom:10px;opacity:.4;color:var(--text-faint)}
.anim-controls{display:flex;gap:10px;padding:14px 20px 18px;border-top:1px solid rgba(255,255,255,.04)}
.anim-status{font-size:.98rem;color:var(--text-dim);text-align:center;padding:6px 12px;background:rgba(255,255,255,.02);border-radius:6px;min-height:28px;margin-top:10px;width:100%;max-width:400px}

@keyframes popIn{from{opacity:0;transform:scale(.75)}to{opacity:1;transform:scale(1)}}
@keyframes fadeSlide{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes flash{0%,100%{background:inherit}40%{background:rgba(210,153,34,.08)}}

/* 变量卡片 */
.v-row{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;width:100%;margin-bottom:8px}
.v-card{background:linear-gradient(135deg,var(--primary),var(--primary-dim));color:var(--bg-deep);padding:14px 24px;border-radius:12px;text-align:center;animation:popIn .3s ease;box-shadow:0 3px 12px rgba(110,180,232,.2)}
.v-name{font-size:.85rem;opacity:.85;margin-bottom:5px;font-family:var(--code)}
.v-val{font-size:1.8rem;font-weight:700;font-family:var(--code)}
.v-card.updated{animation:flash .5s ease}

/* 输出控制台 */
.out-box{background:var(--bg-deep);color:var(--success);padding:14px 18px;border-radius:10px;font-family:var(--code);font-size:1rem;min-height:70px;width:100%;max-width:420px;white-space:pre-wrap;line-height:1.7;overflow-y:auto;max-height:240px}
.out-box .out-line{animation:fadeSlide .25s ease}

/* 数组可视化 */
.arr-viz{display:flex;flex-direction:column;align-items:center;width:100%;gap:10px}
.arr-row{display:flex;gap:7px;justify-content:center;flex-wrap:wrap}
.arr-cell{
  width:48px;height:48px;background:var(--bg-card);border:2px solid rgba(255,255,255,.05);border-radius:10px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:1.05rem;font-weight:700;color:var(--text-bright);transition:all .25s;position:relative
}
.arr-cell .idx{position:absolute;bottom:-18px;font-size:.82rem;color:var(--text-faint)}
.arr-cell.hi{border-color:var(--primary);background:rgba(110,180,232,.08);transform:scale(1.12)}
.arr-cell.cmp{border-color:var(--warning);background:rgba(210,153,34,.08)}
.arr-cell.swp{border-color:var(--danger);background:rgba(232,96,88,.08);transform:scale(1.08)}
.arr-cell.ok{border-color:var(--success);background:rgba(78,200,112,.08);color:var(--success)}
.arr-cell.dim{opacity:.35}
.arr-cell.key{border-color:var(--accent);background:rgba(176,136,240,.12);transform:scale(1.18);
  box-shadow:0 0 16px rgba(176,136,240,.4);z-index:2;position:relative}
.arr-cell.key::after{content:'key';position:absolute;top:-16px;font-size:.78rem;color:var(--accent);font-weight:600}
.arr-cell.step{background:rgba(110,180,232,.06);border-color:var(--primary)}
.arr-status{font-size:.98rem;color:var(--text-dim);text-align:center;padding:6px 12px;background:rgba(255,255,255,.02);border-radius:6px;min-width:220px;min-height:24px}
.ins-part{display:flex;justify-content:center;gap:2px;margin:4px 0 8px}
.ins-part-label{font-size:.85rem;color:var(--text-faint);padding:2px 8px;border-radius:4px}
.ins-part-label.done{background:rgba(78,200,112,.08);color:var(--success)}
.ins-part-label.pending{background:rgba(255,255,255,.03);color:var(--text-faint)}
.ins-part-label.cur{background:rgba(232,96,88,.08);color:var(--danger)}

/* 基数排序桶可视化 */
.bs-grid{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;margin:10px 0;width:100%}
.bs-bucket{background:var(--bg-deep);border:1px solid var(--border);border-radius:6px;padding:6px 8px;min-width:50px;text-align:center}
.bs-bkt-label{font-size:.85rem;color:var(--text-faint);margin-bottom:4px}
.bs-bkt-items{font-size:.8rem;color:var(--text);min-height:22px;display:flex;flex-direction:column;gap:2px}

/* 循环可视化 */
.loop-viz{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.loop-code{background:var(--bg-deep);color:var(--text);padding:10px 18px;border-radius:8px;font-family:var(--code);font-size:.98rem;width:100%;text-align:center}
.loop-code .hl{color:var(--primary);font-weight:700}
.loop-counter{display:flex;align-items:center;gap:14px}
.loop-box{
  width:68px;height:68px;background:linear-gradient(135deg,var(--primary),var(--primary-dim));border-radius:14px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  color:var(--bg-deep);box-shadow:0 4px 16px rgba(110,180,232,.3);transition:all .3s
}
.loop-box .lb-name{font-size:.85rem;opacity:.8;margin-bottom:2px}
.loop-box .lb-val{font-size:1.8rem;font-weight:700;font-family:var(--code)}
.loop-arrow{font-size:1.55rem;color:var(--text-faint)}
.loop-out-box{background:rgba(78,200,112,.08);border:2px solid rgba(78,200,112,.2);padding:10px 18px;border-radius:9px;font-family:var(--code);color:var(--success);min-width:130px;text-align:center;font-size:1rem}
.loop-progress{width:100%;max-width:280px}
.loop-prog-bar{height:8px;background:rgba(255,255,255,.04);border-radius:4px;overflow:hidden}
.loop-prog-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:4px;transition:width .35s ease}
.loop-prog-label{font-size:.88rem;color:var(--text-dim);text-align:right;margin-top:4px}

/* 思维动画表格 */
.digit-state,.prime-state{width:100%;max-width:500px;margin:4px 0}
.think-tbl{width:100%;border-collapse:collapse;font-size:.92rem;font-family:var(--code)}
.think-tbl td,.think-tbl th{border:1px solid rgba(255,255,255,.06);padding:6px 10px;text-align:center}
.think-tbl tbody tr{transition:opacity .3s}

/* 嵌套循环 */
.nested-grid{display:grid;gap:4px;justify-content:center;max-width:100%;overflow:auto;padding:4px}
.nested-cell{
  padding:4px 6px;border-radius:6px;font-size:.82rem;text-align:center;
  opacity:0;transform:scale(.8);transition:opacity .2s,transform .2s;
  background:linear-gradient(135deg,var(--primary),var(--primary-dim));color:var(--bg-deep);
  font-family:var(--code);white-space:nowrap
}
.nested-cell.show{opacity:1;transform:scale(1)}

/* 二分查找 */
.bs-arr{display:flex;gap:5px;justify-content:center;flex-wrap:wrap}
.bs-cell{
  width:42px;height:42px;background:var(--bg-card);border:2px solid rgba(255,255,255,.05);border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:.98rem;font-weight:600;
  color:var(--text-bright);transition:all .3s;flex-shrink:0
}
.bs-cell.lo,.bs-cell.hi-b{border-color:var(--warning)}
.bs-cell.mid{border-color:var(--primary);background:rgba(110,180,232,.08);transform:scale(1.1)}
.bs-cell.found{border-color:var(--success);background:rgba(78,200,112,.08);color:var(--success);transform:scale(1.15)}
.bs-cell.out{opacity:.25}

/* 二分思想范围缩小 */
.bisect-viz{display:flex;flex-direction:column;align-items:center;width:100%;gap:12px;padding:16px 0}
.bisect-title{font-size:1.12rem;font-weight:700;color:var(--primary)}
.bisect-bar-wrap{display:flex;gap:2px;justify-content:center;align-items:flex-end;padding:16px 8px;min-height:48px;
  background:var(--bg-card);border-radius:10px;border:1px solid rgba(255,255,255,.06);width:90%}
.bisect-cell{height:32px;border-radius:3px;background:#334155;transition:all .35s;min-width:3px;flex-shrink:0}
.bisect-cell.out{background:rgba(255,255,255,.04);opacity:.25;transform:scaleY(.6)}
.bisect-cell.mid{background:var(--primary);transform:scaleY(1.25);box-shadow:0 0 12px rgba(110,180,232,.5)}
.bisect-cell.found{background:var(--success);transform:scaleY(1.35);box-shadow:0 0 16px rgba(78,200,112,.6)}
.bisect-range-label{font-size:.98rem;color:var(--text-dim)}
.bisect-step-info{font-size:1.02rem;font-weight:600;color:var(--text-bright);min-height:1.4em;text-align:center}

/* 高精度四则运算动画 */
.bigcalc-wrap{display:flex;flex-direction:column;align-items:center;width:100%;gap:8px;padding:12px 0}
.bigcalc-title{font-size:1.18rem;font-weight:700;color:var(--primary);margin-bottom:4px}
.bigcalc-board{display:flex;flex-direction:column;gap:2px;padding:12px 16px;
  background:var(--bg-card);border-radius:10px;border:1px solid rgba(255,255,255,.06);min-width:320px}
.bigcalc-row{display:flex;align-items:center;gap:2px;justify-content:center}
.bigcalc-label{width:36px;text-align:right;font-size:.95rem;color:var(--text-dim);flex-shrink:0}
.bigcalc-cell{
  width:30px;min-width:30px;height:32px;flex-shrink:0;
  display:flex;align-items:center;justify-content:flex-end;
  font-size:1.02rem;font-weight:600;font-family:var(--code);
  border-radius:5px;transition:all .4s;background:rgba(255,255,255,.03);color:var(--text-bright);border:1px solid transparent;
  padding-right:3px
}
.bigcalc-cell.op{background:rgba(110,180,232,.06);border-color:rgba(110,180,232,.12);justify-content:center}
.bigcalc-cell.carry{background:rgba(212,168,48,.08);color:var(--warning);font-size:.8rem;border-color:rgba(212,168,48,.12)}
.bigcalc-cell.result{background:rgba(78,200,112,.06);color:var(--success);border-color:rgba(78,200,112,.12)}
.bigcalc-cell.partial{background:rgba(110,180,232,.04);color:var(--primary);font-size:.8rem;border-color:rgba(110,180,232,.08)}
.bigcalc-cell.active{background:rgba(232,96,88,.18);border-color:var(--danger);transform:scale(1.08);box-shadow:0 0 12px rgba(232,96,88,.3)}
.bigcalc-cell.done{background:rgba(78,200,112,.08);border-color:rgba(78,200,112,.15);color:var(--success)}
.bigcalc-sep{height:2px;background:linear-gradient(90deg,transparent,var(--text-dim),transparent);margin:2px 0;width:80%;align-self:center}
.bigcalc-status{font-size:.98rem;color:var(--text-bright);font-weight:600;text-align:center;min-height:1.3em;padding:4px 10px;
  background:rgba(255,255,255,.03);border-radius:6px;width:90%}
.bigcalc-legend{display:flex;gap:12px;font-size:.82rem;color:var(--text-dim);align-items:center;padding:4px 0}
.bl-dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:3px;vertical-align:middle}
.bl-dot.bl-active{background:var(--danger);box-shadow:0 0 6px var(--danger)}
.bl-dot.bl-done{background:var(--success)}
.bl-dot.bl-pending{background:rgba(255,255,255,.1)}

/* 大整数运算详情面板 */
.bigcalc-detail{min-height:42px;padding:8px 14px;background:rgba(255,255,255,.04);border-radius:8px;
  border:1px solid rgba(255,255,255,.06);width:90%;text-align:center;font-size:.98rem}
.bigcalc-step-formula{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap}
.f-step{color:var(--primary);font-weight:700;margin-right:4px}
.f-pos{color:var(--warning);font-weight:600}
.f-expr{color:var(--text-bright);font-family:var(--code)}
.f-sum{color:#d4a830;font-weight:700;font-family:var(--code)}
.f-result{color:var(--success);font-weight:700;font-family:var(--code)}
.f-carry{color:var(--warning);font-weight:700;font-family:var(--code)}
.f-nocarry{color:var(--text-dim);font-size:.85rem}
.f-borrow{color:var(--danger);font-weight:700}
.f-active{color:#fff;background:rgba(232,96,88,.4);padding:0 4px;border-radius:3px}
.bigcalc-cell.flash{animation:bigcalcFlash .5s ease}
.bigcalc-cell.final-carry{background:rgba(212,168,48,.25);border-color:var(--warning);transform:scale(1.12)}
@keyframes bigcalcFlash{0%{transform:scale(1.3);opacity:.6}100%{transform:scale(1);opacity:1}}

/* 长除法布局 */
.bigcalc-longdiv{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 0;
  font-family:var(--code);font-size:1.05rem;width:100%}
.bigcalc-ld-row{display:flex;align-items:center;gap:4px;justify-content:center}
.bigcalc-ld-quot{font-size:1.15rem;font-weight:700;color:var(--success);min-height:1.4em;
  text-align:center;letter-spacing:2px;padding:4px 16px;background:rgba(78,200,112,.06);border-radius:6px}
.bigcalc-ld-bracket{color:var(--danger);font-weight:700;font-size:1.2rem}
.bigcalc-ld-divisor{color:var(--warning);font-weight:600;font-size:1.05rem}
.bigcalc-ld-dvd{color:var(--text-bright);font-size:1.05rem;letter-spacing:2px}
.bigcalc-ld-process{display:flex;flex-direction:column;align-items:flex-start;gap:6px;padding:8px 0 0 0;width:100%}
.bigcalc-ld-step{display:flex;align-items:center;gap:8px;padding:3px 0;font-family:var(--code);font-size:.98rem;
  width:100%;border-bottom:1px dashed rgba(255,255,255,.04)}
.ld-indent{display:inline-block;width:20px;flex-shrink:0}
.ld-sub{color:var(--danger);font-weight:600}
.ld-line{display:inline-block;width:30px;height:2px;background:rgba(255,255,255,.1);margin:0 4px}
.ld-rem{color:var(--text-bright);font-weight:600}

/* 动画控制栏 */
#anim-controls{display:flex;gap:10px;align-items:center;justify-content:center;padding:6px 10px;
  background:var(--bg-card);border-radius:8px;border:1px solid rgba(255,255,255,.04);margin-top:6px}
.step-toggle{display:flex;align-items:center;gap:6px;cursor:pointer;font-size:.95rem;color:var(--text-dim);user-select:none}
.step-toggle input{display:none}
.step-toggle-slider{width:32px;height:18px;background:rgba(255,255,255,.1);border-radius:9px;position:relative;transition:background .25s}
.step-toggle-slider::after{content:'';position:absolute;top:2px;left:2px;width:14px;height:14px;border-radius:50%;background:var(--text-dim);transition:all .25s}
.step-toggle input:checked+.step-toggle-slider{background:var(--primary)}
.step-toggle input:checked+.step-toggle-slider::after{left:16px;background:#fff}
.step-toggle-label{white-space:nowrap}
.btn-step{font-size:.95rem;padding:4px 12px;border-radius:6px;border:1px solid var(--primary);background:rgba(110,180,232,.1);color:var(--primary);cursor:pointer;transition:all .2s;white-space:nowrap}
.btn-step:hover{background:rgba(110,180,232,.2)}

/* 矩阵 */
.mat-grid{display:inline-grid;gap:5px;margin:10px auto}
.mat-cell{
  width:46px;height:46px;background:var(--bg-card);border:2px solid rgba(255,255,255,.05);border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:.92rem;font-weight:600;
  color:var(--text-bright);transition:all .25s
}
.mat-cell.hl{border-color:var(--primary);background:rgba(110,180,232,.08);transform:scale(1.06)}

/* 函数调用栈 */
.call-stack{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%}
.call-frame{
  width:100%;max-width:280px;background:linear-gradient(135deg,var(--accent),#7c3aed);color:var(--bg-deep);
  border-radius:10px;padding:12px 18px;text-align:center;font-family:var(--code);
  font-size:.98rem;animation:fadeSlide .3s ease;box-shadow:0 3px 12px rgba(176,136,240,.3)
}
.call-frame .cf-name{font-size:.88rem;opacity:.75;margin-bottom:4px}
.call-frame .cf-val{font-size:1.25rem;font-weight:700}
.call-ret{color:var(--text-dim);font-size:.92rem;text-align:center;padding:4px}

/* 指针可视化 */
.ptr-viz{display:flex;flex-direction:column;align-items:center;gap:16px;width:100%}
.ptr-mem{display:flex;gap:6px;justify-content:center;align-items:center}
.mem-block{display:flex;flex-direction:column;align-items:center;gap:4px}
.mem-addr{font-size:.82rem;color:var(--text-faint);font-family:var(--code)}
.mem-box{
  width:56px;height:48px;background:var(--bg-card);border:2px solid rgba(255,255,255,.05);border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:1.05rem;font-weight:700;color:var(--text-bright);transition:all .3s
}
.mem-name{font-size:.85rem;color:var(--text-dim);font-family:var(--code)}
.mem-box.ptr-point{border-color:var(--accent);background:rgba(176,136,240,.08)}
.ptr-arrow{display:flex;align-items:center;gap:4px;color:var(--accent);font-size:.92rem;font-family:var(--code)}

/* 字符串可视化 */
.str-viz{display:flex;flex-direction:column;align-items:center;gap:14px;width:100%}
.str-chars{display:flex;gap:4px;flex-wrap:wrap;justify-content:center}
.str-char{
  width:36px;height:44px;background:var(--bg-card);border:2px solid rgba(255,255,255,.05);border-radius:8px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  font-size:1.05rem;font-weight:700;font-family:var(--code);color:var(--text-bright);transition:all .25s
}
.str-char .sc-idx{font-size:.78rem;color:var(--text-faint);margin-top:2px}
.str-char.hl{border-color:var(--primary);background:rgba(110,180,232,.08)}

/* 变量盒子 */
.var-grid{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.var-box{
  display:flex;flex-direction:column;align-items:center;
  background:var(--bg-card);border:1px solid var(--primary-border);border-radius:var(--radius-sm);
  padding:12px 20px;min-width:100px;transition:all .4s;
}
.var-box.flash{animation:vFlash .5s}
@keyframes vFlash{0%{transform:scale(1)}30%{transform:scale(1.06);box-shadow:0 0 20px var(--primary-glow)}100%{transform:scale(1)}}
.var-box .vb-label{font-size:.88rem;color:var(--text-dim);margin-bottom:6px}
.var-box .vb-value{font-family:var(--code);font-size:1.55rem;font-weight:700;color:var(--primary)}
.var-box .vb-type{font-size:.82rem;color:var(--text-faint);margin-top:4px}

/* 数组可视化 */
.array-visual{display:flex;gap:3px;justify-content:center;flex-wrap:wrap}
.array-cell{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:48px;height:56px;background:var(--bg-card);border:1px solid rgba(255,255,255,.05);
  border-radius:6px;transition:all .3s;
}
.array-cell.active{border-color:var(--primary);background:rgba(88,166,255,.08)}
.array-cell.sorted{border-color:var(--success);background:rgba(63,185,80,.08)}
.array-cell.comparing{border-color:var(--warning);background:rgba(210,153,34,.08)}
.array-cell .ac-idx{font-size:.78rem;color:var(--text-faint);margin-bottom:2px}
.array-cell .ac-val{font-family:var(--code);font-size:1.05rem;font-weight:600;color:var(--text-bright)}

/* 底部操作区 */
#demo-controls{
  width:100%;max-width:580px;margin:14px auto 0;
  display:flex;gap:12px;justify-content:center;flex-wrap:wrap;min-height:48px;
}

/* 选择题 */
.choice-btn{
  display:block;width:100%;max-width:420px;margin:6px auto;padding:12px 20px;
  background:var(--bg-card);border:1px solid rgba(255,255,255,.05);border-radius:10px;
  color:var(--text-bright);font-size:1.12rem;cursor:pointer;transition:all .2s;text-align:left;
}
.choice-btn:hover{border-color:var(--primary);background:rgba(110,180,232,.06);transform:translateX(3px)}
.choice-btn.correct{background:rgba(78,200,112,.1);border-color:var(--success);color:var(--success)}
.choice-btn.wrong{background:rgba(232,96,88,.1);border-color:var(--danger);color:var(--danger);animation:shake .4s}

/* 按钮 */
.btn{
  padding:12px 28px;border:none;border-radius:10px;font-size:1.12rem;font-weight:600;
  cursor:pointer;transition:all .2s;display:inline-flex;align-items:center;gap:8px;
}
.btn:hover{transform:translateY(-2px)}
.btn-primary{background:linear-gradient(135deg,var(--primary-dim),var(--primary));color:var(--bg-deep)}
.btn-success{background:linear-gradient(135deg,#238636,var(--success));color:#fff}
.btn-ghost{background:rgba(255,255,255,.04);color:var(--text-dim);border:1px solid rgba(255,255,255,.05)}
.btn-ghost:hover{background:rgba(255,255,255,.06);color:var(--text-bright)}
.btn:disabled{opacity:.25;cursor:default;transform:none!important}

/* 叙述文字 */

/* ═══ 讲义内容样式（中间宽区域）══ */
#lecture-header{
  flex:0 0 auto;padding:18px 20px 14px;
  background:linear-gradient(180deg,rgba(176,136,240,.04) 0%,transparent 100%);
  border-bottom:1px solid rgba(110,180,232,.06);
  position:relative;
}
#lecture-header h2{font-size:1.3rem;font-weight:700;color:var(--accent);margin-bottom:4px}
#lecture-header p{font-size:1rem;color:var(--text-dim)}
.btn-edit-lesson{
  position:absolute;right:54px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:1px solid rgba(255,255,255,.06);border-radius:6px;
  background:rgba(255,255,255,.03);color:var(--success);font-size:1.35rem;
  cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;
}
.btn-edit-lesson:hover{background:rgba(78,200,112,.08);border-color:var(--success)}
.btn-lecture-expand{
  position:absolute;right:52px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:1px solid rgba(255,255,255,.06);border-radius:6px;
  background:rgba(255,255,255,.03);color:var(--text-dim);font-size:1.25rem;
  cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center;
}
.btn-lecture-expand:hover{background:rgba(188,140,255,.08);color:var(--accent);border-color:var(--accent)}

#lecture-content{flex:1 1 0;overflow-y:auto;padding:22px;width:100%;box-sizing:border-box;scrollbar-width:thin;scrollbar-color:rgba(176,136,240,.12) transparent}
#lecture-content::-webkit-scrollbar{width:5px}
#lecture-content::-webkit-scrollbar-track{background:transparent}
#lecture-content::-webkit-scrollbar-thumb{background:rgba(176,136,240,.15);border-radius:5px}

.lecture-section{width:100%;margin-bottom:24px}
.lecture-story{background:rgba(78,200,112,.04);border:1px solid rgba(78,200,112,.12);border-radius:10px;padding:16px 20px;margin:14px 0}
.lecture-story .story-icon{font-size:1.8rem;line-height:1;vertical-align:middle;display:inline;margin-right:8px}
.lecture-story .story-title{font-size:1.2rem;font-weight:700;color:var(--success);margin-bottom:10px}
.lecture-story .story-text{font-size:1.25rem;color:var(--text-dim);line-height:2.1;white-space:pre-wrap}
.lecture-section h3{font-size:1.35rem;font-weight:700;color:var(--primary);margin-bottom:12px;padding-bottom:8px;border-bottom:1px solid rgba(110,180,232,.08)}
.lecture-section h4{font-size:1.2rem;font-weight:600;color:var(--accent);margin:14px 0 10px}
.lecture-section p{font-size:1.25rem;line-height:2.1;color:var(--text-dim);margin-bottom:10px}
.lecture-section ul,.lecture-section ol{padding-left:24px;margin-bottom:12px}
.lecture-section li{font-size:1.25rem;line-height:2;color:var(--text-dim);margin-bottom:6px}
.lecture-section li::marker{color:var(--primary)}
.lecture-section strong{color:var(--text-bright)}
.lecture-section code{background:rgba(110,180,232,.08);padding:3px 10px;border-radius:5px;font-family:var(--code);font-size:1rem;color:var(--primary)}

/* ═══ 讲义代码块 — 干净的code风格 ═══ */
.lecture-code{
  margin:14px 0;overflow:hidden;
  border-radius:10px;
}
/* pre版直接使用code的样式 */
pre.lecture-code,
.lecture-code pre{
  padding:18px 22px;margin:0;
  font-family:var(--code);font-size:1.05rem;line-height:1.8;
  overflow-x:auto;overflow-y:visible;color:#e6edf3;
  scrollbar-width:thin;scrollbar-color:rgba(110,180,232,.18) transparent;
  max-height:none;
  word-break:normal;word-wrap:normal;white-space:pre-wrap;
}
pre.lecture-code::-webkit-scrollbar,.lecture-code pre::-webkit-scrollbar,
.lecture-code>code::-webkit-scrollbar{height:6px;width:6px}
pre.lecture-code::-webkit-scrollbar-thumb,.lecture-code pre::-webkit-scrollbar-thumb,
.lecture-code>code::-webkit-scrollbar-thumb{background:rgba(110,180,232,.25);border-radius:6px}
pre.lecture-code::-webkit-scrollbar-track,.lecture-code pre::-webkit-scrollbar-track,
.lecture-code>code::-webkit-scrollbar-track{background:rgba(110,180,232,.06);border-radius:6px}
/* 滚动条hover更醒目 */
pre.lecture-code::-webkit-scrollbar-thumb:hover,.lecture-code pre::-webkit-scrollbar-thumb:hover,
.lecture-code>code::-webkit-scrollbar-thumb:hover{background:rgba(110,180,232,.45)}
/* pre内的code使用标准的code样式（无多余边框，块级展示）*/
pre.lecture-code>code{display:block;padding:14px 18px;overflow:visible;max-height:none;background:transparent}
pre.lecture-code .hljs{overflow:visible!important;max-height:none!important;padding:0!important;background:transparent!important}

/* ── 练习解答折叠按钮 ── */
.sol-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 20px;margin:10px 0 8px;
  border:1.5px solid #4ec870;border-radius:6px;
  background:linear-gradient(135deg,rgba(78,200,112,.1),rgba(78,200,112,.04));
   color:#4ec870;font-size:.94rem;font-weight:600;cursor:pointer;
   transition:all .2s;letter-spacing:.3px;
 }
 .sol-btn:hover{background:rgba(78,200,112,.18);box-shadow:0 2px 8px rgba(78,200,112,.2)}
.sol-code{display:none}
.sol-code.open{display:block}

/* ═══ 讲义代码块复制按钮 ═══ */
.lecture-code-wrapper{position:relative;width:100%}
.lecture-code-wrapper:hover .btn-lecture-copy{opacity:1}
.btn-lecture-copy{
  position:absolute;top:8px;right:8px;z-index:2;
  padding:4px 12px;border:1px solid rgba(110,180,232,.2);border-radius:6px;
  background:rgba(110,180,232,.08);color:var(--primary);
  font-size:.88rem;font-family:var(--body);cursor:pointer;
  transition:all .2s;opacity:0;line-height:1.6;
}
.btn-lecture-copy:hover{background:rgba(110,180,232,.2);transform:translateY(-1px)}
.btn-lecture-copy.copied{background:rgba(78,200,112,.12);border-color:var(--success);color:var(--success);opacity:1}

/* ── highlight.js 主题色微调（配合 github-dark）── */
.hljs{background:#0d1117!important;font-size:1.05rem!important;line-height:1.8!important;border-radius:0;overflow-x:auto}
.lecture-code .hljs,.lecture-code pre .hljs{padding:0}

/* ── lecture-code 包 <code> 的情况（div > code）── */
.lecture-code>code{
  display:block;padding:18px 22px;
  font-family:var(--code);font-size:1.05rem;line-height:1.8;
  background:transparent;color:#e6edf3;
  white-space:pre-wrap;overflow-x:auto;overflow-y:visible;
  max-height:none;
}

.lecture-tip{
  background:rgba(212,168,48,.06);border:1px solid rgba(212,168,48,.15);border-radius:10px;
  padding:14px 18px;margin:14px 0;
}
.lecture-tip .tip-label{font-size:1.05rem;font-weight:700;color:var(--warning);margin-bottom:6px;letter-spacing:.3px}
.lecture-tip .tip-content{font-size:1.25rem;color:var(--text-dim);line-height:2.1;white-space:pre-wrap}
.lecture-tip p{font-size:1.05rem;color:var(--text-dim);line-height:1.9}

.lecture-example{
  background:rgba(78,200,112,.06);border:1px solid rgba(78,200,112,.12);border-radius:10px;
  padding:16px 20px;margin:14px 0;
}
.lecture-example .ex-label{font-size:.9rem;font-weight:700;color:var(--success);margin-bottom:8px;letter-spacing:.3px}
.lecture-example p{font-size:.9rem;color:var(--text-dim);line-height:1.8}

/* ── 警告卡片（红色）── */
.lecture-warn{
  background:rgba(232,96,88,.06);border:1px solid rgba(232,96,88,.15);border-radius:10px;
  padding:14px 18px;margin:14px 0;
}
.lecture-warn p{font-size:1.05rem;color:var(--text-dim);line-height:1.9}

/* ── 信息/提示卡片（蓝色）── */
.lecture-info{
  background:rgba(110,180,232,.06);border:1px solid rgba(110,180,232,.15);border-radius:10px;
  padding:16px;margin:12px 0;
}
.lecture-info p{font-size:1.05rem;line-height:1.8}

/* ── 讲义内通用卡片 ── */
.lecture-card{
  background:rgba(110,180,232,.04);border:1px solid rgba(110,180,232,.1);
  border-radius:12px;padding:16px 20px;margin:14px 0;width:100%;box-sizing:border-box;
}
.lecture-card h4{font-size:.9rem;font-weight:700;color:var(--primary);margin-bottom:8px}
.lecture-card p,.lecture-card ul,.lecture-card ol{font-size:.9rem;color:var(--text-dim);line-height:1.8}
.lecture-card ul,.lecture-card ol{padding-left:20px}
.lecture-card li{margin-bottom:4px}

/* ── 课后编程练习卡片（三色难度） ── */
.lecture-card.basic{background:#0d1117;border:1px solid #4a6a8a}
.lecture-card.advanced{background:#0d1117;border:1px solid #ff9f43}
.lecture-card.challenge{background:#0d1117;border:1px solid #b088f0}
.lecture-card.basic h4{color:#4ec870;font-size:1.1rem}
.lecture-card.advanced h4{color:#ff9f43;font-size:1.1rem}
.lecture-card.challenge h4{color:#b088f0;font-size:1.1rem}
.lecture-card.basic p,.lecture-card.advanced p,.lecture-card.challenge p{font-size:1rem;line-height:1.7;color:#b0c8e0}

/* ═══ 讲义图片 ═══ */
.lecture-img{
  margin:16px 0;border-radius:10px;overflow:hidden;
  border:1px solid rgba(110,180,232,.1);background:rgba(110,180,232,.03);
}
.lecture-img img{
  width:100%;display:block;object-fit:cover;
}
.lecture-img .img-caption{
  padding:8px 14px;font-size:.92rem;color:var(--text-dim);
  background:rgba(110,180,232,.04);text-align:center;
}
.lecture-img-grid{
  display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin:16px 0;
}
.lecture-img-grid .lecture-img{margin:0}

/* ── 讲义 SVG — 自适应宽度，文字大小由 SVG 内联控制 ── */
.lecture-section svg,
.lecture-img svg{
  width:100%;height:auto;display:block;
  margin:16px auto;border-radius:10px;
  box-shadow:0 2px 16px rgba(0,0,0,.25);
}
.lecture-timeline{
  position:relative;padding:8px 0 8px 28px;margin:16px 0;
  border-left:2px solid rgba(110,180,232,.2);
}
.lecture-timeline .tl-item{
  position:relative;margin-bottom:18px;padding:10px 16px;
  background:rgba(110,180,232,.04);border-radius:10px;
  border:1px solid rgba(110,180,232,.08);
}
.lecture-timeline .tl-item::before{
  content:'';position:absolute;left:-33px;top:14px;
  width:10px;height:10px;border-radius:50%;
  background:var(--primary);border:2px solid var(--bg-panel);
}
.lecture-timeline .tl-year{
  font-size:.9rem;font-weight:700;color:var(--accent);margin-bottom:4px;
}
.lecture-timeline .tl-desc{
  font-size:.9rem;color:var(--text-dim);line-height:1.7;
}
/* ═══ 讲义全屏弹窗 ═══ */
#lecture-full-overlay{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(7,12,20,.92);backdrop-filter:blur(20px);opacity:0;pointer-events:none;transition:all .4s;
}
#lecture-full-overlay.show{opacity:1;pointer-events:auto}
#lecture-full-box{
  width:85%;max-width:1100px;max-height:88vh;border-radius:18px;
  background:linear-gradient(135deg,var(--bg-panel),var(--bg-elevated));
  border:1px solid var(--primary-border);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;animation:lectureFullIn .3s ease;
}
@keyframes lectureFullIn{from{transform:scale(.92) translateY(20px);opacity:0}to{transform:none;opacity:1}}
#lecture-full-header{
  flex:0 0 auto;padding:20px 28px;display:flex;align-items:center;gap:18px;
  background:rgba(110,180,232,.04);border-bottom:1px solid rgba(110,180,232,.08);
}
#lecture-full-header h2{font-size:1.55rem;font-weight:700;color:var(--primary)}
.btn-close-full{
  margin-left:auto;padding:10px 24px;border:1px solid rgba(255,255,255,.06);border-radius:10px;
  background:rgba(255,255,255,.04);color:var(--text-bright);font-size:1.12rem;font-weight:600;
  cursor:pointer;transition:all .2s;
}
.btn-close-full:hover{background:rgba(232,96,88,.1);color:var(--danger);border-color:var(--danger)}
#lecture-full-content{
  flex:1 1 0;overflow-y:auto;padding:32px 40px;
  scrollbar-width:thin;scrollbar-color:rgba(110,180,232,.15) transparent;
}
#lecture-full-content::-webkit-scrollbar{width:7px}
#lecture-full-content::-webkit-scrollbar-track{background:transparent}
#lecture-full-content::-webkit-scrollbar-thumb{background:rgba(110,180,232,.15);border-radius:7px}
#lecture-full-content .lecture-section h3{font-size:1.4rem}
#lecture-full-content .lecture-section h4{font-size:1.3rem}
#lecture-full-content .lecture-section p{font-size:1.35rem;line-height:2.2}
#lecture-full-content .lecture-section li{font-size:1.35rem;line-height:2.1}
#lecture-full-content .lecture-code{font-size:1.1rem;line-height:1.9}
#lecture-full-content .lecture-tip p{font-size:1.1rem}
#lecture-full-content .lecture-example p{font-size:1.1rem}
#lecture-full-content .lecture-tip,
#lecture-full-content .lecture-example,
#lecture-full-content .lecture-warn,
#lecture-full-content .lecture-info,
#lecture-full-content .lecture-card,
#lecture-full-content .lecture-code,
#lecture-full-content .q-item,
#lecture-full-content .q-sample{background:transparent !important;border:none !important;padding:0;margin:0 0 12px 0;box-shadow:none;min-width:0}
#lecture-full-content .lecture-card.basic,
#lecture-full-content .lecture-card.advanced,
#lecture-full-content .lecture-card.challenge{background:transparent !important;border:none !important;padding:0;margin:0 0 12px 0;box-shadow:none}
#lecture-full-content .lecture-code::before{display:none !important}
#lecture-full-content .lecture-code code,
#lecture-full-content pre.lecture-code,
#lecture-full-content .lecture-code pre{background:transparent !important;max-height:none !important;overflow:visible !important;padding:0 !important;border:none !important;white-space:pre-wrap}
#lecture-full-content .lecture-code .hljs,
#lecture-full-content pre.lecture-code .hljs,
#lecture-full-content .lecture-code pre .hljs{background:transparent !important}

/* ═══ 总结浮层 ═══ */
#insight-overlay{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(7,12,20,.9);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:all .4s;
}
#insight-overlay.show{opacity:1;pointer-events:auto}
#insight-box{
  max-width:640px;width:90%;border-radius:18px;padding:34px 40px;
  background:linear-gradient(135deg,var(--bg-panel),var(--bg-elevated));
  border:1px solid var(--primary-border);box-shadow:var(--shadow-lg);animation:insightIn .4s ease;
}
@keyframes insightIn{from{transform:scale(.88) translateY(12px);opacity:0}to{transform:none;opacity:1}}
#insight-box h3{font-size:1.35rem;font-weight:700;color:var(--primary);margin-bottom:16px}
#insight-box ul{padding-left:24px}
#insight-box li{font-size:1.25rem;line-height:2.1;color:var(--text-dim);margin-bottom:8px}
#insight-box li::marker{color:var(--primary)}
#insight-close{
  display:block;margin:24px auto 0;padding:10px 36px;border:none;border-radius:10px;
  background:rgba(255,255,255,.05);color:var(--text-bright);font-size:1.12rem;font-weight:600;
  cursor:pointer;transition:all .2s;border:1px solid rgba(255,255,255,.05);
}
#insight-close:hover{background:rgba(255,255,255,.08)}

/* ═══ 粒子特效 ═══ */
.spark{position:fixed;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:99;animation:sparkAnim .7s ease forwards}
@keyframes sparkAnim{0%{opacity:1;transform:scale(0)}40%{opacity:1;transform:scale(1.4)}100%{opacity:0;transform:scale(0) translate(var(--tx),var(--ty))}}
.confetti{position:fixed;width:8px;height:8px;pointer-events:none;z-index:99;animation:confettiFall 1.6s ease forwards}
@keyframes confettiFall{0%{opacity:1;transform:translateY(0) rotate(0deg)}100%{opacity:0;transform:translateY(240px) rotate(720deg)}}

/* ═══ 进度条 ═══ */
.progress-bar{width:100%;max-width:500px;height:5px;background:rgba(255,255,255,.03);border-radius:3px;overflow:hidden;margin:10px auto}
.progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--accent));border-radius:3px;transition:width .5s}

/* ═══ 计算机结构动画 ═══ */
.computer-anim{display:flex;flex-direction:column;align-items:center;gap:8px;padding:20px;width:100%;max-width:400px}
.cpu-box,.mem-box,.io-box{
  width:200px;padding:14px 20px;background:var(--bg-card);border:2px solid var(--primary-border);
  border-radius:12px;text-align:center;transition:all .3s;
}
.cpu-box{border-color:var(--primary);background:rgba(110,180,232,.06)}
.mem-box{border-color:var(--accent);background:rgba(176,136,240,.06)}
.io-box{border-color:var(--success);background:rgba(78,200,112,.06)}
.cpu-label,.mem-label,.io-label{font-size:.92rem;font-weight:700;color:var(--text-dim);margin-bottom:6px}
.cpu-core{font-family:var(--code);font-size:.98rem;color:var(--primary);min-height:20px}
.mem-data{font-family:var(--code);font-size:.98rem;color:var(--accent);min-height:20px}
.io-screen{font-family:var(--code);font-size:.98rem;color:var(--success);min-height:20px}
.arrow-down{font-size:1.35rem;color:var(--text-faint);animation:arrowPulse 1.2s ease infinite}
@keyframes arrowPulse{0%,100%{opacity:.3;transform:translateY(0)}50%{opacity:.8;transform:translateY(3px)}}

/* ═══ 编译过程动画 ═══ */
.compiler-anim{display:flex;align-items:center;gap:6px;padding:16px;flex-wrap:wrap;justify-content:center}
.src-box,.obj-box,.exe-box{
  padding:12px 20px;background:var(--bg-card);border:2px solid var(--primary-border);
  border-radius:10px;text-align:center;font-family:var(--code);font-size:1.05rem;color:var(--text-bright);
  transition:all .3s;animation:boxFadeIn .5s ease;
}
.src-box{border-color:var(--primary);background:rgba(110,180,232,.06)}
.obj-box{border-color:var(--accent);background:rgba(176,136,240,.06)}
.exe-box{border-color:var(--success);background:rgba(78,200,112,.06)}
@keyframes boxFadeIn{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
.arrow-right{font-size:1.12rem;color:var(--text-faint);font-weight:600}

/* ═══ 排序动画 ═══ */
.sort-bar{display:flex;gap:5px;align-items:flex-end;justify-content:center;height:160px;padding:10px 0}
.sort-bar .bar{
  width:32px;background:linear-gradient(180deg,var(--primary),var(--primary-dim));
  border-radius:6px 6px 0 0;transition:all .35s cubic-bezier(.34,1.56,.64,1);
  display:flex;align-items:flex-start;justify-content:center;padding-top:5px;
  font-family:var(--code);font-size:.88rem;color:var(--bg-deep);font-weight:700;
  box-shadow:0 0 8px rgba(110,180,232,.25);position:relative;
}
.sort-bar .bar::after{
  content:attr(data-idx);position:absolute;bottom:-18px;font-size:.78rem;
  color:var(--text-faint);font-weight:400;
}
.sort-bar .bar.comparing{background:linear-gradient(180deg,var(--warning),#a07820);box-shadow:0 0 12px rgba(212,168,48,.45)}
.sort-bar .bar.sorted{background:linear-gradient(180deg,var(--success),#268236);box-shadow:0 0 10px rgba(78,200,112,.4)}
.sort-bar .bar.active{background:linear-gradient(180deg,var(--accent),#5c20b0);box-shadow:0 0 12px rgba(176,136,240,.45)}

/* ═══ 栈/队列可视化 ═══ */
.stack-visual{display:flex;flex-direction:column-reverse;align-items:center;gap:4px;padding:18px}
.stack-item{
  width:160px;padding:10px 16px;background:var(--bg-card);border:1px solid var(--primary-border);
  border-radius:8px;text-align:center;font-family:var(--code);font-size:1.12rem;
  transition:all .4s;animation:stackIn .3s ease;
}
@keyframes stackIn{from{opacity:0;transform:translateY(-18px)}to{opacity:1;transform:none}}

/* ═══ 自定义课程编辑器 ═══ */
#custom-editor-overlay{
  position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;
  background:rgba(7,12,20,.9);backdrop-filter:blur(16px);opacity:0;pointer-events:none;transition:all .4s;
  padding:20px;
}
#custom-editor-overlay.show{opacity:1;pointer-events:auto}
#custom-editor-box{
  max-width:700px;width:92%;
  max-height:calc(100vh - 40px);
  border-radius:18px;
  background:linear-gradient(135deg,var(--bg-panel),var(--bg-elevated));
  border:1px solid var(--primary-border);box-shadow:var(--shadow-lg);
  display:flex;flex-direction:column;overflow:hidden;animation:insightIn .4s ease;
}
#custom-editor-header{
  flex:0 0 auto;padding:18px 24px;display:flex;align-items:center;gap:16px;
  background:rgba(110,180,232,.04);border-bottom:1px solid rgba(110,180,232,.08);
}
#custom-editor-header h2{font-size:1.3rem;font-weight:700;color:var(--success)}
#custom-editor-body{flex:1 1 0;overflow-y:auto;padding:24px;box-sizing:border-box}
#custom-editor-body input,
#custom-editor-body textarea{box-sizing:border-box;width:100%!important}
#custom-editor-body textarea{min-height:200px;max-height:40vh;resize:vertical}

@media(max-width:1100px){:root{--sidebar-w:240px;--demo-w:420px;--lecture-min-w:320px}}

/* ═══ 课程切换过渡动画 ═══ */
#lecture-content{transition:opacity .25s ease,transform .25s ease}
#lecture-content.fade-out{opacity:0;transform:translateY(6px)}
#code-box{transition:opacity .2s ease}
#code-box.fade-out{opacity:.3}

/* ═══ 响应式：中小屏侧边栏折叠 ═══ */
@media(max-width:860px){
  #sidebar-toggle{display:flex}
  #sidebar{position:fixed;left:-280px;top:0;bottom:0;z-index:25;transition:left .3s ease;box-shadow:none}
  #sidebar.open{left:0;box-shadow:4px 0 24px rgba(0,0,0,.4)}
  #lecture{min-width:0!important}
  #demo{flex:0 0 100vw}
  #app{flex-direction:column}
  .anim-ctrl-row{flex-wrap:wrap}
  .speed-ctrl{order:10;width:100%}
}

/* ═══ 讲义 SVG 图示文字对比度修复 ═══
   SVG 内部 hardcode 的深色文字（#333/#555）在深色背景上不可见
   用 CSS filter 做亮度反转保护 */
.lecture-img svg{
  /* 提升暗色 SVG 中浅色背景图示的整体可读性 */
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.3));
}
/* 强制 SVG 内 text 继承亮色（针对没有指定 fill 的 text）*/
.lecture-img svg text:not([fill]),
.lecture-img svg text[fill=""],
.lecture-img svg text[fill="inherit"]{
  fill:var(--text-bright);
}
/* 将深色文字（视觉上接近黑色）用 CSS 反转为亮色
   原理：对 text 元素施加 brightness 过滤 */
.lecture-section svg text[fill="#333"],
.lecture-section svg text[fill="#333333"],
.lecture-section svg text[fill="#444"],
.lecture-section svg text[fill="#444444"],
.lecture-section svg text[fill="#555"],
.lecture-section svg text[fill="#555555"],
.lecture-section svg text[fill="#222"],
.lecture-section svg text[fill="#222222"],
.lecture-section svg text[fill="black"],
.lecture-section svg text[fill="#000"],
.lecture-section svg text[fill="#000000"]{
  fill:#dce4ec!important;
}

/* ═══ 讲义表格 ═══ */
.lecture-table{
  width:100%;border-collapse:collapse;margin:16px 0;
  font-size:1.05rem;border-radius:10px;overflow:hidden;
  border:1px solid rgba(110,180,232,.12);
}
.lecture-table th{
  background:rgba(110,180,232,.1);color:var(--primary);
  padding:12px 16px;text-align:left;font-weight:700;font-size:1.05rem;
  border-bottom:1px solid rgba(110,180,232,.15);
}
.lecture-table td{
  padding:11px 16px;color:var(--text-dim);
  border-bottom:1px solid rgba(255,255,255,.04);
  vertical-align:top;line-height:1.8;font-size:1rem;
}
.lecture-table td code{
  background:rgba(110,180,232,.1);padding:2px 10px;border-radius:4px;
  font-family:var(--code);font-size:.95rem;color:var(--primary);
}
.lecture-table tr:last-child td{border-bottom:none}
.lecture-table tr:hover td{background:rgba(110,180,232,.03)}

/* ═══ 操作表（op-table — 函数/方法速查表）═══ */
.op-table{width:100%;border-collapse:collapse;margin:16px 0;border-radius:10px;overflow:hidden;border:1px solid rgba(110,180,232,.12);font-size:1.05rem}
.op-table th{background:rgba(110,180,232,.1);color:var(--primary);padding:12px 16px;text-align:left;font-weight:700;font-size:1rem;border-bottom:1px solid rgba(110,180,232,.15)}
.op-table td{padding:11px 16px;color:var(--text-dim);border-bottom:1px solid rgba(255,255,255,.04);vertical-align:top;line-height:1.8;font-size:1rem;font-family:var(--code)}
.op-table tr:last-child td{border-bottom:none}
.op-table tr:hover td{background:rgba(110,180,232,.03)}

/* ═══ 讲义行内代码 — 更清晰 ═══ */
.lecture-section code{
  background:rgba(110,180,232,.1);
  padding:3px 10px;border-radius:5px;
  font-family:var(--code);font-size:1rem;
  color:#88d4f5;
  border:1px solid rgba(110,180,232,.15);
}

/* ═══ 讲义全屏弹窗代码 — 弹窗里空间更大可以稍大 ═══ */
#lecture-full-content pre.lecture-code,
#lecture-full-content .lecture-code pre,
#lecture-full-content .lecture-code>code{
  font-size:1.18rem!important;
  max-height:none!important;
}

/* 讲义内任意直接 h3/h4 安全间距（防止 .lecture-section 包裹遗漏导致重叠） */
#lecture-content > h3,
#lecture-content > h4,
#lecture-content > p { margin: 16px 0; }

/* ════════════════════════════
   讲义内嵌图表/图例样式
   ════════════════════════════ */

/* 讲义内嵌 SVG 容器（无卡片样式） */
.lecture-fig{
  display:flex;flex-direction:column;align-items:center;
  margin:16px 0;width:100%;max-width:100%;overflow:hidden;
}
.lecture-fig svg{
  width:100%;max-width:740px;height:auto;border-radius:8px;
}
.lecture-fig .fig-caption{
  text-align:center;font-size:.92rem;color:var(--text-muted);
  margin-top:8px;font-style:italic;line-height:1.5;
}

/* 讲义中的步骤编号列表 */
.lecture-steps{
  counter-reset:step-counter;
  list-style:none;padding:0;margin:12px 0;
}
.lecture-steps li{
  counter-increment:step-counter;
  padding:6px 0 6px 36px;
  position:relative;line-height:1.6;
  border-bottom:1px solid rgba(255,255,255,.04);
}
.lecture-steps li::before{
  content:counter(step-counter);
  position:absolute;left:0;top:6px;
  width:26px;height:26px;line-height:26px;
  text-align:center;border-radius:50%;
  background:var(--accent);color:#fff;
  font-size:.85rem;font-weight:700;
}

/* 讲义中的关键词高亮框 */
.lecture-keyword{
  display:inline-block;
  background:rgba(110,180,232,.12);
  border:1px solid rgba(110,180,232,.3);
  border-radius:4px;padding:0 8px;
  font-family:var(--code);font-size:.95rem;
  color:var(--accent);
}

/* 复杂度对比卡片 */
.lecture-complexity{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:10px;margin:12px 0;
}
.lecture-complexity .cmp-card{
  background:rgba(20,30,42,.5);border-radius:10px;
  padding:12px;text-align:center;
  border:1px solid rgba(110,180,232,.1);
}
.lecture-complexity .cmp-card .cmp-val{
  font-size:1.1rem;font-weight:700;color:var(--accent);
  font-family:var(--code);
}
.lecture-complexity .cmp-card .cmp-label{
  font-size:.82rem;color:var(--text-muted);margin-top:4px;
}
.lecture-complexity .cmp-card.best{border-color:rgba(78,200,112,.3);}
.lecture-complexity .cmp-card.best .cmp-val{color:var(--success);}
.lecture-complexity .cmp-card.worst{border-color:rgba(232,96,88,.3);}
.lecture-complexity .cmp-card.worst .cmp-val{color:var(--danger);}

/* DFS动画补充样式 */
.dfs-info{font-size:.88rem;color:var(--text-dim);text-align:center;padding:2px 10px;font-family:var(--code);min-height:18px}

/* BFS交互可视化 */
.bfs-wrap{background:#0a1520;border-radius:14px;padding:16px;margin:12px 0}
.bfs-wrap svg{width:100% !important;height:auto !important;max-height:320px;display:block;background:rgba(16,26,40,.5);border-radius:10px}
.bfs-queue-box{background:rgba(0,0,0,.3);border-radius:8px;padding:8px 12px;margin-top:8px;min-height:32px;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-family:var(--code);font-size:1rem}
.bfs-queue-item{background:#b088f044;border:1px solid #b088f088;border-radius:4px;padding:3px 10px;color:#b088f0}
.bfs-status{font-size:1rem;color:var(--text-dim);margin-top:6px;text-align:center;padding:4px;min-height:20px}
.bfs-ctrl{display:flex;gap:8px;margin-top:8px;flex-wrap:wrap}
.bfs-btn{padding:6px 16px;border-radius:6px;border:1.5px solid;cursor:pointer;font-size:1rem;font-weight:600;background:transparent;transition:all .15s;color:#6eb4e8;border-color:#6eb4e8}
.bfs-btn:hover{filter:brightness(1.3);background:rgba(110,180,232,.1)}
.bfs-btn.reset{color:#888;border-color:#4a5a6a}
.bfs-btn.reset:hover{background:rgba(255,255,255,.05)}

/* 8位位运算交互模拟器 */
.bv-wrap{background:#0a1520;border-radius:14px;padding:16px;margin:12px 0}
.bv-row{display:flex;gap:4px;align-items:center;margin:4px 0}
.bv-label{min-width:60px;font-size:1rem;font-weight:600;font-family:var(--code)}
.bv-cell{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#112233;border:2px solid #334455;border-radius:6px;font-weight:700;font-size:1.12rem;color:#6688aa;cursor:pointer;transition:all .12s;user-select:none}
.bv-cell:hover{background:#223344;border-color:#ffd54f}
.bv-cell.on{background:#1a3a2a;border-color:#059669;color:#059669}
.bv-ctrl{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.bv-btn{padding:6px 14px;border-radius:6px;border:1.5px solid;cursor:pointer;font-size:1rem;font-weight:600;background:transparent;transition:all .15s}
.bv-btn:hover{filter:brightness(1.3)}
.bv-btn.and{color:#f0c040;border-color:#f0c040}
.bv-btn.or{color:#89ddff;border-color:#89ddff}
.bv-btn.xor{color:#b088f0;border-color:#b088f0}
.bv-btn.not{color:#dc2626;border-color:#dc2626}
.bv-btn.shift{color:#4ec870;border-color:#4ec870}
.bv-btn.reset{color:#888;border-color:#4a5a6a}

/* ═══ 搜索框 ═══ */
#search-input::placeholder{color:var(--text-faint)}
#search-input:focus{border-color:var(--primary);box-shadow:0 0 0 2px rgba(110,180,232,.12)}
.search-result-item:hover{background:rgba(110,180,232,.06)}
.search-result-item:last-child{border-bottom:none!important}

/* ═══ 通用卡片样式（随堂练习 + 编程题）═══ */
.q-item,.q-sample{width:100%;min-width:100%;box-sizing:border-box;background:linear-gradient(135deg,rgba(16,26,40,.7),rgba(20,32,48,.5));border:1px solid #2a3a4a;border-radius:12px;padding:16px 20px;margin:14px 0;transition:border-color .2s,box-shadow .2s}
.q-item:hover,.q-sample:hover{border-color:#3a4a5a;box-shadow:0 2px 12px rgba(0,0,0,.15)}
.q-num{display:inline-block;background:linear-gradient(135deg,#6eb4e8,#4a8cc8);color:#0a1520;font-weight:800;font-size:.88rem;border-radius:6px;padding:3px 12px;margin-bottom:10px;letter-spacing:.3px;box-shadow:0 2px 8px rgba(110,180,232,.2)}
.q-text{font-size:1rem;line-height:1.8;margin-bottom:10px;color:#d0dce8;font-weight:500}
.q-opts,.q-item .q-opts{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.q-opts label,.q-item label{display:flex;align-items:center;gap:8px;font-size:1rem;color:#b0c4d4;cursor:pointer;padding:6px 10px;border-radius:8px;transition:all .15s;width:100%;box-sizing:border-box;border:1px solid transparent}
.q-opts label:hover,.q-item label:hover{background:rgba(110,180,232,.06);border-color:rgba(110,180,232,.12);color:#d0dce8}
.q-opts input[type=radio],.q-item input[type=radio]{accent-color:#6eb4e8;cursor:pointer;width:16px;height:16px}
.q-item button:not(.chk-btn),.q-item .chk-btn{padding:6px 18px;border-radius:6px;border:1.5px solid #4ec870;background:linear-gradient(135deg,rgba(78,200,112,.08),rgba(78,200,112,.04));color:#4ec870;font-size:.94rem;font-weight:600;cursor:pointer;transition:all .2s;margin-top:6px;letter-spacing:.3px}
.q-item button:not(.chk-btn):hover,.chk-btn:hover{background:rgba(78,200,112,.16);filter:brightness(1.2);box-shadow:0 2px 8px rgba(78,200,112,.2)}
.fb{font-size:.94rem;line-height:1.7;margin-top:10px;padding:10px 14px;background:rgba(0,0,0,.25);border-radius:8px;border-left:3px solid var(--primary);color:#c0d0e0}
.q-item p strong{color:#e0e8f0;font-size:1rem}
/* ── 编程题样式 ── */
.q-sample p{margin:8px 0;color:#c0d4e4;font-size:1rem;line-height:1.8}
.q-sample code{color:#6eb4e8;font-size:inherit}
.q-sample pre{background:#070d12;border-radius:8px;padding:14px 16px;margin:10px 0;overflow-x:auto;max-height:360px;border:1px solid rgba(110,180,232,.08)}
.q-sample pre code{background:transparent;padding:0;color:#e6edf3;font-size:.94rem;line-height:1.7;white-space:pre-wrap}
/* ── 编程练习标题/摘要 ── */
.ex-title{display:flex;align-items:center;gap:8px;font-size:1.06rem;font-weight:700;color:#e0e8f0;margin-bottom:10px;padding:8px 12px;background:rgba(110,180,232,.06);border-radius:8px;border-left:3px solid var(--primary);cursor:pointer;user-select:none;transition:background .2s}
.ex-title:hover{background:rgba(110,180,232,.1)}
.ex-title .ex-icon{font-size:1.2rem}
.ex-desc{font-size:1rem;color:#c0d4e4;line-height:1.9;margin-bottom:8px}
.ex-desc strong{color:#e0e8f0}
.ex-sample-box{background:#070d12;border:1px solid rgba(110,180,232,.1);border-radius:8px;padding:12px 16px;margin:10px 0;font-family:var(--code);font-size:1.05rem;line-height:1.8;color:#b0c8e0;white-space:pre-wrap;overflow-x:auto}
.ex-note{font-size:1.05rem;color:var(--warning);padding:8px 12px;margin:10px 0;background:rgba(212,168,48,.06);border-radius:6px;border-left:3px solid var(--warning);line-height:1.8}
/* ── 编程练习容器 ── */
.ex-box{width:100%;background:rgba(16,26,40,.5);border:1px solid #2a3a4a;border-radius:12px;padding:16px 20px;margin:14px 0;transition:border-color .2s}
.ex-box:hover{border-color:#3a4a5a}
.ex-box .ex-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ex-box .ex-tag{display:inline-block;background:rgba(110,180,232,.12);color:var(--primary);font-size:.75rem;font-weight:700;padding:2px 10px;border-radius:4px;letter-spacing:.5px;text-transform:uppercase}
.ex-box .ex-body{margin-top:6px}
/* ── 代码折叠块 ── */
.ex-code-wrap{border-radius:8px;overflow:hidden;margin:12px 0}
.ex-code-wrap .ex-code-summary{padding:8px 14px;background:rgba(110,180,232,.05);color:var(--primary);font-size:.88rem;font-weight:600;cursor:pointer;user-select:none;transition:background .15s}
.ex-code-wrap .ex-code-summary:hover{background:rgba(110,180,232,.1)}
.ex-code-wrap .ex-code-summary::-webkit-details-marker{color:var(--primary)}
.ex-code-wrap pre{margin:0;padding:14px 16px;background:#0a0f15;font-family:var(--code);font-size:1.05rem;line-height:1.8;overflow-x:auto}
.ex-code-wrap pre code,.ex-code-wrap pre code.hljs{background:transparent;padding:0;color:#e6edf3;font-size:1.05rem;font-family:var(--code);border:none}
.lecture-code code{border:none}
/* ── 冒泡排序思维演示小部件 ── */
.ex-bubble-demo{background:rgba(13,20,30,.6);border:1px solid rgba(110,180,232,.15);border-radius:10px;padding:14px 16px;margin:12px 0}
.ex-bubble-demo .ex-bubble-title{font-size:.88rem;color:var(--primary);font-weight:600;margin-bottom:8px;letter-spacing:.3px}
.ex-bubble-demo .ex-bubble-stage{display:flex;flex-direction:column;gap:8px}
.ex-bubble-demo .ex-bubble-bars{display:flex;align-items:flex-end;gap:3px;height:120px;padding:4px 0}
.ex-bubble-demo .ex-bubble-bar{flex:1;min-width:0;background:linear-gradient(180deg,#4a7ab5,#2a5a8a);border-radius:3px 3px 0 0;color:#e6edf3;font-size:.65rem;font-weight:700;text-align:center;display:flex;align-items:flex-end;justify-content:center;padding-bottom:2px;transition:all .25s ease;position:relative}
.ex-bubble-demo .ex-bubble-bar.ex-bubble-cmp{background:linear-gradient(180deg,#d4a830,#b08020);transform:scale(1.08);z-index:2;box-shadow:0 0 10px rgba(212,168,48,.4)}
.ex-bubble-demo .ex-bubble-bar.ex-bubble-swp{background:linear-gradient(180deg,#e85555,#c03030);transform:scale(1.12);z-index:2;box-shadow:0 0 12px rgba(232,85,85,.5)}
.ex-bubble-demo .ex-bubble-bar.ex-bubble-ok{background:linear-gradient(180deg,#3a9a5a,#2a7a4a);opacity:.7}
.ex-bubble-demo .ex-bubble-row{display:flex;gap:2px;justify-content:center}
.ex-bubble-demo .ex-bubble-cell{width:32px;height:34px;background:rgba(16,26,40,.6);border:1px solid #2a3a4a;border-radius:4px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;color:#e6edf3;transition:all .25s ease}
.ex-bubble-demo .ex-bubble-cell .ex-bubble-idx{font-size:.5rem;color:#5a6a7a;font-weight:400;line-height:1}
.ex-bubble-demo .ex-bubble-cell.ex-bubble-cmp{border-color:#d4a830;background:rgba(212,168,48,.12);transform:scale(1.06)}
.ex-bubble-demo .ex-bubble-cell.ex-bubble-swp{border-color:#e85555;background:rgba(232,85,85,.12);transform:scale(1.1)}
.ex-bubble-demo .ex-bubble-cell.ex-bubble-ok{border-color:#3a9a5a;background:rgba(58,154,90,.1);opacity:.6}
.ex-bubble-demo .ex-bubble-status{font-size:.82rem;color:var(--text-dim);text-align:center;min-height:20px;padding:4px 0}
.ex-bubble-demo .ex-bubble-btn{display:inline-block;margin:0 auto;padding:6px 18px;border:none;border-radius:6px;background:var(--primary);color:#fff;font-size:.88rem;font-weight:600;cursor:pointer;transition:all .2s}
.ex-bubble-demo .ex-bubble-btn:hover{background:#5a9ad8;transform:translateY(-1px)}
.ex-bubble-demo .ex-bubble-btn:active{transform:translateY(0)}

/* ── 答题区域底部间距 ── */
.q-item:last-child,.q-sample:last-child,.ex-box:last-child{margin-bottom:4px}

/* 8x8 Flood Fill 交互模拟器 */
.ff-wrap{background:#0a1520;border-radius:14px;padding:16px;margin:12px 0}
.ff-layout{display:flex;gap:12px;align-items:stretch}
.ff-grid{display:grid;grid-template-columns:repeat(8,1fr);gap:2px;max-width:360px;margin:0 auto}
.ff-cell{aspect-ratio:1;border-radius:4px;cursor:pointer;transition:all .25s ease;border:1.5px solid #2a3a4a;background:#112233;display:flex;align-items:center;justify-content:center;font-size:.82rem;color:#445566;font-weight:600;user-select:none}
.ff-cell:hover{border-color:#6eb4e8;background:#1a2a3a}
.ff-cell.wall{background:#0a0f15;border-color:#1a2a3a;color:#1a2a3a;cursor:default}
.ff-cell.wall:hover{background:#0a0f15;border-color:#1a2a3a}
.ff-cell.stack{background:#2a1a4a;border-color:#8855dd;color:#b088f0;transform:scale(1)}
.ff-cell.current{background:#4a3a10;border-color:#d4a830;color:#ffdd44;transform:scale(1.08);z-index:2;box-shadow:0 0 12px rgba(212,168,48,.5)}
.ff-cell.filled{background:#0a3a1a;border-color:#44cc66;color:#66ee88}
.ff-cell.start-cell{background:#1a3a2a;border-color:#4ec870;color:#4ec870;box-shadow:0 0 8px rgba(78,200,112,.4)}
.ff-stack-panel{background:#0d1820;border-radius:8px;padding:8px;min-width:80px;max-width:100px;display:flex;flex-direction:column}
.ff-stack-title{font-size:.82rem;color:#8899bb;text-align:center;padding:4px 0;border-bottom:1px solid #1a2a3a;margin-bottom:4px}
.ff-stack{flex:1;display:flex;flex-direction:column-reverse;gap:2px;overflow-y:auto;max-height:340px;padding:2px}
.ff-stack-item{background:#1a2a4a;border:1px solid #3a4a6a;border-radius:3px;padding:3px 8px;font-size:.82rem;color:#aabbdd;text-align:center;transition:all .2s}
.ff-stack-item.top{background:#2a1a4a;border-color:#8855dd;color:#c0a0ff}
.ff-stack-empty{font-size:.82rem;color:#445566;text-align:center;padding:12px 0}
.ff-step-desc{text-align:center;font-size:1rem;color:#b0c8e0;margin:6px 0;min-height:20px;padding:4px;background:#0d1820;border-radius:4px}
.ff-ctrl{display:flex;gap:6px;justify-content:center;flex-wrap:wrap;margin-top:6px;align-items:center}
.ff-btn{padding:5px 12px;border-radius:5px;border:1.5px solid;cursor:pointer;font-size:1rem;font-weight:600;background:transparent;transition:all .15s}
.ff-btn:hover{filter:brightness(1.3)}
.ff-btn:disabled{opacity:.4;cursor:default}
.ff-btn.play{color:#4ec870;border-color:#4ec870}
.ff-btn.play:hover:not(:disabled){background:rgba(78,200,112,.1)}
.ff-btn.stepb{color:#b088f0;border-color:#8855dd}
.ff-btn.stepb:hover:not(:disabled){background:rgba(136,85,221,.1)}
.ff-btn.reset{color:#889;border-color:#4a5a6a}
.ff-btn.reset:hover{background:rgba(255,255,255,.05)}
.ff-speed-lbl{font-size:.82rem;color:#667}
.ff-speed{width:70px;height:4px;cursor:pointer;accent-color:#4ec870;vertical-align:middle}
.ff-status{text-align:center;font-size:.82rem;color:#667;margin-top:4px;min-height:18px}

/* ── 编程题子元素（基类已与 .q-item 合并）── */
.q-sample p{margin:6px 0;color:#b0c8e0;font-size:1rem}
.q-sample code{color:#6eb4e8;font-size:inherit}
.q-sample pre{background:#070d12;border-radius:6px;padding:12px 14px;margin:8px 0;overflow-x:auto;max-height:360px}
.q-sample pre code{background:transparent;padding:0;color:#e6edf3;font-size:1rem;line-height:1.7;white-space:pre-wrap}
.q-divider{border:none;border-top:1px solid #1a2a3a;margin:18px 0}
.lecture-section h4{color:#6eb4e8;margin:14px 0 8px}
.lecture-section p strong[style]{color:inherit}
.lecture-section p{color:#c0d0e0;line-height:2.1}

/* ═══ 完成证书 ═══ */
#cert-overlay{
  position:fixed;inset:0;z-index:200;
  background:rgba(7,12,20,.88);backdrop-filter:blur(20px);
  opacity:0;pointer-events:none;transition:all .4s;
  display:flex;align-items:center;justify-content:center;
}
#cert-overlay.show{opacity:1;pointer-events:auto;}
#cert-box{
  max-width:640px;width:90%;border-radius:20px;
  background:linear-gradient(135deg,#0f1a28,#1a2a3e);
  border:2px solid rgba(110,180,232,.2);
  box-shadow:0 12px 60px rgba(0,0,0,.5);
  animation:insightIn .5s ease;overflow:hidden;
}
#cert-header{
  text-align:center;padding:30px 20px 10px;
  background:linear-gradient(180deg,rgba(110,180,232,.08),transparent);
}
#cert-badge{font-size:72px;margin-bottom:8px;}
#cert-header h2{
  font-size:26px;font-weight:800;color:#dce4ec;
  background:linear-gradient(135deg,#6eb4e8,#b088f0);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  background-clip:text;
}
#cert-body{padding:20px 36px;text-align:center;}
#cert-student-name{font-size:22px;font-weight:700;color:#e8eef4;margin:12px 0;}
#cert-course-name{font-size:1rem;color:#b0c4d8;line-height:1.8;margin:10px 0;}
#cert-date{font-size:.94rem;color:#6a7a8a;margin:8px 0;}
#cert-stats{
  display:flex;justify-content:center;gap:16px;flex-wrap:wrap;
  margin:24px 0 10px;
}
#cert-stats span{
  background:rgba(110,180,232,.08);border:1px solid rgba(110,180,232,.12);
  padding:8px 16px;border-radius:20px;font-size:.88rem;color:#8090a0;
}
#cert-footer{
  display:flex;justify-content:center;gap:12px;
  padding:16px 20px 24px;
}

/* opencode-ui-fix: unify small animation text sizes */
.anim-stage .v-name { font-size: .92rem; }
.anim-stage .v-val { font-size: 1.8rem; }
.anim-stage .arr-cell { font-size: 1.05rem; }
.anim-stage .arr-cell .idx { font-size: .85rem; }
.anim-stage .bs-cell { font-size: 1rem; }
.anim-stage .loop-code { font-size: 1rem; }
.anim-stage .loop-box { width: 88px; height: 88px; }
.anim-stage .loop-box .lb-name { font-size: .9rem; }
.anim-stage .loop-box .lb-val { font-size: 1.6rem; }
.anim-stage .out-box { font-size: 1.05rem; }
.anim-stage .arr-status { font-size: 1rem; }
.anim-stage .think-tbl { font-size: .95rem; }
.anim-stage .nested-cell { font-size: .88rem; }
.anim-stage .bisect-title { font-size: 1.15rem; }
.anim-stage .bisect-step-info { font-size: 1.05rem; }
.anim-stage .ins-part-label { font-size: .88rem; }
.anim-stage .bs-bkt-label { font-size: .88rem; }
.anim-stage .bs-bkt-items { font-size: .85rem; }
.anim-stage .loop-arrow { font-size: 1.6rem; }
.anim-stage .loop-out-box { font-size: 1.05rem; }
.anim-stage .loop-prog-label { font-size: .9rem; }
.anim-stage .anim-status { font-size: 1rem; }
.anim-stage .bisect-range-label { font-size: 1rem; }
.anim-stage .bigcalc-title { font-size: 1.2rem; }
.anim-stage .bigcalc-cell { font-size: 1.05rem; }
.anim-stage .bigcalc-label { font-size: .95rem; }
.anim-stage .bigcalc-status { font-size: 1rem; }
.anim-stage .bigcalc-legend { font-size: .88rem; }
.anim-stage .call-frame .cf-name { font-size: .9rem; }
.anim-stage .call-frame .cf-val { font-size: 1.3rem; }
.anim-stage .call-ret { font-size: .95rem; }
.anim-stage .mem-addr { font-size: .85rem; }
.anim-stage .mem-name { font-size: .88rem; }
.anim-stage .ptr-arrow { font-size: .95rem; }
.anim-stage .var-box .vb-value { font-size: 1.6rem; }
.anim-stage .var-box .vb-label { font-size: .9rem; }
.anim-stage .var-box .vb-type { font-size: .85rem; }
.anim-stage .str-char .sc-idx { font-size: .82rem; }
.anim-stage .array-cell .ac-idx { font-size: .82rem; }
.anim-stage .array-cell .ac-val { font-size: 1.1rem; }
.anim-stage .step-toggle { font-size: .95rem; }
.anim-stage .btn-step { font-size: .95rem; }
.anim-stage .bfs-queue-item { font-size: .9rem; }
/* Ensure animation stage content doesn't overflow */
.anim-stage { overflow-x: hidden; overflow-y: auto; }
.anim-stage .v-row { flex-wrap: wrap; }
.anim-stage .arr-row { flex-wrap: wrap; 
/* GESP/CSP question block - unified styling */
.q-item.gesp-block {
  background: linear-gradient(135deg, #0d1f2e, #0f2a3a) !important;
  border-left: 4px solid #b088f0 !important;
  border-top: none !important;
  border-right: none !important;
  border-bottom: none !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  margin: 12px 0 !important;
}
.q-item.gesp-block .gesp-title {
  color: #b088f0;
  font-weight: 700;
  font-size: 1.05em;
  margin: 0 0 6px 0;
}
.q-item.gesp-block .gesp-text {
  color: #c0d8e8;
  margin: 0 0 8px 0;
  line-height: 1.6;
}
.q-item.gesp-block .gesp-option {
  display: block;
  padding: 4px 0;
  color: #a0b8c8;
  cursor: pointer;
}
.q-item.gesp-block .gesp-option:hover { color: #c8e0f0; }
.q-item.gesp-block .gesp-option input { margin-right: 6px; }
.q-item.gesp-block .chk-btn { margin-top: 6px; }

}