/* ============================================================
   码界造物（信息科技学科子栏目）· 专属样式
   ------------------------------------------------------------
   · 本文件只写三件事：
       ① 把通用件的容器宽度、纵向节奏按 #code-root 重新界定；
       ② 信息科技专属的图形件（时间带 / 语言谱系 / 算法舞台 /
          代码编辑器 / 控制台 / 像素网格 / 密码强度条 / 进度条）；
       ③ 代码字体与「终端」配色 —— 这一处**故意不跟随皮肤**：
          代码高亮、报错红、通过绿是行业约定，换皮肤不该把它换掉。
   · 卡片 / 页签 / 按钮 / 表格 / 弹窗 / 轻提示等通用件一律复用
     public/math/style.css 里的 .m-* 组件（五栏共用同一套契约），
     本文件**不重写**它们，否则菜单样式会在栏目之间漂移。
   ============================================================ */

/* 根选择器必须是 #code-root —— 信息科技页的真实容器是 index.html 里的 <div id="code-root">。 */
#code-root .m-wrap { max-width: 1100px; margin: 0 auto; padding-bottom: 40px; }

/* ---- 纵向节奏（折叠屏非整数 DPR 上「模块重叠」的成因，见数学页同款注释） ----
   间距不能只靠某个盒子的 padding 撑着，要显式给到相邻兄弟。 */
#code-root .m-head { margin-bottom: 0; }
#code-root .m-head + *,
#code-root .m-segbtn + *,
#code-root .m-segbtn + .m-segbtn,
#code-root .m-pane > * + * { margin-top: 16px; }

/* ---- 等宽字体与终端配色（定值，不随皮肤变） ---- */
#code-root {
  --cd-mono: "Cascadia Code", "JetBrains Mono", "Fira Code", Consolas, "SF Mono", Menlo, monospace;
  --cd-ok: #2e9e5b;      /* 通过 */
  --cd-no: #d9534f;      /* 未通过 */
  --cd-warn: #d9803f;    /* 提示 */
  --cd-code-bg: #12161f;
  --cd-code-fg: #d8dee9;
  --cd-code-dim: #7c8695;
}

/* ---- 引言装饰（顺 · 循 · 环 · 分 · 支）---- */
.cd-deco { display: flex; gap: 14px; justify-content: center; margin-top: 18px; }
.cd-deco span { font-family: var(--cd-mono); font-size: 20px; color: var(--accent2, var(--accent));
  border: 1px solid var(--line); border-radius: 10px; width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center; background: var(--panel2); }

/* ---- 通用小字条 ---- */
#code-root .m-slip { font-size: 12px; color: var(--tx3); line-height: 1.85; margin-top: 12px;
  border: 1px dashed var(--line); border-radius: 10px; padding: 10px 12px; background: var(--panel2); }

/* ============================================================
   一、矢量图通用壳（时间带 / 语言谱系 / 版本演进 / 竞赛路径 / 图遍历）
   ------------------------------------------------------------
   超窄屏（折叠屏外屏 320px 左右）下 SVG 会缩到看不清字，
   这里允许横向滚动而不是继续压缩。
   ============================================================ */
.cd-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.cd-svg { display: block; width: 100%; min-width: 520px; height: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.cd-svg-tall { min-width: 460px; }
.cd-scroll-wrap > svg { display: block; }

/* ============================================================
   硅基地图 · 第二层（开源社区）与「时间轴 ↔ 地图」联动
   ------------------------------------------------------------
   两层叠在一张底图上，必须让用户一眼看出「现在开着几层、哪些点属于哪层」：
   所以开关按钮本身带计数（不是只写「显示开源社区」），两个层的圆点形状也不同
   （计算史＝实心，开源＝空心）。
   ============================================================ */
.cd-layerbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 2px; }
.cd-lay-btn { font: inherit; font-size: 12.5px; cursor: pointer; padding: 5px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--panel2); color: var(--tx2); transition: .18s; }
.cd-lay-btn:hover { border-color: var(--accent); color: var(--tx); }
.cd-lay-btn.on { background: var(--accent); border-color: var(--accent); color: var(--onAccent); font-weight: 700; }
.cd-lay-note { font-size: 12px; color: var(--tx3); line-height: 1.8; }

/* 时间带上的可点节点：整组可点（点圆点、点年份文字都算），
   否则「横轴上的小字」几乎点不中 —— 10px 的文字在手机上只有几像素宽。 */
.cd-tl-hit { cursor: pointer; }
.cd-tl-hit:hover circle { stroke: var(--tx); stroke-width: 2; }
/* 被联动选中的那一处：闪一下再常亮。**过渡必须有**，
   否则「点一下只是变个色」在小圆点上根本看不出来。 */
.cd-tl-hit.is-hit circle { stroke: var(--accent); stroke-width: 3; }
.cd-tl-hit.is-hit text { font-weight: 700; fill: var(--accent); }
.cd-node-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.cd-node { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; background: var(--panel2);
  cursor: pointer; transition: .18s; }
.cd-node:hover { border-color: var(--accent); }
.cd-node.is-hit { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accentRGB), .22); }
.cd-node b { display: block; color: var(--tx); font-size: 13.5px; }
.cd-node i { font-style: normal; font-size: 11.5px; color: var(--tx3); }
.cd-node span { display: block; margin-top: 5px; font-size: 12.5px; color: var(--tx2); line-height: 1.75; }
.cd-os-flag { display: inline-block; font-size: 10.5px; padding: 0 6px; border-radius: 999px;
  border: 1px solid var(--accent2); color: var(--accent2); margin-left: 6px; vertical-align: 1px; }

/* ---- 图遍历：节点与标签（颜色由 JS 逐帧写 style，这里只管几何与过渡） ---- */
.cd-graph { display: block; width: 100%; min-width: 480px; height: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.cd-gn { transition: fill .22s ease, stroke .22s ease; }
.cd-gt { font-family: var(--cd-mono); user-select: none; }
.cd-qbox { margin-top: 10px; border-top: 1px dashed var(--line); padding-top: 10px; }
.cd-cell { display: inline-block; font-family: var(--cd-mono); font-size: 12.5px; color: var(--accent);
  background: rgba(var(--accentRGB), .16); border: 1px solid var(--line);
  border-radius: 6px; padding: 1px 8px; margin: 2px 4px 2px 0; }

/* ============================================================
   二叉树遍历（算法可视化 · 二叉树）
   ------------------------------------------------------------
   节点四态与配色**全部走主题变量**（换皮肤时整张图跟着变）：
     已记下 → --accent 实心 + --onAccent 字 + --accent2 序号角标
     当前   → 与「已记下」同一档实心，靠**几何**区分（圆更大、描边更粗、字加粗）。
              刻意不再引入第三个底色：浅色皮肤里 --accent3 配 --onAccent
              的对比度只有约 2.3:1，用颜色区分会把「当前节点」的字糊掉。
     在栈里 → accent 的 16% 透明填充 + 虚线描边
     未访问 → --cardF/--panel 底 + --line 描边
   ============================================================ */
.cd-tree { display: block; width: 100%; min-width: 420px; height: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: 12px; }
.cd-tree-grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr);
  gap: 12px; align-items: start; }
.cd-tree-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cd-tree-chips { display: flex; flex-wrap: wrap; }
.cd-cell.on { color: var(--onAccent); background: var(--accent); border-color: var(--accent); font-weight: 700; }
.cd-cell.ghost { color: var(--tx3); background: transparent; border-style: dashed; }
.cd-tree-empty { font-size: 12.5px; color: var(--tx3); }
.cd-tree-why { font-size: 12.5px; line-height: 1.8; color: var(--tx2); margin-top: 6px; }
.cd-tree-code { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; background: var(--panel2); }
.cd-cl { font-family: var(--cd-mono); font-size: 12px; line-height: 1.9; color: var(--tx3);
  border-radius: 6px; padding: 0 6px; white-space: pre; overflow-x: auto; }
.cd-cl-h { color: var(--tx2); }
.cd-cl.on { color: var(--onAccent); background: var(--accent); font-weight: 700; }
.cd-tree-seq, .cd-tree-work { border-top: 1px dashed var(--line); padding-top: 8px; }
.cd-tree-kind { margin-top: 8px; }
.cd-tree-all { margin-top: 12px; }
.cd-tree-od { font-family: var(--cd-mono); color: var(--tx2); }
.cd-tree-row.on td { background: rgba(var(--accentRGB), .12); color: var(--tx); font-weight: 700; }
.cd-tree-now { margin-left: 8px; font-size: 11px; color: var(--accent); }

/* ============================================================
   二、算法可视化舞台
   ============================================================ */
.cd-stage { display: flex; flex-direction: column; gap: 10px; }
.cd-canvas-box { position: relative; border: 1px solid var(--line); border-radius: 12px;
  background: var(--panel); overflow: hidden; }
/* 播放器里的 canvas 一律撑满容器宽度；高度由 JS 按 baseW/baseH 的比值算出来 */
.cd-canvas-box canvas { display: block; width: 100%; height: auto; touch-action: manipulation; }
.cd-player { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cd-player .m-btn { padding: 7px 14px; font-size: 13px; }
.cd-player .m-stat-line { margin: 0 0 0 auto; }
.cd-legend { display: flex; flex-wrap: wrap; gap: 6px; }
.cd-legend .m-stage-chip { font-family: var(--cd-mono); }

/* 复选框行（例：冒泡的提前结束开关） */
.cd-opts { display: flex; flex-direction: column; gap: 8px; margin: 10px 0; }
.cd-opt { display: flex; align-items: center; gap: 8px; font-size: 12.8px; color: var(--tx2);
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 12px;
  cursor: pointer; line-height: 1.7; }
.cd-opt:hover { border-color: var(--accent); color: var(--tx); }
.cd-opt input { accent-color: var(--accent); flex: 0 0 auto; }

/* ============================================================
   三、代码实验室 / 在线 IDE
   ------------------------------------------------------------
   编辑器是「带行号的 textarea」：行号靠 CSS 计数器画在左侧留白里，
   这样不必同步两个滚动容器。写的是代码，所以等宽 + 深底 + 高对比，
   并且**不跟皮肤**（换浅色皮肤时终端仍然是深色的，和真的一样）。
   ============================================================ */
.cd-ide { display: flex; flex-direction: column; gap: 12px; }
.cd-ide-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.cd-editor-host, .cd-out-host { min-width: 0; }

.cd-editor { position: relative; }
.cd-code {
  display: block; width: 100%; box-sizing: border-box;
  font-family: var(--cd-mono); font-size: 13px; line-height: 1.75;
  color: var(--cd-code-fg); background: var(--cd-code-bg);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 12px 14px 12px 46px; resize: vertical; tab-size: 2;
  white-space: pre; overflow: auto; caret-color: var(--accent);
  background-image: linear-gradient(to right, rgba(255,255,255,.045) 36px, transparent 36px);
  background-repeat: no-repeat;
}
.cd-code:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accentRGB), .25); }
.cd-code::selection { background: rgba(var(--accentRGB), .35); }

/* 控制台：也是终端样式，行按类型着色 */
.cd-console {
  font-family: var(--cd-mono); font-size: 12.5px; line-height: 1.8;
  color: var(--cd-code-fg); background: var(--cd-code-bg);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; min-height: 96px; max-height: 340px; overflow: auto;
  word-break: break-word;
}
.cd-console:empty::before { content: '（还没有输出）'; color: var(--cd-code-dim); }
.cd-console-line { white-space: pre-wrap; }
.cd-console-line + .cd-console-line { margin-top: 2px; }
.cd-console-line.cd-ok  { color: #7ee2a8; }
.cd-console-line.cd-no  { color: #ff9a94; }
.cd-console-line.cd-err { color: #ff9a94; font-weight: 700; }
.cd-console-line.cd-log { color: var(--cd-code-fg); }
.cd-console-line.cd-tip { color: #ffd79a; }
.cd-console-line.cd-tip b { color: #ffe9bf; }
.cd-j { color: #8fd3ff; }

/* AI 提示区：两个幽灵按钮 + 输出位 */
.cd-hint { display: flex; flex-direction: column; gap: 8px; }
#code-root .m-ai-out:empty { display: none; }

/* ============================================================
   四、智能造物间 · k-NN 手写数字识别
   ============================================================ */
.cd-ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
.cd-ai-col { min-width: 0; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; background: var(--panel2); }
.cd-panel-t { font-size: 12.5px; color: var(--accent); letter-spacing: .5px; line-height: 1.7; margin-bottom: 10px; }
.cd-ai-ctrl { display: flex; flex-direction: column; gap: 4px;
  /* 这一条原先没有外边距：上面一片样本栅格、这一排控件、下面又一片栅格，
     三块之间实测 0px，看上去像一整块糊在一起。上下各留 12px 把它分出来。 */
  margin: 12px 0; }
/* 代码实验室：控制台与下方提示是一上一下两块，别贴着 */
.cd-out-host > * + * { margin-top: 12px; }

/* 样本小图（8×8 像素网格） */
.cd-samples { display: flex; flex-wrap: wrap; gap: 8px; }
.cd-sample { border: 1px solid var(--line); border-radius: 8px; padding: 3px; background: var(--panel);
  cursor: pointer; transition: transform .12s, box-shadow .12s, opacity .15s; text-align: center; }
.cd-sample:hover { transform: translateY(-2px); box-shadow: 0 5px 14px rgba(0,0,0,.14); }
.cd-sample.on { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(var(--accentRGB), .28); }
.cd-sample-l { font-family: var(--cd-mono); font-size: 11px; color: var(--tx2); margin-top: 2px; }
/* 停用（点掉）的训练样本要一眼看出来 */
.cd-sample:not(.on) { opacity: .45; }
.cd-samples[data-role="test"] .cd-sample { cursor: default; opacity: 1; }
.cd-samples[data-role="test"] .cd-sample:hover { transform: none; box-shadow: none; }

/* 像素网格本体：等比缩放，格子边界靠 rect 的 stroke 画 */
.cd-grid { display: block; width: 34px; height: 34px; background: var(--panel2); border-radius: 4px; }
.cd-draw { display: flex; justify-content: center; }
.cd-grid-draw { width: 168px; height: 168px; max-width: 100%; border: 1px solid var(--line);
  border-radius: 8px; touch-action: none; }

/* 猜一猜的结果 */
.cd-guess { margin-top: 12px; text-align: center; }
.cd-guess-num { font-family: var(--cd-mono); font-size: 42px; line-height: 1; color: var(--accent); font-weight: 700; }
.cd-nb { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.cd-nb-i { display: flex; flex-direction: column; align-items: center; gap: 2px; font-family: var(--cd-mono);
  font-size: 11px; color: var(--tx3); border: 1px solid var(--line); border-radius: 8px; padding: 4px 6px;
  background: var(--panel); }
.cd-nb-i b { color: var(--accent); font-size: 12px; }
.cd-nb-i i { font-style: normal; }
.cd-nb-i .cd-grid { width: 26px; height: 26px; }

/* 评估表：每条测试样本一行，对错用左边框标出 */
.cd-eval { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow: auto; }
.cd-eval-row { display: flex; align-items: center; gap: 8px; font-family: var(--cd-mono); font-size: 11.5px;
  color: var(--tx3); border: 1px solid var(--line); border-left-width: 3px; border-radius: 8px;
  padding: 3px 8px; background: var(--panel); }
.cd-eval-row.ok { border-left-color: var(--cd-ok); }
.cd-eval-row.no { border-left-color: var(--cd-no); }
.cd-eval-row .cd-grid { width: 24px; height: 24px; }
.cd-eval-sum { font-size: 12.5px; color: var(--tx2); margin-top: 8px; }
.cd-eval-sum b { color: var(--accent); font-size: 15px; }
.cd-eval-note:empty { display: none; }

/* ============================================================
   五、数字安全与信息素养
   ============================================================ */
/* 情景描述（比普通正文更「像一道题」） */
.cd-scene { font-size: 14px; color: var(--tx); line-height: 1.95; background: var(--panel2);
  border-left: 3px solid var(--accent2, var(--accent)); border-radius: 0 12px 12px 0;
  padding: 12px 16px; margin: 6px 0 12px; }
#code-root .cd-opts .m-opt + .m-opt { margin-top: 8px; }

/* 结算数字（情景得分 / 题目得分共用） */
.cd-result { text-align: center; padding: 20px 0 10px; }
.cd-result-num { font-family: var(--cd-mono); font-size: 46px; line-height: 1; color: var(--accent); font-weight: 700; }
.cd-result-num span { font-size: 18px; color: var(--tx3); font-weight: 400; }
.cd-result-lab { font-size: 12.5px; color: var(--tx3); margin-top: 8px; letter-spacing: 2px; }

/* 密码强度自检 */
.cd-pwd { display: flex; flex-direction: column; gap: 10px; }
.cd-pwd-bar { height: 10px; border-radius: 99px; background: var(--panel2);
  border: 1px solid var(--line); overflow: hidden; }
.cd-pwd-bar i { display: block; height: 100%; width: 0; border-radius: 99px;
  background: var(--line); transition: width .28s ease, background .28s ease; }
.cd-pwd-verdict { font-size: 13px; color: var(--tx2); line-height: 1.8; }
.cd-pwd-verdict b { font-family: var(--cd-mono); }
.cd-pwd-checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.cd-check { font-size: 12.5px; color: var(--tx2); line-height: 1.7; border: 1px solid var(--line);
  border-left-width: 3px; border-radius: 8px; padding: 7px 11px; background: var(--panel2); }
.cd-check.ok { border-left-color: var(--cd-ok); }
.cd-check.no { border-left-color: var(--cd-warn); }

/* ============================================================
   六、项目造物营 / 信息学竞赛特训营 / 信息课堂
   ============================================================ */
.cd-task-title { font-size: 13.5px; font-weight: 700; color: var(--accent); letter-spacing: 1px; margin: 6px 0 10px; }

/* 横向流程（课堂环节）：一条线上的胶囊 + 箭头 */
.cd-flow { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 10px 0; }
.cd-flow-step { font-size: 12.5px; color: var(--tx2); background: var(--panel2); border: 1px solid var(--line);
  border-radius: 999px; padding: 5px 12px; }
.cd-flow-arrow { color: var(--accent); font-size: 13px; }

/* 纵向步骤（实施步骤 / 五步法）：编号圆点 + 文字 */
.cd-flow-col { display: flex; flex-direction: column; gap: 8px; }
.cd-flow-row { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; color: var(--tx2);
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px;
  padding: 10px 12px; line-height: 1.85; }
.cd-flow-idx { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%;
  font-family: var(--cd-mono); background: rgba(var(--accentRGB), .2); color: var(--accent);
  font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }

/* 知识点通过率看板 */
.cd-bars { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.cd-bar-row { display: flex; align-items: center; gap: 10px; font-size: 12.8px; color: var(--tx2); }
.cd-bar-n { flex: 0 0 118px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cd-bar { flex: 1; height: 10px; border-radius: 99px; background: var(--panel2);
  border: 1px solid var(--line); overflow: hidden; }
.cd-bar i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent2, var(--accent)), var(--accent)); }
.cd-bar-p { flex: 0 0 42px; text-align: right; font-family: var(--cd-mono); color: var(--accent); }
/* 滞留徽标：底色是**固定警示红**，刻意不跟随主题（警示色跨主题都该一眼认出），
   与人文栏 .hm-bar-flag 同一取值，两栏观感一致。
   原来用 var(--cd-warn)=#d9803f，白字压上去只有 2.95:1（11px 要 ≥4.5）；
   #C0392B 同色相压深一档 → 白字 5.44:1。
   ★ 注意：--cd-warn 本身仍是「提示」语义令牌，下面 border-left-color 继续用它；
     但**不能拿它当文字色**（见 .cd-mock-clock.is-low 那条注释）。 */
.cd-bar-flag { flex: 0 0 auto; font-size: 11px; color: #fff; background: #C0392B;
  border-radius: 999px; padding: 1px 8px; }

/* OJ 题的输入 / 输出格式说明（两栏，窄屏自动堆叠） */
.cd-io { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.cd-io > div { font-size: 12.5px; color: var(--tx3); line-height: 1.8; background: var(--panel2);
  border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.cd-io b { display: block; font-size: 12px; color: var(--accent); letter-spacing: 1px; margin-bottom: 4px; }
.cd-io div div { font-family: var(--cd-mono); color: var(--tx2); }

/* ---- 隐藏的运行沙箱 iframe ----
   它必须留在 DOM 里（sandbox="allow-scripts" 的 iframe 才能拿到 contentWindow），
   但绝不能占版面 —— 用 0 尺寸而不是 display:none：某些内核下 display:none
   的 iframe 不加载文档，postMessage 会石沉大海。 */
.cd-sandbox { position: absolute; width: 0; height: 0; border: 0; visibility: hidden; }

/* ============================================================
   语言阶梯：图形化积木 → Python → C++（内置小解释器）
   ============================================================ */
.cd-ladder-out { margin-top: 14px; }
.cd-ladder-grid { display: grid; grid-template-columns: 1fr 280px; gap: 14px; align-items: start; }
.cd-ladder-code { border: 1px solid var(--line); border-radius: 10px; background: var(--panel2); padding: 8px 6px; overflow-x: auto; }
.cd-ln { display: flex; gap: 10px; font-family: var(--cd-mono); font-size: 12.5px; color: var(--tx2);
  white-space: pre; padding: 1px 6px; border-radius: 5px; line-height: 1.9; }
.cd-ln.on { background: rgba(var(--accentRGB), .18); color: var(--tx); box-shadow: inset 3px 0 0 var(--accent); }
.cd-ln-no { flex: 0 0 22px; text-align: right; color: var(--tx3); user-select: none; }
.cd-ladder-side { display: flex; flex-direction: column; gap: 10px; }
.cd-ladder-ctrl { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cd-vars { display: flex; flex-direction: column; gap: 6px; min-height: 42px; }
.cd-var { display: flex; justify-content: space-between; gap: 10px; font-family: var(--cd-mono); font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; background: var(--panel2); }
.cd-var b { color: var(--accent); }
.cd-ladder-cmp { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cd-ladder-col { border: 1px solid var(--line); border-radius: 10px; padding: 10px; background: var(--panel2); }
.cd-ladder-h { font-size: 12.5px; font-weight: 700; color: var(--accent); margin-bottom: 6px; }
.cd-ladder-pre { font-family: var(--cd-mono); font-size: 12px; color: var(--tx2); line-height: 1.8; margin: 0;
  white-space: pre-wrap; word-break: break-word; }
.cd-gen { background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin: 4px 0 12px; }

/* 积木 */
.cd-palette { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.cd-block-btn { font-size: 12.5px; color: var(--tx); background: var(--panel2); border: 1px solid var(--accent);
  border-left-width: 5px; border-radius: 8px; padding: 7px 12px; cursor: pointer; }
.cd-block-btn:hover { background: rgba(var(--accentRGB), .14); }
.cd-block-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.cd-block-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 12.8px; color: var(--tx);
  border: 1px solid var(--accent); border-left-width: 5px; border-radius: 8px; padding: 7px 10px; background: var(--panel2); }
.cd-block-row.is-end { border-style: dashed; }
.cd-block-lab { color: var(--tx2); }
.cd-block-in { width: 66px; font-family: var(--cd-mono); font-size: 12.5px; padding: 3px 6px; border-radius: 6px;
  border: 1px solid var(--line); background: var(--cardF, var(--panel)); color: var(--accent); }
.cd-block-brace { color: var(--tx3); }
.cd-block-x { width: 26px; height: 24px; border-radius: 6px; border: 1px solid var(--line); background: transparent;
  color: var(--tx3); cursor: pointer; font-size: 12px; }
.cd-block-x:hover { color: var(--accent); border-color: var(--accent); }
.cd-sel { min-width: 140px; margin-right: 8px; }
.cd-gen-q { margin: 8px 0; }

/* 复杂度曲线 + 图例 */
.cd-cv-A { stroke: var(--accent); }
.cd-cv-B { stroke: var(--accent2, var(--accent)); }
.cd-cv-C { stroke: var(--tx3); stroke-dasharray: 5 4; }
.cd-cv-D { stroke: var(--tx3); stroke-dasharray: 2 4; }
.cd-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 8px 0 4px; font-size: 12px; color: var(--tx2); }
.cd-lg { display: inline-flex; align-items: center; gap: 6px; }
.cd-lg i { display: inline-block; width: 22px; height: 0; border-top: 2px solid currentColor; }
.cd-lg.cd-cv-A { color: var(--accent); } .cd-lg.cd-cv-B { color: var(--accent2, var(--accent)); }
/* ---- C/D 类连线图例：文字色不能用 --tx3 ----
   --tx3 是「三级弱化」令牌，语义是装饰。逐皮肤实算：它落在卡片面上只有 3.49~4.30:1
   （11 套皮肤里 10 套低于 AA 正文的 4.5，只有 senior 的 --tx3 够深）。
   这里 11.5px 的图例文字改成 --tx2（逐皮肤 5.64~10.53:1）。
   注意下面 .cd-cv-C/.cd-cv-D 的 stroke 仍用 --tx3 —— 描边是装饰，不在这条规则里。 */
.cd-lg.cd-cv-C, .cd-lg.cd-cv-D { color: var(--tx2); }
.cd-lg.cd-cv-C i { border-top-style: dashed; } .cd-lg.cd-cv-D i { border-top-style: dotted; }

/* 模考计时器
   ★ .cd-mock-clock.is-low 原来是 color: var(--cd-warn)=#d9803f。
     计时器是 44px 大字，按 WCAG 大字号只要 3:1，但 #d9803f 落在**浅色皮肤**的卡片面上
     实测只有 2.88~2.95:1 —— 连大字号都不过；深色皮肤上反倒有 5.25~5.49:1。
     一个固定色令牌没法同时适配深浅两套面，所以改用**按皮肤反算过的** --redTx
     （浅色皮肤给深红、深色皮肤给浅红），逐皮肤实测 4.57~9.15:1，两套面都过。 */
.cd-mock-clock { font-family: var(--cd-mono); font-size: 44px; line-height: 1.2; color: var(--accent);
  letter-spacing: 3px; margin: 6px 0 4px; }
.cd-mock-clock.is-low { color: var(--redTx); }

/* 教师端 · 机房下发 / 作品评价 */
.cd-pack { max-height: 200px; overflow: auto; background: var(--panel2); border: 1px solid var(--line);
  border-radius: 10px; padding: 10px 12px; }
.cd-assign { margin-top: 12px; border: 1px dashed var(--accent); border-radius: 10px; padding: 10px 12px; }
.cd-ev-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 8px 0; font-size: 13px; color: var(--tx2); }
.cd-ev-n { flex: 0 0 92px; font-weight: 700; color: var(--tx); }
.cd-ev-sel { width: 84px; }
.cd-note { font-size: 11.5px; color: var(--tx3); }

/* 链接识别 */
.cd-url { font-family: var(--cd-mono); font-size: 13px; color: var(--tx); line-height: 1.9;
  background: var(--panel2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px;
  word-break: break-all; }
.cd-io-line { display: flex; gap: 10px; font-size: 12.5px; color: var(--tx2); line-height: 1.9; }
.cd-io-line span { flex: 0 0 auto; color: var(--tx3); }
.cd-io-line b { font-family: var(--cd-mono); color: var(--accent); word-break: break-all; }

/* ============================================================
   URL 解剖图 + 结构体检表（链接识别）
   ------------------------------------------------------------
   网址被切成一段一个「车厢」，只有主域名那一段代表身份；
   判定结果那一版给主域名加 is-key 描边高亮。
   结构体检的六格是六条固定判据，命中几项亮几格 —— 逐格可复核。
   颜色全走主题变量（--green / --red / --accent / --line / --panel2）。
   ============================================================ */
.cd-url-map { display: flex; flex-wrap: wrap; gap: 6px; align-items: flex-start; margin: 10px 0 6px; }
.cd-useg { display: flex; flex-direction: column; gap: 3px; padding: 6px 9px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel2); }
.cd-useg b { font-family: var(--cd-mono); font-size: 13px; font-weight: 600; color: var(--tx); word-break: break-all; }
.cd-useg i { font-size: 10.5px; font-style: normal; color: var(--tx3); white-space: nowrap; }
.cd-useg.r-proto b { color: var(--blue, var(--tx)); }
.cd-useg.r-port b { color: var(--red); }
.cd-useg.r-user b, .cd-useg.r-prefix b, .cd-useg.r-path b { color: var(--tx2); }
.cd-useg.is-key { border-color: var(--accent); background: var(--cardB, var(--panel2));
  box-shadow: inset 0 0 0 1px var(--accent); }
.cd-useg.is-key b { color: var(--accent); font-weight: 800; }
.cd-useg.is-key i { color: var(--accent); }
.cd-url-cap { font-size: 12px; color: var(--tx3); line-height: 1.7; margin-bottom: 8px; }
.cd-url-cap b { color: var(--tx2); }

.cd-meter-wrap { margin: 8px 0 10px; }
.cd-meter { display: block; width: 100%; max-width: 230px; height: auto; }
.cd-mk.ok { fill: var(--green, var(--jade)); }
.cd-mk.no { fill: var(--red); }
.cd-mk-t { font-size: 13px; fill: var(--onAccent); }
.cd-meter-cap { font-size: 12.5px; line-height: 1.7; margin-top: 4px; }
.cd-meter-cap b.ok { color: var(--jadeTx, var(--jade)); }
.cd-meter-cap b.no { color: var(--redTx, var(--red)); }
.cd-meter-key { display: block; color: var(--tx2); }
.cd-meter-legend { font-size: 11.5px; color: var(--tx3); line-height: 1.7; margin-top: 2px; }

/* 闯关路径图（情景闯关 / 链接识别共用）：节点在轨道上，关卡编号在节点下方，
   四态 = 答对(--green) / 答错(--red) / 当前(--accent) / 未到(--line)。 */
.cd-trail-box { margin: 8px 0 10px; }
.cd-trail { display: block; width: 100%; min-width: 380px; height: auto; }
.cd-trail-rail { stroke: var(--line); stroke-width: 2; }
.cd-trail-node { fill: var(--panel2); stroke: var(--line); stroke-width: 2; }
.cd-trail-node.cur { fill: var(--accent); stroke: var(--accent); }
.cd-trail-node.ok { fill: var(--green, var(--jade)); stroke: var(--green, var(--jade)); }
.cd-trail-node.no { fill: var(--red); stroke: var(--red); }
/* 关卡编号：SVG 文字，前景是 fill（不是 color），所以这条要改 fill。
   原来用 --tx3（落卡片面 3.49~4.30:1，10/11 套皮肤不过 AA 正文），改 --tx2（5.64~10.53:1）。 */
.cd-trail-t { font-size: 11px; fill: var(--tx2); }
/* 同一条图注也是 --tx3 当正文，一并改 --tx2（.cd-trail-cap b 本来就已经是 --tx2） */
.cd-trail-cap { font-size: 12px; color: var(--tx2); line-height: 1.7; }
.cd-trail-cap b { color: var(--tx2); }

/* ============================================================
   信息课堂 · 学生端「我收到的作业」
   ------------------------------------------------------------
   与人文栏（hum/style.css 的 .hm-mine*）同构，只是前缀换成 cd-。
   一页纸读完一份作业：类型 / 成绩 / 标题与要求 / 提交情况 / 成绩来源。
   成绩徽标刻意**不用**强调色去画「待批改」——「待批改」不是成绩，
   给它上题目色会让人误以为那是分数；只有真的有分时才用 --accent。
   文字色一律 --tx2（不用 --tx3）：空态与提交状态是**要读**的说明，
   而 --tx3 是三级弱化令牌（语义是装饰），压在这类卡片面上会低于 AA。
   ============================================================ */
.cd-empty { border: 1px dashed var(--line); border-radius: 10px; padding: 12px 14px;
  font-size: 12.8px; line-height: 1.9; color: var(--tx2); background: var(--panel2); }
.cd-mine { margin-top: 12px; }
.cd-mine-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; font-size: 12.5px;
  border: 1px solid var(--line); border-radius: 9px; padding: 9px 11px; background: var(--panel2); }
.cd-mine-kind { flex: 0 0 auto; font-size: 11px; color: var(--accent); border: 1px solid var(--accent);
  border-radius: 999px; padding: 1px 9px; }
.cd-mine-sc { flex: 0 0 auto; font-weight: 700; color: var(--accent); }
.cd-mine-sc.wait { font-weight: 400; color: var(--tx2); }
.cd-mine-t { flex: 1 1 200px; font-size: 13.2px; color: var(--tx); line-height: 1.75; }
.cd-mine-t span { display: block; font-size: 11.5px; color: var(--tx2); margin-top: 3px; }
.cd-mine-note { flex: 1 1 100%; font-size: 11px; color: var(--tx2); line-height: 1.7; }
.cd-mine-sub { flex: 0 0 auto; font-size: 11px; border: 1px solid var(--line); border-radius: 999px;
  padding: 1px 9px; color: var(--tx2); }
.cd-mine-sub.done { border-color: var(--accent2, var(--accent)); color: var(--accent2, var(--accent)); }

/* ============================================================
   断点：与全站一致（1023 切移动布局、720 单列、480 收窄）
   ============================================================ */
@media (max-width: 1023px) {
  .cd-ide-grid, .cd-ai-grid, .cd-io { grid-template-columns: 1fr; }
  .cd-console { max-height: 260px; }
  .cd-ladder-grid { grid-template-columns: 1fr; }
  .cd-ladder-cmp { grid-template-columns: 1fr; }
  /* 二叉树：图与「伪码 + 顺序」并排在窄屏会被挤成两列细条，改成上下堆叠 */
  .cd-tree-grid { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
  .cd-svg { min-width: 460px; }
  .cd-svg-tall, .cd-graph { min-width: 400px; }
  .cd-tree { min-width: 400px; }
  .cd-bar-n { flex: 0 0 84px; }
  .cd-code { font-size: 12.5px; padding-left: 42px; }
  .cd-player .m-stat-line { margin-left: 0; flex: 1 1 100%; }
  .cd-pwd-checks { grid-template-columns: 1fr; }
  .cd-trail { min-width: 360px; }
  .cd-deco span { width: 36px; height: 36px; font-size: 18px; }
}
@media (max-width: 480px) {
  .cd-bar-row { flex-wrap: wrap; }
  .cd-bar { flex: 1 1 100%; order: 3; }
  .cd-guess-num { font-size: 34px; }
}