/* 文档页 docs.css */
.docs-layout{display:grid;grid-template-columns:220px 1fr;gap:32px;align-items:start}
@media(max-width:880px){.docs-layout{grid-template-columns:1fr}}
/* ⚠ 锚点跳转补偿：fixed 顶部导航 64px + 间距，避免标题被导航覆盖 */
html{scroll-padding-top:calc(var(--nav-h) + 24px)}
.docs-side{position:sticky;top:calc(var(--nav-h) + 20px);display:flex;flex-direction:column;gap:2px;
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:12px}
@media(max-width:880px){
  .docs-side{position:static;flex-direction:row;flex-wrap:wrap;overflow:visible;
    white-space:normal;gap:7px}
  .docs-side a{flex:0 0 auto;padding:8px 13px}
}
.docs-side a{padding:9px 14px;border-radius:10px;font-size:.9rem;color:var(--ink-2);white-space:nowrap}
.docs-side a:hover,.docs-side a.cur{background:rgba(61,90,254,.08);color:var(--primary);font-weight:600}
.docs-main{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:34px;min-width:0}
@media(max-width:640px){.docs-main{padding:22px 18px}}
.docs-main h2{font-size:1.25rem;font-weight:800;margin:34px 0 12px;scroll-margin-top:calc(var(--nav-h) + 20px)}
.docs-main h2:first-child{margin-top:0}
.docs-main p{font-size:.92rem;color:var(--ink-2);line-height:1.8;margin-bottom:12px}
.docs-main pre{background:#101430;color:#DCE2FF;border-radius:14px;padding:18px 20px;overflow-x:auto;
  font-family:var(--mono);font-size:.82rem;line-height:1.7;margin:14px 0}
.docs-main code{font-family:var(--mono);font-size:.92em;background:rgba(61,90,254,.08);color:var(--primary-deep);padding:2px 6px;border-radius:6px}
.docs-main pre code{background:none;color:inherit;padding:0}
.doc-steps{padding-left:1.4em;margin-bottom:14px;color:var(--ink-2);font-size:.92rem}
.doc-steps li{margin-bottom:8px;line-height:1.7;list-style:decimal}
.doc-tip{background:rgba(61,90,254,.06);border:1px solid rgba(61,90,254,.2);border-radius:12px;
  padding:14px 16px;font-size:.86rem;color:var(--ink-2);line-height:1.8;margin:14px 0}
.doc-table{margin:12px 0}
.doc-table table{width:100%;border-collapse:collapse;font-size:.88rem}
.doc-table th,.doc-table td{border:1px solid var(--border);padding:9px 11px;text-align:left;vertical-align:top}
.doc-table th{background:var(--bg-soft);font-weight:600;color:var(--ink-1)}
.doc-table td code{font-size:.82rem}

@media(max-width:640px){.docs-main li a{display:inline-block;padding:5px 2px}}

/* ⚠ 手机端：模型能力表（.tbl，JS 渲染）列多且宽（实测 640px），
   原先没有滚动容器，会把整页撑宽造成横向溢出（/docs 实测 clientWidth 390 → scrollWidth 409）。
   这里给表格套一层横向滚动，表格自身保留 min-width，避免被压扁到不可读。 */
@media(max-width:640px){
  .doc-table, .docs-main .tbl-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;
    margin:12px -2px;border-radius:10px}
  .doc-table::-webkit-scrollbar,.docs-main .tbl-wrap::-webkit-scrollbar{height:6px}
  .doc-table table, .docs-main table.tbl{min-width:560px}
  .doc-table table{font-size:.82rem}
  .doc-table th,.doc-table td{padding:8px 9px;white-space:nowrap}
}