/* 文章详情页（docs）样式 —— 复用整站深色金融风 */
.article{padding:96px 24px 80px;min-height:60vh}
.article__inner{max-width:840px;margin:0 auto}
.article__back{display:inline-block;color:var(--muted);font-size:14px;margin-bottom:22px;transition:.2s}
.article__back:hover{color:var(--cyan)}
.article__title{font-size:clamp(28px,5vw,44px);line-height:1.18;margin:8px 0 28px;font-weight:800;
  background:linear-gradient(90deg,var(--cyan),var(--violet));
  -webkit-background-clip:text;background-clip:text;color:transparent}

.article__body{color:var(--text);font-size:16.5px;line-height:1.85}
.article__body h2{font-size:clamp(22px,3.4vw,30px);margin:42px 0 16px;line-height:1.3;
  padding-left:14px;border-left:4px solid transparent;border-image:linear-gradient(var(--cyan),var(--violet)) 1}
.article__body h3{font-size:22px;margin:32px 0 14px;line-height:1.3}
.article__body h4{font-size:18px;margin:26px 0 12px;color:var(--cyan)}
.article__body p{margin:16px 0;color:var(--muted)}
.article__body strong{color:var(--text);font-weight:700}
.article__body a{color:var(--cyan);text-decoration:underline;text-underline-offset:3px;word-break:break-all}
.article__body ul{margin:16px 0;padding-left:22px;color:var(--muted)}
.article__body li{margin:8px 0}
.article__body img{max-width:100%;border-radius:14px;margin:24px 0;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.article__body hr{border:none;border-top:1px solid var(--border);margin:36px 0}

/* 表格 */
.table-wrap{overflow-x:auto;margin:24px 0;border-radius:14px;border:1px solid var(--border)}
.article__body table{border-collapse:collapse;width:100%;font-size:15px;min-width:520px}
.article__body th,.article__body td{padding:12px 14px;border-bottom:1px solid var(--border);text-align:center;vertical-align:middle}
.article__body thead th{background:linear-gradient(90deg,rgba(34,211,238,.12),rgba(168,85,247,.12));
  color:var(--text);font-weight:700}
.article__body tbody tr:hover{background:rgba(255,255,255,.03)}

/* 提示框 ::: info */
.callout{margin:22px 0;padding:16px 20px;border-radius:14px;background:var(--surface);
  border:1px solid var(--border);border-left:4px solid var(--cyan)}
.callout__title{font-weight:700;color:var(--cyan);margin-bottom:8px;font-size:15px}
.callout__body{color:var(--muted);font-size:15px}
.callout__body p{margin:8px 0}
.callout__body ul{margin:8px 0}

@media(max-width:640px){.article{padding:80px 18px 60px}}

/* ---------- 详情页带目录时的两栏布局 ---------- */
.article__doc{max-width:1080px}            /* 比默认 840 稍宽，容纳侧边目录 */
.article__layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:40px;
  align-items:start;margin-top:8px}
.article__main{min-width:0}
.article__body h2,.article__body h3{scroll-margin-top:100px}  /* 锚点跳转不被吸顶导航遮挡 */

/* 目录（副标题导航，侧边吸顶） */
.toc{position:sticky;top:96px;align-self:start;max-height:calc(100vh - 120px);overflow:auto;
  padding:18px 16px;border-radius:14px;background:var(--surface);border:1px solid var(--border)}
.toc__title{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.1em;
  margin-bottom:12px;text-transform:uppercase}
.toc__list{list-style:none;margin:0;padding:0}
.toc__item{margin:0}
.toc__item a{display:block;padding:6px 10px;border-radius:8px;color:var(--muted);
  font-size:14px;line-height:1.5;border-left:2px solid transparent;transition:.15s;text-decoration:none}
.toc__item a:hover{color:var(--text);background:rgba(255,255,255,.04)}
.toc__item--h3 a{padding-left:24px;font-size:13px}
.toc__item a.active{color:var(--cyan);border-left-color:var(--cyan);background:rgba(34,211,238,.08)}

@media(max-width:900px){
  .article__layout{grid-template-columns:1fr;gap:0}
  .toc{position:static;max-height:none;margin-bottom:28px}
}