/*!
 * algo-drill.css — 信竞教练 · 算法学习板块（用户 50 道选择题定稿）
 *
 * 约定：
 *   · 类名统一 al- 前缀（不和 wd-/rd-/ed-/nb-/cl- 撞）
 *   · [hidden] 兜底必须带 !important（check-hidden-css）
 *   · 代码块自动换行（white-space: pre-wrap），不横向滚动 —— 用户明确要求
 *   · 打印：打开文章页点 🖨️ 时，只留文章内容（导出整页）
 */

.al-panel {
  position: fixed;
  inset: 0;
  z-index: 76;               /* 和背单词/文言同级，独立面板 */
  display: flex;
  flex-direction: column;
  background: var(--bg, #f5f7fb);
  color: var(--ink, #1c2634);
  font-size: 15px;
}

.al-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--bg-side, #fff);
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.al-back, .al-close, .al-print {
  width: 34px;
  height: 34px;
  border: none;
  border-radius: 10px;
  background: var(--bg-hover, #eef2f7);
  color: var(--ink-soft, #475569);
  font-size: 17px;
  cursor: pointer;
}
.al-back { margin-right: 2px; }
.al-titles { flex: 1 1 auto; min-width: 0; }
.al-title { font-size: 17px; font-weight: 800; }
.al-sub { font-size: 12px; color: var(--muted, #64748b); margin-top: 2px; }

/* 导航条 */
.al-nav {
  display: flex;
  gap: 6px;
  padding: 8px 12px;
  overflow-x: auto;
  background: var(--bg-side, #fff);
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.al-nav-b {
  flex: 0 0 auto;
  padding: 6px 11px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 999px;
  background: var(--bg, #f8fafc);
  color: var(--ink-soft, #475569);
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
}
.al-nav-b.is-on { background: var(--brand, #4d6bfe); border-color: var(--brand, #4d6bfe); color: #fff; font-weight: 700; }

.al-body { flex: 1 1 auto; overflow-y: auto; padding: 14px; }
.al-view { display: flex; flex-direction: column; gap: 12px; }

/* ── 算法地图 ── */
.al-map-title { font-size: 18px; font-weight: 800; }
.al-map-sum { font-size: 13px; color: var(--ink-soft, #475569); }
.al-map-sum b { color: var(--brand, #4d6bfe); }
.al-map-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.al-map-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 16px;
  background: var(--bg-side, #fff);
  text-align: left;
  cursor: pointer;
}
.al-map-card:active { background: var(--bg-hover, #eef2f7); }
.al-map-icon { font-size: 26px; }
.al-map-name { font-size: 15px; font-weight: 700; }
.al-map-desc { font-size: 12px; color: var(--muted, #64748b); line-height: 1.4; }
.al-map-count { font-size: 12px; color: var(--brand, #4d6bfe); font-weight: 600; }

/* ── 列表：筛选 + 搜索 + 卡片 ── */
.al-filters { display: flex; flex-direction: column; gap: 8px; }
.al-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.al-chip {
  padding: 5px 10px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 999px;
  background: var(--bg-side, #fff);
  color: var(--ink-soft, #475569);
  font-size: 12px;
  cursor: pointer;
}
.al-chip.is-on { background: var(--brand, #4d6bfe); border-color: var(--brand, #4d6bfe); color: #fff; font-weight: 700; }
.al-search {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 13px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  font-size: 15px;
  background: var(--bg-side, #fff);
  color: var(--ink, #1c2634);
}
.al-search:focus { outline: 2px solid var(--brand, #4d6bfe); }

.al-cards { display: flex; flex-direction: column; gap: 9px; }
.al-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 13px 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 14px;
  background: var(--bg-side, #fff);
  text-align: left;
  cursor: pointer;
}
.al-card:active { background: var(--bg-hover, #eef2f7); }
.al-card-top { display: flex; align-items: center; gap: 8px; }
.al-card-name { font-size: 16px; font-weight: 800; }
.al-card-line { font-size: 13px; color: var(--ink-soft, #475569); line-height: 1.5; }
.al-card-meta { display: flex; gap: 10px; font-size: 12px; color: var(--muted, #64748b); }
.al-card-cat { color: var(--brand, #4d6bfe); }
.al-diff { margin-left: auto; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.al-diff-d0 { background: #dcfce7; color: #166534; }   /* 入门：绿 */
.al-diff-d1 { background: #dbeafe; color: #1e40af; }   /* 普及：蓝 */
.al-diff-d2 { background: #ffedd5; color: #c2410c; }   /* 提高：橙 */
.al-diff-d3 { background: #ede9fe; color: #6d28d9; }   /* 省选：紫 */
.al-diff-d4 { background: #fee2e2; color: #b91c1c; }   /* NOI：红 */
.al-diff-d5 { background: #1f2937; color: #fbbf24; border: 1px solid #fbbf24; }   /* IOI：黑金 */

/* ── 文章页 ── */
.al-block {
  padding: 14px;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 16px;
  background: var(--bg-side, #fff);
}
.al-block-t { font-size: 14px; font-weight: 800; margin-bottom: 8px; color: var(--brand-strong, #3a56e0); }
.al-one-liner { font-size: 16px; font-weight: 700; line-height: 1.6; }
.al-para { margin: 8px 0 0; font-size: 14px; line-height: 1.8; color: var(--ink, #1c2634); }
.al-prereq { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 12px; }
.al-prereq-t { color: var(--muted, #64748b); }
.al-prereq-i { padding: 2px 9px; border-radius: 999px; background: var(--bg-hover, #eef2f7); color: var(--ink-soft, #475569); }
.al-cx { font-size: 14px; line-height: 1.7; }
.al-table { width: 100%; border-collapse: collapse; margin-top: 10px; font-size: 13px; }
.al-table th, .al-table td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line, #e2e8f0); }
.al-table th { color: var(--muted, #64748b); font-size: 12px; font-weight: 600; }

.al-diagram-box { overflow-x: hidden; }
.al-diagram { width: 100%; max-height: 420px; }

/* 代码块：自动换行（用户明确要求，不横向滚） */
.al-code-wrap { border: 1px solid var(--line, #e2e8f0); border-radius: 12px; overflow: hidden; }
.al-code-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--code-bg, #f1f5f9);
  border-bottom: 1px solid var(--line, #e2e8f0);
}
.al-code-lang { font-size: 12px; font-weight: 700; color: var(--ink-soft, #475569); }
.al-copy { margin-left: auto; padding: 4px 10px; border: 1px solid var(--line, #cbd5e1); border-radius: 8px; background: var(--bg-side, #fff); font-size: 12px; cursor: pointer; color: var(--ink, #1c2634); }
.al-copy:active { background: var(--bg-hover, #eef2f7); }
.al-copy-msg { font-size: 12px; color: #166534; }
.al-code {
  margin: 0;
  padding: 12px;
  max-height: 46vh;
  overflow: auto;
  font-family: ui-monospace, Consolas, "Courier New", monospace;
  font-size: 12.5px;
  line-height: 1.6;
  white-space: pre-wrap;      /* ★ 自动换行，不横向溢出 */
  word-break: break-word;
  color: var(--ink, #1c2634);
}
.al-code-sm { max-height: 34vh; }

/* 例题 / 易错点 / 真题 / 公式 / 术语 */
.al-ex { border: 1px dashed var(--line, #e2e8f0); border-radius: 12px; padding: 10px; margin-top: 10px; }
.al-ex-t { font-weight: 800; margin-bottom: 6px; }
.al-ex-p { font-size: 14px; line-height: 1.7; }
.al-ex-io { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; font-size: 12px; color: var(--ink-soft, #475569); }
.al-io { background: var(--bg-hover, #eef2f7); border-radius: 8px; padding: 3px 8px; }
.al-ex-idea { margin-top: 8px; font-size: 13px; line-height: 1.7; color: var(--ink, #1c2634); }

.al-list { margin: 0; padding-left: 20px; font-size: 14px; line-height: 1.9; }
.al-prob { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px dashed var(--line, #e2e8f0); font-size: 13px; }
.al-prob:last-child { border-bottom: none; }
.al-prob-t { font-weight: 700; }
.al-prob-src { color: var(--brand, #4d6bfe); }
.al-prob-note { color: var(--muted, #64748b); font-size: 12px; }

/* 公式：用 <sub>/<sup> 排版，居中放大 */
.al-formula { text-align: center; padding: 8px 0; }
.al-formula-e {
  display: inline-block;
  padding: 8px 14px;
  border-radius: 10px;
  background: var(--bg-hover, #eef2f7);
  font-size: 16px;
  font-family: "Cambria Math", "Times New Roman", serif;
  letter-spacing: .3px;
}
.al-formula-n { margin-top: 6px; font-size: 12px; color: var(--muted, #64748b); }

.al-term-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.al-term {
  padding: 5px 11px;
  border: 1px dashed var(--brand, #4d6bfe);
  border-radius: 999px;
  background: var(--bg, #f8fafc);
  color: var(--brand-strong, #3a56e0);
  font-size: 12px;
  cursor: pointer;
}
.al-term-desc { margin-top: 8px; min-height: 18px; font-size: 13px; line-height: 1.6; color: var(--ink-soft, #475569); }

/* 关键步骤填空 */
.al-fill { padding: 8px 0; border-bottom: 1px dashed var(--line, #e2e8f0); }
.al-fill:last-child { border-bottom: none; }
.al-fill-q { font-size: 14px; line-height: 1.9; }
.al-blank { color: var(--brand, #4d6bfe); }
.al-fill-in {
  margin-top: 6px;
  width: 100%;
  box-sizing: border-box;
  padding: 8px 11px;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 10px;
  font-size: 14px;
}
.al-fill-ans-row { display: flex; gap: 8px; align-items: center; margin-top: 6px; }
.al-fill-ans { font-size: 13px; color: #166534; }

/* 动画 */
.al-anim { display: flex; flex-direction: column; gap: 10px; }
.al-canvas {
  width: 100%;
  max-width: 520px;
  height: auto;
  margin: 0 auto;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 12px;
  background: #f8fafc;
}
.al-anim-row { display: flex; flex-wrap: wrap; gap: 8px; }

/* 按钮 */
.al-btn {
  padding: 9px 15px;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 12px;
  background: var(--bg-side, #fff);
  color: var(--ink, #1c2634);
  font-size: 14px;
  cursor: pointer;
}
.al-btn-main { background: var(--brand, #4d6bfe); border-color: var(--brand, #4d6bfe); color: #fff; font-weight: 700; }
.al-btn-sm { padding: 5px 10px; font-size: 12px; }
.al-btn:active { filter: brightness(.94); }

.al-article-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.al-progress { width: 100%; font-size: 13px; color: var(--ink-soft, #475569); }
.al-progress b { color: var(--brand, #4d6bfe); }

/* ── 专项题 ── */
.al-quiz-card { padding: 16px; border: 1px solid var(--line, #e2e8f0); border-radius: 16px; background: var(--bg-side, #fff); }
.al-quiz-prog { font-size: 12px; color: var(--muted, #64748b); }
.al-quiz-q { margin-top: 8px; font-size: 16px; font-weight: 700; line-height: 1.7; }
.al-quiz-opts { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.al-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 13px;
  border: 1px solid var(--line, #cbd5e1);
  border-radius: 12px;
  background: var(--bg, #fff);
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  color: var(--ink, #1c2634);
}
.al-opt.is-picked { border-color: var(--brand, #4d6bfe); }
.al-opt.is-right { border-color: #16a34a; background: #f0fdf4; }
.al-opt.is-wrong { border-color: #dc2626; background: #fef2f2; }
.al-opt-t { flex: 1 1 auto; }
.al-opt-tag { font-size: 11px; color: var(--muted, #64748b); }
.al-quiz-explain { margin-top: 12px; padding: 10px 12px; border-radius: 10px; background: var(--bg-hover, #eef2f7); font-size: 13px; line-height: 1.7; color: var(--ink-soft, #475569); }
.al-quiz-done { padding: 20px 16px; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }

/* ── 错题 / 复习 / 每日任务 ── */
.al-wrong-head, .al-review-head, .al-daily-head { font-size: 14px; font-weight: 800; }
.al-wrong { padding: 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 14px; background: var(--bg-side, #fff); margin-top: 10px; }
.al-wrong-meta { font-size: 12px; color: var(--muted, #64748b); }
.al-wrong-q { margin-top: 6px; font-size: 15px; font-weight: 700; line-height: 1.6; }
.al-wrong-ans { margin-top: 8px; font-size: 13px; color: #166534; }
.al-wrong-expl { margin-top: 6px; font-size: 13px; color: var(--ink-soft, #475569); line-height: 1.7; }
.al-task { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px solid var(--line, #e2e8f0); border-radius: 14px; background: var(--bg-side, #fff); font-size: 14px; margin-top: 8px; cursor: pointer; }
.al-task.is-done { opacity: .62; }
.al-task-cb { width: 20px; height: 20px; }
.al-daily-tip { margin-top: 10px; font-size: 12px; color: var(--muted, #64748b); }

/* 空状态 / 提示 */
.al-empty { padding: 30px 10px; text-align: center; }
.al-empty-t { font-size: 16px; font-weight: 800; }
.al-empty-s { margin-top: 6px; font-size: 13px; color: var(--muted, #64748b); line-height: 1.6; }
.al-msg {
  position: sticky;
  bottom: 0;
  padding: 9px 14px;
  background: var(--bubble-user, #eef2ff);
  color: var(--brand-strong, #3a56e0);
  font-size: 13px;
  border-top: 1px solid var(--line, #e2e8f0);
}

/* 打印：只留文章内容（用户要「导出整页」） */
@media print {
  .al-panel { position: static; background: #fff; }
  .al-head, .al-nav, .al-msg, .al-article-foot, .al-anim-row, .al-copy, .al-fill-in { display: none !important; }
  .al-body { overflow: visible; padding: 0; }
  .al-view:not(.al-view-article) { display: none !important; }
  .al-article-view { display: block; }
  .al-block { break-inside: avoid; page-break-inside: avoid; border: none; padding: 6px 0; }
  .al-code { max-height: none; overflow: visible; white-space: pre-wrap; border: 1px solid #ddd; }
}

/* ⚠️ 兜底必须带 !important（check-hidden-css 的坑） */
[hidden] { display: none !important; }

/* ===== 朗读 + 吸引注意力（第 5 步） ===== */
.al-motto { margin: 0 0 10px; padding: 12px 14px; border-radius: 12px;
  background: linear-gradient(135deg, #fef3c7, #fde68a); border-left: 6px solid #f59e0b; }
.al-motto-tag { display: inline-block; font-size: 11px; font-weight: 700; color: #92400e;
  background: #fff7ed; border-radius: 999px; padding: 1px 8px; margin-bottom: 6px; }
.al-motto-text { font-size: 19px; line-height: 1.5; font-weight: 800; color: #7c2d12; letter-spacing: .5px; }
.al-speech-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; }
.al-speech-bar .al-btn.is-on { background: #dcfce7; border-color: #16a34a; color: #166534; }
.al-speech-hint { font-size: 12px; color: #64748b; }
.al-speak-seg { border-radius: 6px; transition: background .25s, box-shadow .25s; }
.al-speak-seg.is-speaking { background: #fef9c3; box-shadow: 0 0 0 3px #fde047 inset; padding: 4px 6px; }
.al-seg-quiz { margin: 12px 0 4px; padding: 12px 14px; border: 2px dashed #6366f1;
  border-radius: 12px; background: #eef2ff; }
.al-seg-quiz-t { font-weight: 700; color: #4338ca; margin-bottom: 6px; }
.al-seg-quiz-q { font-size: 15px; font-weight: 700; color: #1e293b; margin-bottom: 8px; }
.al-seg-quiz-opts { display: grid; gap: 6px; }
.al-seg-opt { text-align: left; padding: 8px 10px; border: 1px solid #c7d2fe; border-radius: 8px;
  background: #fff; cursor: pointer; font-size: 14px; }
.al-seg-opt:hover { background: #e0e7ff; }
.al-seg-opt.is-right { background: #dcfce7; border-color: #16a34a; }
.al-seg-opt.is-wrong { background: #fee2e2; border-color: #dc2626; }
.al-seg-quiz-msg { margin-top: 8px; font-size: 13px; color: #334155; }
.al-seg-skip { margin-top: 8px; background: none; border: none; color: #94a3b8;
  font-size: 12px; text-decoration: underline; cursor: pointer; }
/* ===== 朗读高亮（明显可见：背景 + 左侧色条 + 加粗）+ 动画不裁切 ===== */
.al-speak-seg { position: relative; border-radius: 8px; transition: background .2s; }
.al-speak-seg.is-speaking { background: #fde68a !important; box-shadow: inset 4px 0 0 #f59e0b; padding: 6px 10px; font-weight: 700; color: #7c2d12; }
.al-motto-text.is-speaking { background: #fde68a !important; }
.al-speak-seg.is-speaking::after { content: "🔊 正在朗读"; position: absolute; right: 8px; top: -9px; font-size: 10px; background: #f59e0b; color: #fff; border-radius: 999px; padding: 1px 8px; }
.al-block { overflow: visible !important; }
.al-anim { overflow: visible !important; }
.al-canvas { max-height: none !important; display: block; }
/* ===== 算法页插图（原理段配具体数据结构 SVG，解决"纯文字难理解"） ===== */
.al-concept { margin: 8px 0 4px; }
.al-concept-svg { width: 100%; height: auto; display: block; border-radius: 10px; background: #f8fafc; border: 1px solid #e2e8f0; }
.al-concept-cap { font-size: 12px; color: #64748b; margin-top: 4px; }
.al-para { line-height: 1.75; color: #1e293b; }
.al-block-t { color: #4338ca; }
.al-one-liner { color: #0f172a; background: #eef2ff; border-left: 4px solid #6366f1; padding: 6px 10px; border-radius: 6px; }
/* ===== 视频讲解播放器 ===== */
.al-video-mask { position: fixed; inset: 0; z-index: 140; background: rgba(15,23,42,.86); display: flex; align-items: center; justify-content: center; padding: 12px; }
.al-video-box { background: #0f172a; border-radius: 14px; width: min(1100px, 100%); max-height: 94vh; overflow: auto; padding: 10px; }
.al-video-head { display: flex; align-items: center; justify-content: space-between; color: #e2e8f0; padding: 4px 6px 10px; gap: 10px; }
.al-video-title { font-size: 16px; font-weight: 700; }
.al-video { width: 100%; height: auto; border-radius: 10px; background: #000; display: block; }
@media (max-width: 700px) { .al-video-mask { padding: 0; } .al-video-box { border-radius: 0; max-height: 100vh; } }
/* 多视频选择（排序页：归并/快排） */
.al-video-list { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 6px 4px; }
.al-video-tip { color: #94a3b8; font-size: 12px; padding: 4px 8px 8px; }

/* 视频方向切换按钮 */
.al-video-head .al-btn { white-space: nowrap; }

/* ===== 可视化动画标准外壳（真实结构 + 单步/播放/重来 + 24px 说明与图例） ===== */
/* 文字按 24px 起：手机上画布缩到约 0.68 倍后仍有 ~16px 实际字号，能看清。 */
.al-anim-tip {
  font-size: 24px;
  line-height: 1.45;
  font-weight: 700;
  color: #0f172a;
  background: #eef2ff;
  border-left: 6px solid #6366f1;
  border-radius: 10px;
  padding: 10px 12px;
}
.al-anim-tip:empty { display: none; }
.al-anim-legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  font-size: 24px;
  font-weight: 700;
  line-height: 1.3;
}
.al-anim-legend .al-anim-lg { white-space: nowrap; }
.al-anim-legend .al-anim-lg:nth-child(1) { color: #b45309; }
.al-anim-legend .al-anim-lg:nth-child(2) { color: #15803d; }
.al-anim-legend .al-anim-lg:nth-child(3) { color: #64748b; }
.al-anim-ptr-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  font-size: 24px;
  font-weight: 700;
}
.al-anim-stepno { margin-left: auto; font-size: 18px; color: #475569; align-self: center; }
@media print {
  .al-anim-tip, .al-anim-legend, .al-anim-ptr-legend, .al-anim-stepno { display: none !important; }
}