/*
 * 南明离火 - 墨玉青华主题 (Jade Elegance Theme)
 * 优雅沉稳设计，科技感与东方美学结合
 * 设计理念：现代科技 + 东方雅致 + 专业沉稳
 * 版本: 4.0
 * UI设计师: 南明离火设计团队
 */

/* ========================================
   墨玉青华主题 - 通过data属性激活
   ======================================== */
html[data-theme="cyan"],
body[data-theme="cyan"],
[data-theme="cyan"] {
  /* 基础颜色变量覆盖 - 墨玉青华配色优化版 */
  --nmlh-bg-primary: #101C2E;              /* 优化墨蓝 - 轻微提亮，增强科技质感 */
  --nmlh-bg-secondary: rgba(16, 28, 45, 0.95); /* 优化墨蓝半透明 - 色温稍调高 */
  --nmlh-bg-tertiary: #1E2A3A;             /* 优化中等墨蓝 - 更现代 */

  /* 修复渐变背景上的文字颜色问题 (优化版) */
  --nmlh-primary: #F7FAFC;                 /* 优化纯白 - 更通透、柔和的科技白 */
  --nmlh-secondary: #38B2AC;               /* 青黛绿 - 更高级且少饱和 */

  /* 主要文字颜色 - 优化青华明亮 */
  --nmlh-text-primary: #F7FAFC;            /* 优化纯白 - 更通透、柔和的科技白 */
  --nmlh-text-secondary: #E2E8F0;          /* 浅灰白 - 次要文字 */
  --nmlh-text-muted: #A0AEC0;              /* 优化中灰 - 更柔和的辅助文字 */
  --nmlh-text-dark: #1A202C;               /* 优化黑文字 - 标准灰黑，减少死黑对比 */

  /* 强调色系统 - 优化青黛绿色系 */
  --nmlh-text-gold: #38B2AC;               /* 青黛绿 - 更高级且少饱和 */
  --nmlh-text-gold-bright: #3EDFA0;        /* 清新青绿 - 更清新、视觉更平衡 */
  --nmlh-text-accent: #2C7A7B;             /* 深青绿 - 少许灰调，降低视觉压迫感 */
  --nmlh-text-gold-dark: #285E61;          /* 极深青绿 - 更柔和的深色变体 */
  --nmlh-text-danger: #F56565;             /* 优化红色 - 视觉更柔和，不刺眼 */
  --nmlh-text-success: #3EDFA0;            /* 优化绿色 - 清新青绿 */
  --nmlh-text-warning: #F6AD55;            /* 优化橙色 - 温柔橙，配合青绿对比不刺眼 */
  --nmlh-text-info: #63B3ED;               /* 优化蓝色 - 淡蓝，协调性更高 */

  /* 白色背景上的文字颜色 - 优化版 */
  --nmlh-text-light-primary: #1A202C;      /* 优化黑文字 - 标准灰黑，减少死黑对比 */
  --nmlh-text-light-secondary: #2D3748;    /* 优化深灰次文字 - 更柔和 */
  --nmlh-text-light-muted: #4A5568;        /* 优化中灰弱化文字 - 更舒适 */
  --nmlh-text-light-accent: #2C7A7B;       /* 优化深青绿 - 少许灰调，降低视觉压迫感 */

  /* 渐变背景 - 优化配色版 */
  --nmlh-gradient-primary: linear-gradient(135deg, #101C2E 0%, #38B2AC 100%);  /* 优化主渐变 - 墨蓝到青黛绿 */
  --nmlh-gradient-secondary: linear-gradient(135deg, #101C2E 0%, #1E2A3A 100%);  /* 优化墨蓝渐变 */
  --nmlh-gradient-accent: linear-gradient(135deg, #38B2AC 0%, #2C7A7B 100%);  /* 优化青绿渐变 */
  --nmlh-gradient-gold: linear-gradient(135deg, #38B2AC 0%, #3EDFA0 100%);  /* 优化明亮青绿渐变 */

  /* 边框颜色 - 优化青黛系 */
  --nmlh-border-primary: rgba(56, 178, 172, 0.3);     /* 优化青黛绿边框 */
  --nmlh-border-secondary: rgba(16, 28, 45, 0.25);    /* 优化墨蓝边框 */
  --nmlh-border-light: rgba(56, 178, 172, 0.15);      /* 浅青黛绿边框 */
  --nmlh-border-dark: rgba(16, 28, 45, 0.4);          /* 深墨蓝边框 */
  --nmlh-border-accent: rgba(56, 178, 172, 0.5);      /* 强调青黛绿边框 */

  /* 阴影系统 - 基于主题切换器颜色 */
  --nmlh-shadow-sm: 0 2px 8px rgba(16, 28, 45, 0.12);     /* 优化墨蓝小阴影 - 更柔和 */
  --nmlh-shadow-md: 0 4px 12px rgba(16, 28, 45, 0.15);    /* 优化墨蓝中阴影 */
  --nmlh-shadow-lg: 0 8px 24px rgba(16, 28, 45, 0.18);    /* 优化墨蓝大阴影 */
  --nmlh-shadow-xl: 0 12px 32px rgba(16, 28, 45, 0.22);   /* 优化墨蓝超大阴影 */
  --nmlh-shadow-accent: 0 4px 16px rgba(56, 178, 172, 0.15); /* 优化青黛绿强调阴影 */

  /* 卡片和表格背景 - 优化青华白色 */
  --nmlh-bg-card: rgba(247, 250, 252, 0.98);  /* 更通透、柔和的科技白 */
  --nmlh-bg-table: #F7FAFC;                   /* 优化表格背景 */
  --nmlh-bg-overlay: rgba(16, 28, 45, 0.8);   /* 优化遮罩背景 */
}

/* ========================================
   墨玉青华主题特殊效果
   ======================================== */

/* 页面主体背景 - 墨玉青华主题修正版 */
[data-theme="cyan"] body {
  /* 主渐变：从深海蓝到活力青绿 - 符合主题理念 */
  background: linear-gradient(135deg, #0D1B2A 0%, #10B981 100%) !important;

  /* 文字色：纯白，确保在深色背景上的高对比度 */
  color: #FFFFFF !important;
}

/* 容器背景透明，保持渐变效果 */
[data-theme="cyan"] .nmlh-container,
[data-theme="cyan"] .container-fluid {
  background: transparent !important;
}

/* 导航栏 - 墨玉青华主题修正版 */
[data-theme="cyan"] .nmlh-navbar {
  background: linear-gradient(135deg, #0D1B2A 0%, #10B981 100%) !important;  /* 从深海蓝到活力青绿 */
  border-bottom: 1px solid rgba(16, 185, 129, 0.3);  /* 活力青绿边框 */
  box-shadow: 0 4px 12px rgba(13, 27, 42, 0.2);      /* 深海蓝阴影 */
  color: #FFFFFF !important;  /* 纯白文字 */
}

.nmlh-navbar-cyan .nmlh-navbar-brand {
  color: var(--nmlh-text-primary-cyan) !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
  font-weight: 700;
}

.nmlh-navbar-cyan .nmlh-navbar-link {
  color: var(--nmlh-text-secondary-cyan) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
}

.nmlh-navbar-cyan .nmlh-navbar-link::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--nmlh-text-gold-cyan);
  transition: width 0.3s ease;
}

.nmlh-navbar-cyan .nmlh-navbar-link:hover::after,
.nmlh-navbar-cyan .nmlh-navbar-link.active::after {
  width: 100%;
}

.nmlh-navbar-cyan .nmlh-navbar-link:hover,
.nmlh-navbar-cyan .nmlh-navbar-link.active {
  color: var(--nmlh-text-gold-cyan) !important;
  text-shadow: 0 0 8px rgba(255, 217, 61, 0.3);
}

/* 卡片青辉主题 */
.nmlh-card-cyan {
  background: var(--nmlh-bg-card-cyan) !important;
  border: 1px solid var(--nmlh-border-light-dark-cyan);
  box-shadow: var(--nmlh-shadow-md-cyan);
  color: var(--nmlh-text-light-primary-cyan);
  border-radius: 12px;
  transition: all 0.3s ease;
}

.nmlh-card-cyan:hover {
  transform: translateY(-2px);
  box-shadow: var(--nmlh-shadow-lg-cyan);
  border-color: var(--nmlh-border-primary-cyan);
}

/* 按钮青辉主题 */
.nmlh-btn-primary-cyan {
  background: var(--nmlh-gradient-secondary-cyan) !important;
  border: none;
  color: var(--nmlh-text-light-primary-cyan) !important;
  box-shadow: var(--nmlh-shadow-sm-cyan);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  font-weight: 600;
  border-radius: 8px;
}

.nmlh-btn-primary-cyan:hover {
  transform: translateY(-1px);
  box-shadow: var(--nmlh-shadow-md-cyan);
  filter: brightness(1.05) saturate(1.1);
}

.nmlh-btn-primary-cyan:active {
  transform: translateY(0);
  box-shadow: var(--nmlh-shadow-sm-cyan);
}

.nmlh-btn-outline-cyan {
  background: transparent !important;
  border: 2px solid var(--nmlh-secondary-cyan) !important;
  color: var(--nmlh-secondary-cyan) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
  font-weight: 600;
}

.nmlh-btn-outline-cyan:hover {
  background: var(--nmlh-secondary-cyan) !important;
  color: var(--nmlh-text-primary-cyan) !important;
  box-shadow: var(--nmlh-shadow-sm-cyan);
  transform: translateY(-1px);
}

/* 主标题 - 墨玉青华风格 */
[data-theme="cyan"] .main-title {
  color: var(--nmlh-text-gold) !important;  /* 青黛绿 */
  text-shadow: 0 2px 8px rgba(56, 178, 172, 0.3) !important;  /* 青绿光晕 */
  font-weight: 700;
  transition: all 0.3s ease;
}

[data-theme="cyan"] .main-title:hover {
  color: var(--nmlh-text-gold-bright) !important;  /* 明亮青绿 */
  text-shadow: 0 4px 12px rgba(62, 223, 160, 0.4) !important;  /* 增强青绿光晕 */
  transform: translateY(-1px) scale(1.01);
}

/* 表格青辉主题 */
.nmlh-table-cyan {
  background: var(--nmlh-bg-table-cyan) !important;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: var(--nmlh-shadow-sm-cyan);
  border: 1px solid var(--nmlh-border-light-dark-cyan);
}

.nmlh-table-cyan th {
  background: linear-gradient(135deg, #F7FAFC 0%, #EDF2F7 100%) !important;
  color: var(--nmlh-text-light-primary-cyan) !important;
  border-bottom: 2px solid var(--nmlh-border-light-dark-cyan);
  font-weight: 700;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.nmlh-table-cyan td {
  color: var(--nmlh-text-light-primary-cyan) !important;
  border-bottom: 1px solid var(--nmlh-border-light-dark-cyan);
  transition: background-color 0.2s ease;
}

.nmlh-table-cyan tr:hover {
  background: rgba(0, 168, 204, 0.04) !important;
}

.nmlh-table-cyan tr:hover td {
  color: var(--nmlh-text-light-accent-cyan) !important;
}

/* 文字颜色工具类 */
.nmlh-text-primary-cyan { color: var(--nmlh-text-primary-cyan) !important; }
.nmlh-text-secondary-cyan { color: var(--nmlh-text-secondary-cyan) !important; }
.nmlh-text-muted-cyan { color: var(--nmlh-text-muted-cyan) !important; }
.nmlh-text-gold-cyan { color: var(--nmlh-text-gold-cyan) !important; }
.nmlh-text-accent-cyan { color: var(--nmlh-text-accent-cyan) !important; }

.nmlh-text-light-primary-cyan { color: var(--nmlh-text-light-primary-cyan) !important; }
.nmlh-text-light-secondary-cyan { color: var(--nmlh-text-light-secondary-cyan) !important; }
.nmlh-text-light-muted-cyan { color: var(--nmlh-text-light-muted-cyan) !important; }
.nmlh-text-light-accent-cyan { color: var(--nmlh-text-light-accent-cyan) !important; }

/* 背景颜色工具类 */
.nmlh-bg-primary-cyan { background: var(--nmlh-bg-primary-cyan) !important; }
.nmlh-bg-secondary-cyan { background: var(--nmlh-bg-secondary-cyan) !important; }
.nmlh-bg-card-cyan { background: var(--nmlh-bg-card-cyan) !important; }

/* 特殊组件青辉主题 - 基于实际MD5搜索卡片优化 */
.md5-search-card-cyan {
  background: rgba(15, 42, 68, 0.94) !important;
  border: 1px solid var(--nmlh-border-primary-cyan);
  box-shadow:
    0 8px 24px rgba(15, 42, 68, 0.12),
    0 4px 12px rgba(0, 206, 209, 0.08),
    inset 0 1px 0 rgba(0, 206, 209, 0.2);
  backdrop-filter: blur(20px);
  border-radius: var(--nmlh-radius-lg);
}

.md5-search-card-cyan:hover {
  border-color: var(--nmlh-gold-cyan);
  box-shadow:
    0 12px 32px rgba(15, 42, 68, 0.16),
    0 6px 16px rgba(0, 206, 209, 0.12),
    inset 0 1px 0 rgba(135, 206, 235, 0.3);
  transform: translateY(-2px);
}

/* MD5输入框青辉主题 */
.md5-input-cyan {
  background: rgba(240, 248, 255, 0.95) !important;
  color: var(--nmlh-text-light-primary-cyan) !important;
  border: none;
  border-radius: 0 var(--nmlh-radius-md) var(--nmlh-radius-md) 0;
}

.md5-input-cyan:focus {
  background: rgba(240, 248, 255, 0.98) !important;
  box-shadow:
    inset 0 1px 3px rgba(0, 0, 0, 0.1),
    0 0 0 3px rgba(0, 191, 255, 0.3);
}

.md5-input-cyan::placeholder {
  color: rgba(100, 149, 237, 0.7) !important;
}

/* MD5搜索图标青辉主题 */
.md5-search-icon-cyan {
  background: linear-gradient(135deg, #00BFFF 0%, #87CEEB 100%) !important;
  color: var(--nmlh-primary-cyan) !important;
}

.md5-search-icon-cyan:hover {
  background: linear-gradient(135deg, #4682B4 0%, #00BFFF 100%) !important;
}

/* MD5搜索按钮青辉主题 */
.md5-search-btn-cyan {
  background: var(--nmlh-gradient-gold-cyan) !important;
  color: var(--nmlh-primary-cyan) !important;
  border: none;
}

/* 移动端菜单青辉主题 */
.nmlh-mobile-menu-cyan {
  background: rgba(26, 54, 93, 0.96) !important;
  backdrop-filter: blur(20px);
  border-left: 1px solid var(--nmlh-border-primary-cyan);
}

.nmlh-mobile-header-cyan {
  background: rgba(0, 168, 204, 0.08);
  border-bottom: 1px solid var(--nmlh-border-primary-cyan);
}

.nmlh-mobile-title-cyan {
  color: var(--nmlh-text-gold-cyan);
  font-weight: 700;
}

.nmlh-mobile-link-cyan {
  color: var(--nmlh-text-secondary-cyan);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  border-radius: 8px;
}

.nmlh-mobile-link-cyan:hover,
.nmlh-mobile-link-cyan.active {
  background: rgba(0, 168, 204, 0.08);
  color: var(--nmlh-text-gold-cyan);
  transform: translateX(4px);
}

/* 响应式优化 */
@media (max-width: 768px) {
  .nmlh-navbar-cyan {
    padding: 0.75rem 1rem;
    backdrop-filter: blur(15px);
  }
  
  .nmlh-card-cyan {
    margin: 0.5rem;
    border-radius: 10px;
  }
  
  .nmlh-table-cyan {
    border-radius: 8px;
  }
}

@media (max-width: 576px) {
  .nmlh-btn-primary-cyan,
  .nmlh-btn-outline-cyan {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    border-radius: 6px;
  }

  .nmlh-card-cyan {
    border-radius: 8px;
  }
}

/* ========================================
   首页页脚专用样式优化 - 墨玉青华主题 (UI设计师优化版)
   ======================================== */
html[data-theme="cyan"] footer,
body[data-theme="cyan"] footer,
[data-theme="cyan"] footer {
  /* 墨玉青华渐变 - 延续页面主题，体现东方雅致 */
  background: linear-gradient(135deg,
    rgba(13, 27, 42, 0.96) 0%,     /* 深墨蓝基调 */
    rgba(16, 40, 65, 0.94) 30%,    /* 墨玉过渡 */
    rgba(16, 185, 129, 0.15) 70%,  /* 青华点缀 */
    rgba(13, 27, 42, 0.96) 100%    /* 回归深墨，形成呼应 */
  ) !important;

  /* 青华边框 - 体现墨玉青华的清雅感 */
  border-top: 2px solid transparent !important;
  border-image: linear-gradient(90deg,
    rgba(56, 178, 172, 0.5) 0%,    /* 青黛起点 */
    rgba(16, 185, 129, 0.8) 50%,   /* 翡翠中点 */
    rgba(56, 178, 172, 0.5) 100%   /* 青黛终点 */
  ) 1 !important;

  /* 东方雅致模糊效果 */
  backdrop-filter: blur(20px) saturate(1.1) !important;

  /* 深邃阴影增强层次感 */
  box-shadow:
    0 -4px 20px rgba(13, 27, 42, 0.4),
    inset 0 1px 0 rgba(56, 178, 172, 0.1) !important;
}

/* 页脚文字样式 - 墨玉青华主题优化 */
html[data-theme="cyan"] footer .nmlh-text-muted,
body[data-theme="cyan"] footer .nmlh-text-muted,
[data-theme="cyan"] footer .nmlh-text-muted {
  color: #FFFFFF !important;  /* 纯白 - 与主题一致，确保高对比度 */
  font-weight: 500 !important;
  text-shadow: 0 1px 3px rgba(13, 27, 42, 0.6) !important;  /* 深邃阴影增强可读性 */
}

/* 页脚链接样式 - 墨玉青华质感 */
html[data-theme="cyan"] footer .nmlh-text-gold,
body[data-theme="cyan"] footer .nmlh-text-gold,
[data-theme="cyan"] footer .nmlh-text-gold {
  color: #3EDFA0 !important;  /* 翡翠青绿 - 体现墨玉青华 */
  font-weight: 600 !important;
  text-shadow: 0 0 8px rgba(62, 223, 160, 0.4) !important;  /* 青绿光晕效果 */
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* 页脚链接悬停效果 - 东方雅致交互 */
html[data-theme="cyan"] footer .nmlh-text-gold:hover,
body[data-theme="cyan"] footer .nmlh-text-gold:hover,
[data-theme="cyan"] footer .nmlh-text-gold:hover {
  color: #67E8F9 !important;  /* 更亮的青玉色 */
  background: linear-gradient(90deg,
    rgba(62, 223, 160, 0.12) 0%,
    rgba(62, 223, 160, 0.22) 50%,
    rgba(62, 223, 160, 0.12) 100%
  ) !important;
  text-shadow: 0 0 12px rgba(103, 232, 249, 0.6) !important;  /* 增强青绿光晕 */
  transform: translateY(-1px) scale(1.02) !important;  /* 微妙缩放效果 */
  border-radius: 4px !important;
  padding: 2px 6px !important;
}