:root{
    /* Brand */
    --brand: #7c3aed;
    --brand-600:#6b2ed3;
    --brand-700:#5820b7;
    --accent: #4f8dff;

    /* Surface / Text */
    --bg:#f6f8ff;
    --surface:rgba(255,255,255,0.92);
    --surface-2:rgba(244,248,255,0.88);
    --border: rgba(137, 96, 255, 0.2);
    --muted:rgba(50,47,94,0.62);
    --text:#1e174d;

    /* Shadows */
    --shadow-lg: 0 28px 60px -30px rgba(95, 88, 220, 0.35);
    --glow: 0 0 0 1px rgba(137,96,255,0.12) inset, 0 14px 30px -20px rgba(119,102,243,0.35);

    /* Radii / Sizes */
    --r-lg: 20px;
    --r-xl: 26px;
    --r-xxl: 32px;

    /* Fluid type */
    --fs-xxs: clamp(11px, 2.9vw, 14px);
    --fs-xs: clamp(11px, 3.0vw, 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: #4336a1;
    --secondary-color: #f8f2ff;
    --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: #f6f8ff;
    --bg-secondary: #eef2ff;
    --bg-tertiary: #fdf2ff;
    --bg-card: rgba(255,255,255,0.86);
    
    /* 文字颜色 */
    --text-primary: #241a5f;
    --text-secondary: rgba(48,39,101,0.75);
    --text-muted: rgba(123, 94, 214, 0.95);
    --text-accent: #7c3aed;
    
    /* 边框颜色 */
    --border-color: rgba(132,119,209,0.32);
    --border-light: rgba(164,154,237,0.22);
    
    /* 阴影 */
    --shadow-light: 0 12px 26px -18px rgba(124, 58, 237, 0.25);
    --shadow-medium: 0 18px 38px -24px rgba(124, 58, 237, 0.28);
    --shadow-heavy: 0 26px 60px -30px rgba(124, 58, 237, 0.32);
    
    /* 渐变 */
    --gradient-primary: linear-gradient(135deg, #fef6ff 0%, #f1f8ff 45%, #e7ebff 100%);
    --gradient-accent: linear-gradient(135deg, #7c3aed 0%, #5ac5ff 100%);
    
    /* 状态颜色 */
    --success-color: #059669;
    --warning-color: #d97706;
    --error-color: #dc2626;
    --info-color: #2563eb;
    --member-color: #85bba2;
    --bg-gradient-primary-x: radial-gradient(1200px 1200px at 10% -10%, rgba(255, 230, 255, 0.85) 0%, transparent 60%), 
      radial-gradient(1200px 1200px at 120% 10%, rgba(214, 237, 255, 0.8) 0%, transparent 60%), #f6f8ff;
} 
@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 right-out {
  from {
      opacity: 1;
      translate: 0 0;
  }
  to {
      opacity: 0;
      translate: 10px 0;
  }
}
.right-out {
  animation: right-out var(--duration) forwards;
}
@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);
}