/* UI2主题 - 优化的深色主题（专业舒适） */
/* 基于现代深色模式设计规范，提供更好的视觉层次和阅读体验 */

:root {
  /* 基础颜色变量 - 优化的深色主题 */
  --ui-primary-color: #3B82F6;           /* 主色调 - 更亮的蓝色（Tailwind Blue-500） */
  --ui-primary-color-light: #60A5FA;     /* 主色调浅色（Blue-400） */
  --ui-primary-color-dark: #2563EB;      /* 主色调深色（Blue-600） */

  /* 背景颜色 - 增强层次感的深色主题 */
  --ui-bg-color-primary: #0F1419;        /* 主背景色 - Twitter深色背景 */
  --ui-bg-color-secondary: #1A1F29;      /* 次要背景色 - 明显更亮 */
  --ui-bg-color-card: #1E2530;           /* 卡片背景色 - 最亮层级 */

  /* 文字颜色 - 柔和舒适的深色主题文字 */
  --ui-text-color-primary: #E5E7EB;      /* 主要文字 - 柔和灰白（Gray-200） */
  --ui-text-color-secondary: #9CA3AF;    /* 次要文字 - 中灰色（Gray-400） */
  --ui-text-color-muted: #6B7280;        /* 弱化文字 - 暗灰色（Gray-500） */
  --ui-text-color-white: #FFFFFF;        /* 白色文字 - 仅用于强调 */
  --ui-text-color-section: #D1D5DB;      /* 章节文字（Gray-300） */

  /* TabBar配置 - 优化的深色主题 */
  --ui-tabbar-bg-color: #0F1419;         /* TabBar背景色 - 与主背景一致 */
  --ui-tabbar-color: #9CA3AF;            /* TabBar未选中文字颜色 */
  --ui-tabbar-selected-color: #3B82F6;   /* TabBar选中颜色 - 亮蓝色 */
  --ui-tabbar-border-color: #374151;     /* TabBar边框颜色 - 可见的灰色 */

  /* 导航栏配置 - 优化的深色主题 */
  --ui-navbar-bg-color: #1E2530;         /* 导航栏背景色 - 使用卡片色增加层次 */
  --ui-navbar-text-color: #E5E7EB;       /* 导航栏文字颜色 - 柔和白色 */
  --ui-navbar-text-style: white;         /* 导航栏文字样式 - 深色主题用白色 */
  --ui-navbar-button-color: #3B82F6;     /* 导航栏按钮颜色 - 亮蓝色 */

  /* 边框和阴影 - 清晰可见 */
  --ui-border-color: #374151;            /* 边框颜色 - 明显的灰色（Gray-700） */
  --ui-shadow-color: rgba(0, 0, 0, 0.7); /* 阴影颜色 - 深黑色 */
  --ui-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.5);  /* 更明显的阴影 */

  /* 状态颜色 - 深色主题适配（使用更亮的色彩） */
  --ui-success-color: #10B981;           /* 成功色 - Emerald-500 */
  --ui-warning-color: #F59E0B;           /* 警告色 - Amber-500 */
  --ui-error-color: #EF4444;             /* 错误色 - Red-500 */
  --ui-info-color: #3B82F6;              /* 信息色 - Blue-500 */
  --ui-search-color: #3B82F6;            /* 搜索色 */

  /* 渐变色 - 优化的深色主题渐变 */
  --ui-gradient-primary: linear-gradient(135deg, #3B82F6 0%, #60A5FA 100%);
  --ui-gradient-secondary: linear-gradient(135deg, #1E2530 0%, #374151 100%);

  /* 深色主题专用变量 */
  --ui-surface-color: #1E2530;           /* 表面颜色 */
  --ui-overlay-color: rgba(0, 0, 0, 0.8); /* 遮罩颜色 - 更深 */
  --ui-divider-color: #374151;           /* 分割线颜色 - 清晰可见（Gray-700） */

  /* 阴影渐变 - 用于覆盖层效果 */
  --ui-shadow-gradient: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.8) 100%);
}

/* 应用主题变量到实际元素 */
body {
    background-color: var(--ui-bg-color-primary);
    color: var(--ui-text-color-primary);
}

.page-header, .page-header-fixed {
    background-color: var(--ui-navbar-bg-color);
}

/* 按钮样式 - 强制白色文字 */
.btn-primary,
.btn.btn-primary,
.btn-download,
.download-links .item,
.download-links a,
.download-group a,
a.item,
.home-introduce .btn-download,
.home-introduce-main .download-links .item,
.home-introduce-main .download-links a {
    background-color: var(--ui-primary-color) !important;
    color: #fff !important;
}

.btn-primary:hover,
.btn.btn-primary:hover,
.btn-download:hover,
.download-links .item:hover,
.download-links a:hover,
.home-introduce-main .download-links .item:hover {
    background-color: var(--ui-primary-color-dark) !important;
    color: #fff !important;
}

.header-logo {
    color: var(--ui-navbar-text-color);
}

/* Slogan样式修复 */
.slogan,
.home-introduce .slogan {
    color: var(--ui-primary-color) !important;
}

.explain {
    color: var(--ui-text-color-secondary);
}

/* Home Feature区域样式修复 */
.home-feature-list .title,
.home-feature-list-pc .title,
.home-feature-list > li.active .title {
    color: var(--ui-primary-color) !important;
}

.home-feature-list .explain,
.home-feature-list-pc .explain {
    color: var(--ui-text-color-secondary);
}

.home-feature-list-pc li.active {
    background-color: var(--ui-primary-color) !important;
}

.home-feature-list-pc li.active .explain, 
.home-feature-list-pc li.active .title {
    color: #fff !important;
}

/* 协议链接样式修复 - 排除按钮链接 */
a:not(.btn-download):not(.btn-primary):not(.item),
a:not(.btn-download):not(.btn-primary):not(.item):link,
a:not(.btn-download):not(.btn-primary):not(.item):visited {
    color: var(--ui-primary-color) !important;
    text-decoration: none;
}

a:not(.btn-download):not(.btn-primary):not(.item):hover,
a:not(.btn-download):not(.btn-primary):not(.item):active {
    color: var(--ui-primary-color-dark) !important;
}

.home-section {
    background-color: var(--ui-bg-color-secondary);
}

/* TabBar样式（如果存在） */
.tabbar {
    background-color: var(--ui-tabbar-bg-color);
    border-color: var(--ui-tabbar-border-color);
}

.tabbar .item {
    color: var(--ui-tabbar-color);
}

.tabbar .item.active {
    color: var(--ui-tabbar-selected-color);
}

/* 导航栏按钮 */
.btn-header-menu {
    color: var(--ui-navbar-button-color);
}

/* 卡片样式 */
.card, .interface {
    background-color: var(--ui-bg-color-card);
    box-shadow: var(--ui-shadow);
}

/* phone-preview外层容器 - 完全透明 */
.home-introduce .phone-preview,
.phone-preview {
    background: none !important;
    background-image: none !important;
    background-color: transparent !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* hero-logo图片样式 - 应用图标效果 */
.hero-logo {
    border-radius: 22% !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
    padding: 0.3rem !important;
    margin: 0.4rem !important;
    width: calc(100% - 0.8rem) !important;
    height: calc(100% - 0.8rem) !important;
    object-fit: cover !important;
}