/* ============================================================
 * 知仓技能库 · 独立站点样式
 * ------------------------------------------------------------
 * 为什么独立一套，不复用主站 assets/styles.css：
 *   主站那份是 Tailwind 编译产物，类名带 zc- 前缀、体积 31 KB。
 *   技能页有 4 万个，样式表会被每个页面引用，所以这里手写一份精简的、
 *   只覆盖技能页真正用到的类，前缀用 sk-，与主站彻底隔离，互不干扰。
 *
 * 配色沿用主站的蓝色主调（#1B3A8C），让两个板块看起来是一家。
 * ============================================================ */

:root {
  --sk-ink: #1a1d21;
  --sk-ink-2: #3d444d;
  --sk-muted: #6b7280;
  --sk-fine: #8b93a1;
  --sk-line: #e3e6ea;
  --sk-line-2: #eef0f3;
  --sk-paper: #ffffff;
  --sk-paper-2: #f7f8fa;
  --sk-brand: #1b3a8c;
  --sk-brand-2: #2563eb;
  --sk-warn: #b45309;
  --sk-warn-bg: #fffbeb;
  /* 激励视频入口专用色：暖色表示「另一条可选路径」。
     刻意不复用 --sk-warn——那是警告语义，用在营销入口上会让用户以为出了问题。 */
  --sk-accent: #c2571a;
  --sk-accent-hover: #a84712;
  --sk-bad: #b91c1c;
  --sk-bad-bg: #fef2f2;
  --sk-ok: #047857;
  --sk-ok-bg: #ecfdf5;
  --sk-code: #f3f4f6;
  --sk-maxw: 920px;
  --sk-radius: 10px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--sk-paper-2);
  color: var(--sk-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  font-size: 15px;
  line-height: 1.75;
}

a { color: var(--sk-brand-2); text-decoration: none; }
a:hover { text-decoration: underline; }

.sk-skip {
  position: absolute; left: -9999px; top: 0;
  background: var(--sk-brand); color: #fff; padding: 8px 14px; z-index: 100;
}
.sk-skip:focus { left: 8px; top: 8px; }

/* ---------- 顶栏 ---------- */
.sk-top {
  background: var(--sk-paper);
  border-bottom: 1px solid var(--sk-line);
  position: sticky; top: 0; z-index: 20;
}
.sk-top__in {
  max-width: var(--sk-maxw); margin: 0 auto; padding: 10px 18px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.sk-brand { display: flex; align-items: center; gap: 9px; color: var(--sk-ink); }
.sk-brand:hover { text-decoration: none; }
.sk-brand__mark {
  width: 30px; height: 30px; border-radius: 8px; background: var(--sk-brand);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 15px;
}
.sk-brand__name { display: block; font-weight: 700; font-size: 15px; line-height: 1.2; }
.sk-brand__sub { display: block; font-size: 10px; letter-spacing: .14em; color: var(--sk-fine); }
.sk-nav { display: flex; gap: 14px; flex-wrap: wrap; margin-left: auto; }
.sk-nav a { color: var(--sk-ink-2); font-size: 14px; }

/* ---------- 版心 ---------- */
.sk-wrap { max-width: var(--sk-maxw); margin: 0 auto; padding: 18px 18px 60px; }

.sk-crumb { font-size: 13px; color: var(--sk-muted); margin-bottom: 16px; }
.sk-crumb span { color: var(--sk-fine); }

/* ---------- 文章头 ---------- */
.sk-head { margin-bottom: 26px; }
.sk-head h1 {
  margin: 0 0 10px; font-size: 30px; line-height: 1.3; letter-spacing: -.01em;
}
.sk-lede { margin: 0 0 14px; color: var(--sk-ink-2); font-size: 16px; }

.sk-chips { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.sk-cap {
  display: inline-block; padding: 3px 10px; border-radius: 999px;
  background: var(--sk-paper-2); border: 1px solid var(--sk-line);
  font-size: 12.5px; color: var(--sk-ink-2);
}
.sk-cap--mid { background: var(--sk-warn-bg); border-color: #fde68a; color: var(--sk-warn); }
.sk-cap--high { background: var(--sk-bad-bg); border-color: #fecaca; color: var(--sk-bad); }
.sk-cap--none { background: var(--sk-ok-bg); border-color: #a7f3d0; color: var(--sk-ok); }
.sk-cap--unknown { background: var(--sk-paper-2); border-style: dashed; color: var(--sk-muted); }

.sk-sev { padding: 3px 10px; border-radius: 999px; font-size: 12.5px; }
.sk-sev--ok { background: var(--sk-ok-bg); color: var(--sk-ok); }
.sk-sev--bad { background: var(--sk-bad-bg); color: var(--sk-bad); font-weight: 600; }

.sk-chip-repo a { font-size: 13px; color: var(--sk-muted); }

/* ---------- 区块 ---------- */
.sk-sec { margin: 0 0 30px; }
.sk-sec > h2 {
  font-size: 19px; margin: 0 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid var(--sk-line-2);
}

.sk-card {
  background: var(--sk-paper); border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius); padding: 16px 18px; margin-bottom: 14px;
}
.sk-card > h2 { font-size: 17px; margin: 0 0 10px; }
.sk-card > h3 { font-size: 15px; margin: 18px 0 8px; }

/* ---------- 键值表 ---------- */
.sk-kv { display: grid; gap: 8px; }
.sk-kv__row { display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; }
.sk-kv__k { flex: 0 0 96px; color: var(--sk-muted); font-size: 13.5px; }
.sk-kv__v { flex: 1 1 240px; min-width: 0; }
.sk-kv__v code { word-break: break-all; }

code, pre {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
  font-size: 13px;
}
code { background: var(--sk-code); padding: 1.5px 5px; border-radius: 4px; }

/* ---------- 提示与命中 ---------- */
.sk-note { background: var(--sk-warn-bg); border-color: #fde68a; }
.sk-fine { color: var(--sk-fine); font-size: 13px; margin: 10px 0 0; }

.sk-acc { margin-top: 12px; }
.sk-acc summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 6px 0; }
.sk-hits { list-style: none; margin: 8px 0 0; padding: 0; }
.sk-hits li {
  padding: 10px 0; border-top: 1px solid var(--sk-line-2); font-size: 13.5px;
}
.sk-hit-sev { font-weight: 600; margin-right: 8px; }
.sk-hit-sev[data-sev="critical"] { color: var(--sk-bad); }
.sk-hit-sev[data-sev="high"] { color: var(--sk-warn); }
.sk-hit-rule { color: var(--sk-muted); margin-left: 8px; }
.sk-hit-code {
  margin: 8px 0 0; padding: 9px 11px; background: var(--sk-code);
  border-radius: 6px; overflow-x: auto; white-space: pre-wrap; word-break: break-all;
}

/* ---------- 技能正文（SKILL.md 转出来的）---------- */
.sk-md { background: var(--sk-paper); border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius); padding: 20px 22px; }
.sk-md > :first-child { margin-top: 0; }
.sk-md h2 { font-size: 19px; margin: 26px 0 10px; }
.sk-md h3 { font-size: 16px; margin: 22px 0 8px; }
.sk-md h4, .sk-md h5, .sk-md h6 { font-size: 15px; margin: 18px 0 6px; }
.sk-md p { margin: 0 0 12px; }
.sk-md ul, .sk-md ol { margin: 0 0 14px; padding-left: 22px; }
.sk-md li { margin-bottom: 5px; }
.sk-md pre {
  background: var(--sk-code); padding: 12px 14px; border-radius: 8px;
  overflow-x: auto; margin: 0 0 14px;
}
.sk-md pre code { background: none; padding: 0; }
.sk-md hr { border: 0; border-top: 1px solid var(--sk-line); margin: 22px 0; }
.sk-md a { word-break: break-all; }

/* ---------- 列表 ---------- */
.sk-links { list-style: none; padding: 0; margin: 0; display: grid; gap: 5px; }
.sk-links li { font-size: 14px; }

.sk-repolist { list-style: none; padding: 0; margin: 0; }
.sk-repolist li {
  padding: 11px 0; border-bottom: 1px solid var(--sk-line-2);
  display: flex; flex-direction: column; gap: 2px;
}
.sk-repolist .sk-fine { margin: 0; }

.sk-variants { background: #f8fafc; border-color: #e2e8f0; }
.sk-variants ul { margin: 8px 0 0; padding-left: 20px; }

/* ---------- 广告位 ----------
   容器固定 min-height 的原因：广告脚本是第三方，加载时机不可控。
   不预留高度的话，广告插入时会把下方内容整体推下去，造成 CLS 抖动，
   而 Core Web Vitals 已经是排名因素——为了广告收入伤 SEO 不划算。
   所以每个广告位都留出固定高度，广告没加载时也只是留白。 */
.sk-ad {
  position: relative;
  margin: 22px 0;
  padding: 12px 12px 8px;
  border: 1px dashed var(--sk-line);
  border-radius: var(--sk-radius);
  background: var(--sk-paper);
}
.sk-ad__tag {
  position: absolute; top: -9px; left: 12px;
  padding: 0 6px;
  background: var(--sk-paper);
  color: var(--sk-fine);
  font-size: 11px;
  letter-spacing: .05em;
}
.sk-ad__box { min-height: 96px; display: grid; place-items: center; }
.sk-ad__box:empty::before {
  content: "广告位";
  color: var(--sk-line);
  font-size: 12px;
}

/* ---------- 转存引导 ----------
   位置在正文之后：读完内容的人才可能有转存意愿。
   未配置网盘时显示禁用态，不输出死链。 */
.sk-save {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  justify-content: space-between;
  margin: 26px 0;
  padding: 18px 20px;
  border: 1px solid var(--sk-brand);
  border-radius: var(--sk-radius);
  background: #f5f8ff;
}
.sk-save__text { flex: 1 1 320px; min-width: 0; }
.sk-save__title { margin: 0 0 6px; font-size: 16px; font-weight: 700; color: var(--sk-brand); }
.sk-save__desc { margin: 0; color: var(--sk-ink-2); font-size: 13.5px; line-height: 1.65; }
.sk-save__actions { display: flex; gap: 10px; flex-wrap: wrap; }

.sk-btn {
  display: inline-block; padding: 9px 18px; border-radius: 8px;
  border: 1px solid var(--sk-brand); background: var(--sk-brand);
  color: #fff; font-size: 14px; font-weight: 600; cursor: pointer;
  text-align: center;
}
.sk-btn:hover { text-decoration: none; background: #16307a; }
.sk-btn--ghost {
  background: transparent; color: var(--sk-brand);
}
.sk-btn--ghost:hover { background: #e8eefc; }
.sk-btn--disabled {
  background: var(--sk-line); border-color: var(--sk-line);
  color: var(--sk-muted); cursor: not-allowed;
}
.sk-btn--disabled:hover { background: var(--sk-line); }

/* 激励视频入口：与「网盘转存」「原始仓库」并列的第三种获取方式。
   三者并列且都可点，是「不强制诱导」在视觉上的落地——没有任何一个
   被做成唯一出口。 */
.sk-btn--video {
  background: var(--sk-accent);
  border-color: var(--sk-accent);
}
.sk-btn--video:hover { background: var(--sk-accent-hover); }

/* 私域承接：转存区下方的社群入口。
   未配置 qrcode 时整块不渲染（不留空框、不用占位图）。 */
.sk-group {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 22px 0;
  padding: 16px 20px;
  border: 1px solid var(--sk-line);
  border-radius: var(--sk-radius);
  background: var(--sk-paper);
}
.sk-group__qr {
  width: 132px; height: 132px; flex: 0 0 auto;
  border: 1px solid var(--sk-line); border-radius: 8px; background: #fff;
}
.sk-group__text { flex: 1 1 220px; min-width: 0; }
.sk-group__title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--sk-ink); }
.sk-group__desc { margin: 0; color: var(--sk-ink-2); font-size: 13px; line-height: 1.65; }

@media (max-width: 560px) {
  .sk-group { flex-direction: column; align-items: flex-start; }
}

/* ---------- 分页 ---------- */
.sk-pager {
  display: flex; flex-wrap: wrap; gap: 6px; justify-content: center;
  margin: 26px 0 10px;
}
.sk-pager a, .sk-pager__cur {
  min-width: 34px; padding: 6px 10px; border-radius: 7px; text-align: center;
  border: 1px solid var(--sk-line); background: var(--sk-paper);
  font-size: 13.5px; color: var(--sk-ink-2);
}
.sk-pager a:hover { border-color: var(--sk-brand-2); text-decoration: none; }
.sk-pager__cur {
  background: var(--sk-brand); border-color: var(--sk-brand);
  color: #fff; font-weight: 600;
}

/* ---------- 页脚 ---------- */
.sk-foot {
  border-top: 1px solid var(--sk-line); background: var(--sk-paper);
  padding: 22px 18px; text-align: center; color: var(--sk-muted); font-size: 13px;
}
.sk-foot__note { margin: 0 0 8px; }
.sk-foot__links a { margin: 0 7px; color: var(--sk-muted); }
.sk-foot__icp { margin: 8px 0 0; font-size: 12.5px; }
.sk-foot__icp a { color: var(--sk-fine); }

/* ---------- 窄屏 ---------- */
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .sk-head h1 { font-size: 23px; }
  .sk-wrap { padding: 14px 14px 44px; }
  .sk-nav { gap: 10px; font-size: 13px; margin-left: 0; width: 100%; }
  .sk-kv__k { flex-basis: 100%; }
  .sk-md { padding: 16px 15px; }
}