/* ================================================================
   M69 · 瀚锦系统美业设计 Tokens
   全局 CSS 变量, 所有页面/组件复用, 一处改全站生效
   ================================================================ */

:root {
    /* === 品牌色 (香槟金 + 玫粉双主色, 美业调性) === */
    --brand-gold:         #C9A04A;
    --brand-gold-dark:    #8A6A2E;
    --brand-gold-light:   #F4D78A;
    --brand-champagne:    #FEF6E4;
    --brand-champagne-2:  #F5E6C8;
    --brand-champagne-3:  #EFDBB0;
    --brand-cream:        #FAF3EF;
    --brand-rose:         #E37B95;
    --brand-rose-light:   #FCE4E8;
    --brand-rose-dark:    #A04361;

    /* === 中性色 === */
    --text-primary:       #5A3F18;
    --text-secondary:     #8A6A2E;
    --text-tertiary:      #A58346;
    --text-inverse:       #FFFFFF;
    --text-disabled:      #C4A574;

    /* === 边界/描边 === */
    --border-soft:        rgba(224,183,77,0.15);
    --border-normal:      rgba(224,183,77,0.30);
    --border-strong:      rgba(224,183,77,0.50);

    /* === 阴影 === */
    --shadow-sm:          0 2px 8px rgba(184,138,58,0.10);
    --shadow-md:          0 4px 14px rgba(184,138,58,0.15);
    --shadow-lg:          0 8px 24px rgba(184,138,58,0.20);
    --shadow-xl:          0 12px 32px rgba(184,138,58,0.28);
    --shadow-gold-glow:   0 6px 20px rgba(201,160,74,0.35);

    /* === 圆角 === */
    --radius-xs:          6px;
    --radius-sm:          10px;
    --radius-md:          14px;
    --radius-lg:          20px;
    --radius-xl:          28px;
    --radius-round:       50%;

    /* === 间距 === */
    --sp-1:               4px;
    --sp-2:               8px;
    --sp-3:               12px;
    --sp-4:               16px;
    --sp-5:               20px;
    --sp-6:               24px;

    /* === 字号 === */
    --fs-xs:              10px;
    --fs-sm:              12px;
    --fs-md:              14px;
    --fs-lg:              16px;
    --fs-xl:              20px;
    --fs-2xl:             28px;
    --fs-3xl:             32px;

    /* === 渐变 (常用) === */
    --gradient-gold:      linear-gradient(135deg, #F4D78A 0%, #C9A04A 50%, #8A6A2E 100%);
    --gradient-gold-btn:  linear-gradient(135deg, #E0B74D 0%, #C9A04A 50%, #B8862A 100%);
    --gradient-cream:     linear-gradient(160deg, #FEF6E4 0%, #F5E6C8 50%, #EFDBB0 100%);
    --gradient-rose:      linear-gradient(135deg, #E37B95 0%, #A04361 100%);
    --gradient-hero-gold: linear-gradient(160deg, #FEF6E4 0%, #F5E6C8 50%, #EFDBB0 100%);

    /* === 语义色 (状态) === */
    --color-success:      #52B788;
    --color-warning:      #E88A2A;
    --color-danger:       #DC3545;
    --color-info:         #4A90E2;

    /* === 会员等级色 (与 TV_LEVEL_STYLES 对齐) === */
    --level-1:            #ffffff; /* 白棠 */
    --level-2:            #ffc0cb; /* 喜棠 */
    --level-3:            #c8d2dc; /* 银棠 */
    --level-4:            #ffd700; /* 金棠 */
    --level-5:            #d580ff; /* 战略股东 */
    --level-6:            #ff9944; /* 品牌私董 */
    --level-7:            #ff5555; /* 管理组 */

    /* === 领奖台 (前3) === */
    --podium-gold:        #F4D78A;
    --podium-silver:      #D4D4D4;
    --podium-bronze:      #D4A574;

    /* === 动画时长 === */
    --anim-fast:          0.15s;
    --anim-normal:        0.28s;
    --anim-slow:          0.45s;
    --ease-out:           cubic-bezier(0.16, 1, 0.3, 1);
    --ease-in-out:        cubic-bezier(0.4, 0, 0.2, 1);
}

/* ================================================================
   骨架屏 (Skeleton) - 消除"加载中..."空白等待感
   ================================================================ */
@keyframes hj-skeleton-pulse {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
.hj-skeleton {
    background: linear-gradient(90deg,
        rgba(224,183,77,0.08) 0%,
        rgba(224,183,77,0.18) 50%,
        rgba(224,183,77,0.08) 100%);
    background-size: 200% 100%;
    animation: hj-skeleton-pulse 1.4s ease-in-out infinite;
    border-radius: var(--radius-sm);
}
.hj-skeleton-line { height: 14px; margin-bottom: 8px; }
.hj-skeleton-line:last-child { width: 60%; }
.hj-skeleton-card {
    height: 80px;
    border-radius: var(--radius-md);
    margin-bottom: 8px;
}
.hj-skeleton-avatar {
    width: 40px; height: 40px;
    border-radius: var(--radius-round);
    flex-shrink: 0;
}
.hj-skeleton-row {
    display: flex; align-items: center; gap: 12px;
    padding: 12px 14px;
    background: #fff;
    border-radius: var(--radius-md);
    margin-bottom: 8px;
    box-shadow: var(--shadow-sm);
}
.hj-skeleton-row .hj-skeleton-body { flex: 1; }

/* ================================================================
   页面切换过渡动画 (fade + slight rise)
   ================================================================ */
@keyframes hj-page-in {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}
.app-main > *:first-child {
    animation: hj-page-in var(--anim-normal) var(--ease-out);
}

/* ================================================================
   通用组件 (卡片/按钮/胶囊) - 统一美业风格
   ================================================================ */
.hj-card {
    background: #fff;
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-soft);
}
.hj-card-champagne {
    background: var(--gradient-hero-gold);
    border-radius: var(--radius-lg);
    padding: var(--sp-4);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--border-normal);
}
.hj-btn-gold {
    background: var(--gradient-gold-btn);
    color: #fff;
    border: none;
    padding: 12px 20px;
    border-radius: var(--radius-md);
    font-size: var(--fs-md);
    font-weight: 500;
    letter-spacing: 1px;
    box-shadow: var(--shadow-gold-glow);
    transition: transform var(--anim-fast) var(--ease-out);
}
.hj-btn-gold:active { transform: translateY(1px); }

.hj-pill {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(224,183,77,0.12);
    color: var(--text-secondary);
    font-size: var(--fs-sm);
    border: 1px solid var(--border-normal);
}
.hj-pill.active {
    background: var(--gradient-gold-btn);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 3px 8px rgba(184,138,58,0.35);
}

.hj-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-normal), transparent);
    margin: var(--sp-4) 0;
}

/* ================================================================
   滚动条美化 (WebKit)
   ================================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-thumb {
    background: rgba(201,160,74,0.3);
    border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(201,160,74,0.5);
}
::-webkit-scrollbar-track { background: transparent; }

/* ================================================================
   金色文字工具 (标题装饰)
   ================================================================ */
.hj-text-gold {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
}

/* 减少 layout thrash: 常用容器强制 GPU */
.hj-gpu { transform: translateZ(0); will-change: transform; }