:root{
    /* Brand */
    --brand: #7c3aed;
    --brand-600:#6b2ed3;
    --brand-700:#5820b7;
    --accent: #4f8dff;
    --accent-soft: rgba(79, 141, 255, 0.18);
    --accent-2: #ff7f9f;

    /* Surface / Text */
    --bg: radial-gradient(140% 140% at 10% -20%, #fff3ff 0%, transparent 55%), radial-gradient(120% 120% at 120% 0%, #e6f6ff 0%, transparent 50%), #f6f8ff;
    --surface: linear-gradient(150deg, rgba(255, 255, 255, 0.92) 0%, rgb(228 241 255 / 92%) 45%, rgba(236, 248, 255, 0.92) 100%);
    --surface-2: linear-gradient(160deg, rgba(255, 255, 255, 0.88) 0%, rgba(229, 242, 255, 0.82) 50%, rgba(255, 244, 255, 0.82) 100%);
    --surface-3: rgba(255, 255, 255, 0.78);
    --border: rgba(120, 104, 196, 0.28);
    --border-strong: rgba(88, 72, 184, 0.42);
    --muted: rgba(50, 47, 94, 0.62);
    --text: #1e174d;
    --text-soft: rgba(34, 29, 71, 0.72);

    /* Shadows */
    --shadow-lg: 0 28px 60px -30px rgba(95, 88, 220, 0.35);
    --shadow-soft: 0 18px 44px -28px rgba(86, 94, 220, 0.42);
    --shadow-card: 0 22px 48px -30px rgba(118, 126, 255, 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.85);
    
    /* 文字颜色 */
    --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%);
    --gradient-soft: linear-gradient(160deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 235, 255, 0.85) 40%, rgba(232, 244, 255, 0.85) 100%);
    
    /* 状态颜色 */
    --success-color: #059669;
    --warning-color: #d97706;
    --error-color: #dc2626;
    --info-color: #2563eb;
    --member-color: #1b44e7;
    --bg-gradient-primary: radial-gradient(1200px 1200px at 8% -20%, rgba(255, 230, 255, 0.85) 0%, transparent 60%), radial-gradient(1200px 1200px at 110% 0%, rgba(214, 237, 255, 0.8) 0%, transparent 60%), var(--bg);
    --glass: rgba(255, 255, 255, 0.82);
    --glass-strong: rgba(255, 255, 255, 0.94);
    --glass-border: rgba(143, 126, 224, 0.28);
} 


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