:root{
    /* Brand */
    --brand: #6C5CE7;            /* 主色（沿用你之前的紫） */
    --brand-600:#5a4ccc;
    --brand-700:#4a3fb0;
    --accent: #004483;            /* 次色：清爽蓝，用于高亮与激活 */

    /* Surface / Text */
    --bg:#0d0f13;                /* 页面背景 */
    --surface:#14171d;           /* 卡片底色 */
    --surface-2:#181c23;         /* 次级卡片底色 */
    --border: #2a314058;           /* 统一描边色 */
    --muted:#a5afc4;             /* 次级文字 */
    --text:#eef3ff;              /* 主文字 */

    /* Shadows */
    --shadow-lg: 0 8px 32px rgba(0,0,0,.35);
    --glow: 0 0 0 1px rgba(255,255,255,.06) inset, 0 .5px 0 rgba(255,255,255,.06) inset, 0 12px 24px rgba(0,0,0,.36);

    /* Radii / Sizes */
    --r-lg: 18px;    /* 卡片圆角 */
    --r-xl: 22px;    /* 大圆角 */
    --r-xxl: 26px;   /* 超大圆角 */

    /* Fluid type */
    --fs-xxs: clamp(11px, 2.9vw, 14px);
    --fs-xs: clamp(12px, 3.4vw, 14px);
    --fs-sm:  clamp(13px, 3.4vw, 15px);
    --fs-md:  clamp(14px, 3.8vw, 16px);
    --fs-lg:  clamp(16px, 4.6vw, 20px);
    --fs-xl:  clamp(18px, 5.6vw, 24px);
    --emoji-sm: clamp(18px, 5vw, 22px);
    --emoji-md: clamp(22px, 6vw, 28px);
    --vh: 1vh; /* 动态 1vh：由 JS 写入 */
    --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, Helvetica, Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Noto Sans CJK SC", sans-serif;
    --duration: 0.4s;
    --duration-thin: 0.25s;
    --delay: 0.07s;
    --bottom: calc(20px + var(--safe-bottom, 0) * 0.8);
    --skew: -8deg;
    --primary-color: #0f0f1a;
    --secondary-color: #0f0f23;
    --accent-color: #7c3aed;
    --accent-hover: #8b5cf6;
    --category-bet: radial-gradient(178.6% 178.6% at 74.16% 98.78%, #84F0FF 0%, #0281FB 40.94%, #4DCAFF 100%);
    /* 背景色 */
    --bg-primary: #0a0a14;
    --bg-secondary: #0f0f1a;
    --bg-tertiary: #0f0f23;
    --bg-card: #17192b;
    
    /* 文字颜色 */
    --text-primary: #ffffff;
    --text-secondary: #a5b4fc;
    --text-muted: #7c3aed;
    --text-accent: #8b5cf6;
    
    /* 边框颜色 */
    --border-color: #1e1b4b;
    --border-light: #0f0f23;
    
    /* 阴影 */
    --shadow-light: 0 2px 8px rgba(124, 58, 237, 0.08);
    --shadow-medium: 0 4px 16px rgba(124, 58, 237, 0.12);
    --shadow-heavy: 0 8px 32px rgba(124, 58, 237, 0.16);
    
    /* 渐变 */
    --gradient-primary: linear-gradient(135deg, #0f0f1a 0%, #0f0f23 100%);
    --gradient-accent: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%);
    
    /* 状态颜色 */
    --success-color: #059669;
    --warning-color: #d97706;
    --error-color: #dc2626;
    --info-color: #2563eb;
    --member-color: #85bba2;
    --bg-gradient-primary: radial-gradient(1200px 1200px at 10% -10%, #0f1a2b 0%, transparent 60%), 
      radial-gradient(1200px 1200px at 120% 10%, #0b1930 0%, transparent 60%),
      var(--bg);
} 
@keyframes scale-in {
  from {
      opacity: 0;
      scale: var(--scale, 0.9);
  }
  to {
      opacity: var(--opacity, 1);
      scale: 1;
  }
}
@keyframes fade-in-out {
  from {
      opacity: 0;
  }
  30% {
      opacity: 1;
  }
  75% {
      opacity: 1;
  }
  to {
      opacity: 0;
  }
}
@keyframes in-out {
  from {
      scale: 0.92;
  }
  50% {
      scale: 1.04;
  } 
  to {
      scale: 0.92;
  }
}

@keyframes fade-in {
  from {
      opacity: 0;
  }
  to {
      opacity: var(--opacity, 1);
  }
}
@keyframes fade-out {
  from {
      opacity: 1;
  }
  to {
      opacity: 0;
  }
}

@keyframes scale-out {
  to {
      opacity: 0;
      scale: 0.95
  }
}

@keyframes fly-away {
  from {
      transform: translateY(var(--from, 0));
  }
  to {
      transform: translateY(var(--to, -60px))
  }
}
@keyframes fade-away {
  to {
      transform: scale(0.92);
      opacity: 0;
      display: none;
  }
}
@keyframes left-in {
  from {
      opacity: 0;
      translate: -10px 0;
  }
  to {
      scale: 1;
      translate: 0 0;
  }
}
@keyframes pop-up {
  from {
      top: 100vh
  }
  to {
      top: 0;
  }
}
@keyframes pop-down {
  to {
      top: 100vh;
  }
}
@keyframes come-up {
  from {
      bottom: -60vh
  }
  to {
      bottom: 0;
  }
}

.btn.icon::before {
    content: var(--icon, "");
    font-family: 'Iconfont';
    font-size: 3.5rem;
    color: var(--color, #e41404);
}