/* ============================================================
   GitHub 风格代码高亮（深色，和弹窗里的黑底保持一致）
   - 配色取自 GitHub Dark 的语法高亮变量
   - 只作用于「代码块」（pre.code-hl / pre.markdown-code），
     行内 code 保持主题原有的淡灰底，不参与改造
   ============================================================ */

:root {
    --gh-canvas-subtle: #0d1117;
    --gh-border: #30363d;
    --gh-fg: #c9d1d9;
    --gh-comment: #8b949e;
    --gh-keyword: #ff7b72;
    --gh-string: #a5d6ff;
    --gh-constant: #79c0ff;
    --gh-entity: #d2a8ff;
    --gh-variable: #ffa657;
    --gh-attr: #79c0ff;
    --gh-tag: #7ee787;
    --gh-inserted: #aff5b4;
    --gh-inserted-bg: #033a16;
    --gh-deleted: #ffdcd7;
    --gh-deleted-bg: #67060c;
}

/* ---------- 代码块外观 ---------- */
.article-content pre.code-hl,
.article-content pre.markdown-code,
pre.code-hl {
    position: relative;
    display: block;
    padding: 16px;
    margin: 16px 0;
    overflow: auto;
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--gh-fg);
    background: var(--gh-canvas-subtle);
    border: 1px solid var(--gh-border);
    border-radius: 6px;
    -webkit-text-size-adjust: none;
    word-wrap: normal;
    tab-size: 4;
    -moz-tab-size: 4;
}

.article-content pre.code-hl code,
.article-content pre.markdown-code code,
pre.code-hl code {
    display: block;
    padding: 0;
    margin: 0;
    overflow: visible;
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
    font-size: inherit;
    line-height: inherit;
    color: inherit;
    background: transparent;
    border: 0;
    white-space: pre;
    word-break: normal;
    tab-size: 4;
}

/* 自定义滚动条，贴近 GitHub 的观感 */
pre.code-hl::-webkit-scrollbar,
pre.markdown-code::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

pre.code-hl::-webkit-scrollbar-thumb,
pre.markdown-code::-webkit-scrollbar-thumb {
    background: #30363d;
    border-radius: 6px;
    border: 2px solid var(--gh-canvas-subtle);
}

pre.code-hl::-webkit-scrollbar-thumb:hover,
pre.markdown-code::-webkit-scrollbar-thumb:hover {
    background: #484f58;
}

pre.code-hl::-webkit-scrollbar-track,
pre.markdown-code::-webkit-scrollbar-track {
    background: transparent;
}

/* ---------- 语法着色 ---------- */
pre.code-hl .tok-com,
pre.markdown-code .tok-com {
    color: var(--gh-comment);
    font-style: italic;
}

pre.code-hl .tok-kw,
pre.code-hl .tok-bool,
pre.markdown-code .tok-kw,
pre.markdown-code .tok-bool {
    color: var(--gh-keyword);
}

pre.code-hl .tok-str,
pre.markdown-code .tok-str {
    color: var(--gh-string);
}

pre.code-hl .tok-num,
pre.code-hl .tok-const,
pre.markdown-code .tok-num,
pre.markdown-code .tok-const {
    color: var(--gh-constant);
}

pre.code-hl .tok-fn,
pre.code-hl .tok-class,
pre.markdown-code .tok-fn,
pre.markdown-code .tok-class {
    color: var(--gh-entity);
}

pre.code-hl .tok-var,
pre.code-hl .tok-self,
pre.markdown-code .tok-var,
pre.markdown-code .tok-self {
    color: var(--gh-variable);
}

pre.code-hl .tok-tag,
pre.markdown-code .tok-tag {
    color: var(--gh-tag);
}

pre.code-hl .tok-attr,
pre.code-hl .tok-prop,
pre.markdown-code .tok-attr,
pre.markdown-code .tok-prop {
    color: var(--gh-attr);
}

pre.code-hl .tok-op,
pre.code-hl .tok-punc,
pre.markdown-code .tok-op,
pre.markdown-code .tok-punc {
    color: var(--gh-fg);
}

pre.code-hl .tok-del,
pre.markdown-code .tok-del {
    color: var(--gh-deleted);
    background: var(--gh-deleted-bg);
}

pre.code-hl .tok-ins,
pre.markdown-code .tok-ins {
    color: var(--gh-inserted);
    background: var(--gh-inserted-bg);
}

pre.code-hl .tok-head,
pre.markdown-code .tok-head {
    color: var(--gh-constant);
    font-weight: 600;
}

/* 手机端稍微缩小一点，避免一行能放的字太少 */
@media (max-width: 768px) {
    .article-content pre.code-hl,
    .article-content pre.markdown-code,
    pre.code-hl {
        padding: 12px;
        font-size: 12.5px;
        border-radius: 6px;
    }
}