/* ============================================================
   云梦 API · 品牌主题
   注入方式：nginx sub_filter 在 </head> 前插入本文件
   作用：覆盖 new-api 的 shadcn CSS 变量，实现整站换肤
   主色取自站点 Logo：#5898E8（hue 213° 天空蓝）
   选择器用 html:root / html.dark 提高优先级，压过
   new-api 自带的 :root、.dark 和 [data-theme-preset=*] 三套定义
   ============================================================ */

/* ------------------------- 亮色主题 ------------------------- */
html:root {
  --radius: 0.75rem;

  --background: #fbfdff;
  --foreground: #0f1a26;

  --card: #ffffff;
  --card-foreground: #0f1a26;
  --popover: #ffffff;
  --popover-foreground: #0f1a26;

  --primary: #4a8fe7;
  --primary-foreground: #ffffff;

  --secondary: #eaf2fd;
  --secondary-foreground: #1f4e8c;

  --muted: #f3f8fe;
  --muted-foreground: #5a6b80;

  --destructive: #e0453f;
  --destructive-foreground: #ffffff;
  --success: #12a06b;
  --success-foreground: #ffffff;
  --warning: #d99000;
  --warning-foreground: #ffffff;
  --info: #2f8fd8;
  --info-foreground: #ffffff;

  --border: #e2ecf8;
  --input: #e2ecf8;
  --ring: #7fb6f0;

  --chart-1: #4a8fe7;
  --chart-2: #38b2ac;
  --chart-3: #7c86e8;
  --chart-4: #b57be8;
  --chart-5: #3fbf7f;
  --overview-accent-1: #4a8fe7;
  --overview-accent-2: #38b2ac;
  --overview-accent-3: #7c86e8;

  --sidebar-foreground: #0f1a26;
  --sidebar-primary: #4a8fe7;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent-foreground: #2e6bc0;
  --sidebar-border: #e2ecf8;
  --sidebar-ring: #4a8fe7;

  --skeleton-base: #eef5fd;
  --skeleton-highlight: #f9fcff;

  /* 自定义品牌变量 */
  --brand-500: #4a8fe7;
  --brand-600: #3d82db;
  --brand-glow: 74 143 231;
  --brand-shadow: 0 1px 2px rgb(15 26 38 / 0.04), 0 8px 24px -12px rgb(74 143 231 / 0.18);
}

/* ------------------------- 暗色主题 -------------------------
   注意：必须同时写 `.dark`（不带 html 前缀）。
   首页 HTML 走 IsolatedHtmlContent 渲染在 Shadow DOM 里，
   它会把本文件整份克隆进 shadow root，并在内层 wrapper 上挂 .dark
   （见 new-api 源码 syncDarkClass()）。shadow root 内不存在 html 元素，
   所以 `html.dark` 匹配不到；只有 `.dark` 能命中 wrapper。
   若缺少这一条，暗色下 wrapper 会命中 new-api 自带的 .dark 变量，
   覆盖从 <html> 继承下来的品牌色，首页会掉回默认深蓝。
   ------------------------------------------------------------ */
html.dark,
.dark {
  --radius: 0.75rem;

  --background: #101720;
  --foreground: #e9f0f8;

  --card: #182130;
  --card-foreground: #e9f0f8;
  --popover: #1c2634;
  --popover-foreground: #e9f0f8;

  --primary: #5fa3f0;
  --primary-foreground: #0a1220;

  --secondary: #232f40;
  --secondary-foreground: #c6e1ff;

  --muted: #1d2734;
  --muted-foreground: #9db0c6;

  --destructive: #f0685f;
  --destructive-foreground: #14100f;
  --success: #35c08a;
  --success-foreground: #06160f;
  --warning: #e0a63a;
  --warning-foreground: #17110a;
  --info: #57a8e8;
  --info-foreground: #08131d;

  --border: #29364a;
  --input: #29364a;
  --ring: #5fa3f0;

  --chart-1: #5fa3f0;
  --chart-2: #45c2bc;
  --chart-3: #8f98f0;
  --chart-4: #c48cf0;
  --chart-5: #4ecf8d;
  --overview-accent-1: #5fa3f0;
  --overview-accent-2: #45c2bc;
  --overview-accent-3: #8f98f0;

  --sidebar-foreground: #e9f0f8;
  --sidebar-primary: #5fa3f0;
  --sidebar-primary-foreground: #0a1220;
  --sidebar-accent-foreground: #8fc2f5;
  --sidebar-border: #29364a;
  --sidebar-ring: #5fa3f0;

  --skeleton-base: #1d2734;
  --skeleton-highlight: #2b3849;

  --brand-500: #5fa3f0;
  --brand-600: #4a8fe7;
  --brand-glow: 95 163 240;
  --brand-shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 8px 24px -12px rgb(0 0 0 / 0.5);
}

/* ============================================================
   观感微调
   ============================================================ */

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 品牌色滚动条 */
html * {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in oklab, var(--primary) 35%, transparent) transparent;
}
html ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html ::-webkit-scrollbar-track {
  background: transparent;
}
html ::-webkit-scrollbar-thumb {
  background: color-mix(in oklab, var(--primary) 30%, transparent);
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: 999px;
}
html ::-webkit-scrollbar-thumb:hover {
  background: color-mix(in oklab, var(--primary) 55%, transparent);
  background-clip: content-box;
}

/* 卡片/弹层阴影柔化 */
html .shadow-sm { box-shadow: var(--brand-shadow) !important; }

/* 主按钮加一点品牌渐变，去掉模板感 */
html button[data-slot="button"][data-variant="default"],
html button[data-variant="default"],
html a[data-slot="button"][data-variant="default"] {
  background-image: linear-gradient(180deg,
    color-mix(in oklab, var(--primary) 88%, #ffffff) 0%,
    var(--primary) 100%);
  border-color: color-mix(in oklab, var(--primary) 80%, #000000 4%);
  box-shadow: 0 1px 2px rgb(var(--brand-glow) / 0.25), 0 6px 16px -8px rgb(var(--brand-glow) / 0.5);
}
html button[data-slot="button"][data-variant="default"]:hover,
html button[data-variant="default"]:hover {
  background-image: linear-gradient(180deg,
    var(--primary) 0%,
    color-mix(in oklab, var(--primary) 90%, #000000 6%) 100%);
}

/* 侧边栏选中态用品牌色左边条 */
html [data-slot="sidebar"] a[data-active="true"],
html [data-slot="sidebar"] a[aria-current="page"] {
  border-left: 3px solid var(--primary);
}

/* 链接悬停统一品牌色 */
html a:not([data-slot="button"]):hover {
  color: var(--primary);
}

/* 焦点环统一品牌色 */
html :focus-visible {
  outline-color: var(--ring);
}

/* ============================================================
   首页模板样式（HomePageContent 里用的 ym-* 类）
   用品牌变量写，自动跟随明暗主题
   ============================================================ */

.ym-home {
  max-width: 1080px;
  margin: 0 auto;
  padding: 8px 4px 64px;
  color: var(--foreground);
  line-height: 1.65;
  font-size: 15px;
}
.ym-home *,
.ym-home *::before,
.ym-home *::after { box-sizing: border-box; }

/* ---------- Hero ---------- */
.ym-hero {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 40px;
  align-items: center;
  padding: 48px 40px;
  border-radius: calc(var(--radius) * 2);
  border: 1px solid var(--border);
  background:
    radial-gradient(120% 140% at 88% 8%, color-mix(in oklab, var(--primary) 16%, transparent) 0%, transparent 58%),
    linear-gradient(180deg, color-mix(in oklab, var(--primary) 6%, var(--card)) 0%, var(--card) 62%);
  margin-bottom: 40px;
}
.ym-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 13%, transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 26%, transparent);
  margin-bottom: 18px;
}
.ym-home .ym-title {
  margin: 0 0 16px;
  font-size: 40px;
  line-height: 1.22;
  font-weight: 800;
  letter-spacing: -.02em;
}
.ym-accent {
  background: linear-gradient(96deg, var(--primary) 0%, color-mix(in oklab, var(--primary) 55%, #8f6cf0) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.ym-home .ym-sub {
  margin: 0 0 26px;
  color: var(--muted-foreground);
  font-size: 15.5px;
  max-width: 46em;
}
.ym-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 22px; }
.ym-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 42px;
  padding: 0 22px;
  border-radius: var(--radius);
  font-size: 14.5px;
  font-weight: 600;
  text-decoration: none;
  transition: transform .12s ease, box-shadow .18s ease, background-color .18s ease;
  border: 1px solid transparent;
}
.ym-btn:hover { transform: translateY(-1px); }
.ym-btn-primary {
  color: var(--primary-foreground);
  background-image: linear-gradient(180deg,
    color-mix(in oklab, var(--primary) 88%, #ffffff) 0%, var(--primary) 100%);
  box-shadow: 0 1px 2px rgb(var(--brand-glow) / .25), 0 10px 22px -10px rgb(var(--brand-glow) / .55);
}
.ym-btn-ghost {
  color: var(--foreground);
  background: var(--card);
  border-color: var(--border);
}
.ym-btn-ghost:hover { border-color: color-mix(in oklab, var(--primary) 45%, var(--border)); }

.ym-base { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 13px; }
.ym-base-label { color: var(--muted-foreground); }
.ym-base-code {
  padding: 5px 11px;
  border-radius: 8px;
  background: color-mix(in oklab, var(--primary) 9%, transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 22%, transparent);
  color: var(--primary);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
}

.ym-hero-art { display: flex; justify-content: center; }
.ym-logo {
  width: 190px;
  height: 190px;
  object-fit: cover;
  border-radius: 28px;
  border: 1px solid var(--border);
  box-shadow: 0 18px 44px -18px rgb(var(--brand-glow) / .55);
}

/* ---------- 特性卡片 ---------- */
.ym-grid { display: grid; gap: 16px; margin-bottom: 40px; }
.ym-grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ym-card {
  padding: 22px 20px;
  border-radius: calc(var(--radius) * 1.4);
  border: 1px solid var(--border);
  background: var(--card);
  transition: transform .14s ease, border-color .18s ease, box-shadow .18s ease;
}
.ym-card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in oklab, var(--primary) 40%, var(--border));
  box-shadow: 0 12px 28px -16px rgb(var(--brand-glow) / .5);
}
.ym-icon {
  width: 38px; height: 38px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px;
  font-size: 18px;
  margin-bottom: 14px;
  background: color-mix(in oklab, var(--primary) 13%, transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 24%, transparent);
}
.ym-home .ym-card-title { margin: 0 0 8px; font-size: 15.5px; font-weight: 700; }
.ym-home .ym-card-text { margin: 0; font-size: 13.5px; color: var(--muted-foreground); line-height: 1.6; }

/* ---------- 通用小节 ---------- */
.ym-section { margin-bottom: 40px; }
.ym-home .ym-h2 {
  margin: 0 0 18px;
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -.01em;
  padding-left: 13px;
  border-left: 3px solid var(--primary);
}
.ym-home .ym-p { margin: 0 0 16px; color: var(--muted-foreground); font-size: 14px; }
.ym-steps { margin: 0 0 22px; padding-left: 22px; color: var(--muted-foreground); font-size: 14.5px; }
.ym-steps li { margin-bottom: 6px; }
.ym-steps b { color: var(--foreground); }

/* ---------- 代码块 ---------- */
.ym-code {
  border-radius: calc(var(--radius) * 1.2);
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--foreground) 3.5%, var(--card));
  overflow: hidden;
  margin-bottom: 16px;
}
.ym-code-head {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  border-bottom: 1px solid var(--border);
  background: color-mix(in oklab, var(--primary) 5%, transparent);
}
.ym-home .ym-code pre {
  margin: 0;
  padding: 16px 18px;
  overflow-x: auto;
  background: transparent;
  border: 0;
}
.ym-home .ym-code code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: var(--foreground);
  background: transparent;
  padding: 0;
  border: 0;
  white-space: pre;
}

/* ---------- 表格 ---------- */
.ym-table-wrap {
  overflow-x: auto;
  border-radius: calc(var(--radius) * 1.2);
  border: 1px solid var(--border);
}
.ym-home .ym-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ym-home .ym-table th,
.ym-home .ym-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border);
}
.ym-home .ym-table th {
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  background: color-mix(in oklab, var(--primary) 5%, transparent);
}
.ym-home .ym-table tbody tr:last-child td { border-bottom: 0; }
.ym-home .ym-table tbody tr:hover { background: color-mix(in oklab, var(--primary) 5%, transparent); }
.ym-home .ym-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--primary);
  background: color-mix(in oklab, var(--primary) 10%, transparent);
  padding: 2px 7px;
  border-radius: 6px;
}

/* ---------- 标签 ---------- */
.ym-chips { display: flex; flex-wrap: wrap; gap: 9px; }
.ym-chip {
  padding: 7px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--foreground);
  background: var(--card);
  border: 1px solid var(--border);
  transition: border-color .16s ease, color .16s ease;
}
.ym-chip:hover {
  color: var(--primary);
  border-color: color-mix(in oklab, var(--primary) 45%, var(--border));
}

/* ---------- 底部提示 ---------- */
.ym-note {
  padding: 16px 20px;
  border-radius: calc(var(--radius) * 1.2);
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted-foreground);
  background: color-mix(in oklab, var(--primary) 7%, transparent);
  border: 1px solid color-mix(in oklab, var(--primary) 20%, transparent);
}
.ym-note b { color: var(--foreground); }

/* ---------- 服务范围声明 ---------- */
.ym-declare {
  margin-bottom: 40px;
  padding: 22px 24px;
  border-radius: calc(var(--radius) * 1.2);
  border: 1px solid color-mix(in oklab, var(--warning) 40%, var(--border));
  background: color-mix(in oklab, var(--warning) 7%, var(--card));
}
.ym-declare-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.ym-declare-icon {
  flex: none;
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 10px;
  font-size: 16px;
  line-height: 1;
  background: color-mix(in oklab, var(--warning) 16%, transparent);
  border: 1px solid color-mix(in oklab, var(--warning) 34%, transparent);
}
.ym-home .ym-declare-title {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -.01em;
}
.ym-declare-lead {
  margin: 0 0 12px;
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--foreground);
}
.ym-declare-lead strong {
  font-weight: 700;
  color: color-mix(in oklab, var(--warning) 78%, var(--foreground));
}
.ym-declare-list {
  margin: 0;
  padding-left: 22px;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted-foreground);
}
.ym-declare-list li { margin-bottom: 5px; }
.ym-declare-list li:last-child { margin-bottom: 0; }

/* ---------- 响应式 ---------- */
@media (max-width: 900px) {
  .ym-hero { grid-template-columns: 1fr; padding: 32px 22px; gap: 26px; }
  .ym-hero-art { order: -1; }
  .ym-logo { width: 132px; height: 132px; border-radius: 22px; }
  .ym-home .ym-title { font-size: 30px; }
  .ym-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .ym-grid-4 { grid-template-columns: 1fr; }
  .ym-home .ym-title { font-size: 26px; }
  .ym-btn { width: 100%; }
}