/* ===========================================================
   enhance.css - 培训站正文美化增强层
   原则：只做视觉/交互增强，不改动任何原文文字
   =========================================================== */

/* ---------- 1. 顶部阅读进度条 ---------- */
#readbar {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, #38bdf8, #0ea5e9, #0369a1);
  z-index: 9999; transition: width .12s linear;
  box-shadow: 0 0 6px rgba(14,165,233,.5);
}

/* ---------- 2. Callout 提示框 ---------- */
.cal {
  position: relative; margin: 14px 0; padding: 12px 16px 12px 44px;
  border-radius: 8px; font-size: 14px; line-height: 1.85;
  border-left: 4px solid; background: #f8fafc;
}
.cal::before {
  position: absolute; left: 14px; top: 11px; font-size: 16px; line-height: 1.4;
}
.cal-note { border-color: #0ea5e9; background: #f0f9ff; color: #0c4a6e; }
.cal-note::before { content: "\1F4A1"; }
.cal-warn { border-color: #f59e0b; background: #fffbeb; color: #78350f; }
.cal-warn::before { content: "\26A0\FE0F"; }
.cal-danger { border-color: #ef4444; background: #fef2f2; color: #7f1d1d; }
.cal-danger::before { content: "\1F6D1"; }
.cal-ok { border-color: #10b981; background: #ecfdf5; color: #065f46; }
.cal-ok::before { content: "\2705"; }
.cal-tip { border-color: #8b5cf6; background: #f5f3ff; color: #4c1d95; }
.cal-tip::before { content: "\1F4CC"; }

/* ---------- 3. 关键词标记 ---------- */
.kw-menu {
  display: inline-block; background: #e0f2fe; color: #0369a1;
  border: 1px solid #bae6fd; border-radius: 4px;
  padding: 0 6px; margin: 0 1px; font-size: 13px; font-weight: 600;
  white-space: nowrap;
}
.kw-must { color: #dc2626; font-weight: 700; }
.kw-auto { color: #059669; font-weight: 600; }
.kw-btn {
  display: inline-block; background: #f1f5f9; color: #334155;
  border: 1px solid #e2e8f0; border-radius: 4px;
  padding: 0 5px; font-size: 13px; font-weight: 600;
}

/* ---------- 4. 步骤徽章 ---------- */
.step-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 5px; margin-right: 7px;
  border-radius: 10px; background: #0ea5e9; color: #fff;
  font-size: 12px; font-weight: 700; vertical-align: 1px;
  box-shadow: 0 1px 3px rgba(14,165,233,.4);
}
.step-badge.sub { background: #94a3b8; box-shadow: none; min-width: 18px; height: 18px; font-size: 11px; }

/* ---------- 5. 图片增强 ---------- */
.doc-img { position: relative; }
.doc-img .img-no, .doc-img .img-zoom {
  position: absolute; top: 8px; z-index: 2; color: #fff;
  font-size: 11px; padding: 2px 8px; border-radius: 10px;
  pointer-events: none; opacity: 0; transition: opacity .2s;
}
.doc-img .img-no { left: 8px; background: rgba(15,23,42,.72); letter-spacing: .3px; }
.doc-img .img-zoom { right: 8px; background: rgba(14,165,233,.9); }
.doc-img:hover .img-no, .doc-img:hover .img-zoom { opacity: 1; }

/* ---------- 6. Visio 流程图 ---------- */
.doc-flow {
  margin: 18px 0; padding: 14px; border-radius: 10px;
  background: linear-gradient(180deg, #f8fafc, #f1f5f9);
  border: 1px solid #e2e8f0; text-align: center;
}
.doc-flow img {
  max-width: 100%; height: auto; background: #fff;
  border-radius: 6px; box-shadow: 0 2px 10px rgba(15,23,42,.08);
  cursor: zoom-in;
}
.doc-flow figcaption {
  margin-top: 9px; font-size: 12px; color: #64748b; letter-spacing: .5px;
}

/* ---------- 7. 表格美化 ---------- */
.l3-section table tbody tr:nth-child(even),
.main table tbody tr:nth-child(even) { background: #f8fafc; }

/* ---------- 8. FAQ 疑问 / 解答 ---------- */
.faq-q, .faq-a {
  display: inline-block; margin-right: 8px; padding: 1px 10px;
  border-radius: 10px; font-size: 12px; font-weight: 700;
}
.faq-q { background: #fef3c7; color: #92400e; }
.faq-a { background: #d1fae5; color: #065f46; }

/* ---------- 9. 标题锚点 ---------- */
.main h2, .main h3, .main h4 { position: relative; }
.anchor-link {
  position: absolute; left: -20px; top: 50%; transform: translateY(-50%);
  color: #cbd5e1; text-decoration: none; font-size: 15px;
  opacity: 0; transition: opacity .18s;
}
.main h2:hover .anchor-link, .main h3:hover .anchor-link,
.main h4:hover .anchor-link { opacity: 1; }
.anchor-link:hover { color: #0ea5e9; }

/* ---------- 10. 章节图标 ---------- */
.sec-ico { margin-right: 7px; }

/* ---------- 11. 复制提示 ---------- */
#copy-toast {
  position: fixed; left: 50%; bottom: 40px; transform: translateX(-50%);
  background: rgba(15,23,42,.9); color: #fff; font-size: 13px;
  padding: 8px 18px; border-radius: 20px; z-index: 10000;
  opacity: 0; transition: opacity .25s; pointer-events: none;
}
#copy-toast.show { opacity: 1; }

/* ---------- 12. 小屏适配 ---------- */
@media (max-width: 760px) {
  .cal { padding-left: 38px; font-size: 13.5px; }
  .anchor-link { display: none; }
}

/* ---------- 13. 打印 ---------- */
@media print {
  #readbar, .topbar, .sidebar, #toTop, #toBottom { display: none !important; }
  .main { overflow: visible !important; height: auto !important; }
}