/* ===========================================================
   六哥 API 文档 —— 墨黑 + 翡翠绿 主题
   - 顶栏/侧栏墨黑 #0f172a，强调色翡翠绿 #059669
   - 中性底色（无蓝紫底调）
   - 厂商品牌色仅作点缀：Claude 黏土橘 / OpenAI 翡翠绿 / Gemini 谷歌蓝 / 图像 琥珀
   =========================================================== */

:root {
  /* —— 主色：墨黑（顶栏 / 标题栏背景） —— */
  --md-primary-fg-color: #ffffff;
  --md-primary-fg-color--light: #ffffff;
  --md-primary-bg-color: #0f172a;
  --md-primary-bg-color--light: #1e293b;
  --md-primary-bg-color--dark: #020617;

  /* —— 强调色：翡翠绿 —— */
  --md-accent-fg-color: #059669;
  --md-accent-fg-color--transparent: rgba(5, 150, 105, 0.12);
  --md-typeset-a-color: #059669;

  /* —— 底色：中性（无蓝底调） —— */
  --md-default-bg-color: #fafafa;
  --md-default-bg-color--light: #fafafa;
  --md-default-bg-color--dark: #efefef;
  --md-default-fg-color--lightest: rgba(24, 24, 27, 0.08);

  /* —— 代码块 —— */
  --md-code-bg-color: #f4f4f5;
  --md-code-fg-color: #27272a;

  /* —— 字体（Inter 英文 + 系统中文；JetBrains Mono 代码） —— */
  --md-text-font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI",
    "PingFang SC", "Microsoft YaHei", "Hiragino Sans GB", sans-serif;
  --md-code-font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
    Consolas, "Liberation Mono", monospace;

  /* —— 厂商点缀色 —— */
  --c-claude: #cc785c;
  --c-openai: #10a37f;
  --c-gemini: #4285f4;
  --c-image: #d97706;
  --c-claude-t: #a85a40;
  --c-openai-t: #0b7a5e;
  --c-gemini-t: #2f6ad6;
  --c-image-t: #b25e04;
}

[data-md-color-scheme="slate"] {
  --md-primary-bg-color: #0f172a;
  --md-primary-bg-color--light: #1e293b;
  --md-primary-bg-color--dark: #020617;

  --md-default-bg-color: #0a0a0a;
  --md-default-bg-color--light: #141414;
  --md-default-bg-color--dark: #000000;
  --md-default-fg-color--lightest: rgba(255, 255, 255, 0.08);

  --md-accent-fg-color: #10b981; /* 深色下提亮，保证对比 */
  --md-accent-fg-color--transparent: rgba(16, 185, 129, 0.16);
  --md-typeset-a-color: #10b981;

  --md-code-bg-color: #161616;
  --md-code-fg-color: #e4e4e7;

  --c-claude-t: #e0947c;
  --c-openai-t: #34c9a4;
  --c-gemini-t: #7aa8f8;
  --c-image-t: #f0a64a;
}

/* ---------- 全局排版微调 ---------- */
.md-typeset {
  font-size: 0.82rem;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
}
.md-typeset h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  border-bottom: 1px solid var(--md-default-fg-color--lightest);
  padding-bottom: 0.4rem;
}
.md-typeset h2 {
  font-weight: 750;
  margin-top: 2.4em;
  letter-spacing: -0.01em;
}
.md-typeset h3 { font-weight: 650; }
.md-typeset a { text-underline-offset: 3px; }
.md-typeset :is(h1, h2, h3, h4) code { font-weight: 600; }

/* 顶栏标题字重 */
.md-header__title { font-weight: 700; }

/* ---------- 表格 ---------- */
.md-typeset table:not([class]) {
  display: table;
  border-collapse: collapse;
  font-size: 0.78rem;
  box-shadow: none;
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  overflow: hidden;
}
.md-typeset table:not([class]) th {
  background: color-mix(in srgb, var(--md-default-fg-color) 5%, transparent);
  font-weight: 650;
}
.md-typeset table:not([class]) td,
.md-typeset table:not([class]) th {
  border: 1px solid var(--md-default-fg-color--lightest);
  padding: 0.55em 0.85em;
}

/* ===========================================================
   首页 Hero
   =========================================================== */
.hero {
  position: relative;
  margin: 0 0 2rem;
  padding: 2.8rem 2.2rem 2.1rem;
  border-radius: 20px;
  background: #0f172a;
  border: 1px solid #1e293b;
  color: #fff;
  overflow: hidden;
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 130% at 88% -15%, rgba(16, 185, 129, 0.4), transparent 60%),
    radial-gradient(50% 100% at 5% 120%, rgba(16, 185, 129, 0.12), transparent 60%);
  pointer-events: none;
}
.hero > * { position: relative; }
.hero-title {
  font-size: 2.5rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  margin: 0 0 0.5rem;
  line-height: 1.1;
}
.hero-sub {
  font-size: 1.06rem;
  color: #cbd5e1;
  max-width: 62ch;
  margin: 0 0 1.5rem;
  line-height: 1.6;
}
.hero-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.hero .md-button {
  background: transparent;
  color: #e2e8f0;
  border: 1px solid rgba(255, 255, 255, 0.28);
  font-weight: 600;
}
.hero .md-button:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}
.hero .md-button--primary {
  background: #059669;
  color: #fff;
  border-color: #059669;
}
.hero .md-button--primary:hover {
  background: #047857;
  border-color: #047857;
}

/* ---------- 信息卡片网格 ---------- */
.kvs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 0.9rem;
  margin: 1.4rem 0;
}
.kv {
  border: 1px solid var(--md-default-fg-color--lightest);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  background: var(--md-default-bg-color);
  transition: border-color 0.15s, transform 0.15s;
}
.kv:hover { border-color: var(--md-accent-fg-color); transform: translateY(-1px); }
.kv .k {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--md-default-fg-color--light);
  margin-bottom: 0.3rem;
}
.kv .v { font-size: 0.86rem; color: var(--md-default-fg-color); word-break: break-all; }
.kv code { color: var(--md-accent-fg-color); font-size: 0.8rem; }

/* ===========================================================
   厂商徽章 / 标签 / callout
   =========================================================== */
.bdg {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.1;
  padding: 0.22em 0.58em;
  border-radius: 999px;
  vertical-align: middle;
  white-space: nowrap;
}
.bdg.claude { background: color-mix(in srgb, var(--c-claude) 16%, transparent); color: var(--c-claude-t); }
.bdg.openai { background: color-mix(in srgb, var(--c-openai) 16%, transparent); color: var(--c-openai-t); }
.bdg.gemini { background: color-mix(in srgb, var(--c-gemini) 16%, transparent); color: var(--c-gemini-t); }
.bdg.image  { background: color-mix(in srgb, var(--c-image)  16%, transparent); color: var(--c-image-t);  }
[data-md-color-scheme="slate"] .bdg.claude { background: color-mix(in srgb, var(--c-claude) 30%, transparent); }
[data-md-color-scheme="slate"] .bdg.openai { background: color-mix(in srgb, var(--c-openai) 30%, transparent); }
[data-md-color-scheme="slate"] .bdg.gemini { background: color-mix(in srgb, var(--c-gemini) 30%, transparent); }
[data-md-color-scheme="slate"] .bdg.image  { background: color-mix(in srgb, var(--c-image)  30%, transparent); }

.vendor-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.34em 0.8em;
  border-radius: 999px;
  margin: 0 0 0.4em;
  border: 1px solid;
}
.vendor-tag code { font-size: 0.78rem; background: none; padding: 0; }
.vendor-tag.claude { background: color-mix(in srgb, var(--c-claude) 10%, transparent); border-color: color-mix(in srgb, var(--c-claude) 35%, transparent); color: var(--c-claude-t); }
.vendor-tag.openai { background: color-mix(in srgb, var(--c-openai) 10%, transparent); border-color: color-mix(in srgb, var(--c-openai) 35%, transparent); color: var(--c-openai-t); }
.vendor-tag.gemini { background: color-mix(in srgb, var(--c-gemini) 10%, transparent); border-color: color-mix(in srgb, var(--c-gemini) 35%, transparent); color: var(--c-gemini-t); }
.vendor-tag.image  { background: color-mix(in srgb, var(--c-image)  10%, transparent); border-color: color-mix(in srgb, var(--c-image)  35%, transparent); color: var(--c-image-t);  }

/* 厂商 admonition */
.md-typeset .admonition.claude, .md-typeset details.claude { border-color: color-mix(in srgb, var(--c-claude) 35%, transparent); }
.md-typeset .claude > .admonition-title, .md-typeset details.claude > summary { background: color-mix(in srgb, var(--c-claude) 12%, transparent); color: var(--c-claude-t); }
.md-typeset .claude > .admonition-title::before, .md-typeset details.claude > summary::before { background-color: var(--c-claude); }

.md-typeset .admonition.openai, .md-typeset details.openai { border-color: color-mix(in srgb, var(--c-openai) 35%, transparent); }
.md-typeset .openai > .admonition-title, .md-typeset details.openai > summary { background: color-mix(in srgb, var(--c-openai) 12%, transparent); color: var(--c-openai-t); }
.md-typeset .openai > .admonition-title::before, .md-typeset details.openai > summary::before { background-color: var(--c-openai); }

.md-typeset .admonition.gemini, .md-typeset details.gemini { border-color: color-mix(in srgb, var(--c-gemini) 35%, transparent); }
.md-typeset .gemini > .admonition-title, .md-typeset details.gemini > summary { background: color-mix(in srgb, var(--c-gemini) 12%, transparent); color: var(--c-gemini-t); }
.md-typeset .gemini > .admonition-title::before, .md-typeset details.gemini > summary::before { background-color: var(--c-gemini); }

.md-typeset .admonition.image, .md-typeset details.image { border-color: color-mix(in srgb, var(--c-image) 35%, transparent); }
.md-typeset .image > .admonition-title, .md-typeset details.image > summary { background: color-mix(in srgb, var(--c-image) 12%, transparent); color: var(--c-image-t); }
.md-typeset .image > .admonition-title::before, .md-typeset details.image > summary::before { background-color: var(--c-image); }

/* 内置冷色调 admonition（note/info/abstract/example）统一改翡翠绿，杜绝蓝/紫 */
.md-typeset .admonition.note, .md-typeset details.note,
.md-typeset .admonition.info, .md-typeset details.info,
.md-typeset .admonition.abstract, .md-typeset details.abstract,
.md-typeset .admonition.tip, .md-typeset details.tip,
.md-typeset .admonition.success, .md-typeset details.success,
.md-typeset .admonition.question, .md-typeset details.question,
.md-typeset .admonition.example, .md-typeset details.example {
  border-color: color-mix(in srgb, var(--md-accent-fg-color) 32%, transparent);
}
.md-typeset .note > .admonition-title, .md-typeset details.note > summary,
.md-typeset .info > .admonition-title, .md-typeset details.info > summary,
.md-typeset .abstract > .admonition-title, .md-typeset details.abstract > summary,
.md-typeset .tip > .admonition-title, .md-typeset details.tip > summary,
.md-typeset .success > .admonition-title, .md-typeset details.success > summary,
.md-typeset .question > .admonition-title, .md-typeset details.question > summary,
.md-typeset .example > .admonition-title, .md-typeset details.example > summary {
  background: color-mix(in srgb, var(--md-accent-fg-color) 10%, transparent);
  color: color-mix(in srgb, var(--md-accent-fg-color) 75%, var(--md-default-fg-color));
}
.md-typeset .note > .admonition-title::before, .md-typeset details.note > summary::before,
.md-typeset .info > .admonition-title::before, .md-typeset details.info > summary::before,
.md-typeset .abstract > .admonition-title::before, .md-typeset details.abstract > summary::before,
.md-typeset .tip > .admonition-title::before, .md-typeset details.tip > summary::before,
.md-typeset .success > .admonition-title::before, .md-typeset details.success > summary::before,
.md-typeset .question > .admonition-title::before, .md-typeset details.question > summary::before,
.md-typeset .example > .admonition-title::before, .md-typeset details.example > summary::before {
  background-color: var(--md-accent-fg-color);
}

/* ---------- mermaid ---------- */
.mermaid { background: transparent !important; }
.md-typeset .mermaid svg { max-width: 100%; height: auto; }

/* ---------- 分辨率卡片 ---------- */
.res-grid { display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: flex-end; margin: 1.4rem 0; }
.res-grid .res {
  --rc: var(--c-image);
  display: grid; place-items: center; color: #fff; font-weight: 700; border-radius: 12px;
  background: linear-gradient(135deg, var(--rc), color-mix(in srgb, var(--rc) 55%, #fff));
  box-shadow: 0 6px 18px color-mix(in srgb, var(--rc) 35%, transparent);
}
.res-grid .res small { display: block; font-size: 0.7rem; font-weight: 500; opacity: 0.92; margin-top: 0.15em; }
.res-grid .res.r1 { width: 74px;  height: 74px;  font-size: 1.05rem; }
.res-grid .res.r2 { width: 116px; height: 116px; font-size: 1.3rem; }
.res-grid .res.r4 { width: 158px; height: 158px; font-size: 1.6rem; }
.res-cap { font-size: 0.78rem; color: var(--md-default-fg-color--light); margin: -0.4rem 0 1.4rem; }