/* 只做布局，颜色/圆角/字体全部取 Arco 原生变量，不另立主题 */

[v-cloak] { display: none; }

body {
  margin: 0;
  background: var(--color-fill-2);
  color: var(--color-text-1);
  font-family: var(--font-family-base, inherit);
  font-size: 14px;
  line-height: 1.8;
}

/* 顶栏 */
.hd {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 60px;
  padding: 0 24px;
  background: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border-2);
}
.hd .logo { width: 26px; height: 26px; border-radius: var(--border-radius-small); display: block; }
.hd .name { font-size: 16px; font-weight: 600; color: var(--color-text-1); }
.hd .sub { color: var(--color-text-3); font-size: 13px; }
.hd .nav { margin-left: auto; display: flex; gap: 20px; font-size: 14px; }

/* 页头 */
.ph {
  padding: 28px 32px;
  background: var(--color-bg-2);
  border-bottom: 1px solid var(--color-border-2);
}
.ph-in { max-width: 1160px; margin: 0 auto; }
.ph h1 { margin: 0 0 8px; font-size: 26px; font-weight: 600; color: var(--color-text-1); }
.ph p { margin: 0 0 14px; max-width: 640px; color: var(--color-text-2); }

/* 主体 */
.wrap {
  display: grid;
  grid-template-columns: 216px minmax(0, 1fr);
  gap: 20px;
  max-width: 1160px;
  margin: 0 auto;
  padding: 20px 24px 60px;
  align-items: start;
}
.wrap.single { grid-template-columns: minmax(0, 1fr); }

.side { position: sticky; top: 80px; }
.doc {
  /* grid 子项默认 min-width:auto，会被表格的最小宽度顶开把整页撑宽 */
  min-width: 0;
  padding: 8px 36px 36px;
  background: var(--color-bg-2);
  border-radius: var(--border-radius-medium);
  border: 1px solid var(--color-border-2);
}

/* 正文排版：沿用 Arco 的字色与间距尺度 */
.doc h2 {
  margin: 40px 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border-2);
  font-size: 20px;
  font-weight: 600;
  color: var(--color-text-1);
  scroll-margin-top: 76px;
}
.doc h3 {
  margin: 26px 0 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--color-text-1);
}
.doc p { margin: 10px 0; color: var(--color-text-2); }
.doc ul, .doc ol { margin: 10px 0; padding-left: 22px; color: var(--color-text-2); }
.doc li { margin: 4px 0; }
.doc strong { color: var(--color-text-1); font-weight: 600; }
.doc .step-tag { margin: 42px 0 0; }
.doc .step-tag + h2 { margin-top: 10px; }

/* 行内代码：对齐 Arco Typography 的 code 观感 */
.doc code {
  padding: 1px 5px;
  margin: 0 1px;
  font-family: var(--font-family-mono, ui-monospace, Consolas, Menlo, monospace);
  font-size: 13px;
  background: var(--color-fill-2);
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-small);
  color: var(--color-text-1);
  word-break: break-word;
}

/* 代码块 */
.code {
  margin: 14px 0;
  border: 1px solid var(--color-border-2);
  border-radius: var(--border-radius-small);
  overflow: hidden;
}
.code-hd {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 34px;
  padding: 0 6px 0 14px;
  background: var(--color-fill-2);
  border-bottom: 1px solid var(--color-border-2);
  font-size: 12px;
  color: var(--color-text-3);
}
.code pre {
  margin: 0;
  padding: 14px 16px;
  overflow-x: auto;
  background: var(--color-bg-2);
  font-family: var(--font-family-mono, ui-monospace, Consolas, Menlo, monospace);
  font-size: 13px;
  line-height: 1.7;
  color: var(--color-text-1);
}

/* 表格与提示块的外边距 */
.doc .kv, .doc .arco-alert, .doc .arco-collapse, .doc .arco-timeline { margin: 14px 0; }
.doc .arco-descriptions { margin: 14px 0; }
.doc .arco-timeline-item-content { padding-bottom: 14px; }
.doc .tl-t { font-weight: 600; color: var(--color-text-1); }
/* 表格里的长路径要能断行，否则窄屏把表格撑宽 */
.doc .kv .arco-table-td { word-break: break-word; }
.doc .kv code { overflow-wrap: anywhere; }

/* 首页卡片 */
.cards { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.cards .arco-card { height: 100%; }

/* 页脚 */
.ft {
  padding: 20px 24px 30px;
  border-top: 1px solid var(--color-border-2);
  background: var(--color-bg-2);
}
.ft-in {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 18px;
  max-width: 1160px;
  margin: 0 auto;
  font-size: 13px;
  color: var(--color-text-3);
}

@media (max-width: 900px) {
  .hd { padding: 0 16px; }
  .hd .sub { display: none; }
  .ph { padding: 22px 16px; }
  .ph h1 { font-size: 21px; }
  .wrap { grid-template-columns: minmax(0, 1fr); padding: 16px 12px 50px; }
  .side { display: none; }
  .doc { padding: 4px 18px 26px; border-radius: var(--border-radius-medium); }
  .doc h2 { font-size: 18px; }
}