/* API 设置 · 对照原型 XCAPISettings 深空金，平台/密钥逻辑不动 */

:root {
  --accent: #8a6d1f;
  --accent-2: #a3863e;
  --accent-soft: rgba(138, 109, 31, 0.1);
  --xc-gold: #8a6d1f;
  --xc-gold-3: #9a854e;
  --xc-gold-soft: rgba(138, 109, 31, 0.1);
  --xc-gold-line: rgba(138, 109, 31, 0.38);
  --xc-gold-grad: linear-gradient(135deg, #ecd9a0, #d3ba82);
}

html.theme-dark,
html.studio-theme-dark,
html.theme-dark body,
html.studio-theme-dark body {
  --bg: #070708;
  --panel: rgba(255, 255, 255, 0.04);
  --soft: rgba(255, 255, 255, 0.055);
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(255, 255, 255, 0.16);
  --text: rgba(242, 241, 234, 0.92);
  --muted: rgba(242, 241, 234, 0.58);
  --faint: rgba(242, 241, 234, 0.38);
  --accent: #f2e3ad;
  --accent-soft: rgba(242, 227, 173, 0.1);
  --xc-gold: #f2e3ad;
  --xc-gold-3: #c9b88f;
  --xc-gold-soft: rgba(242, 227, 173, 0.1);
  --xc-gold-line: rgba(242, 227, 173, 0.35);
  --xc-gold-grad: linear-gradient(135deg, #f2e3ad, #dcc899);
}

body.xc-api {
  font-family: "Space Grotesk", "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}
html:not(.theme-dark):not(.studio-theme-dark) body.xc-api {
  background: #f7f4ec !important;
}
html.theme-dark body.xc-api,
html.studio-theme-dark body.xc-api {
  background: #070708;
}

.xc-api .page > .wrap,
body.xc-api .wrap {
  width: min(1280px, calc(100% - 56px)) !important;
  max-width: min(1280px, calc(100% - 56px)) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.xc-api .page-head-brand {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.xc-api .xc-api-back {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid var(--xc-gold-line);
  color: var(--xc-gold);
  text-decoration: none;
  font-size: 12.5px;
  font-weight: 700;
}
.xc-api .xc-api-back:hover {
  background: var(--xc-gold-grad);
  color: #14100a;
  border-color: transparent;
}

.xc-api .page.api-patch .title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 17px !important;
  font-weight: 800 !important;
}
.xc-api .xc-patch-badge {
  font-size: 10.5px;
  letter-spacing: 2px;
  color: var(--xc-gold-3);
  border: 1px solid var(--xc-gold-line);
  border-radius: 999px;
  padding: 3px 10px;
  text-transform: uppercase;
  font-weight: 700;
}
.xc-api .page.api-patch .sub-kicker { color: var(--xc-gold-3); }

.xc-api .page.api-patch .api-hud-chip {
  border-radius: 16px;
  padding: 8px 14px;
  background: var(--panel);
  border-color: var(--line);
}
.xc-api .page.api-patch .api-hud-chip em {
  font-size: 20px;
  font-weight: 900;
  margin-left: 8px;
}

.xc-api .page.api-patch .sidebar.ports,
.xc-api .page.api-patch .block,
.xc-api .page.api-patch .content,
.xc-api .page.api-patch .seg,
.xc-api .page.api-patch .recommend-card {
  border-radius: 16px;
  border-color: var(--line);
}

.xc-api .page.api-patch .provider-card.active {
  background: var(--xc-gold-soft);
  box-shadow: inset 3px 0 0 var(--xc-gold);
  color: var(--text);
}
.xc-api .page.api-patch .provider-card:hover {
  border-color: var(--xc-gold-line);
}

.xc-api .page.api-patch .add-btn.pbtn.solid,
.xc-api .action-btn.save-btn,
.xc-api .api-page-save-btn,
.xc-api .action-btn.primary-btn {
  background: var(--xc-gold-grad) !important;
  color: #14100a !important;
  border-color: transparent !important;
  font-weight: 800;
}
.xc-api .action-btn.save-btn:hover,
.xc-api .api-page-save-btn:hover {
  box-shadow: 0 8px 18px rgba(138, 109, 31, 0.22);
}

.xc-api .page.api-patch .field-frame:focus-within,
.xc-api .page.api-patch select:focus,
.xc-api .page.api-patch input:focus {
  border-color: var(--xc-gold-line);
  box-shadow: 0 0 0 2px var(--xc-gold-soft);
}

.xc-api .page.api-patch .provider-enable-toggle.on {
  border-color: var(--xc-gold-line);
  background: var(--xc-gold-soft);
}

html.theme-dark .xc-api .api-link-btn,
html.studio-theme-dark .xc-api .api-link-btn {
  background: var(--xc-gold-soft);
  border-color: var(--xc-gold-line);
  color: var(--xc-gold);
  box-shadow: none;
}
html.theme-dark .xc-api .api-link-btn:hover,
html.studio-theme-dark .xc-api .api-link-btn:hover {
  background: var(--xc-gold-grad);
  border-color: transparent;
  color: #14100a;
}