/**
 * FOF交易平台 - CSS变量规范
 * 统一颜色、字体、间距等设计规范
 * 适用于所有前端页面
 */
/**
 *作者Telegram：https://t.me/facai_hule
 */
:root {
  /* ========== 背景色系 (Unibet风格) ========== */
  --bg-primary: #FFFFFF;
  /* 主背景色 - 纯白 */
  --bg-secondary: #f6f6f6;
  /* 卡片背景色 - 极浅灰 */
  --bg-tertiary: #e8e8e8;
  /* 次级背景色 - 画布灰 */
  --bg-quaternary: #dddddd;
  /* 边框分割线色 - 表面边框 */
  --bg-header: #147B45;
  /* Header背景色 - 主绿色 */
  --bg-header-dark: #00531D;
  /* 顶部通知栏 - 品牌深绿 */
  --bg-footer: #111111;
  /* Footer区域背景 */

  /* ========== 文本颜色 (Unibet风格) ========== */
  --text-primary: #111111;
  /* 主文本色 - 主文字黑 */
  --text-secondary: #555555;
  /* 次文本色 - 次要文字 */
  --text-tertiary: #333333;
  /* 正文深灰 */
  --text-quaternary: #999999;
  /* 辅助文字 */
  --text-disabled: rgba(0, 0, 0, 0.24);
  /* 禁用文字 */
  --text-on-dark: #FFFFFF;
  /* 深色背景上的文字 */
  --text-link: #3860be;
  /* 链接蓝色 */

  /* ========== 主题色彩 (Unibet风格) ========== */
  --color-success: #43a900;
  /* 成功绿色 */
  --color-primary: #147B45;
  /* 主绿色 - 品牌核心色 */
  --color-primary-hover: #00582c;
  /* 主绿色 Hover */
  --color-primary-light: #3EAB37;
  /* 浅绿色 */
  --color-positive: #43a900;
  /* 涨幅/赢得绿色 */
  --color-negative: #dd0000;
  /* 跌幅/输掉红色 */
  --color-danger: #dd0000;
  /* 危险红色 */
  --color-warning: #ffb401;
  /* 警告橙色 */
  --color-info: #999999;
  /* 信息灰色 */
  --color-live: #ed1c34;
  /* 直播红色 */

  /* ========== 品牌黄色系 (Unibet风格) ========== */
  --color-highlight: #FFE71F;
  /* 主黄色 - CTA按钮/选中态 */
  --color-highlight-hover: #F0CD0E;
  /* 黄色 Hover */
  --color-highlight-active: #ffef6e;
  /* 黄色 Active */
  --color-favorite: #f8d61f;
  /* 收藏星星 */

  /* ========== 排行榜渐变色 ========== */
  --gradient-rank1: linear-gradient(135deg, #9c27b0, #673ab7);
  /* 第一名紫色 */
  --gradient-rank2: linear-gradient(135deg, #3f51b5, #2196f3);
  /* 第二名蓝色 */
  --gradient-rank3: linear-gradient(135deg, #ff9800, #ff5722);
  /* 第三名橙色 */
  --gradient-gold: linear-gradient(135deg, #ffd700, #ffa000);
  /* 金牌色 */
  --gradient-silver: linear-gradient(135deg, #c0c0c0, #9e9e9e);
  /* 银牌色 */
  --gradient-bronze: linear-gradient(135deg, #cd7f32, #8d6e63);
  /* 铜牌色 */

  /* ========== 透明度层级 (Unibet风格) ========== */
  --opacity-hover: rgba(0, 0, 0, 0.04);
  /* 悬停背景 */
  --opacity-border: rgba(0, 0, 0, 0.16);
  /* 边框透明度 */
  --opacity-divider: rgba(0, 0, 0, 0.08);
  /* 分割线透明度 */
  --opacity-backdrop: rgba(0, 0, 0, 0.03);
  /* 背景透明度 */
  --opacity-active: rgba(20, 123, 69, 0.1);
  /* 激活状态背景 - 主绿色 */

  /* ========== 字体规范 ========== */
  --font-family: "Inter", Arial, sans-serif;
  --font-size-hero: 32px;
  /* 主卡片数值 */
  --font-size-title: 24px;
  /* 大标题 */
  --font-size-heading: 18px;
  /* 区域标题 */
  --font-size-subheading: 16px;
  /* 卡片标题 */
  --font-size-body: 14px;
  /* 正文 */
  --font-size-small: 13px;
  /* 次要信息 */
  --font-size-caption: 12px;
  /* 说明文字 */
  --font-size-micro: 11px;
  /* 微小文字 */

  /* ========== 字重规范 ========== */
  --font-weight-light: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-heavy: 800;
  --font-weight-black: 900;

  /* ========== 圆角规范 ========== */
  --radius-small: 6px;
  /* 小圆角 */
  --radius-medium: 8px;
  /* 中圆角 */
  --radius-large: 12px;
  /* 大圆角 */
  --radius-xlarge: 16px;
  /* 超大圆角 */
  --radius-full: 50%;
  /* 完全圆形 */

  /* ========== 间距规范 ========== */
  --spacing-xs: 4px;
  /* 超小间距 */
  --spacing-sm: 8px;
  /* 小间距 */
  --spacing-md: 12px;
  /* 中间距 */
  --spacing-lg: 16px;
  /* 大间距 */
  --spacing-xl: 20px;
  /* 超大间距 */
  --spacing-2xl: 24px;
  /* 2倍大间距 */
  --spacing-3xl: 32px;
  /* 3倍大间距 */

  /* ========== 阴影规范 ========== */
  --shadow-small: 0 2px 4px rgba(0, 0, 0, 0.1);
  --shadow-medium: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-large: 0 8px 24px rgba(0, 0, 0, 0.4);
  --shadow-hover: 0 6px 16px rgba(0, 0, 0, 0.35);

  /* ========== 过渡动画 ========== */
  --transition-fast: 0.2s ease;
  /* 快速过渡 */
  --transition-normal: 0.3s ease;
  /* 标准过渡 */
  --transition-slow: 0.5s ease;
  /* 慢速过渡 */
  --transition-bounce: 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ========== 布局规范 ========== */
  --container-max-width: 480px;
  /* 移动端最大宽度 */
  --content-width: 90%;
  /* 内容区域宽度 */
  --header-height: 36px;
  /* 顶部导航高度 */
  --bottom-nav-height: 48px;
  /* 底部导航高度 */
  --touch-target-min: 44px;
  /* 最小触摸目标 */

  /* ========== 图表颜色 (Unibet风格) ========== */
  --chart-positive: #43a900;
  /* K线上涨色 */
  --chart-negative: #dd0000;
  /* K线下跌色 */
  --chart-positive-fill: rgba(67, 169, 0, 0.3);
  /* 上涨填充 */
  --chart-negative-fill: rgba(221, 0, 0, 0.3);
  /* 下跌填充 */
  --chart-grid: rgba(0, 0, 0, 0.1);
  /* 网格线 */
  --chart-axis: rgba(0, 0, 0, 0.2);
  /* 坐标轴 */

  /* ========== 热力图颜色 (Unibet风格) ========== */
  --heatmap-strong-positive: #00582c;
  /* 强涨色 - 深绿 */
  --heatmap-weak-positive: #3EAB37;
  /* 弱涨色 - 浅绿 */
  --heatmap-strong-negative: #dd0000;
  /* 强跌色 */
  --heatmap-weak-negative: #ed1c34;
  /* 弱跌色 */

  /* ========== 特殊组件 (Unibet风格) ========== */
  --ranking-badge-size: 32px;
  /* 排名徽章尺寸 */
  --ranking-badge-border: 3px solid #147B45;
  /* 排名徽章边框 - 主绿色 */
  --avatar-border: 2px solid #147B45;
  /* 头像边框 - 主绿色 */

  /* ========== 图标规范 (Unibet风格) ========== */
  --icon-color-primary: #111111;
  /* 主要图标颜色 */
  --icon-color-active: #147B45;
  /* 激活图标颜色 - 主绿色 */
  --icon-color-inactive: #999999;
  /* 非激活图标颜色 */
  --icon-color-hover: #00582c;
  /* 悬停图标颜色 - 深绿 */
  --icon-color-disabled: rgba(0, 0, 0, 0.24);
  /* 禁用图标颜色 */
  --icon-size-small: 16px;
  /* 小图标 */
  --icon-size-medium: 20px;
  /* 中图标 */
  --icon-size-large: 24px;
  /* 大图标 */
  --icon-size-xlarge: 32px;
  /* 超大图标 */

  /* 导航图标专用颜色 (Unibet风格) */
  --nav-icon-default: #555555;
  /* 默认导航图标 */
  --nav-icon-active: #147B45;
  /* 激活导航图标 - 主绿色 */
  --nav-icon-hover: #00582c;
  /* 悬停导航图标 - 深绿 */

  /* 功能图标专用颜色 (Unibet风格) */
  --function-icon-color: #111111;
  /* 功能图标颜色 */
  --function-icon-hover: #147B45;
  /* 功能图标悬停 - 主绿色 */

  /* 状态图标专用颜色 (Unibet风格) */
  --status-success-icon: #43a900;
  /* 成功状态图标 */
  --status-warning-icon: #ffb401;
  /* 警告状态图标 */
  --status-error-icon: #dd0000;
  /* 错误状态图标 */
  --status-info-icon: #999999;
  /* 信息状态图标 */

  /* 按钮图标专用颜色 */
  --btn-icon-primary: #fff;
  /* 主按钮图标 */
  --btn-icon-secondary: var(--text-secondary);
  /* 次按钮图标 */
  --btn-icon-success: #fff;
  /* 成功按钮图标 */
  --btn-icon-warning: var(--text-primary);
  /* 警告按钮图标 */
  --btn-icon-danger: #fff;
  /* 危险按钮图标 */

  /* 侧边栏图标专用颜色 (Unibet风格) */
  --sidebar-icon-color: #555555;
  /* 侧边栏图标 */
  --sidebar-icon-active: #147B45;
  /* 侧边栏激活图标 - 主绿色 */

  /* ========== Z-Index层级 ========== */
  --z-dropdown: 10;
  --z-sticky: 20;
  --z-fixed: 30;
  --z-modal-backdrop: 40;
  --z-modal: 50;
  --z-popover: 60;
  --z-tooltip: 70;
}

/* ========== 响应式断点 ========== */
@media (max-width: 480px) {
  :root {
    --font-size-hero: 28px;
    --font-size-title: 20px;
    --font-size-heading: 16px;
    --spacing-lg: 12px;
    --spacing-xl: 16px;
  }
}

@media (max-width: 375px) {
  :root {
    --font-size-hero: 26px;
    --font-size-title: 18px;
    --ranking-badge-size: 28px;
    --spacing-md: 8px;
    --spacing-lg: 10px;
  }
}

@media (max-width: 320px) {
  :root {
    --font-size-hero: 24px;
    --font-size-title: 16px;
    --ranking-badge-size: 26px;
    --spacing-sm: 6px;
    --spacing-md: 8px;
  }
}

/* ========== 实用类 ========== */
.bg-primary {
  background-color: var(--bg-primary);
}

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

.bg-tertiary {
  background-color: var(--bg-tertiary);
}

.text-primary {
  color: var(--text-primary);
}

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

.text-positive {
  color: var(--color-positive);
}

.text-negative {
  color: var(--color-negative);
}

.radius-sm {
  border-radius: var(--radius-small);
}

.radius-md {
  border-radius: var(--radius-medium);
}

.radius-lg {
  border-radius: var(--radius-large);
}

.radius-xl {
  border-radius: var(--radius-xlarge);
}

.transition-fast {
  transition: var(--transition-fast);
}

.transition-normal {
  transition: var(--transition-normal);
}

/* ========== 图标样式强制规范 ========== */
/* 全局Font Awesome图标样式重置 - 防止第三方库覆盖 */
.fas,
.far,
.fab,
.fal,
.fad {
  color: inherit !important;
}

/* 针对特定第三方库的强制覆盖 */
.layui-icon,
.layui-btn .fas {
  color: inherit !important;
}

/* 功能图标强制白色 */
.function-icon {
  color: var(--function-icon-color) !important;
}

.function-icon i {
  color: var(--function-icon-color) !important;
  font-size: inherit !important;
}

.function-tab:hover .function-icon,
.function-tab:hover .function-icon i {
  color: var(--function-icon-hover) !important;
  transition: color 0.3s ease !important;
}

/* 导航图标颜色继承 */
.nav-icon i {
  color: inherit !important;
  font-size: inherit !important;
}

.nav-item .nav-icon i {
  color: var(--nav-icon-default) !important;
}

.nav-item.active .nav-icon i {
  color: var(--nav-icon-active) !important;
}

.nav-item:hover .nav-icon i {
  color: var(--nav-icon-hover) !important;
}

/* 按钮图标强制样式 */
.btn i,
.back-btn i,
.header-btn i {
  color: inherit !important;
  font-size: inherit !important;
}

.back-btn i {
  color: var(--btn-icon-primary) !important;
}

.btn-primary i {
  color: var(--btn-icon-primary) !important;
}

.btn-secondary i {
  color: var(--btn-icon-secondary) !important;
}

.btn-success i {
  color: var(--btn-icon-success) !important;
}

.btn-warning i {
  color: var(--btn-icon-warning) !important;
}

.btn-danger i {
  color: var(--btn-icon-danger) !important;
}

/* 状态图标颜色 */
.status-success i {
  color: var(--status-success-icon) !important;
}

.status-warning i {
  color: var(--status-warning-icon) !important;
}

.status-error i {
  color: var(--status-error-icon) !important;
}

.status-info i {
  color: var(--status-info-icon) !important;
}

/* 侧边栏图标 */
.sidebar .nav-icon i {
  color: var(--sidebar-icon-color) !important;
}

.sidebar .nav-item.active .nav-icon i {
  color: var(--sidebar-icon-active) !important;
}

/* 最高优先级保护 - 在需要时使用 */
[class*="icon"] i {
  color: inherit !important;
}

/* 针对内联样式的保护 */
i[style] {
  color: inherit !important;
}

/* 第三方库兼容样式 */
.layui-nav .layui-nav-item a i {
  color: inherit !important;
}

.navbar-nav .nav-link i {
  color: inherit !important;
}

.el-button i {
  color: inherit !important;
}

/* 悬停和激活状态的通用样式 */
.icon-hover:hover i {
  color: var(--icon-color-hover) !important;
  transition: color 0.3s ease !important;
}

.icon-disabled i {
  color: var(--icon-color-disabled) !important;
  cursor: not-allowed !important;
}

/* 通用图标尺寸类 */
.icon-sm {
  font-size: var(--icon-size-small);
}

.icon-md {
  font-size: var(--icon-size-medium);
}

.icon-lg {
  font-size: var(--icon-size-large);
}

/* 图标颜色类 */
.icon-primary {
  color: var(--icon-color-primary) !important;
}

.icon-active {
  color: var(--icon-color-active) !important;
}

.icon-inactive {
  color: var(--icon-color-inactive) !important;
}

/* ========== 使用说明 ========== */
/*
使用方法示例:

.my-component {
  background: var(--bg-secondary);
  color: var(--text-primary);
  border-radius: var(--radius-large);
  padding: var(--spacing-lg);
  transition: var(--transition-normal);
}

.my-component:hover {
  background: var(--opacity-hover);
  transform: translateY(-2px);
}
*/

/* ========== 登录弹窗拱形裁剪 ========== */
/* 预设拱形样式，避免弹窗打开时的闪烁效果 */
.layui-layer.arch-layer {
  clip-path: ellipse(90% 90% at 50% 100%) !important;
  overflow: visible !important;
  border-radius: 0 !important;
}