/* =============================================================================
   PS 学习教程 · 文章页统一样式（/ps-tutorial/1101 – 1211，共 111 篇）
   -----------------------------------------------------------------------------
   ★ 本文件是教程文章正文样式的【唯一来源】。
     文章 HTML 内不允许出现任何内联 style（色卡数据用 --sw 变量除外）；
     所有颜色、间距、圆角、字号都必须走下面第 1 节的令牌。
     要改全站文章观感，只改第 1 节即可，正文 HTML 一行都不用动。

   文件分工（本站样式全景）：
     vars.css             全站基础令牌（颜色 / 圆角 / 阴影 / .container 外壳）
     header.css           顶部毛玻璃导航 + 日夜切换按钮
     footer.css           页脚
     ads.css              广告位组件 .ad-slot（全站共用，含文章页变体）
     tutorial.css         ← 本文件，教程【文章页】外壳 + 正文全部组件
     tutorial-list.css    教程【列表页】/ps-tutorial 专用
     home.css             首页专用
     disclaimer.css       免责声明页专用

   外壳对齐约定：
     .tut-article / .tut-hero 的宽度必须与 vars.css 的 .container 完全一致
     （max-width 1200px + 左右各 20px）。两边数值写在令牌里，
     改一处即可，_tools/audit_articles.py 会断言它们相等。

   断点：
     ≥1181 桌面宽  |  1025–1180 桌面  |  768–1024 平板  |  561–767 大屏手机
     ≤560 手机     |  ≤380 超小屏
   ============================================================================= */


/* =============================================================================
   1. 令牌（唯一改动点）—— 日夜两套值一一对应，组件层不写死任何颜色
   ============================================================================= */
:root {
    /* 1.1 外壳尺寸：必须与 vars.css 里 .container 的 max-width / padding 相等 */
    --tut-shell-w: 1200px;
    --tut-shell-x: 20px;

    /* 1.2 正文排版基准 */
    --art-fs: 1rem;
    --art-fs-sm: .92rem;
    --art-lh: 1.9;
    --art-gap: 18px;
    --art-card-radius: var(--radius-lg);
    --art-card-pad-y: 48px;
    --art-card-pad-x: 52px;
    --art-block-gap: 22px;

    /* 1.3 代码 / 键盘 */
    --art-code-bg: #f1f5f9;
    --art-code-fg: #0b57c2;
    --art-code-border: #e2e8f0;
    --art-kbd-bg: #ffffff;
    --art-kbd-fg: #27272a;
    --art-kbd-border: #cbd5e1;
    --art-pre-bg: #f6f8fa;
    --art-pre-fg: #24292f;
    --art-pre-border: #e2e8f0;

    /* 1.4 提示类面板：note 注意 / tip 提示 / tips 小技巧 / important 重要 */
    --art-note-bg: #fff8e1;     --art-note-border: #eab308;
    --art-tip-bg: #eef4ff;      --art-tip-border: #0052ff;
    --art-ok-bg: #e9f9f0;       --art-ok-border: #16a34a;
    --art-warn-bg: #fdecec;     --art-warn-border: #dc2626;
    --art-quote-bg: #f8fafc;    --art-quote-border: #94a3b8;

    /* 1.5 步骤卡 / 信息卡 */
    --art-step-bg: #f8fafc;
    --art-step-border: #e2e8f0;
    --art-badge-bg: #0052ff;
    --art-badge-fg: #ffffff;
    --art-card-panel-bg: #ffffff;
    --art-card-panel-border: #e2e8f0;

    /* 1.6 强调文字（对应 .tx-* 工具类） */
    --art-c-blue: #1d4ed8;
    --art-c-green: #15803d;
    --art-c-orange: #c2410c;
    --art-c-red: #b91c1c;
    --art-c-gold: #a16207;
    --art-c-purple: #7e22ce;
    --art-c-cyan: #0e7490;
    --art-c-lime: #4d7c0f;
    --art-c-gray: #52525b;

    /* 1.7 色卡描边：浅色模式需要一圈描边，纯白/纯黑色卡才看得见 */
    --art-swatch-ring: rgba(0, 0, 0, .20);

    /* 1.8 文章引导块 .article-lead */
    --art-lead-bg: #f4f7ff;
    --art-lead-quote: var(--primary);
}

[data-theme="dark"] {
    --art-code-bg: rgba(90, 138, 255, .12);
    --art-code-fg: #8fb4ff;
    --art-code-border: rgba(90, 138, 255, .22);
    --art-kbd-bg: #221c18;
    --art-kbd-fg: #f0e8df;
    --art-kbd-border: #4a3a32;
    --art-pre-bg: #120f0d;
    --art-pre-fg: #d8cfc4;
    --art-pre-border: #3a2e28;

    --art-note-bg: #2a2210;     --art-note-border: #d9a900;
    --art-tip-bg: rgba(90, 138, 255, .10); --art-tip-border: #5a8aff;
    --art-ok-bg: #10251a;       --art-ok-border: #34d399;
    --art-warn-bg: #2a1212;     --art-warn-border: #f87171;
    --art-quote-bg: #171310;    --art-quote-border: #5a4a40;

    --art-step-bg: #171310;
    --art-step-border: #3a2e28;
    --art-badge-bg: #5a8aff;
    --art-badge-fg: #0d0a08;
    --art-card-panel-bg: #1a1512;
    --art-card-panel-border: #3a2e28;

    --art-c-blue: #8fb4ff;
    --art-c-green: #6ee7a8;
    --art-c-orange: #ffb27a;
    --art-c-red: #ff9a9a;
    --art-c-gold: #ffd77a;
    --art-c-purple: #c9a2ff;
    --art-c-cyan: #7fe3f0;
    --art-c-lime: #c3e88d;
    --art-c-gray: #a8adb4;

    --art-swatch-ring: rgba(255, 255, 255, .30);

    --art-lead-bg: rgba(90, 138, 255, .10);
    --art-lead-quote: #5a8aff;
}


/* =============================================================================
   2. 文章页外壳：.tut-main > .tut-hero + .tut-article
   ============================================================================= */
.tut-main { flex: 1; width: 100%; }

/* ---------- 2.1 顶部横幅（含面包屑 / 阅读时长） ---------- */
.tut-hero {
    position: relative;
    overflow: hidden;
    padding: 72px 0 56px;
    text-align: center;
    background:
        radial-gradient(900px 360px at 15% -10%, rgba(0, 82, 255, .10), transparent 60%),
        radial-gradient(800px 320px at 88% -20%, rgba(0, 162, 255, .12), transparent 60%),
        var(--bg-white);
    border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .tut-hero {
    background:
        radial-gradient(900px 360px at 15% -10%, rgba(90, 138, 255, .16), transparent 60%),
        radial-gradient(800px 320px at 88% -20%, rgba(138, 122, 255, .14), transparent 60%),
        var(--bg-white);
}
.tut-hero::before,
.tut-hero::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .55;
    pointer-events: none;
}
.tut-hero::before { width: 320px; height: 320px; left: -80px; top: -130px; background: rgba(0, 82, 255, .12); }
.tut-hero::after  { width: 260px; height: 260px; right: -60px; bottom: -150px; background: rgba(0, 162, 255, .14); }
[data-theme="dark"] .tut-hero::before { background: rgba(90, 138, 255, .16); }
[data-theme="dark"] .tut-hero::after  { background: rgba(138, 122, 255, .18); }

.tut-hero h1 {
    position: relative;
    z-index: 1;
    max-width: var(--tut-shell-w);
    margin: 0 auto 10px;
    padding: 0 var(--tut-shell-x);
    font-size: clamp(1.5rem, 3.4vw, 2.35rem);
    font-weight: 800;
    color: var(--dark);
    letter-spacing: -.4px;
    line-height: 1.34;
    text-wrap: balance;
}
.tut-hero-sm { padding: 46px 0 38px; }

/* 阅读时长等元信息 */
.tut-meta {
    position: relative;
    z-index: 1;
    color: var(--text-muted);
    font-size: .86rem;
    margin: 10px 0 0;
}
.tut-meta span { margin: 0 6px; color: var(--border); }

/* 面包屑 */
.tut-crumb {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    font-size: .85rem;
    color: var(--text-muted);
    margin-top: 14px;
    padding: 0 var(--tut-shell-x);
}
.tut-crumb a { color: var(--text-muted); text-decoration: none; transition: color .2s; }
.tut-crumb a:hover { color: var(--primary); text-decoration: underline; }
.tut-crumb .current {
    color: var(--primary);
    font-weight: 700;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 46ch;
}
.tut-crumb .sep { color: var(--border); }

/* ---------- 2.2 正文外壳（与 .container / 页脚同宽同边距） ---------- */
.tut-article {
    width: 100%;
    max-width: var(--tut-shell-w);
    margin: 0 auto;
    padding: 40px var(--tut-shell-x) 72px;
}

/* 兼容旧的 960px 窄容器（部分子页复用） */
.tut-container {
    max-width: 960px;
    margin: 0 auto;
    padding: 48px var(--tut-shell-x) 72px;
}


/* =============================================================================
   3. 正文基座：排版节奏、标题层级、行内元素
   ============================================================================= */
.tut-article-body {
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--art-card-radius);
    box-shadow: var(--shadow);
    padding: var(--art-card-pad-y) var(--art-card-pad-x);
    font-size: var(--art-fs);
    line-height: var(--art-lh);
    color: var(--text-main);
    overflow-wrap: break-word;
}

/* 3.1 标题层级 —— h2 带品牌色左竖线，h3/h4 纯文字 */
.tut-article-body h2 {
    margin: 40px 0 16px;
    padding-left: 14px;
    border-left: 4px solid var(--primary);
    font-size: 1.35rem;
    font-weight: 750;
    line-height: 1.42;
    color: var(--dark);
}
.tut-article-body h3 {
    margin: 30px 0 12px;
    font-size: 1.1rem;
    font-weight: 750;
    line-height: 1.5;
    color: var(--dark);
}
.tut-article-body h4 {
    margin: 22px 0 10px;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.5;
    color: var(--dark);
}
.tut-article-body > h2:first-child,
.tut-article-body > h3:first-child,
.tut-article-body > *:first-child { margin-top: 0; }
.tut-article-body > *:last-child { margin-bottom: 0; }

/* 3.2 段落与文本 */
.tut-article-body p {
    margin: 0 0 14px;
    font-size: var(--art-fs);
    line-height: var(--art-lh);
    color: var(--text-main);
}.tut-article-body strong { color: var(--dark); font-weight: 700; }
.tut-article-body em { font-style: italic; color: var(--text-main); }
.tut-article-body small { font-size: .84em; color: var(--text-muted); }
.tut-article-body sup { font-size: .72em; vertical-align: super; line-height: 0; }

/* 3.3 链接 */
.tut-article-body a {
    color: var(--primary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color .2s, color .2s;
}
.tut-article-body a:hover { border-bottom-color: currentColor; }

/* 3.4 列表：三级以内统一节奏，标记用品牌色 */
.tut-article-body ul,
.tut-article-body ol {
    margin: 0 0 16px;
    padding-left: 24px;
    font-size: var(--art-fs);
    line-height: var(--art-lh);
    color: var(--text-main);
}
.tut-article-body li { margin: 0 0 8px; }
.tut-article-body li:last-child { margin-bottom: 0; }
.tut-article-body li > ul,
.tut-article-body li > ol { margin-top: 8px; margin-bottom: 0; }
.tut-article-body li::marker { color: var(--primary); font-weight: 700; }
.tut-article-body ul { list-style: disc; }
.tut-article-body ul ul { list-style: circle; }
.tut-article-body ul ul ul { list-style: square; }

/* 3.5 分隔线 */
.tut-article-body hr {
    margin: 34px 0;
    border: none;
    border-top: 1px solid var(--border);
}

/* 3.6 引用块 */
.tut-article-body blockquote {
    margin: 20px 0;
    padding: 16px 20px;
    background: var(--art-quote-bg);
    border-left: 4px solid var(--primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: var(--art-fs-sm);
    line-height: 1.8;
    color: var(--text-muted);
}
.tut-article-body blockquote > *:last-child { margin-bottom: 0; }
.tut-article-body blockquote strong { color: var(--primary); }

/* 3.7 定义列表 */
.tut-article-body dl { margin: 0 0 16px; }
.tut-article-body dt { font-weight: 700; color: var(--dark); margin-top: 12px; }
.tut-article-body dd { margin: 4px 0 0 20px; color: var(--text-main); }

/* 3.8 图片与图注 */
.tut-article-body img {
    max-width: 100%;
    height: auto;
    border-radius: var(--radius-md);
}
.tut-article-body figure { margin: 18px 0; text-align: center; }
.tut-article-body figure img { display: block; margin: 0 auto; }
.tut-article-body figcaption {
    margin-top: 8px;
    font-size: .84rem;
    line-height: 1.6;
    color: var(--text-muted);
    text-align: center;
}

/* 3.9 表格：默认外层给滚动容器；未包裹时也能横向滚动不撑破布局 */
.tut-article-body .table-wrap {
    margin: 18px 0 22px;
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    -webkit-overflow-scrolling: touch;
}
.tut-article-body table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--art-fs-sm);
    background: var(--card-bg);
}
.tut-article-body .table-wrap > table { border-radius: var(--radius-md); }
.tut-article-body th,
.tut-article-body td {
    padding: 11px 16px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}
.tut-article-body th {
    background: var(--bg-gray);
    color: var(--primary);
    font-weight: 700;
    font-size: .85rem;
    white-space: nowrap;
}
.tut-article-body tbody tr { transition: background .2s ease; }
.tut-article-body tbody tr:hover { background: var(--primary-light); }
.tut-article-body tr:last-child td { border-bottom: none; }
.tut-article-body td code { background: transparent; border: 0; padding: 0; color: var(--text-main); }

/* 3.10 行内代码 */
.tut-article-body code {
    padding: 2px 8px;
    background: var(--art-code-bg);
    border: 1px solid var(--art-code-border);
    border-radius: 6px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Courier New", monospace;
    font-size: .88em;
    color: var(--art-code-fg);
    word-break: break-word;
}
.tut-article-body p code,
.tut-article-body li code { padding: 1px 6px; }

/* 3.11 代码块 */
.tut-article-body pre {
    margin: 18px 0;
    padding: 16px 20px;
    background: var(--art-pre-bg);
    border: 1px solid var(--art-pre-border);
    border-radius: var(--radius-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-size: .88rem;
    line-height: 1.75;
    color: var(--art-pre-fg);
}
.tut-article-body pre code {
    background: transparent;
    border: 0;
    padding: 0;
    color: inherit;
    font-size: inherit;
    white-space: pre;
}

/* 3.12 键盘按键：<kbd> 元素与 .kbd 类同等对待（历史文章两种写法都有） */
.tut-article-body :is(kbd, .kbd) {
    display: inline-block;
    padding: 2px 7px;
    background: var(--art-kbd-bg);
    border: 1px solid var(--art-kbd-border);
    border-bottom-width: 2px;
    border-radius: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85em;
    line-height: 1.6;
    color: var(--art-kbd-fg);
    white-space: nowrap;
}

/* 3.13 行内「按键芯片」：.shortcut / .key
   实测 111 篇里 .shortcut 有 129 处在句子中间（<span class="shortcut">Ctrl+O</span>），
   所以这里必须是行内芯片；旧版把它写成 display:flex 的整块，会把句子拆行。 */
.tut-article-body :is(.shortcut, .key) {
    display: inline-block;
    padding: 1px 7px;
    background: var(--art-code-bg);
    border: 1px solid var(--art-code-border);
    border-bottom-width: 2px;
    border-radius: 5px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88em;
    line-height: 1.7;
    color: var(--art-code-fg);
    white-space: nowrap;
    vertical-align: baseline;
}
/* 多个按键连在一起展示时（<span class="shortcut"> 之间）留一点间距 */
.tut-article-body :is(.shortcut, .key) + :is(.shortcut, .key) { margin-left: 4px; }

/* -----------------------------------------------------------------------------
   3.14 文章引导块 .article-lead —— 111 篇正文开头的统一「全文摘要」
   写法：段落形式 <p class="article-lead">…</p>，保持语义上是普通段落（利于 SEO 抓取）。
   内容是 60–90 字的一句话概括：先给一句钩子，再讲清本文做什么、能得到什么。
   视觉上做轻强调：左侧品牌色竖线 + 浅底，日夜两套值都在第 1 节令牌里。
   ----------------------------------------------------------------------------- */
.tut-article-body .article-lead {
    margin: 0 0 26px;
    padding: 15px 20px;
    background: var(--art-lead-bg);
    border-left: 3px solid var(--primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: var(--art-fs);
    line-height: 1.85;
    color: var(--text-main);
}
/* 引导块里的关键词加点分量，但别整段加粗 */
.tut-article-body .article-lead strong { color: var(--dark); font-weight: 700; }
.tut-article-body .article-lead:last-child { margin-bottom: 0; }


/* =============================================================================
   4. 组件 · 步骤流程
   统一词汇：.steps（列表容器）> .step（步骤卡）> .step-number + .step-title + .step-content
   步骤卡默认是块级卡片；只要卡里有 .step-number，自动变横向两栏（:has 不支持时
   退化为徽章在上、内容在下，依然可读）。
   ============================================================================= */
.tut-article-body .steps {
    list-style: none;
    margin: 24px 0;
    padding: 0;
}
.tut-article-body .steps > li { margin: 0; list-style: none; }

.tut-article-body .step {
    position: relative;
    margin: 0 0 18px;
    padding: 20px 24px;
    background: var(--art-step-bg);
    border: 1px solid var(--art-step-border);
    border-radius: var(--radius-md);
    transition: border-color .25s, box-shadow .25s;
}
.tut-article-body .step:last-child { margin-bottom: 0; }
/* 有编号徽章时自动变成「徽章 | 标题 / 内容」两栏。
   用 grid 而不是 flex：遗留写法里 .step-number、.step-title、.step-content 是【兄弟节点】，
   用 flex 会让标题和正文并排在同一行；grid 能把标题固定在右上、正文压在它下面。
   .step-num 是归一化脚本显式写上的；:has() 只是给手写的新文章兜底。 */
.tut-article-body .step-num,
.tut-article-body .step:has(> .step-number) {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 18px;
    row-gap: 4px;
    align-items: start;
}
.tut-article-body .step-num > *,
.tut-article-body .step:has(> .step-number) > * { grid-column: 2; }
.tut-article-body .step-num > .step-number,
.tut-article-body .step:has(> .step-number) > .step-number {
    grid-column: 1;
    grid-row: 1;
}

/* 步骤徽章 */
.tut-article-body .step-number {
    flex: none;
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--art-badge-bg);
    color: var(--art-badge-fg);
    font-size: 1rem;
    font-weight: 800;
    line-height: 1;
}
.tut-article-body .step-content,
.tut-article-body .step-body { flex: 1 1 0; min-width: 0; }

/* 步骤标题（可能是 strong / h2 / h3） */
.tut-article-body .step-title {
    display: block;
    margin: 0 0 10px;
    padding: 0;
    border: 0;
    font-size: 1.05rem;
    font-weight: 750;
    line-height: 1.5;
    color: var(--dark);
}
.tut-article-body h2.step-title,
.tut-article-body h3.step-title { font-size: 1.12rem; }
.tut-article-body .step-title:last-child { margin-bottom: 0; }
.tut-article-body .step-header { margin-bottom: 10px; }
.tut-article-body .step-header h2,
.tut-article-body .step-header h3 { margin-top: 0; }

/* 卡内元素不需要额外外边距 */
.tut-article-body .step > *:first-child,
.tut-article-body .step-content > *:first-child,
.tut-article-body .step-body > *:first-child { margin-top: 0; }
.tut-article-body .step > *:last-child,
.tut-article-body .step-content > *:last-child,
.tut-article-body .step-body > *:last-child { margin-bottom: 0; }

/* 步骤内嵌的提示框留一点内边距，避免贴边 */
.tut-article-body .step .note,
.tut-article-body .step .tip,
.tut-article-body .step .tips { margin-top: 12px; margin-bottom: 12px; }

/* 4.1 纯计数器写法（.step-list > li，用 ::before 画编号） */
.tut-article-body .step-list {
    list-style: none;
    margin: 24px 0;
    padding: 0;
    counter-reset: art-step;
}
.tut-article-body .step-list > li {
    position: relative;
    margin: 0 0 24px;
    padding-left: 70px;
    counter-increment: art-step;
}
.tut-article-body .step-list > li::before {
    content: counter(art-step);
    position: absolute;
    left: 0;
    top: 0;
    display: grid;
    place-items: center;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--primary-light);
    color: var(--primary);
    font-size: 1.2rem;
    font-weight: 800;
}
.tut-article-body .substeps { margin: 8px 0 0; padding-left: 20px; }


/* =============================================================================
   5. 组件 · 提示类面板
   note 注意 / tip 提示 / tips 小技巧 / important 重要 / info 信息 / conclusion 小结
   ============================================================================= */
.tut-article-body :is(.note, .tip, .tips, .important, .info, .conclusion, .final, .panel) {
    margin: var(--art-block-gap) 0;
    padding: 16px 20px;
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: var(--art-fs-sm);
    line-height: 1.8;
    color: var(--text-main);
}
.tut-article-body :is(.note, .tip, .tips, .important, .info, .conclusion, .final, .panel) > *:last-child,
.tut-article-body :is(.note, .tip, .tips, .important, .info, .conclusion, .final, .panel) > *:last-child > *:last-child { margin-bottom: 0; }

.tut-article-body .note      { background: var(--art-note-bg);  border-left: 4px solid var(--art-note-border); }
.tut-article-body .tip       { background: var(--art-tip-bg);   border-left: 4px solid var(--art-tip-border); }
.tut-article-body .tips      { background: var(--art-ok-bg);    border-left: 4px solid var(--art-ok-border); }
.tut-article-body .important { background: var(--art-warn-bg);  border-left: 4px solid var(--art-warn-border); }
.tut-article-body .info      { background: var(--bg-gray);      border: 1px solid var(--border); border-radius: var(--radius-md); }
.tut-article-body .conclusion { background: var(--primary-light); border-left: 4px solid var(--primary); }
.tut-article-body .final,
.tut-article-body .panel     { background: var(--bg-gray);      border: 1px solid var(--border); border-radius: var(--radius-md); }

.tut-article-body :is(.note, .tip, .tips, .important) h3,
.tut-article-body :is(.note, .tip, .tips, .important) h4 {
    margin: 0 0 8px;
    font-size: .98rem;
    font-weight: 750;
    color: var(--dark);
}
.tut-article-body .note > strong:first-child,
.tut-article-body .tip > strong:first-child,
.tut-article-body .tips > strong:first-child,
.tut-article-body .important > strong:first-child { color: var(--dark); }
.tut-article-body .note ul,
.tut-article-body .tip ul,
.tut-article-body .tips ul,
.tut-article-body .important ul { margin-bottom: 0; }

/* 5.1 说明性文字 */
.tut-article-body .desc { font-size: var(--art-fs-sm); line-height: 1.8; color: var(--text-muted); }
.tut-article-body .desc > *:last-child { margin-bottom: 0; }
.tut-article-body .content { margin: 12px 0; }
.tut-article-body .txt { color: var(--text-main); }
.tut-article-body .title { font-weight: 750; color: var(--dark); }

/* 5.2 独立卡片（白底圆角 + 阴影） */
.tut-article-body .content-card {
    margin: var(--art-block-gap) 0;
    padding: 22px 24px;
    background: var(--art-card-panel-bg);
    border: 1px solid var(--art-card-panel-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow);
}
.tut-article-body .content-card > *:first-child { margin-top: 0; }
.tut-article-body .content-card > *:last-child { margin-bottom: 0; }
.tut-article-body .content-card > h2 { margin-top: 0; border-left-color: var(--primary); }

/* 5.3 高亮行内文字 */
.tut-article-body .highlight {
    padding: 1px 6px;
    background: var(--primary-light);
    color: var(--primary);
    border-radius: 4px;
    font-weight: 600;
}

/* 5.4 色卡（颜色值由文章用 --sw 传入，属于内容数据，不算样式） */
.tut-article-body .color-swatch {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 6px;
    vertical-align: middle;
    border-radius: 6px;
    background: var(--sw, transparent);
    box-shadow: inset 0 0 0 1px var(--art-swatch-ring);
}


/* =============================================================================
   6. 组件 · 图文块 / 折叠面板 / 速查表 / FAQ
   ============================================================================= */
.tut-article-body .image-container { margin: 18px 0; }
.tut-article-body .image-wrapper {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    line-height: 0;
    background: var(--bg-gray);
}
.tut-article-body .image-wrapper img { width: 100%; display: block; border-radius: 0; }
.tut-article-body .example-image {
    display: block;
    max-width: 100%;
    margin: 16px auto;
    border-radius: var(--radius-md);
}
/* div.example-image 只是图片/示例的居中外壳（111 篇里用了 85 次），
   不加背景与内边距；需要灰底卡片的地方用 .content-card。 */
.tut-article-body div.example-image { text-align: center; }
.tut-article-body div.example-image > img { margin-inline: auto; }
.tut-article-body div.example-image > :first-child { margin-top: 0; }
.tut-article-body div.example-image > :last-child { margin-bottom: 0; }
/* 字体演示块（1173：Arial / 楷体 / 仿宋 对比） */
.tut-article-body .font-demo { margin: 0 0 12px; line-height: 1.9; }
.tut-article-body .font-demo:last-child { margin-bottom: 0; }
.tut-article-body .font-demo-arial { font-family: Arial, Helvetica, sans-serif; }
.tut-article-body .font-demo-kaiti { font-family: "KaiTi", "STKaiti", "楷体", serif; }
.tut-article-body .font-demo-fangsong { font-family: "FangSong", "STFangsong", "仿宋", serif; }

/* 6.1 折叠面板（原生 details / 手写 accordion） */
.tut-article-body details,
.tut-article-body .accordion-item {
    margin: 14px 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--card-bg);
}
.tut-article-body summary,
.tut-article-body .accordion-header {
    padding: 14px 18px;
    cursor: pointer;
    font-size: var(--art-fs-sm);
    font-weight: 650;
    color: var(--dark);
    background: var(--bg-gray);
    transition: background .2s, color .2s;
}
.tut-article-body summary::marker { color: var(--primary); }
.tut-article-body details[open] > summary,
.tut-article-body .accordion-item.open > .accordion-header {
    background: var(--primary-light);
    color: var(--primary);
}
.tut-article-body .accordion-body,
.tut-article-body details > div,
.tut-article-body details > p {
    padding: 14px 18px;
    font-size: var(--art-fs-sm);
    line-height: 1.8;
}
.tut-article-body details > div > *:last-child,
.tut-article-body .accordion-body > *:last-child { margin-bottom: 0; }

/* 6.2 速查表 / FAQ */
.tut-article-body .cheat,
.tut-article-body .cheats,
.tut-article-body .faq {
    margin: var(--art-block-gap) 0;
    padding: 18px 22px;
    background: var(--bg-gray);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
}
.tut-article-body :is(.cheat, .cheats, .faq) > *:last-child { margin-bottom: 0; }
.tut-article-body .params { margin: 16px 0; }
.tut-article-body .collapse { margin: 14px 0; border: 1px solid var(--border); border-radius: var(--radius-md); }
/* .accordion 是若干 .accordion-item 的外壳 */
.tut-article-body .accordion { margin: var(--art-block-gap) 0; }
.tut-article-body .accordion > .accordion-item:first-child { margin-top: 0; }
.tut-article-body .accordion > .accordion-item:last-child { margin-bottom: 0; }

/* 6.4 div.code：整段代码块外壳（1141 等），与 <pre> 观感一致 */
.tut-article-body div.code {
    margin: 18px 0;
    padding: 16px 20px;
    background: var(--art-pre-bg);
    border: 1px solid var(--art-pre-border);
    border-radius: var(--radius-md);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .88rem;
    line-height: 1.75;
    color: var(--art-pre-fg);
    white-space: pre-wrap;
}
.tut-article-body div.code code { background: transparent; border: 0; padding: 0; color: inherit; }
.tut-article-body div.code > *:first-child { margin-top: 0; }
.tut-article-body div.code > *:last-child { margin-bottom: 0; }

/* 6.5 .section / .details：文章内再分组的逻辑块与缩进子块 */
.tut-article-body div.section { margin: 0 0 28px; }
.tut-article-body div.section:last-child { margin-bottom: 0; }
.tut-article-body div.details {
    margin: 12px 0 0 20px;
    padding-left: 15px;
    border-left: 2px solid var(--border);
}
.tut-article-body div.details > *:first-child { margin-top: 0; }
.tut-article-body div.details > *:last-child { margin-bottom: 0; }

/* 6.6 .txt：步骤卡里的纯文字块 */
.tut-article-body div.txt > *:first-child { margin-top: 0; }
.tut-article-body div.txt > *:last-child { margin-bottom: 0; }

/* 6.3 按钮 */
.tut-article-body .btn {
    display: inline-block;
    padding: 10px 24px;
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-md);
    font-family: inherit;
    font-size: var(--art-fs-sm);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: background .25s;
}
.tut-article-body .btn:hover { background: var(--primary-deep); color: #fff; }


/* =============================================================================
   7. 工具类（由归一化脚本写入，替代原先的内联样式）
   ============================================================================= */
.tut-article-body .tx-blue   { color: var(--art-c-blue); }
.tut-article-body .tx-green  { color: var(--art-c-green); }
.tut-article-body .tx-orange { color: var(--art-c-orange); }
.tut-article-body .tx-red    { color: var(--art-c-red); }
.tut-article-body .tx-gold   { color: var(--art-c-gold); }
.tut-article-body .tx-purple { color: var(--art-c-purple); }
.tut-article-body .tx-cyan   { color: var(--art-c-cyan); }
.tut-article-body .tx-lime   { color: var(--art-c-lime); }
.tut-article-body .tx-gray   { color: var(--art-c-gray); }
.tut-article-body .tx-muted  { color: var(--text-muted); font-weight: 400; }
.tut-article-body .tx-strong { color: var(--dark); font-weight: 700; }
.tut-article-body .tx-invert {
    display: inline-block;
    padding: 0 5px;
    background: var(--dark);
    color: var(--bg-white);
    border-radius: 4px;
    font-weight: 600;
}
.tut-article-body .tx-bold { font-weight: 700; color: var(--dark); }

.tut-article-body .ta-center { text-align: center; }
.tut-article-body .ta-right  { text-align: right; }
.tut-article-body .mt-0 { margin-top: 0; }
.tut-article-body .mb-0 { margin-bottom: 0; }


/* =============================================================================
   8. 文章页广告位
   统一走 ads.css 的 .ad-slot 组件（同一套占位框 / 同一条 --ad-h 高度令牌），
   这里只负责它在正文流里的位置与留白。

   文章页 main.tut-article 的直接子元素固定是这 4 个：
     div.ad-slot[article-top] → article.tut-article-body
     → div.ad-slot[article-bottom] → div.tut-back
   ============================================================================= */
.tut-article > .ad-slot {
    margin: 0 0 28px;
}

/* 底部广告：上下都要留白，不能贴住正文卡片，也不能贴住下面的「返回列表」。
   ★ 这里必须用属性选择器，不能用 :last-of-type！
     教程页 main 里最后一个 <div> 是 .tut-back（不是广告），
     所以 `.ad-slot:last-of-type` 永远匹配不到底部广告（111 篇全部如此），
     导致底部广告只剩 `margin: 0 0 28px` 的「上 0」，紧贴正文卡片。 */
.tut-article > .ad-slot[data-ad-slot="article-bottom"] {
    margin: 34px 0 30px;
}

/* 返回列表 */
.tut-back {
    margin-top: 30px;
    text-align: center;
}
.tut-back a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary);
    text-decoration: none;
    font-size: var(--art-fs-sm);
    font-weight: 600;
    transition: gap .25s ease;
}
.tut-back a:hover { gap: 10px; }

/* 上一篇 / 下一篇（预留，当前文章未使用） */
.tut-pager {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 32px;
}
.tut-pager a {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 22px;
    background: var(--card-bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    text-decoration: none;
    transition: border-color .3s, box-shadow .3s, transform .3s;
}
.tut-pager a:hover { border-color: var(--primary); box-shadow: var(--shadow-hover); transform: translateY(-3px); }
.tut-pager .pager-label { font-size: .74rem; font-weight: 600; letter-spacing: 1px; color: var(--text-muted); }
.tut-pager .pager-title { font-size: var(--art-fs-sm); font-weight: 700; line-height: 1.5; color: var(--dark); }
.tut-pager a.next { text-align: right; align-items: flex-end; }
.tut-pager a:hover .pager-title { color: var(--primary); }
.tut-pager a.disabled { opacity: .45; pointer-events: none; }


/* =============================================================================
   9. 多端适配
   ============================================================================= */

/* 9.1 ≤1180：正文两侧留白收紧 */
@media (max-width: 1180px) {
    :root { --art-card-pad-x: 40px; }
}

/* 9.2 768–1024 平板：正文内边距与字号同步降一档 */
@media (max-width: 1024px) {
    :root {
        --art-card-pad-y: 36px;
        --art-card-pad-x: 32px;
        --art-fs: .97rem;
    }
    .tut-hero { padding: 58px 0 46px; }
    .tut-hero-sm { padding: 42px 0 34px; }
    .tut-article { padding: 32px var(--tut-shell-x) 60px; }
}

/* 9.3 ≤767 大屏手机：单列、卡片内边距再收、步骤卡竖排
   注意：--tut-shell-x 在这里【不跟随】收窄。它必须始终等于 vars.css 里
   .container 的左右 padding（20px），否则正文卡片会和顶部导航的 logo 错开。
   实测 390 / 360 视口，两边都是 20px 时正好落在同一条竖线上。 */
@media (max-width: 767px) {
    :root {
        --art-card-pad-y: 26px;
        --art-card-pad-x: 20px;
        --art-fs: .95rem;
        --art-lh: 1.85;
        --art-block-gap: 18px;
    }

    .tut-hero { padding: 48px 0 38px; }
    .tut-hero-sm { padding: 36px 0 28px; }
    .tut-hero h1 { font-size: clamp(1.28rem, 5.4vw, 1.7rem); }
    .tut-crumb .current { max-width: 100%; white-space: normal; }
    .tut-article { padding: 24px var(--tut-shell-x) 52px; }

    .tut-article-body h2 { font-size: 1.18rem; margin: 30px 0 12px; padding-left: 11px; border-left-width: 3px; }
    .tut-article-body h3 { font-size: 1.04rem; margin: 24px 0 10px; }
    .tut-article-body ul,
    .tut-article-body ol { padding-left: 20px; }

    /* 步骤卡：徽章改为在标题上方（单列） */
    .tut-article-body .step-num,
    .tut-article-body .step:has(> .step-number) {
        grid-template-columns: 1fr;
        column-gap: 0;
        row-gap: 8px;
    }
    .tut-article-body .step-num > *,
    .tut-article-body .step:has(> .step-number) > * { grid-column: 1; }
    .tut-article-body .step { padding: 16px 18px; }
    .tut-article-body .step-number { width: 34px; height: 34px; border-radius: 10px; font-size: .92rem; }
    .tut-article-body .step-title { font-size: 1rem; }
    .tut-article-body .step-list > li { padding-left: 52px; }
    .tut-article-body .step-list > li::before { width: 40px; height: 40px; border-radius: 11px; font-size: 1rem; }

    .tut-article-body .shortcut { flex-wrap: wrap; gap: 8px; }
    .tut-article-body .example-image,
    .tut-article-body div.example-image { padding: 14px 16px; }

    /* 引导块在小屏收紧内边距，少占一行 */
    .tut-article-body .article-lead { padding: 13px 16px; margin-bottom: 20px; }

    .tut-pager { grid-template-columns: 1fr; }
    .tut-pager a.next { text-align: left; align-items: flex-start; }

    .tut-article > .ad-slot { margin-bottom: 22px; }
    /* 手机端同样保留上下留白（选择器与桌面一致，勿用 :last-of-type，原因见第 8 节） */
    .tut-article > .ad-slot[data-ad-slot="article-bottom"] { margin: 26px 0 24px; }
}

/* 9.4 ≤560 手机：进一步压缩 */
@media (max-width: 560px) {
    :root {
        --art-card-pad-y: 22px;
        --art-card-pad-x: 16px;
        --art-fs: .93rem;
    }
    .tut-article-body .step { padding: 14px 15px; }
    .tut-article-body .table-wrap { margin: 14px 0 18px; }
    .tut-article-body th,
    .tut-article-body td { padding: 9px 12px; }
    .tut-article-body pre { padding: 13px 15px; font-size: .84rem; }
    .tut-article-body blockquote { padding: 14px 16px; }
}

/* 9.5 ≤380 超小屏 */
@media (max-width: 380px) {
    :root { --art-card-pad-x: 14px; }
    .tut-article-body .step-number { width: 30px; height: 30px; font-size: .85rem; }
    .tut-article-body .step-list > li { padding-left: 44px; }
    .tut-article-body .step-list > li::before { width: 34px; height: 34px; font-size: .92rem; }
}

/* 9.6 横向平板 / 矮屏：缩小首屏横幅 */
@media (max-height: 460px) and (orientation: landscape) {
    .tut-hero { padding: 28px 0 24px; }
    .tut-hero-sm { padding: 24px 0 20px; }
}


/* =============================================================================
   10. 无障碍 / 打印
   ============================================================================= */
@media (prefers-reduced-motion: reduce) {
    .tut-article-body *,
    .tut-back a,
    .tut-pager a { transition: none !important; animation: none !important; }
}

/* 触屏设备不做 hover 位移，避免点完“卡住” */
@media (hover: none) {
    .tut-pager a:hover { transform: none; }
    .tut-article-body tbody tr:hover { background: transparent; }
}

@media print {
    .glass-nav,
    .theme-switch,
    .modern-footer,
    .tut-back,
    .tut-pager,
    .tut-crumb,
    .tut-article > .ad-slot { display: none !important; }

    body { padding-top: 0; background: #fff; }
    .tut-hero { padding: 0 0 12px; background: none; border-bottom: 0; }
    .tut-hero::before,
    .tut-hero::after { display: none; }
    .tut-article { padding: 0; max-width: none; }
    .tut-article-body { box-shadow: none; border: 0; padding: 0; }
    .tut-article-body a { color: inherit; text-decoration: underline; }
    .tut-article-body .step,
    .tut-article-body pre,
    .tut-article-body .note,
    .tut-article-body .tip,
    .tut-article-body .tips { break-inside: avoid; }
}