/**
 * ZenMux 风格主题优化
 * 参考 https://zenmux.ai/ 的设计特点
 * 特点: 深邃的深色模式、柔和的浅色模式、高级渐变
 */

/* ========== 优化后的 Light Mode ========== */
:root {
  /* 背景色系统 - 更柔和的白色 */
  --bg-primary: #fafafa;          /* 改为柔和的灰白 */
  --bg-secondary: #f5f5f5;
  --bg-tertiary: #efefef;
  --bg-elevated: #ffffff;
  --bg-muted: #f8f9fa;

  /* 文字色系统 - 更柔和的黑色 */
  --text-primary: #1a1a1a;        /* 不是纯黑 */
  --text-secondary: #4a4a4a;
  --text-tertiary: #737373;
  --text-quaternary: #a3a3a3;
  --text-disabled: #d4d4d4;
  --text-inverse: #ffffff;
  --text-link: #0066cc;
  --text-link-hover: #0052a3;

  /* 品牌色 - 更现代的蓝色 */
  --brand-primary: #0070f3;
  --brand-secondary: #7928ca;
  --brand-gradient: linear-gradient(135deg, #0070f3 0%, #7928ca 100%);

  /* 卡片系统 - 更柔和的阴影 */
  --card-bg: #ffffff;
  --card-border: #e8e8e8;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  --card-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);

  /* 边框色 - 更柔和 */
  --border-light: #f0f0f0;
  --border-medium: #e8e8e8;
  --border-strong: #d0d0d0;
  --border-focus: #0070f3;

  /* 输入框 - 更柔和的背景 */
  --input-bg: #fafafa;
  --input-border: #e0e0e0;
  --input-border-hover: #c0c0c0;
  --input-border-focus: #0070f3;
  --input-text: #1a1a1a;
  --input-placeholder: #9ca3af;

  /* 按钮系统 */
  --btn-primary-bg: #0070f3;
  --btn-primary-text: #ffffff;
  --btn-primary-hover: #0061d5;
  --btn-secondary-bg: #fafafa;
  --btn-secondary-text: #1a1a1a;
  --btn-secondary-hover: #f0f0f0;

  /* 代码块 - 更柔和的背景 */
  --code-bg: #f8f8f8;
  --code-text: #1a1a1a;
  --code-border: #e8e8e8;
}

/* ========== 优化后的 Dark Mode - ZenMux 风格 ========== */
[data-theme="dark"] {
  /* 背景色系统 - 深邃但不纯黑 */
  --bg-primary: #0d0d0d;          /* 深邃的黑色 */
  --bg-secondary: #161616;        /* 稍浅的黑 */
  --bg-tertiary: #1e1e1e;
  --bg-elevated: #242424;         /* 浮起的元素 */
  --bg-muted: #1a1a1a;

  /* 文字色系统 - 柔和的白色 */
  --text-primary: #ededed;        /* 不是纯白 */
  --text-secondary: #d0d0d0;
  --text-tertiary: #a0a0a0;
  --text-quaternary: #707070;
  --text-disabled: #4a4a4a;
  --text-inverse: #0d0d0d;
  --text-link: #3b9eff;           /* 更亮的蓝色 */
  --text-link-hover: #6bb3ff;

  /* 品牌色 - Dark Mode 下的调整 */
  --brand-primary: #3b9eff;
  --brand-secondary: #a855f7;
  --brand-gradient: linear-gradient(135deg, #3b9eff 0%, #a855f7 100%);

  /* 卡片系统 - 微妙的提升 */
  --card-bg: #1a1a1a;
  --card-border: #2a2a2a;
  --card-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  --card-hover-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);

  /* 边框色 - 更柔和的灰 */
  --border-light: #2a2a2a;
  --border-medium: #3a3a3a;
  --border-strong: #4a4a4a;
  --border-focus: #3b9eff;

  /* 输入框 - 深色但可见 */
  --input-bg: #1e1e1e;
  --input-border: #3a3a3a;
  --input-border-hover: #4a4a4a;
  --input-border-focus: #3b9eff;
  --input-text: #ededed;
  --input-placeholder: #707070;

  /* 按钮系统 */
  --btn-primary-bg: #3b9eff;
  --btn-primary-text: #0d0d0d;   /* 深色文字在亮色背景 */
  --btn-primary-hover: #6bb3ff;
  --btn-secondary-bg: #2a2a2a;
  --btn-secondary-text: #ededed;
  --btn-secondary-hover: #3a3a3a;

  /* 代码块 - 深邃的背景 */
  --code-bg: #161616;
  --code-text: #ededed;
  --code-border: #2a2a2a;

  /* 表格系统 */
  --table-bg: #1a1a1a;
  --table-border: #2a2a2a;
  --table-header-bg: #161616;
  --table-header-text: #ededed;
  --table-row-hover: #242424;

  /* 模态框系统 */
  --modal-bg: #1e1e1e;
  --modal-overlay: rgba(0, 0, 0, 0.85);
  --modal-border: #2a2a2a;

  /* 导航系统 */
  --nav-bg: #0d0d0d;
  --nav-border: #2a2a2a;
  --nav-item-text: #a0a0a0;
  --nav-item-hover: #242424;
  --nav-item-active-bg: rgba(59, 158, 255, 0.12);
  --nav-item-active-text: #3b9eff;

  /* 侧边栏系统 */
  --sidebar-bg: #0d0d0d;
  --sidebar-border: #2a2a2a;
  --sidebar-item-text: #a0a0a0;
  --sidebar-item-hover: #242424;
  --sidebar-item-active-bg: rgba(59, 158, 255, 0.12);
  --sidebar-item-active-text: #3b9eff;
}

/* ========== 渐变效果（ZenMux 风格）========== */
.gradient-text {
  background: var(--brand-gradient);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-bg {
  background: var(--brand-gradient);
}

.gradient-border {
  position: relative;
  border: 1px solid transparent;
  background-clip: padding-box;
}

.gradient-border::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: var(--brand-gradient);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ========== 玻璃态效果（Glassmorphism）========== */
.glass-card {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

[data-theme="dark"] .glass-card {
  background: rgba(26, 26, 26, 0.6);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

/* ========== 微妙的光晕效果 ========== */
.glow-card {
  position: relative;
}

.glow-card::after {
  content: '';
  position: absolute;
  inset: -2px;
  background: var(--brand-gradient);
  border-radius: inherit;
  opacity: 0;
  z-index: -1;
  filter: blur(20px);
  transition: opacity 0.3s ease;
}

.glow-card:hover::after {
  opacity: 0.3;
}

[data-theme="dark"] .glow-card:hover::after {
  opacity: 0.5;
}

/* ========== 更柔和的阴影系统 ========== */
.shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.shadow-md {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.shadow-lg {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.shadow-xl {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.10);
}

[data-theme="dark"] .shadow-sm {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

[data-theme="dark"] .shadow-md {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

[data-theme="dark"] .shadow-lg {
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}

[data-theme="dark"] .shadow-xl {
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
}

/* ========== 高级按钮效果 ========== */
.btn-premium {
  position: relative;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-weight: 600;
  overflow: hidden;
  transition: all 0.3s ease;
}

.btn-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.2) 0%, transparent 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.btn-premium:hover::before {
  opacity: 1;
}

.btn-premium:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 112, 243, 0.3);
}

[data-theme="dark"] .btn-premium:hover {
  box-shadow: 0 8px 24px rgba(59, 158, 255, 0.4);
}

/* ========== 卡片悬停效果增强 ========== */
.card-enhanced {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 24px;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.card-enhanced:hover {
  transform: translateY(-4px);
  border-color: var(--border-focus);
  box-shadow: var(--card-hover-shadow);
}

[data-theme="dark"] .card-enhanced {
  background: var(--card-bg);
  border-color: var(--card-border);
}

[data-theme="dark"] .card-enhanced:hover {
  border-color: rgba(59, 158, 255, 0.3);
}

/* ========== 品牌色按钮 ========== */
.btn-brand {
  background: var(--brand-gradient);
  color: white;
  border: none;
  padding: 12px 32px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 112, 243, 0.2);
}

.btn-brand:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 112, 243, 0.3);
}

[data-theme="dark"] .btn-brand {
  box-shadow: 0 4px 12px rgba(59, 158, 255, 0.3);
}

[data-theme="dark"] .btn-brand:hover {
  box-shadow: 0 8px 24px rgba(59, 158, 255, 0.5);
}

/* ========== 输入框聚焦效果增强 ========== */
input:focus,
textarea:focus,
select:focus {
  border-color: var(--border-focus);
  box-shadow: 0 0 0 4px rgba(0, 112, 243, 0.08);
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  box-shadow: 0 0 0 4px rgba(59, 158, 255, 0.12);
}

/* ========== 导航栏优化 ========== */
.nav-premium {
  background: var(--nav-bg);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--nav-border);
}

[data-theme="dark"] .nav-premium {
  background: rgba(13, 13, 13, 0.8);
  border-bottom-color: rgba(42, 42, 42, 0.8);
}

/* ========== 滚动条优化（ZenMux 风格）========== */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--border-medium);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--border-strong);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3a3a3a;
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #4a4a4a;
}

/* ========== 加载动画（优雅的渐变）========== */
@keyframes gradient-shift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.loading-gradient {
  background: linear-gradient(270deg, #0070f3, #7928ca, #0070f3);
  background-size: 200% 200%;
  animation: gradient-shift 3s ease infinite;
}

/* ========== 页面过渡优化 ========== */
html.theme-transitioning {
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html.theme-transitioning * {
  transition: background-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}