/* AI 入门 04 · 实用教程组件
   叠在 learn.css 之上，只加教程需要的部分：步骤圈、截图、下载卡、提示框、折叠说明、表格。
   截图上的红色编号圈（#e0431f）和步骤前的编号圈是同一个颜色：图里的 1、2，对应文字里的 1、2。

   注意：站上的阅读样式对 .article-body p 写了 !important（字号 17px、行高 1.95、下边距 1.45em），
   对 .reading-panel * 也强制了衬线字体（见 serif-reading-overrides-r6.css / learn-typography-r9.css）。
   下面所有选择器都以 body .guide-body 开头，需要盖过这些强制规则的地方才写 !important。 */
:root { --guide-red: #e0431f; --guide-mono: ui-monospace, "Cascadia Mono", Consolas, "Microsoft YaHei", monospace; }

/* ---------- 小件 ---------- */
body .guide-body .article-body h3 { margin: 32px 0 12px; color: var(--ink); font-size: 18px; line-height: 1.6; font-weight: 600; text-wrap: pretty; }
body .guide-body .article-body section > h3:first-of-type { margin-top: 24px; }
body .guide-body .article-body kbd,
body .guide-body .article-body code,
body .guide-body pre.guide-cmd { font-family: var(--guide-mono) !important; }
body .guide-body .article-body kbd { display: inline-block; padding: 0 6px; border: 1px solid var(--line-dark); border-bottom-width: 2px; border-radius: 4px; background: var(--paper-strong); color: var(--ink); font-size: 13px; font-weight: 500; line-height: 1.6; }
body .guide-body .article-body code { padding: 1px 6px; border-radius: 4px; background: rgba(45,60,50,.08); color: var(--ink); font-size: 13.5px; line-height: 1.7; overflow-wrap: anywhere; }
body .guide-body .article-body a.guide-inline-link,
body .guide-body .article-body .guide-links a { color: var(--accent-dark); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- 开始之前先看这一栏 ---------- */
body .guide-body .guide-glance { margin: 28px 0 8px; padding: 16px 0 2px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--line); }
body .guide-body .guide-glance > strong { display: block; margin-bottom: 6px; color: var(--forest); font-size: 14px; }
body .guide-body .guide-glance dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 34px; margin: 0; }
body .guide-body .guide-glance dl > div { padding: 12px 0 14px; border-top: 1px solid var(--line); }
body .guide-body .guide-glance dt { color: var(--accent-dark); font-size: 13px; font-weight: 600; }
body .guide-body .guide-glance dd { margin: 3px 0 0; color: var(--ink-soft); font-size: 15px; line-height: 1.85; }
body .guide-body .guide-glance dd strong { color: var(--ink); }

/* ---------- 六步路线 ---------- */
body .guide-body .guide-route { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 22px; margin: 22px 0 6px; padding: 0; list-style: none; }
body .guide-body .guide-route li { padding: 11px 0 13px; border-top: 1px solid var(--line-dark); }
body .guide-body .guide-route a { display: block; color: inherit; text-decoration: none; }
body .guide-body .guide-route span { display: block; color: var(--muted); font-size: 12px; }
body .guide-body .guide-route strong { display: block; margin-top: 4px; color: var(--ink); font-size: 15px; font-weight: 500; }
body .guide-body .guide-route a:hover strong { color: var(--accent-dark); }

/* ---------- 步骤：编号圈对应截图里的红圈 ---------- */
body .guide-body .guide-steps { list-style: none; counter-reset: gstep; margin: 14px 0 22px; padding: 0; }
body .guide-body .guide-steps > li { position: relative; counter-increment: gstep; margin: 0 0 12px; padding: 1px 0 1px 38px; min-height: 26px; }
body .guide-body .guide-steps > li::before { content: counter(gstep); position: absolute; left: 0; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--guide-red); color: #fff; font: 700 14px/26px var(--sans); text-align: center; }
body .guide-body .guide-steps > li > strong:first-child { color: var(--ink); font-weight: 600; }

/* ---------- 截图 ---------- */
body .guide-body .article-image.guide-shot { margin: 18px 0 14px; }
body .guide-body .article-image.guide-shot img { border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(29,33,30,.05), 0 10px 26px -18px rgba(29,33,30,.35); }
body .guide-body .article-image.guide-shot figcaption { margin-top: 9px; font-size: 13px; line-height: 1.75; }
body .guide-body .article-image.is-medium { max-width: 580px; }
body .guide-body .article-image.is-small { max-width: 420px; }
body .guide-body .article-image.is-tiny { max-width: 290px; }
body .guide-body .guide-pair { display: grid; grid-template-columns: minmax(0, 1fr) 176px; gap: 16px; align-items: end; margin: 20px 0 10px; }
body .guide-body .guide-pair figure { margin: 0; }
body .guide-body .guide-pair img { display: block; width: 100%; height: auto; border: 1px solid var(--line); border-radius: 10px; background: #fff; box-shadow: 0 1px 2px rgba(29,33,30,.05), 0 10px 26px -18px rgba(29,33,30,.35); }
body .guide-body .guide-pair figcaption { margin-top: 8px; color: var(--muted); font-size: 12.5px; line-height: 1.7; }

/* ---------- 下载卡 ---------- */
body .guide-body .guide-download { margin: 22px 0 10px; padding: 20px 22px 18px; border: 1px solid var(--line-dark); border-left: 3px solid var(--accent); background: var(--paper-strong); }
body .guide-body .guide-download > strong { display: block; margin-bottom: 4px; color: var(--ink); font-size: 17px; }
body .guide-body .guide-download p { margin: 0 0 14px !important; color: var(--muted); font-size: 14px !important; line-height: 1.85 !important; }
body .guide-body .article-body a.guide-button { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 22px; border-radius: 4px; background: var(--forest); color: #fff; font-size: 16px; font-weight: 600; text-decoration: none; }
body .guide-body .article-body a.guide-button:hover { background: var(--accent-dark); }
body .guide-body .article-body a.guide-button img { width: 18px; height: 18px; filter: invert(1); transform: rotate(90deg); }
body .guide-body .guide-links { display: flex; flex-wrap: wrap; gap: 2px 18px; margin: 14px 0 0; font-size: 14px; }

/* ---------- 提示框 ---------- */
body .guide-body .guide-note { margin: 22px 0; padding: 14px 18px; border-left: 3px solid var(--forest); background: rgba(45,60,50,.06); font-size: 15.5px; line-height: 1.85; }
body .guide-body .guide-note > strong:first-child { display: block; margin-bottom: 2px; color: var(--forest); font-size: 14px; }
body .guide-body .guide-note p { margin: 0 0 8px !important; font-size: 15.5px !important; line-height: 1.85 !important; }
body .guide-body .guide-note p:last-child { margin-bottom: 0 !important; }
body .guide-body .guide-note ul { margin: 6px 0 0; padding-left: 20px; }
body .guide-body .guide-note ul:last-child { margin-bottom: 0; }
body .guide-body .guide-note li { margin-bottom: 4px; }
body .guide-body .guide-note.is-warn { border-left-color: var(--accent); background: rgba(182,75,49,.07); }
body .guide-body .guide-note.is-warn > strong:first-child { color: var(--accent-dark); }

/* ---------- 折叠说明与命令 ---------- */
body .guide-body .guide-more { margin: 18px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
body .guide-body .guide-more > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; cursor: pointer; color: var(--ink); font-size: 15px; list-style: none; }
body .guide-body .guide-more > summary::-webkit-details-marker { display: none; }
body .guide-body .guide-more > summary::after { content: "展开"; color: var(--muted); font-size: 13px; }
body .guide-body .guide-more[open] > summary::after { content: "收起"; }
body .guide-body .guide-more > div { padding: 2px 0 14px; }
body .guide-body .guide-more p { margin: 0 0 12px !important; font-size: 15.5px !important; line-height: 1.85 !important; }
body .guide-body pre.guide-cmd { margin: 10px 0 12px; padding: 12px 14px; border-radius: 6px; background: #1d211e; color: #eef1ec; font-size: 13px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }

/* ---------- 可复制的提问（页面里有好几段） ---------- */
body .guide-body .article-body .prompt-example p { margin-bottom: 0 !important; white-space: pre-line; }
body .guide-body .prompt-example .copy-status { min-height: 22px; }
body .guide-body .prompt-example.is-short { margin: 14px 0; padding-bottom: 6px; }
body .guide-body .prompt-example.is-short .prompt-head { min-height: 38px; margin-bottom: 0; }
body .guide-body .prompt-example.is-short .copy-status { position: absolute; top: 9px; right: 56px; margin: 0; min-height: 0; }
body .guide-body .article-body .prompt-example.is-short p { font-size: 16px !important; line-height: 1.85 !important; }

/* ---------- 词条列表、表格 ---------- */
body .guide-body .term-list.is-compact .term-row { grid-template-columns: 146px minmax(0, 1fr); gap: 20px; padding: 13px 0; }
body .guide-body .term-list.is-compact .term-row dt { font-size: 15px; }
body .guide-body .term-list.is-compact .term-row dd { font-size: 15.5px; line-height: 1.85; }

body .guide-body .guide-table { width: 100%; margin: 20px 0; border-collapse: collapse; font-size: 14.5px; line-height: 1.8; }
body .guide-body .guide-table th, body .guide-body .guide-table td { padding: 12px 16px 12px 0; text-align: left; vertical-align: top; border-top: 1px solid var(--line); font-weight: 400; }
body .guide-body .guide-table thead th { border-top: 1px solid var(--ink); color: var(--muted); font-size: 13px; }
body .guide-body .guide-table tbody tr:last-child td, body .guide-body .guide-table tbody tr:last-child th { border-bottom: 1px solid var(--line); }
body .guide-body .guide-table tbody th { color: var(--ink); font-weight: 600; }
body .guide-body .guide-table td strong { color: var(--ink); }
body .guide-body .guide-table:not(.is-price) th:nth-child(1), body .guide-body .guide-table:not(.is-price) td:nth-child(1) { width: 25%; }
body .guide-body .guide-table:not(.is-price) th:nth-child(2), body .guide-body .guide-table:not(.is-price) td:nth-child(2) { width: 27%; }
body .guide-body .guide-table.is-price td, body .guide-body .guide-table.is-price th:not(:first-child) { text-align: right; padding-right: 0; white-space: nowrap; }
body .guide-body .article-body p.guide-table-note { margin: -8px 0 20px !important; color: var(--muted); font-size: 13.5px !important; line-height: 1.8 !important; }
body .guide-body .article-body ul.guide-note-list { margin: 10px 0 22px; padding-left: 22px; }
body .guide-body .article-body ul.guide-note-list li { margin-bottom: 10px; padding-left: 4px; }
body .guide-body .article-body ul.guide-note-list li::marker { color: var(--accent-dark); }

/* ---------- 窄屏 ---------- */
@media (max-width: 820px) {
  body .guide-body .guide-glance dl { grid-template-columns: 1fr; }
  body .guide-body .guide-route { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body .guide-body .article-body h3 { font-size: 17.5px; }
  body .guide-body .article-image.guide-shot { margin-block: 16px 12px; }
}
@media (max-width: 640px) {
  body .guide-body .guide-table:not(.is-price) thead { display: none; }
  body .guide-body .guide-table:not(.is-price), body .guide-body .guide-table:not(.is-price) tbody, body .guide-body .guide-table:not(.is-price) tr, body .guide-body .guide-table:not(.is-price) td { display: block; width: 100%; }
  body .guide-body .guide-table:not(.is-price) th:nth-child(n), body .guide-body .guide-table:not(.is-price) td:nth-child(n) { width: 100%; }
  body .guide-body .guide-table:not(.is-price) tr { padding: 12px 0; border-top: 1px solid var(--line); }
  body .guide-body .guide-table:not(.is-price) tbody tr:last-child { border-bottom: 1px solid var(--line); }
  body .guide-body .guide-table:not(.is-price) td { padding: 3px 0; border: 0; }
  body .guide-body .guide-table:not(.is-price) td::before { content: attr(data-label); display: block; color: var(--muted); font-size: 12px; }
  body .guide-body .guide-table:not(.is-price) tbody tr:last-child td { border: 0; }
  body .guide-body .term-list.is-compact .term-row { grid-template-columns: 1fr; gap: 6px; }
  body .guide-body .term-list.is-compact .term-row dd { font-size: 16px; }
}
@media (max-width: 560px) {
  body .guide-body .guide-download { padding: 18px 16px 16px; }
  body .guide-body .article-body a.guide-button { width: 100%; justify-content: center; }
  body .guide-body .guide-pair { grid-template-columns: minmax(0, 1fr) 34%; gap: 10px; }
  body .guide-body .guide-route { gap: 0 14px; }
  body .guide-body .article-image.is-tiny { max-width: 240px; }
  body .guide-body .guide-note { padding: 13px 15px; }
}

/* 点图看大图 */
body .guide-body .article-body a.guide-zoom { display: block; cursor: zoom-in; text-decoration: none; }