/* =============================================================
   YM API · 品牌视觉系统 (Sub2API 主题覆盖层)
   设计：UI Designer  ·  版本 v1
   -------------------------------------------------------------
   实现方式：Tailwind 硬编码类名 → 属性选择器 [class~="x"] 精确覆盖
   仅改观感，不改布局，不影响功能
   ============================================================= */

/* ---------- 1. 设计令牌 ---------- */
:root {
  /* 品牌主色阶（靛蓝 → 紫罗兰） */
  --brand-50:  #EEF2FF;
  --brand-100: #E0E7FF;
  --brand-200: #C7D2FE;
  --brand-300: #A5B4FC;
  --brand-400: #818CF8;
  --brand-500: #6366F1;
  --brand-600: #4F46E5;
  --brand-700: #4338CA;
  --brand-800: #3730A3;
  --brand-900: #312E81;
  --brand-950: #1E1B4B;

  /* 强调与渐变 */
  --accent:    #22D3EE;
  --accent-2:  #A855F7;
  --brand-gradient: linear-gradient(135deg, #6366F1 0%, #8B5CF6 55%, #A855F7 100%);
  --brand-gradient-soft: linear-gradient(135deg, rgba(99,102,241,.18) 0%, rgba(168,85,247,.14) 100%);
  --brand-ring: 0 0 0 3px rgba(99,102,241,.35);

  /* 中性表面（深蓝黑体系，比原生 slate 更沉稳） */
  --bg-base:      #0B1120;
  --bg-surface:   #111A2E;
  --bg-elevated:  #172136;
  --bg-elevated-2:#1F2C46;
  --border:       #26314F;
  --border-strong:#33415F;

  /* 文本层级 */
  --text-1: #E8ECF7;
  --text-2: #A6B0C7;
  --text-3: #6B7691;

  /* 语义色（暗底高可读） */
  --success: #34D399;
  --warning: #FBBF24;
  --danger:  #FB7185;
  --info:    #38BDF8;

  /* 阴影与过渡 */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.35);
  --shadow-md: 0 4px 14px -4px rgba(0,0,0,.5);
  --shadow-lg: 0 12px 32px -12px rgba(0,0,0,.65);
  --shadow-brand: 0 6px 20px -4px rgba(99,102,241,.45);
  --ease: cubic-bezier(.4, 0, .2, 1);
  --t-fast: 150ms var(--ease);
  --t-normal: 260ms var(--ease);
}

/* ---------- 2. 基础层 ---------- */
html, body, #app {
  min-height: 100%;
}

body {
  background-color: var(--bg-base) !important;
  background-image:
    radial-gradient(1100px 620px at 12% -12%, rgba(99,102,241,.16), transparent 62%),
    radial-gradient(880px 520px at 102% 0%,  rgba(168,85,247,.13), transparent 58%),
    radial-gradient(700px 500px at 50% 108%, rgba(34,211,238,.07), transparent 60%) !important;
  background-attachment: fixed !important;
  color: var(--text-1);
  font-family: 'Inter', 'HarmonyOS Sans SC', 'PingFang SC', 'Microsoft YaHei',
               system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue',
               Arial, 'Noto Sans CJK SC', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

::selection { background: rgba(99,102,241,.38); color: #fff; }

/* 滚动条 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #4F46E5, #7C3AED);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #6366F1, #A855F7); background-clip: padding-box; }
* { scrollbar-color: #4F46E5 transparent; scrollbar-width: thin; }

/* ---------- 3. 品牌色映射：teal 全族 → 品牌色阶 ---------- */
/* 背景 */
[class~="bg-teal-50"]  { background-color: var(--brand-50)  !important; }
[class~="bg-teal-100"] { background-color: var(--brand-100) !important; }
[class~="bg-teal-200"] { background-color: var(--brand-200) !important; }
[class~="bg-teal-300"] { background-color: var(--brand-300) !important; }
[class~="bg-teal-400"] { background-color: var(--brand-400) !important; }
[class~="bg-teal-500"] { background-color: var(--brand-500) !important; }
[class~="bg-teal-600"] { background-color: var(--brand-600) !important; }
[class~="bg-teal-700"] { background-color: var(--brand-700) !important; }
[class~="bg-teal-800"] { background-color: var(--brand-800) !important; }
[class~="bg-teal-900"] { background-color: var(--brand-900) !important; }
[class~="bg-teal-950"] { background-color: var(--brand-950) !important; }
/* 文字 */
[class~="text-teal-50"]  { color: var(--brand-50)  !important; }
[class~="text-teal-100"] { color: var(--brand-100) !important; }
[class~="text-teal-200"] { color: var(--brand-200) !important; }
[class~="text-teal-300"] { color: var(--brand-300) !important; }
[class~="text-teal-400"] { color: var(--brand-400) !important; }
[class~="text-teal-500"] { color: var(--brand-500) !important; }
[class~="text-teal-600"] { color: var(--brand-600) !important; }
[class~="text-teal-700"] { color: var(--brand-700) !important; }
[class~="text-teal-800"] { color: var(--brand-800) !important; }
[class~="text-teal-900"] { color: var(--brand-900) !important; }
/* 边框与分割 */
[class~="border-teal-200"] { border-color: var(--brand-200) !important; }
[class~="border-teal-300"] { border-color: var(--brand-300) !important; }
[class~="border-teal-400"] { border-color: var(--brand-400) !important; }
[class~="border-teal-500"] { border-color: var(--brand-500) !important; }
[class~="border-teal-600"] { border-color: var(--brand-600) !important; }
[class~="border-teal-700"] { border-color: var(--brand-700) !important; }
[class~="border-teal-800"] { border-color: var(--brand-800) !important; }
[class~="divide-teal-700"] > :not([hidden]) ~ :not([hidden]) { border-color: var(--brand-700) !important; }
[class~="divide-teal-800"] > :not([hidden]) ~ :not([hidden]) { border-color: var(--brand-800) !important; }
/* 焦点环 */
[class~="ring-teal-400"], [class~="ring-teal-500"], [class~="ring-teal-600"] { --tw-ring-color: var(--brand-500) !important; }
[class~="focus:ring-teal-400"]:focus, [class~="focus:ring-teal-500"]:focus { --tw-ring-color: var(--brand-400) !important; }
/* 渐变端点 */
[class~="from-teal-400"] { --tw-gradient-from: var(--brand-400) !important; }
[class~="from-teal-500"] { --tw-gradient-from: var(--brand-500) !important; }
[class~="from-teal-600"] { --tw-gradient-from: var(--brand-600) !important; }
[class~="to-teal-500"]   { --tw-gradient-to: var(--brand-500) !important; }
[class~="to-teal-600"]   { --tw-gradient-to: var(--brand-600) !important; }
[class~="to-teal-700"]   { --tw-gradient-to: var(--brand-700) !important; }

/* hover 变体（优先级高于基态） */
[class~="hover:bg-teal-500"]:hover { background-color: var(--brand-500) !important; }
[class~="hover:bg-teal-600"]:hover { background-color: var(--brand-600) !important; }
[class~="hover:bg-teal-700"]:hover { background-color: var(--brand-700) !important; }
[class~="hover:text-teal-300"]:hover { color: var(--brand-300) !important; }
[class~="hover:text-teal-400"]:hover { color: var(--brand-400) !important; }
[class~="hover:border-teal-400"]:hover, [class~="hover:border-teal-500"]:hover { border-color: var(--brand-400) !important; }

/* ---------- 4. 中性表面重铸 ---------- */
[class~="bg-slate-950"] { background-color: var(--bg-base) !important; }
[class~="bg-slate-900"] { background-color: var(--bg-surface) !important; }
[class~="bg-slate-800"] { background-color: var(--bg-elevated) !important; }
[class~="bg-slate-700"] { background-color: var(--bg-elevated-2) !important; }
[class~="hover:bg-slate-800"]:hover { background-color: var(--bg-elevated-2) !important; }
[class~="hover:bg-slate-700"]:hover { background-color: var(--border) !important; }

[class~="border-slate-600"] { border-color: var(--border-strong) !important; }
[class~="border-slate-700"] { border-color: var(--border) !important; }
[class~="border-slate-800"] { border-color: #1E2942 !important; }
[class~="divide-slate-700"] > :not([hidden]) ~ :not([hidden]) { border-color: var(--border) !important; }
[class~="divide-slate-800"] > :not([hidden]) ~ :not([hidden]) { border-color: #1E2942 !important; }

[class~="text-slate-100"], [class~="text-slate-200"] { color: var(--text-1) !important; }
[class~="text-slate-300"], [class~="text-slate-400"] { color: var(--text-2) !important; }
[class~="text-slate-500"] { color: var(--text-3) !important; }

/* gray 族兜底（部分组件混用） */
[class~="bg-gray-900"] { background-color: var(--bg-surface) !important; }
[class~="bg-gray-800"] { background-color: var(--bg-elevated) !important; }
[class~="border-gray-700"] { border-color: var(--border) !important; }
[class~="border-gray-800"] { border-color: #1E2942 !important; }

/* ---------- 5. 容器质感 ---------- */
[class~="bg-slate-950"],
[class~="bg-slate-900"],
[class~="bg-slate-800"] {
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-sm), var(--shadow-lg) !important;
}

/* 卡片式容器 hover 抬升（仅作用于可点击元素） */
a[class*="rounded"],
button[class*="rounded"] { transition: transform var(--t-fast), box-shadow var(--t-normal), background-color var(--t-fast), border-color var(--t-fast) !important; }
a[class*="rounded"]:hover:not(:disabled),
button[class*="rounded"]:hover:not(:disabled) { transform: translateY(-1px); }

/* ---------- 6. 侧边栏与顶栏 ---------- */
aside {
  background: linear-gradient(180deg, #0E1729 0%, #0A1020 100%) !important;
  border-right: 1px solid var(--border) !important;
  box-shadow: 4px 0 24px -12px rgba(0,0,0,.7) !important;
}
aside [class~="bg-slate-800"],
aside [class~="bg-slate-900"] { box-shadow: none !important; border-color: transparent !important; }

header {
  background: rgba(11,17,32,.72) !important;
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-color: var(--border) !important;
}

/* 侧边栏激活项：品牌渐变指示 */
aside a[class*="bg-"] , aside button[class*="bg-"] { position: relative; }
aside [class~="bg-teal-500"],
aside [class~="bg-teal-600"],
aside [class*="bg-brand"] {
  background-image: var(--brand-gradient) !important;
  box-shadow: var(--shadow-brand) !important;
}

/* ---------- 7. 按钮 ---------- */
button[class~="bg-teal-500"],
button[class~="bg-teal-600"],
a[class~="bg-teal-500"],
a[class~="bg-teal-600"] {
  background-image: var(--brand-gradient) !important;
  background-color: transparent !important;
  border-color: transparent !important;
  color: #fff !important;
  font-weight: 600 !important;
  letter-spacing: .01em;
  box-shadow: var(--shadow-brand) !important;
}
button[class~="bg-teal-500"]:hover:not(:disabled),
button[class~="bg-teal-600"]:hover:not(:disabled),
a[class~="bg-teal-500"]:hover,
a[class~="bg-teal-600"]:hover {
  filter: brightness(1.08) saturate(1.05);
  transform: translateY(-1px);
  box-shadow: 0 10px 26px -6px rgba(99,102,241,.6) !important;
}
button[class~="bg-teal-500"]:active:not(:disabled),
button[class~="bg-teal-600"]:active:not(:disabled) { transform: translateY(0); }

/* 次要按钮的聚焦环 */
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: none;
  box-shadow: var(--brand-ring) !important;
}

/* ---------- 8. 表单控件 ---------- */
input, select, textarea {
  background-color: var(--bg-elevated) !important;
  border-color: var(--border) !important;
  color: var(--text-1) !important;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
input::placeholder, textarea::placeholder { color: var(--text-3) !important; }
input:focus, select:focus, textarea:focus {
  border-color: var(--brand-400) !important;
  box-shadow: var(--brand-ring) !important;
}

/* ---------- 9. 表格 ---------- */
table { border-collapse: separate; border-spacing: 0; }
thead th {
  background: linear-gradient(180deg, #16203A, #121B30) !important;
  color: var(--text-2) !important;
  font-weight: 600 !important;
  font-size: .8125rem !important;
  letter-spacing: .02em;
  border-bottom: 1px solid var(--border) !important;
  white-space: nowrap;
}
tbody td { border-bottom: 1px solid #1B2540 !important; color: var(--text-1); }
tbody tr { transition: background-color var(--t-fast); }
tbody tr:nth-child(even) { background-color: rgba(255,255,255,.014) !important; }
tbody tr:hover { background-color: rgba(99,102,241,.09) !important; }

/* ---------- 10. 徽章 / 标签 ---------- */
[class~="bg-teal-100"], [class~="bg-teal-900"] { color: var(--brand-100) !important; }
[class~="rounded-full"][class*="bg-teal"] {
  background-image: var(--brand-gradient-soft) !important;
  border: 1px solid rgba(129,140,248,.35) !important;
  color: var(--brand-200) !important;
}

/* ---------- 11. 弹层 ---------- */
[role="dialog"], [role="menu"], [role="listbox"] {
  background-color: var(--bg-surface) !important;
  border: 1px solid var(--border) !important;
  box-shadow: var(--shadow-lg), 0 0 0 1px rgba(99,102,241,.08) !important;
}

/* ---------- 12. 首页 / Markdown 内容 ---------- */
main h1, main h2, main h3 { color: var(--text-1); letter-spacing: -.01em; }
main a { color: var(--brand-300); text-decoration: none; }
main a:hover { color: var(--brand-200); text-decoration: underline; }
main code {
  background: rgba(99,102,241,.14) !important;
  color: var(--brand-200) !important;
  padding: .12em .4em; border-radius: 6px; font-size: .9em;
}
main pre {
  background: #0A1020 !important;
  border: 1px solid var(--border) !important;
  border-radius: 12px;
}
main blockquote {
  border-left: 3px solid var(--brand-500) !important;
  background: rgba(99,102,241,.08);
  border-radius: 0 10px 10px 0;
}

/* ---------- 13. JS 增强钩子 ---------- */
.ym-table-wrap {
  border: 1px solid var(--border) !important;
  border-radius: 14px !important;
  overflow: hidden !important;
  background: var(--bg-surface) !important;
}
.ym-table-scroll { border-radius: 14px !important; }

.ym-prose { line-height: 1.75; color: var(--text-2); }
.ym-prose h1 { font-size: 2rem; font-weight: 700; margin: 0 0 .6em; }
.ym-prose h2 { font-size: 1.375rem; font-weight: 650; margin: 1.4em 0 .5em; }
.ym-prose h3 { font-size: 1.125rem; font-weight: 600; margin: 1.2em 0 .4em; }
.ym-prose p  { margin: .75em 0; }
.ym-prose ul, .ym-prose ol { padding-left: 1.35em; margin: .6em 0; }
.ym-prose li { margin: .3em 0; }
.ym-prose strong { color: var(--text-1); font-weight: 650; }

/* ---------- 14. 动效与可访问性 ---------- */
@keyframes ym-fade-up { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
main, [class~="bg-slate-900"] { animation: ym-fade-up .32s var(--ease) both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}