@import 'tailwindcss';

/* OKX Design System - CSS custom properties */
:root {
  /* OKX 黑色主题色彩系统 */
  --background: 0 0 0; /* #000000 纯黑主背景 */
  --foreground: 255 255 255; /* #FFFFFF 主文字 */
  --card: 15 15 15; /* #0f0f0f 卡片/容器背景 */
  --card-foreground: 255 255 255; /* #FFFFFF 卡片文字 */
  --popover: 26 26 26; /* #1a1a1a 弹窗背景 */
  --popover-foreground: 255 255 255; /* #FFFFFF 弹窗文字 */

  /* OKX 主交互色 - 亮绿色 */
  --primary: 188 255 47; /* #BCFF2F 主交互色 */
  --primary-foreground: 28 38 10; /* #1C260A 深绿文字 */
  --primary-hover: 188 255 47; /* #BCFF2F 80% opacity */
  --primary-active: 188 255 47; /* #BCFF2F 60% opacity */

  /* 次要色彩 */
  --secondary: 39 39 39; /* #272727 激活/悬停状态 */
  --secondary-foreground: 204 204 204; /* #CCCCCC 次要文字 */
  --muted: 26 26 26; /* #1a1a1a 静音背景 */
  --muted-foreground: 136 136 136; /* #888888 辅助信息 */
  --accent: 39 39 39; /* #272727 强调背景 */
  --accent-foreground: 255 255 255; /* #FFFFFF 强调文字 */

  /* 状态色彩 */
  --destructive: 239 68 68; /* #EF4444 危险色 */
  --destructive-foreground: 255 255 255; /* #FFFFFF 危险文字 */
  --success: 34 197 94; /* #22C55E 成功色 */
  --warning: 245 158 11; /* #F59E0B 警告色 */

  /* 边框和输入 */
  --border: 51 51 51; /* #333333 分割线 */
  --input: 51 51 51; /* #333333 输入框边框 */
  --ring: 188 255 47; /* #BCFF2F 聚焦环 */

  /* 文本层级 */
  --text-primary: 255 255 255; /* #FFFFFF 主标题 */
  --text-secondary: 204 204 204; /* #CCCCCC 次要文本 */
  --text-tertiary: 136 136 136; /* #888888 辅助信息 */
  --text-disabled: 85 85 85; /* #555555 禁用状态 */

  /* 圆角和间距 */
  --radius: 8px; /* 8px 基础圆角 */
  --radius-sm: 6px; /* 6px 小圆角 */
  --radius-lg: 12px; /* 12px 大圆角 */
}

/* 高性能动画优化类 */
.smooth-transform {
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
  perspective: 1000px;
}

.gpu-accelerated {
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

/* Windows 标题栏样式 */
.windows-titlebar {
  user-select: none;
  -webkit-user-select: none;
  position: relative;
  z-index: 1000;
}

/* Windows 拖拽区域 */
.windows-drag-region {
  -webkit-app-region: drag;
  app-region: drag;
}

/* Windows 控制按钮样式 */
.windows-control-btn {
  -webkit-app-region: no-drag;
  app-region: no-drag;
  border: none;
  outline: none;
  font-family: inherit;
  position: relative;
  z-index: 1001;
}

.windows-control-btn:focus-visible {
  outline: 2px solid rgb(var(--primary));
  outline-offset: -2px;
}

/* Windows 控制按钮悬停效果 */
.windows-minimize-btn:hover,
.windows-maximize-btn:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.windows-close-btn:hover {
  background-color: #e81123;
}

.windows-close-btn:active {
  background-color: #f1707a;
  color: #000;
}

/* Windows 特定的布局调整 */
.platform-windows {
  /* Windows specific styles */
}

.has-custom-titlebar {
  /* Styles for windows with custom title bar */
}

/* macOS 拖拽区域样式 */
.macos-drag-region {
  -webkit-app-region: drag;
  app-region: drag;
}

.platform-macos {
  /* macOS specific styles */
}

.has-traffic-lights {
  /* Styles for macOS with traffic lights */
}

/* OKX 基础样式 */
* {
  border-color: rgb(var(--border));
}

body {
  background-color: rgb(var(--background));
  color: rgb(var(--foreground));
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'PingFang SC', 'Microsoft YaHei', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* OKX 按钮组件样式 */
.btn-primary {
  background-color: rgb(var(--primary));
  color: rgb(var(--primary-foreground));
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
}

.btn-primary:hover {
  background-color: rgb(var(--primary-hover) / 0.8);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgb(var(--primary) / 0.3);
}

.btn-primary:active {
  background-color: rgb(var(--primary-active) / 0.6);
  transform: translateY(0);
}

.btn-secondary {
  background-color: transparent;
  color: rgb(var(--secondary-foreground));
  padding: 10px 22px;
  border-radius: var(--radius-sm);
  font-weight: 500;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgb(var(--border));
  transition: all 0.2s ease;
  cursor: pointer;
}

.btn-secondary:hover {
  border-color: rgb(var(--primary));
  color: rgb(var(--primary));
  background-color: rgb(var(--primary) / 0.05);
}

/* 图标按钮 */
.btn-icon {
  width: 30px;
  height: 30px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  color: rgb(var(--muted-foreground));
}

.btn-icon:hover {
  background-color: rgb(var(--secondary));
  color: rgb(var(--foreground));
}

/* OKX 卡片组件 */
.card {
  background-color: rgb(var(--card));
  color: rgb(var(--card-foreground));
  border-radius: var(--radius);
  border: 1px solid rgb(var(--border));
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
}

/* 可交互卡片的 hover 效果 */
.card-interactive {
  background-color: rgb(var(--card));
  color: rgb(var(--card-foreground));
  border-radius: var(--radius);
  border: 1px solid rgb(var(--border));
  box-shadow: 0 1px 3px rgb(0 0 0 / 0.3);
  transition: all 0.2s ease;
}

.card-interactive:hover {
  background-color: rgb(var(--secondary));
  border-color: rgb(var(--border));
  box-shadow: 0 4px 12px rgb(0 0 0 / 0.4);
}

/* OKX 输入框组件 */
.input {
  display: flex;
  height: 40px;
  width: 100%;
  border-radius: var(--radius-sm);
  border: 1px solid rgb(var(--input));
  background-color: rgb(var(--background));
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  color: rgb(var(--foreground));
  transition: all 0.2s ease;
}

.input:focus-visible {
  outline: none;
  border-color: rgb(var(--primary));
  box-shadow: 0 0 0 2px rgb(var(--primary) / 0.2);
}

.input::placeholder {
  color: rgb(var(--muted-foreground));
}

.input:disabled {
  cursor: not-allowed;
  opacity: 0.4;
  background-color: rgb(var(--muted));
}

/* 滚动条样式 */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

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

::-webkit-scrollbar-thumb:hover {
  background: rgb(var(--muted-foreground));
}

/* Web3 风格动画 */
@keyframes glow-pulse {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(188, 255, 47, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(188, 255, 47, 0.4);
  }
}

@keyframes scan-light {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100%);
  }
}

@keyframes border-glow {
  0% {
    border-color: rgba(188, 255, 47, 0.3);
    box-shadow: 0 0 10px rgba(188, 255, 47, 0.2);
  }
  50% {
    border-color: rgba(188, 255, 47, 0.6);
    box-shadow: 0 0 20px rgba(188, 255, 47, 0.4);
  }
  100% {
    border-color: rgba(188, 255, 47, 0.3);
    box-shadow: 0 0 10px rgba(188, 255, 47, 0.2);
  }
}

@keyframes data-flow {
  0% {
    opacity: 0;
    transform: scaleX(0);
  }
  50% {
    opacity: 1;
    transform: scaleX(1);
  }
  100% {
    opacity: 0;
    transform: scaleX(0);
  }
}

/* Web3 配置卡片特效 */
.web3-card-glow:hover {
  animation: glow-pulse 2s ease-in-out infinite;
}

.web3-scan-effect {
  position: relative;
  overflow: hidden;
}

.web3-scan-effect::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(188, 255, 47, 0.1) 20%, rgba(188, 255, 47, 0.2) 50%, rgba(188, 255, 47, 0.1) 80%, transparent);
  animation: scan-light 3s ease-in-out infinite;
}

.web3-border-flow {
  position: relative;
}

.web3-border-flow::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -1px;
  right: -1px;
  bottom: -1px;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(45deg, transparent, rgba(188, 255, 47, 0.5), transparent, rgba(188, 255, 47, 0.3), transparent);
  background-size: 200% 200%;
  animation: border-flow 3s ease infinite;
  z-index: -1;
}

@keyframes border-flow {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

/* 动态波浪背景动画 - 单方向滚动 */
@keyframes wave-flow {
  0% {
    background-position: 0% 50%;
  }
  100% {
    background-position: 100% 50%;
  }
}

/* 科技感光效边框效果类 */
.tech-glow-border {
  background: linear-gradient(135deg, rgba(188, 255, 47, 0.08) 0%, rgba(188, 255, 47, 0.02) 50%, transparent 100%);
  border: 1px solid rgba(188, 255, 47, 0.4);
  box-shadow: 0 0 12px rgba(188, 255, 47, 0.15), inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 -1px 0 rgba(188, 255, 47, 0.05);
  position: relative;
  overflow: hidden;
}

/* 内部光晕效果 */
.tech-glow-border::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(188, 255, 47, 0.1) 50%, transparent 100%);
  animation: subtle-glow 3s ease-in-out infinite;
}

@keyframes subtle-glow {
  0%,
  100% {
    transform: translateX(0);
    opacity: 0.3;
  }
  50% {
    transform: translateX(200%);
    opacity: 0.6;
  }
}

/* 霓虹效果 */
.neon-text {
  text-shadow: 0 0 5px rgba(188, 255, 47, 0.5), 0 0 10px rgba(188, 255, 47, 0.3), 0 0 15px rgba(188, 255, 47, 0.2);
}

.neon-border {
  border: 1px solid rgba(188, 255, 47, 0.5);
  box-shadow: 0 0 5px rgba(188, 255, 47, 0.3), inset 0 0 5px rgba(188, 255, 47, 0.1);
}

/* 电路板装饰线条 */
.circuit-lines {
  position: relative;
}

.circuit-lines::before,
.circuit-lines::after {
  content: '';
  position: absolute;
  background: linear-gradient(90deg, transparent 0%, rgba(188, 255, 47, 0.3) 50%, transparent 100%);
  height: 1px;
  width: 100%;
  left: 0;
}

.circuit-lines::before {
  top: 0;
}

.circuit-lines::after {
  bottom: 0;
}

/* 弹框动画 */
@keyframes modal-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes modal-zoom-in {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes modal-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes modal-zoom-out {
  from {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
  to {
    opacity: 0;
    transform: scale(0.95) translateY(8px);
  }
}

/* 弹框动画类 */
.modal-enter {
  animation: modal-fade-in 0.2s ease-out, modal-zoom-in 0.2s ease-out;
}

.modal-exit {
  animation: modal-fade-out 0.2s ease-in, modal-zoom-out 0.2s ease-in;
}

/* 向上渐入动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

button {
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}

button:active {
  outline: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
