/* ===== /membership/ 页面视觉统一（紫色 + 金色主题） ===== */

/* 会员等级卡片：白色背景、圆角、淡紫色阴影 */
.v3-plan-card {
    border-radius: 14px;
    box-shadow: 0 6px 24px rgba(74, 58, 107, 0.10);
}
.v3-plan-card:hover {
    box-shadow: 0 12px 32px rgba(74, 58, 107, 0.18);
    border-color: #D4AF37;
}
.v3-plan-card.v3-plan-featured,
.v3-plan-card.v3-plan-lifetime {
    box-shadow: 0 8px 28px rgba(74, 58, 107, 0.16);
}

/* 标题：衬线字体 Source Serif 4 + 深紫色 #4A3A6B */
.ms-hero h1,
.ms-card-head h2,
.v3-plan-name {
    font-family: 'Source Serif 4', 'Noto Serif SC', Georgia, 'Times New Roman', serif;
    color: #4A3A6B;
}
.ms-hero h1 {
    color: #FFFFFF;
}
.v3-plan-card.v3-plan-featured .v3-plan-name {
    color: #FFFFFF;
}

/* 表格：紫色表头 + 柔和边框（平台统一规范） */
.ms-table {
    border: 1px solid #E0D9EB;
    border-radius: 8px;
    overflow: hidden;
}
.ms-table th {
    background: linear-gradient(135deg, #4A3A6B 0%, #6B5A8B 100%);
    color: #FFFFFF;
}
.ms-table td {
    color: #4A3A6B;
}
.ms-table tr:hover td {
    background: #FAF9FC;
}

/* 按钮：统一紫色 + 金色主题（金色底配深紫字） */
.ms-btn {
    border-radius: 30px;
}
.ms-btn.gold {
    background: linear-gradient(135deg, #D4AF37, #E3C55A);
    color: #4A3A6B;
}

/* ===== 会员中心 Hero（重新设计） ===== */
/* 紫色渐变主体 */
.ms-hero {
    background: linear-gradient(135deg, #4A3A6B 0%, #5E4D80 48%, #6B5A8B 100%);
    box-shadow: 0 18px 48px rgba(74, 58, 107, 0.28);
}

/* 顶部标签：紫色背景上使用白字 */
.ms-hero-eyebrow {
    color: #FFFFFF;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: .5px;
    margin-bottom: 12px;
}
/* 主标题：白色衬线 */
.ms-hero h1 {
    margin: 0 0 12px;
    font-size: 34px;
    color: #FFFFFF;
    font-family: 'Source Serif 4', Georgia, 'Times New Roman', serif;
    font-weight: 700;
    line-height: 1.3;
    text-shadow: 0 2px 6px rgba(20, 14, 40, .5);
}
/* 副标题：淡紫色 */
.ms-hero .ms-hero-sub {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    color: #FFFFFF;
    line-height: 1.7;
    max-width: 780px;
}
/* 统计卡片：毛玻璃 4 列 */
.ms-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin: 28px 0 26px;
}
.ms-hero-stat {
    background: rgba(255, 255, 255, 0.10);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 16px 14px;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.ms-hero-stat .num {
    color: #FFFFFF;
    font-size: 30px;
    font-weight: 700;
    line-height: 1.2;
}
.ms-hero-stat .num.sm {
    font-size: 20px;
    line-height: 1.3;
}
.ms-hero-stat .lbl {
    color: #FFFFFF;
    font-size: 12.5px;
    margin-top: 6px;
}
/* 行动按钮 */
.ms-hero-actions {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    align-items: center;
}
.ms-hero-actions .ms-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 12px 28px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    border-radius: 30px;
}
.ms-hero-actions .ms-btn.ghost {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
}
.ms-hero-actions .ms-btn.ghost:hover {
    border-color: #D4AF37;
    color: #F4CF47;
}
/* 响应式：桌面 4 列 → 平板 2 列 → 手机 1 列 */
@media (max-width: 992px) {
    .ms-hero-stats { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 576px) {
    .ms-hero-stats { grid-template-columns: 1fr; }
    .ms-hero h1 { font-size: 26px; }
    .ms-hero .ms-hero-sub { font-size: 15px; }
    .ms-hero-actions .ms-btn { width: 100%; justify-content: center; }
}