/* =========================================================
   NewAPI 全局高级质感皮肤 v5 — Linear × Apple 顶级沉浸版
   (Kimi-K3 美学秩序 + 鹿岛生产实装架构: 纯净漫反射 · 穿透层级 · 发丝微阶)
   ========================================================= */

/* ── 1. 设计系统 Token 映射 ──────────────────────────────── */
:root, body, body[data-theme-preset] {
  --background: #f8f9fc;
  --foreground: #0f172a;
  --card: rgba(255, 255, 255, 0.88);
  --card-foreground: #0f172a;
  --popover: rgba(255, 255, 255, 0.95);
  --popover-foreground: #0f172a;
  --primary: #f43f5e;
  --primary-foreground: #ffffff;
  --secondary: #f1f5f9;
  --secondary-foreground: #334155;
  --muted: #f1f5f9;
  --muted-foreground: #64748b;
  --accent: #fecdd3;
  --accent-foreground: #9f1239;
  --destructive: #ef4444;
  --destructive-foreground: #ffffff;
  --border: rgba(226, 232, 240, 0.8);
  --input: rgba(226, 232, 240, 0.85);
  --ring: #f43f5e;
  --radius: 0.75rem;

  --sidebar: rgba(255, 255, 255, 0.82);
  --sidebar-foreground: #0f172a;
  --sidebar-primary: #f43f5e;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #fff1f2;
  --sidebar-accent-foreground: #f43f5e;
  --sidebar-border: rgba(226, 232, 240, 0.75);
  --sidebar-ring: #f43f5e;

  --color-blue-500: #f43f5e;
  --color-blue-600: #e11d48;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── 2. 全局环境光晕场（Ambient Mesh Glow + 天光带） ──────── */
body {
  background-color: #f8f9fc !important;
  background-image:
    linear-gradient(180deg, rgba(244, 63, 94, 0.05) 0%, rgba(99, 102, 241, 0.02) 280px, transparent 420px),
    radial-gradient(ellipse 80% 45% at 50% -10%, rgba(244, 63, 94, 0.065) 0%, transparent 60%),
    radial-gradient(circle 860px at 90% 90%, rgba(99, 102, 241, 0.045) 0%, transparent 68%),
    radial-gradient(circle 680px at 10% 45%, rgba(168, 85, 247, 0.035) 0%, transparent 62%) !important;
  background-size: 100% 100%, 100% 100%, 100% 100%, 100% 100% !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* ── 3. 打通 React 壳层容器，让环境光晕完整显露 ────────── */
#root,
#root > div,
div.bg-background.min-h-svh,
div.bg-background.h-svh,
div.bg-background.min-h-screen,
div.bg-background.min-h-dvh {
  background-color: transparent !important;
  background-image: none !important;
}

/* ── 4. 顶栏 & 侧边栏（Linear 极简分层 + 毛玻璃） ─────────── */
header {
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(16px) saturate(1.4) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.4) !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.75) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
}
aside {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(18px) saturate(1.3) !important;
  -webkit-backdrop-filter: blur(18px) saturate(1.3) !important;
  border-right: 1px solid rgba(226, 232, 240, 0.75) !important;
}
aside nav a[aria-current],
aside nav a[class*="bg-primary"],
aside nav a[class*="bg-accent"],
aside nav a[class*="bg-sidebar-accent"],
aside [class*="sidebar"] [data-active="true"],
aside nav [class*="active"] {
  background: rgba(244, 63, 94, 0.08) !important;
  color: #e11d48 !important;
  font-weight: 600 !important;
  border-radius: 0.5rem !important;
}
aside nav a[aria-current]::before,
aside nav a[class*="bg-primary"]::before,
aside nav a[class*="bg-accent"]::before,
aside nav a[class*="bg-sidebar-accent"]::before,
aside [class*="sidebar"] [data-active="true"]::before,
aside nav [class*="active"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 18%;
  bottom: 18%;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: #f43f5e !important;
  box-shadow: 0 0 8px rgba(244, 63, 94, 0.6) !important;
}

/* ── 5. 控制台仪表盘 & 统计四宫格 (Console KPI Cards) ─────── */
main .grid > div,
div[data-slot="card"],
main [class*="rounded-xl"][class*="border"] {
  background: rgba(255, 255, 255, 0.84) !important;
  backdrop-filter: blur(12px) saturate(1.2) !important;
  -webkit-backdrop-filter: blur(12px) saturate(1.2) !important;
  border: 1px solid rgba(226, 232, 240, 0.8) !important;
  border-radius: 0.8rem !important;
  box-shadow:
    0 1px 3px 0 rgba(0, 0, 0, 0.02),
    0 1px 2px -1px rgba(0, 0, 0, 0.02) !important;
  transition: transform 0.25s var(--ease-out-expo), border-color 0.25s var(--ease-out-expo), box-shadow 0.25s var(--ease-out-expo) !important;
}
main .grid > div:hover,
div[data-slot="card"]:hover,
main [class*="rounded-xl"][class*="border"]:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(244, 63, 94, 0.25) !important;
  box-shadow:
    0 10px 24px -6px rgba(244, 63, 94, 0.09),
    0 2px 6px -2px rgba(0, 0, 0, 0.04) !important;
}

[class*="tabular-nums"],
div[data-slot="card"] .text-2xl,
div[data-slot="card"] .text-3xl {
  font-feature-settings: "tnum" !important;
  letter-spacing: -0.02em !important;
}

/* ── 6. 模型广场 (Model Hub) 卡片与定价标签精修 ───────────── */
div[data-slot="data-table-card"] {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(10px) !important;
  border: 1px solid rgba(226, 232, 240, 0.85) !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.02) !important;
  transition: all 0.22s var(--ease-out-expo) !important;
}
div[data-slot="data-table-card"]:hover {
  transform: translateY(-2px) !important;
  border-color: rgba(244, 63, 94, 0.3) !important;
  box-shadow: 0 8px 20px -4px rgba(244, 63, 94, 0.08) !important;
}

[data-slot="status-badge"],
[data-slot="badge"] {
  font-feature-settings: "tnum" !important;
  font-weight: 500 !important;
  border-radius: 6px !important;
  letter-spacing: 0.01em !important;
}

/* ── 7. 手动禁用渠道：Apple 式「优雅淡出 · 纯净通透」────────── */
div[data-slot="data-table-card"]:has(button[aria-label="启用"]),
div[data-slot="data-table-card"]:has(button[aria-label="Enable"]),
div[data-slot="data-table-card"][class*="table-disabled"] {
  opacity: 0.44 !important;
  filter: saturate(0.2) !important;
  box-shadow: none !important;
  border-color: rgba(226, 232, 240, 0.5) !important;
  transition: all 0.25s var(--ease-out-expo) !important;
}
div[data-slot="data-table-card"]:has(button[aria-label="启用"]):hover,
div[data-slot="data-table-card"]:has(button[aria-label="Enable"]):hover,
div[data-slot="data-table-card"][class*="table-disabled"]:hover {
  opacity: 0.88 !important;
  filter: saturate(0.85) !important;
  transform: translateY(-2px) !important;
  border-color: rgba(203, 213, 225, 0.8) !important;
  box-shadow: 0 8px 20px -4px rgba(0, 0, 0, 0.05) !important;
}

/* ── 8. 数据表格精修（放宽行高、去竖线、微渐变高亮） ────────── */
table[data-slot="table"],
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: 0.75rem !important;
  overflow: hidden !important;
  background: rgba(255, 255, 255, 0.75) !important;
  backdrop-filter: blur(10px) !important;
}
thead th {
  font-weight: 600 !important;
  color: #64748b !important;
  font-size: 0.75rem !important;
  letter-spacing: 0.04em !important;
  text-transform: uppercase !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.8) !important;
  padding: 13px 16px !important;
}
tbody tr {
  transition: background 0.18s ease !important;
}
tbody tr:hover {
  background: rgba(244, 63, 94, 0.04) !important;
}
tbody td {
  border-bottom: 1px solid rgba(226, 232, 240, 0.6) !important;
  padding: 12px 16px !important;
}

/* ── 9. 表单输入框与搜索栏（极简发丝微边框） ───────────────── */
input[type="text"],
input[type="search"],
input[type="password"],
input[type="number"],
select,
textarea {
  border: 1px solid rgba(203, 213, 225, 0.85) !important;
  border-radius: 0.55rem !important;
  background: rgba(255, 255, 255, 0.8) !important;
  backdrop-filter: blur(6px) !important;
  transition: all 0.2s var(--ease-out-expo) !important;
}
input:focus,
select:focus,
textarea:focus {
  border-color: #f43f5e !important;
  box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.12) !important;
  background: rgba(255, 255, 255, 0.98) !important;
  outline: none !important;
}

/* ── 10. 滚动条隐形高级化 ───────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(244, 63, 94, 0.5);
}

/* ── 11. 暗色模式适配 (Linear Dark 纯净暗涌) ─────────────── */
.dark, .dark body, .dark body[data-theme-preset] {
  --background: #090a0f;
  --foreground: #f1f5f9;
  --card: rgba(15, 20, 32, 0.82);
  --card-foreground: #f1f5f9;
  --border: rgba(30, 41, 59, 0.7);
  --sidebar: rgba(11, 15, 25, 0.85);
  --sidebar-border: rgba(30, 41, 59, 0.7);
  --muted: #131927;
  --muted-foreground: #94a3b8;
}

.dark body {
  background-color: #090a0f !important;
  background-image:
    linear-gradient(180deg, rgba(244, 63, 94, 0.08) 0%, rgba(99, 102, 241, 0.03) 260px, transparent 400px),
    radial-gradient(ellipse 80% 45% at 50% -10%, rgba(244, 63, 94, 0.12) 0%, transparent 60%),
    radial-gradient(circle 860px at 90% 90%, rgba(99, 102, 241, 0.08) 0%, transparent 68%),
    radial-gradient(circle 680px at 10% 45%, rgba(168, 85, 247, 0.06) 0%, transparent 62%) !important;
}

.dark header {
  background: rgba(11, 15, 25, 0.82) !important;
  border-bottom-color: rgba(30, 41, 59, 0.7) !important;
}
.dark aside {
  background: rgba(11, 15, 25, 0.85) !important;
  border-right-color: rgba(30, 41, 59, 0.7) !important;
}

.dark main .grid > div,
.dark div[data-slot="card"],
.dark div[data-slot="data-table-card"],
.dark main [class*="rounded-xl"][class*="border"] {
  background: rgba(15, 20, 32, 0.82) !important;
  border-color: rgba(30, 41, 59, 0.7) !important;
}
.dark main .grid > div:hover,
.dark div[data-slot="card"]:hover,
.dark div[data-slot="data-table-card"]:hover,
.dark main [class*="rounded-xl"][class*="border"]:hover {
  background: rgba(18, 24, 38, 0.94) !important;
  border-color: rgba(244, 63, 94, 0.35) !important;
  box-shadow: 0 10px 24px -6px rgba(244, 63, 94, 0.14) !important;
}

.dark table[data-slot="table"],
.dark table {
  background: rgba(15, 20, 32, 0.7) !important;
}
.dark thead th {
  color: #94a3b8 !important;
  border-bottom-color: rgba(30, 41, 59, 0.7) !important;
}
.dark tbody td {
  border-bottom-color: rgba(30, 41, 59, 0.5) !important;
}
.dark tbody tr:hover {
  background: rgba(244, 63, 94, 0.07) !important;
}

.dark input[type="text"],
.dark input[type="search"],
.dark input[type="password"],
.dark input[type="number"],
.dark select,
.dark textarea {
  background: rgba(15, 20, 32, 0.8) !important;
  border-color: rgba(30, 41, 59, 0.8) !important;
  color: #f1f5f9 !important;
}


/* ── 12. 暗色模式补充：侧边栏文字与高对比度 ──────────────── */
html.dark aside,
body.dark aside,
.dark aside {
  --sidebar-foreground: #f1f5f9 !important;
}

html.dark aside nav a,
body.dark aside nav a,
.dark aside nav a,
html.dark aside button,
body.dark aside button,
.dark aside button {
  color: #cbd5e1 !important;
}

html.dark aside nav a:hover,
body.dark aside nav a:hover,
.dark aside nav a:hover,
html.dark aside button:hover,
body.dark aside button:hover,
.dark aside button:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
}

html.dark aside nav a[aria-current],
body.dark aside nav a[aria-current],
.dark aside nav a[aria-current],
html.dark aside nav a[class*="active"],
body.dark aside nav a[class*="active"],
.dark aside nav [class*="active"],
html.dark aside [data-active="true"],
body.dark aside [data-active="true"],
.dark aside [data-active="true"] {
  background: rgba(244, 63, 94, 0.15) !important;
  color: #fb7185 !important;
}

html.dark aside [class*="text-sidebar-foreground"],
body.dark aside [class*="text-sidebar-foreground"],
.dark aside [class*="text-sidebar-foreground"],
html.dark aside [class*="text-muted-foreground"],
body.dark aside [class*="text-muted-foreground"],
.dark aside [class*="text-muted-foreground"] {
  color: #94a3b8 !important;
}

/* ── 13. 暗色模式补充：首页自定义区域 (HomePageContent) ───── */
html.dark .lg-card,
body.dark .lg-card,
.dark .lg-card {
  background: rgba(15, 20, 32, 0.85) !important;
  border-color: rgba(30, 41, 59, 0.75) !important;
  box-shadow: 0 4px 20px -2px rgba(0, 0, 0, 0.4) !important;
  color: #f1f5f9 !important;
}

html.dark .lg-h1,
body.dark .lg-h1,
.dark .lg-h1 {
  color: #f8fafc !important;
}

html.dark .lg-desc,
body.dark .lg-desc,
.dark .lg-desc {
  color: #94a3b8 !important;
}

html.dark .lg-kpi,
body.dark .lg-kpi,
.dark .lg-kpi {
  border-top-color: rgba(30, 41, 59, 0.7) !important;
}

html.dark .lg-kpi-num,
body.dark .lg-kpi-num,
.dark .lg-kpi-num {
  color: #f8fafc !important;
}

html.dark .lg-kpi-lbl,
body.dark .lg-kpi-lbl,
.dark .lg-kpi-lbl {
  color: #64748b !important;
}

html.dark .lg-btn-secondary,
body.dark .lg-btn-secondary,
.dark .lg-btn-secondary {
  background: rgba(30, 41, 59, 0.6) !important;
  color: #e2e8f0 !important;
  border-color: rgba(51, 65, 85, 0.8) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2) !important;
}

html.dark .lg-btn-secondary:hover,
body.dark .lg-btn-secondary:hover,
.dark .lg-btn-secondary:hover {
  background: rgba(51, 65, 85, 0.8) !important;
  color: #ffffff !important;
  border-color: rgba(100, 116, 139, 0.8) !important;
}

html.dark .lg-call-row,
body.dark .lg-call-row,
.dark .lg-call-row {
  border-bottom-color: rgba(30, 41, 59, 0.6) !important;
}

html.dark .lg-call-row span[style*="color: #334155"],
body.dark .lg-call-row span[style*="color: #334155"],
.dark .lg-call-row span[style*="color: #334155"] {
  color: #e2e8f0 !important;
}

html.dark .lg-call-row span[style*="color: #64748b"],
body.dark .lg-call-row span[style*="color: #64748b"],
.dark .lg-call-row span[style*="color: #64748b"] {
  color: #94a3b8 !important;
}

html.dark div[style*="color: #0f172a"],
body.dark div[style*="color: #0f172a"],
.dark div[style*="color: #0f172a"] {
  color: #f8fafc !important;
}

html.dark div[style*="color: #334155"],
body.dark div[style*="color: #334155"],
.dark div[style*="color: #334155"] {
  color: #cbd5e1 !important;
}

html.dark div[style*="color: #475569"],
body.dark div[style*="color: #475569"],
.dark div[style*="color: #475569"] {
  color: #94a3b8 !important;
}

html.dark div[style*="color: #64748b"],
body.dark div[style*="color: #64748b"],
.dark div[style*="color: #64748b"] {
  color: #94a3b8 !important;
}

html.dark div[style*="color: #94a3b8"],
body.dark div[style*="color: #94a3b8"],
.dark div[style*="color: #94a3b8"] {
  color: #64748b !important;
}

html.dark .lg-banner-draw,
body.dark .lg-banner-draw,
.dark .lg-banner-draw {
  border-color: rgba(99, 102, 241, 0.25) !important;
  box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.5) !important;
}


/* ── 14. 彻底解决暗色模式左侧菜单看不清 ──────────────────── */
.dark, [data-theme="dark"], html.dark, body.dark {
  --sidebar-foreground: #f1f5f9 !important;
  --sidebar-muted: #94a3b8 !important;
}

/* 无论左边栏是 aside 还是特定 class 还是 nav，统统强制浅白字体 */
.dark aside,
.dark aside *,
.dark [class*="sidebar"],
.dark [class*="sidebar"] * {
  color: #e2e8f0;
}

/* 未选中的普通菜单项与图标：清晰柔白 */
.dark aside a,
.dark aside button,
.dark aside span,
.dark [class*="sidebar"] a,
.dark [class*="sidebar"] button,
.dark [class*="sidebar"] span {
  color: #cbd5e1 !important;
}

/* 鼠标悬停：高光纯白 */
.dark aside a:hover,
.dark aside button:hover,
.dark [class*="sidebar"] a:hover,
.dark [class*="sidebar"] button:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

/* 选中的当前高亮菜单项：醒目粉红 */
.dark aside a[aria-current],
.dark aside [data-active="true"],
.dark aside [class*="active"],
.dark [class*="sidebar"] [data-active="true"],
.dark [class*="sidebar"] [class*="active"] {
  color: #fb7185 !important;
  background: rgba(244, 63, 94, 0.16) !important;
  font-weight: 600 !important;
}

/* 图标颜色同步跟随 */
.dark aside svg,
.dark [class*="sidebar"] svg {
  color: inherit !important;
  stroke: currentColor !important;
}


/* ── 15. 暗色模式终极质感美化：纯净漫反射与穿透层级 ──────── */
.dark, [data-theme="dark"], html.dark, body.dark {
  /* 1. 空间氛围：深邃空谷夜色 + 暖冷双色聚光漫反射 */
  background-color: #030712 !important;
  background-image:
    radial-gradient(circle 1300px at 0% -10%, rgba(244, 63, 94, 0.07), transparent 60%),
    radial-gradient(circle 1100px at 100% 110%, rgba(99, 102, 241, 0.06), transparent 60%) !important;
  background-attachment: fixed !important;
}

/* 2. 顶栏、侧边栏与卡片：深邃墨玉 + 冰透毛玻璃 (Frosted Glass) */
.dark header,
.dark aside,
.dark div[data-slot="card"],
.dark main .grid > div,
.dark div[data-slot="data-table-card"],
.dark main [class*="rounded-xl"][class*="border"] {
  background: rgba(10, 15, 30, 0.55) !important;
  backdrop-filter: blur(24px) saturate(1.5) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.5) !important;
  border: 1px solid rgba(255, 255, 255, 0.04) !important;
  border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.35) !important;
}

.dark header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
}
.dark aside {
  border-right: 1px solid rgba(255, 255, 255, 0.05) !important;
}

/* 3. 深色模式下主交互高亮色进阶：通透冷晶粉与柔和霓虹光 */
.dark .lg-btn-primary,
.dark button[class*="bg-primary"],
.dark button[class*="bg-destructive"] {
  background: #fb7185 !important;
  color: #fff1f2 !important;
  box-shadow: 0 0 20px rgba(251, 113, 133, 0.25) !important;
}
.dark .lg-btn-primary:hover,
.dark button[class*="bg-primary"]:hover,
.dark button[class*="bg-destructive"]:hover {
  background: #fda4af !important;
  box-shadow: 0 0 28px rgba(251, 113, 133, 0.4) !important;
}

/* 4. 表格与滚动条沉浸感 */
.dark table {
  background: rgba(10, 15, 30, 0.4) !important;
  backdrop-filter: blur(16px) !important;
}
.dark thead th {
  background: rgba(255, 255, 255, 0.02) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.dark tbody tr {
  border-bottom: 1px solid rgba(255, 255, 255, 0.03) !important;
}
.dark tbody tr:hover {
  background: rgba(255, 255, 255, 0.04) !important;
}

.dark ::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.12) !important;
}
.dark ::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* 5. 输入框与筛选框深度融入暗色氛围 */
.dark input,
.dark select,
.dark textarea {
  background: rgba(10, 15, 30, 0.6) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: #f8fafc !important;
}
.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  border-color: rgba(251, 113, 133, 0.4) !important;
  box-shadow: 0 0 0 3px rgba(251, 113, 133, 0.15) !important;
}


/* ── 16. 侧边栏暗色最终顺滑打磨：清爽无突兀色块 ──────────── */
.dark aside,
.dark aside *,
.dark [class*="sidebar"],
.dark [class*="sidebar"] * {
  background-color: transparent !important;
  border: none !important;
}

/* 保持图标和文字颜色 */
.dark aside a,
.dark aside button,
.dark aside span,
.dark [class*="sidebar"] a,
.dark [class*="sidebar"] button,
.dark [class*="sidebar"] span {
  color: #cbd5e1 !important;
}

/* 鼠标悬停：微弱顺滑高光 */
.dark aside a:hover,
.dark aside button:hover,
.dark [class*="sidebar"] a:hover,
.dark [class*="sidebar"] button:hover {
  color: #ffffff !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-radius: 8px !important;
}

/* 当前选中项：细腻的微透光晕底 */
.dark aside a[aria-current],
.dark aside [data-active="true"],
.dark aside [class*="active"],
.dark [class*="sidebar"] [data-active="true"],
.dark [class*="sidebar"] [class*="active"] {
  background: rgba(251, 113, 133, 0.12) !important;
  color: #fda4af !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1) !important;
}