/* ==========================================================================
   亦栈 · 全站主题  v2
   --------------------------------------------------------------------------
   适配 new-api v1.0.0-rc.41 的新前端（shadcn/ui + Tailwind）
   变量体系：--primary / --background / --card / --muted / --border / --ring ...
   旧版 Semi Design 的 --semi-color-* 在该版本已完全不存在
   注入方式：nginx sub_filter 挂到 </head> 前
   ========================================================================== */

/* ==========================================================================
   1. 亮色模式
   ========================================================================== */
:root,
html.light {
  --radius: 0.75rem !important;

  --background: #f7f7fa !important;
  --foreground: #16161d !important;

  --card: #ffffff !important;
  --card-foreground: #16161d !important;

  --popover: #ffffff !important;
  --popover-foreground: #16161d !important;

  /* 主色：靛蓝 */
  --primary: #5b5bd6 !important;
  --primary-foreground: #ffffff !important;

  --secondary: #eeeef4 !important;
  --secondary-foreground: #3a3a52 !important;

  --muted: #f2f2f7 !important;
  --muted-foreground: #6b6b80 !important;

  --accent: #eeeef4 !important;
  --accent-foreground: #16161d !important;

  --destructive: #e5484d !important;
  --destructive-foreground: #ffffff !important;
  --success: #12a594 !important;
  --success-foreground: #ffffff !important;
  --warning: #d99400 !important;
  --warning-foreground: #ffffff !important;
  --info: #0b7fc4 !important;
  --info-foreground: #ffffff !important;
  --neutral: #8a8a9e !important;
  --neutral-foreground: #ffffff !important;

  --border: #e4e4ec !important;
  --input: #e4e4ec !important;
  --ring: #5b5bd6 !important;

  --chart-1: #5b5bd6 !important;
  --chart-2: #12a594 !important;
  --chart-3: #8b5cf6 !important;
  --chart-4: #d068d8 !important;
  --chart-5: #20b46b !important;

  --sidebar: #ffffff !important;
  --sidebar-foreground: #16161d !important;
  --sidebar-primary: #5b5bd6 !important;
  --sidebar-primary-foreground: #ffffff !important;
  --sidebar-accent: #f2f2f7 !important;
  --sidebar-accent-foreground: #5b5bd6 !important;
  --sidebar-border: #e4e4ec !important;
  --sidebar-ring: #5b5bd6 !important;

  --skeleton-base: #eeeef4 !important;
  --skeleton-highlight: #f7f7fa !important;
}

/* ==========================================================================
   2. 暗色模式
   ========================================================================== */
html.dark,
.dark {
  --background: #0b0b10 !important;
  --foreground: #f0f0f5 !important;

  --card: #15151d !important;
  --card-foreground: #f0f0f5 !important;

  --popover: #1a1a24 !important;
  --popover-foreground: #f0f0f5 !important;

  --primary: #818cf8 !important;
  --primary-foreground: #0b0b10 !important;

  --secondary: #22222e !important;
  --secondary-foreground: #c9c9dc !important;

  --muted: #1c1c26 !important;
  --muted-foreground: #9292a8 !important;

  --accent: #22222e !important;
  --accent-foreground: #f0f0f5 !important;

  --destructive: #f2555a !important;
  --destructive-foreground: #0b0b10 !important;
  --success: #2fbfa0 !important;
  --success-foreground: #0b0b10 !important;
  --warning: #f0b429 !important;
  --warning-foreground: #0b0b10 !important;
  --info: #38a3e0 !important;
  --info-foreground: #0b0b10 !important;
  --neutral: #8a8a9e !important;
  --neutral-foreground: #0b0b10 !important;

  --border: rgba(255, 255, 255, 0.09) !important;
  --input: rgba(255, 255, 255, 0.14) !important;
  --ring: #818cf8 !important;

  --chart-1: #818cf8 !important;
  --chart-2: #2fbfa0 !important;
  --chart-3: #a78bfa !important;
  --chart-4: #e088e5 !important;
  --chart-5: #4ade80 !important;

  --sidebar: #101018 !important;
  --sidebar-foreground: #f0f0f5 !important;
  --sidebar-primary: #818cf8 !important;
  --sidebar-primary-foreground: #0b0b10 !important;
  --sidebar-accent: #1c1c26 !important;
  --sidebar-accent-foreground: #a5b4fc !important;
  --sidebar-border: rgba(255, 255, 255, 0.08) !important;
  --sidebar-ring: #818cf8 !important;

  --skeleton-base: #22222e !important;
  --skeleton-highlight: #2e2e3c !important;
}

/* ==========================================================================
   3. 全局观感
   ========================================================================== */
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter',
    'PingFang SC', 'HarmonyOS Sans SC', 'Microsoft YaHei', sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 暗色背景加氛围光 */
html.dark body {
  background:
    radial-gradient(900px 480px at 10% -10%, rgba(129, 140, 248, 0.11), transparent 62%),
    radial-gradient(760px 420px at 92% 2%, rgba(56, 189, 248, 0.07), transparent 58%),
    var(--background) !important;
  background-attachment: fixed !important;
}
html.light body {
  background:
    radial-gradient(900px 480px at 10% -10%, rgba(91, 91, 214, 0.055), transparent 62%),
    var(--background) !important;
  background-attachment: fixed !important;
}

/* 滚动条 */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--border);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background: var(--muted-foreground); }

/* ==========================================================================
   4. 组件（按 shadcn 的 data-slot 约定选中）
   ========================================================================== */

/* ---- 按钮 ---- */
[data-slot='button'] {
  border-radius: 9px !important;
  font-weight: 550 !important;
  transition: all 0.16s ease !important;
}
[data-slot='button']:not([disabled]):active {
  transform: translateY(1px);
}

/* 实心主按钮 → 渐变 */
[data-slot='button'].bg-primary,
[data-slot='button'][class*='bg-primary']:not([class*='bg-primary/']) {
  background-image: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%) !important;
  border: none !important;
  color: #fff !important;
  box-shadow: 0 4px 14px rgba(99, 102, 241, 0.3) !important;
}
[data-slot='button'].bg-primary:hover,
[data-slot='button'][class*='bg-primary']:not([class*='bg-primary/']):hover {
  background-image: linear-gradient(135deg, #7376f5 0%, #9d70f8 100%) !important;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.42) !important;
}

/* 登录页那个大按钮：铺满 + 加高 */
form [data-slot='button'][type='submit'] {
  height: 42px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
}

/* ---- 输入框 ---- */
[data-slot='form-control'],
input[type='text'],
input[type='password'],
input[type='email'],
input[type='number'],
textarea,
select {
  border-radius: 9px !important;
  transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
}
[data-slot='form-control']:focus,
input:focus,
textarea:focus,
select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.16) !important;
  outline: none !important;
}

/* ---- 表单标签 ---- */
[data-slot='form-label'] {
  font-weight: 550 !important;
  font-size: 13.5px !important;
  color: var(--foreground) !important;
}

/* ---- 卡片 / 弹窗 / 面板 ---- */
[data-slot='card'],
[data-slot='dialog-content'],
[data-slot='popover-content'],
[data-slot='dropdown-menu-content'],
[data-slot='table-container'] {
  border-radius: 14px !important;
  border-color: var(--border) !important;
}
html.dark [data-slot='card'] {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.035) inset,
              0 8px 26px rgba(0, 0, 0, 0.32) !important;
}

/* ---- 表格 ---- */
thead th {
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.02em;
  color: var(--muted-foreground) !important;
  background: var(--muted) !important;
}
tbody tr {
  transition: background 0.12s ease;
}
tbody tr:hover {
  background: rgba(99, 102, 241, 0.055) !important;
}

/* ---- 侧边栏 ---- */
[data-slot='sidebar'] a[data-active='true'],
[data-slot='sidebar'] [aria-current='page'] {
  background: rgba(99, 102, 241, 0.13) !important;
  color: var(--primary) !important;
  font-weight: 600 !important;
}

/* ==========================================================================
   5. 登录 / 注册页专属美化
   DOM 结构（来自实测 dump）：
   div.relative.grid.h-svh
     └ a[href="/"]             ← 左上角 logo
     └ div.container.flex
        └ div.mx-auto
           └ div.w-full.space-y-8   ← :has(> form) 命中它
              └ form.grid
   ========================================================================== */

/* 页面整体：加氛围背景 */
html.light div.grid.h-svh,
html.light div.relative.grid.h-svh {
  background:
    radial-gradient(760px 400px at 50% -12%, rgba(99, 102, 241, 0.14), transparent 66%),
    radial-gradient(600px 340px at 88% 108%, rgba(139, 92, 246, 0.1), transparent 62%),
    var(--background) !important;
}
html.dark div.grid.h-svh,
html.dark div.relative.grid.h-svh {
  background:
    radial-gradient(760px 400px at 50% -12%, rgba(129, 140, 248, 0.13), transparent 66%),
    radial-gradient(600px 340px at 88% 108%, rgba(139, 92, 246, 0.11), transparent 62%),
    var(--background) !important;
}

/* 把表单容器做成一张卡片 */
div:has(> form.grid),
div:has(> form) {
  padding: 36px 34px 34px !important;
  border-radius: 20px !important;
  border: 1px solid var(--border) !important;
  background: var(--card) !important;
  max-width: 430px !important;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.04) inset,
    0 22px 56px rgba(0, 0, 0, 0.14) !important;
}
html.dark div:has(> form) {
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.045) inset,
    0 24px 60px rgba(0, 0, 0, 0.5) !important;
}

/* 卡片内标题居中 */
div:has(> form) h2,
div:has(> form) h1 {
  text-align: center !important;
  font-size: 25px !important;
  font-weight: 680 !important;
  letter-spacing: -0.02em !important;
}
div:has(> form) > div:first-child p {
  text-align: center !important;
  font-size: 13.5px !important;
}

/* 表单间距 */
div:has(> form) form {
  gap: 18px !important;
}

/* 左上角 logo 区 */
a[href='/'] h1 {
  font-weight: 600 !important;
  letter-spacing: -0.01em !important;
}

/* 密码可见性切换按钮：别抢焦点样式 */
[data-slot='button'][aria-label*='password' i],
[data-slot='button'][aria-label*='密码'] {
  background: transparent !important;
  box-shadow: none !important;
  border: none !important;
}

/* 登录页底部的小链接 */
div:has(> form) a[href*='forgot'] {
  color: var(--muted-foreground) !important;
  font-size: 13px !important;
}
div:has(> form) a[href*='forgot']:hover {
  color: var(--primary) !important;
}

@media (max-width: 640px) {
  div:has(> form) {
    padding: 26px 20px 24px !important;
    border-radius: 16px !important;
  }
}

/* ==========================================================================
   6. 首页组件（HomePageContent 里的 .yz-* 结构）
      注意：这里已全部改用 shadcn 变量
   ========================================================================== */

.yz-wrap {
  max-width: 1040px;
  margin: 0 auto;
  padding: 8px 20px 64px;
  color: var(--foreground);
}

/* ---- Hero ---- */
.yz-hero {
  position: relative;
  padding: 54px 42px 46px;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--border);
  background:
    radial-gradient(660px 300px at 8% 0%, rgba(99, 102, 241, 0.19), transparent 62%),
    radial-gradient(540px 270px at 96% 12%, rgba(56, 189, 248, 0.12), transparent 58%),
    var(--card);
}
html.light .yz-hero {
  box-shadow: 0 10px 38px rgba(22, 22, 29, 0.07);
}

.yz-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 13px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--primary);
  background: rgba(99, 102, 241, 0.12);
  border: 1px solid rgba(99, 102, 241, 0.3);
}
.yz-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--success);
  box-shadow: 0 0 0 3px rgba(18, 165, 148, 0.2);
}

.yz-hero h1 {
  margin: 20px 0 6px;
  font-size: 46px;
  line-height: 1.08;
  font-weight: 720;
  letter-spacing: -0.035em;
  background: linear-gradient(120deg, var(--foreground) 22%, #8b5cf6 82%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.yz-tag {
  margin: 0 0 18px;
  font-size: 17px;
  font-weight: 600;
  color: var(--primary);
  letter-spacing: 0.045em;
}

.yz-lead {
  margin: 0;
  max-width: 620px;
  font-size: 15.5px;
  line-height: 1.75;
  color: var(--muted-foreground);
}

/* ---- 接入地址盒 ---- */
.yz-endpoint {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border-radius: 13px;
  background: var(--muted);
  border: 1px solid var(--border);
}
.yz-endpoint-label {
  font-size: 12px;
  font-weight: 650;
  color: var(--muted-foreground);
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.yz-endpoint code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--primary);
  background: transparent !important;
  padding: 0 !important;
  border: none !important;
  word-break: break-all;
}

/* ---- 小节标题 ---- */
.yz-section { margin-top: 46px; }
.yz-section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 19px;
  font-weight: 700;
  color: var(--foreground);
  letter-spacing: -0.012em;
}
.yz-section-title::before {
  content: '';
  width: 3px; height: 17px;
  border-radius: 2px;
  background: linear-gradient(180deg, #6366f1, #8b5cf6);
}

/* ---- 卡片网格 ---- */
.yz-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(236px, 1fr));
  gap: 15px;
}
.yz-card {
  padding: 21px 20px;
  border-radius: 15px;
  border: 1px solid var(--border);
  background: var(--card);
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}
.yz-card:hover {
  transform: translateY(-3px);
  border-color: rgba(99, 102, 241, 0.45);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.22);
}
html.light .yz-card:hover {
  box-shadow: 0 12px 30px rgba(22, 22, 29, 0.1);
}
.yz-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 38px; height: 38px;
  margin-bottom: 13px;
  border-radius: 11px;
  font-size: 18px;
  line-height: 1;
  background: rgba(99, 102, 241, 0.13);
  border: 1px solid rgba(99, 102, 241, 0.24);
}
.yz-card-icon svg {
  width: 19px;
  height: 19px;
  color: var(--primary);
}
.yz-card h3 {
  margin: 0 0 7px;
  font-size: 15px;
  font-weight: 650;
  color: var(--foreground);
}
.yz-card p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.68;
  color: var(--muted-foreground);
}

/* ---- 步骤 ---- */
.yz-steps { display: grid; gap: 12px; }
.yz-step {
  display: flex;
  gap: 15px;
  padding: 17px 19px;
  border-radius: 13px;
  border: 1px solid var(--border);
  background: var(--card);
}
.yz-step-num {
  flex: 0 0 27px;
  width: 27px; height: 27px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-size: 13px; font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}
.yz-step-body { flex: 1; min-width: 0; color: var(--muted-foreground); font-size: 14px; }
.yz-step-body strong {
  display: block;
  margin-bottom: 5px;
  font-size: 14.5px;
  color: var(--foreground);
}
.yz-step-body code,
.yz-inline-code {
  font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  padding: 2.5px 7px;
  border-radius: 6px;
  color: var(--primary);
  background: rgba(99, 102, 241, 0.12) !important;
  border: 1px solid rgba(99, 102, 241, 0.22) !important;
}

/* ---- 标签（厂商 / 客户端）---- */
.yz-chips,
.yz-clients {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.yz-chip,
.yz-clients span {
  padding: 7px 15px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 550;
  line-height: 1.35;
  color: var(--foreground);
  background: var(--muted);
  border: 1px solid var(--border);
  transition: all 0.16s ease;
}
.yz-chip:hover,
.yz-clients span:hover {
  color: var(--primary);
  border-color: rgba(99, 102, 241, 0.45);
  background: rgba(99, 102, 241, 0.09);
}

/* ---- 提示条 ---- */
.yz-tip {
  display: flex;
  gap: 12px;
  margin-top: 20px;
  padding: 15px 18px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--muted-foreground);
  background: rgba(18, 165, 148, 0.07);
  border: 1px solid rgba(18, 165, 148, 0.26);
}
.yz-tip b { color: var(--success); }
.yz-tip-icon {
  flex: 0 0 19px;
  display: flex;
  align-items: flex-start;
  padding-top: 2px;
}
.yz-tip-icon svg {
  width: 19px;
  height: 19px;
  color: var(--success);
}

/* 首页底部小字 */
.yz-foot-note {
  margin: 16px 0 0;
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--muted-foreground);
}
.yz-foot-note a {
  color: var(--primary);
  text-decoration: none;
  border-bottom: 1px solid rgba(99, 102, 241, 0.35);
}
.yz-foot-note a:hover {
  border-bottom-color: var(--primary);
}

/* ---- 小屏 ---- */
@media (max-width: 720px) {
  .yz-hero { padding: 38px 24px 34px; border-radius: 18px; }
  .yz-hero h1 { font-size: 34px; }
  .yz-tag { font-size: 15px; }
  .yz-wrap { padding: 4px 14px 48px; }
  .yz-section { margin-top: 34px; }
}

/* ==========================================================================
   7. 抹掉 new-api 痕迹
   ========================================================================== */

/* 顶栏版本号徽章 —— 点击会弹出 new-api 的更新公告
   结构: div[class*="system-brand"] > button[data-slot="dialog-trigger"]
   aria-label 会随语言变化，所以结构选择器为主、文案为兜底 */
div[class*='system-brand'] > button[data-slot='dialog-trigger'],
div[class*='system-brand'] > button[aria-haspopup='dialog'],
button[aria-label*='current version'],
button[aria-label*='当前版本'],
button[aria-label*='現在版本'],
button[title*='current version'],
button[title*='当前版本'] {
  display: none !important;
}