/* =========================================================
   铭信汇 · 统一主题 tokens & 基础组件
   适用：整站（首页 / 栏目页 / 内容页 / 会员页）
   ========================================================= */
:root {
    /* 主色：科技蓝 → 青，强调色：琥珀 */
    --mx-brand: #2563EB;
    --mx-brand-dark: #1D4ED8;
    --mx-brand-deep: #12327A;
    --mx-brand-soft: #EAF1FF;
    --mx-cyan: #06B6D4;
    --mx-accent: #F59E0B;
    --mx-accent-dark: #EA8C0A;
    --mx-accent-soft: #FFF6E5;

    /* 功能色 */
    --mx-danger: #EF4444;
    --mx-success: #10B981;
    --mx-warn: #F97316;

    /* 中性色 */
    --mx-ink: #0F172A;
    --mx-ink-2: #1E293B;
    --mx-muted: #64748B;
    --mx-muted-2: #94A3B8;
    --mx-line: #E4EAF2;
    --mx-line-soft: #EFF3F9;
    --mx-bg: #F4F7FC;
    --mx-surface: #FFFFFF;

    /* 渐变 */
    --mx-grad: linear-gradient(135deg, #2563EB 0%, #06B6D4 100%);
    --mx-grad-dark: linear-gradient(135deg, #12327A 0%, #0E7490 100%);
    --mx-grad-accent: linear-gradient(135deg, #F59E0B 0%, #F97316 100%);
    --mx-grad-text: linear-gradient(135deg, #1E40AF 0%, #0891B2 100%);

    /* 形状 */
    --mx-radius: 14px;
    --mx-radius-sm: 10px;
    --mx-radius-lg: 22px;
    --mx-shadow: 0 6px 18px rgba(15, 23, 42, .06);
    --mx-shadow-hover: 0 14px 32px rgba(37, 99, 235, .16);
    --mx-transition: all .28s cubic-bezier(.4, 0, .2, 1);

    /* 版心 */
    --mx-container: 1360px;
}

/* ---------- 基础 ---------- */
.mx-body {
    background: var(--mx-bg);
    color: var(--mx-ink-2);
}

.mx-container {
    max-width: var(--mx-container);
    margin: 0 auto;
    padding: 0 20px;
}

.mx-clear {
    clear: both;
}

/* ---------- 按钮 ---------- */
.mx-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 40px;
    padding: 0 20px;
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: var(--mx-transition);
}

.mx-btn-primary {
    background: var(--mx-grad);
    color: #fff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, .25);
}

.mx-btn-primary:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(37, 99, 235, .32);
}

.mx-btn-accent {
    background: var(--mx-grad-accent);
    color: #fff;
    box-shadow: 0 6px 16px rgba(245, 158, 11, .28);
}

.mx-btn-accent:hover {
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(245, 158, 11, .35);
}

.mx-btn-outline {
    background: #fff;
    color: var(--mx-brand);
    border-color: #CBDBF8;
}

.mx-btn-outline:hover {
    color: var(--mx-brand-dark);
    border-color: var(--mx-brand);
    box-shadow: 0 6px 16px rgba(37, 99, 235, .16);
}

.mx-btn-ghost {
    background: rgba(255, 255, 255, .12);
    color: #fff;
    border-color: rgba(255, 255, 255, .34);
}

.mx-btn-ghost:hover {
    background: rgba(255, 255, 255, .22);
    color: #fff;
}

.mx-btn-lg {
    height: 48px;
    padding: 0 30px;
    font-size: 15px;
}

.mx-btn-block {
    width: 100%;
}

/* ---------- 卡片 / 区块标题 ---------- */
.mx-card {
    background: var(--mx-surface);
    border: 1px solid var(--mx-line-soft);
    border-radius: var(--mx-radius);
    box-shadow: var(--mx-shadow);
}

.mx-card-hover {
    transition: var(--mx-transition);
}

.mx-card-hover:hover {
    transform: translateY(-4px);
    box-shadow: var(--mx-shadow-hover);
    border-color: #CBDBF8;
}

.mx-section {
    margin: 34px 0;
}

.mx-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mx-line);
}

.mx-section-title {
    position: relative;
    margin: 0;
    padding-left: 14px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: .3px;
    color: var(--mx-ink);
    line-height: 1.2;
}

.mx-section-title::before {
    content: '';
    position: absolute;
    left: 0;
    top: 4px;
    bottom: 4px;
    width: 5px;
    border-radius: 4px;
    background: var(--mx-grad);
}

.mx-section-title small {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--mx-muted-2);
}

.mx-section-more {
    font-size: 14px;
    color: var(--mx-muted);
}

.mx-section-more:hover {
    color: var(--mx-brand);
}

/* ---------- 标签 ---------- */
.mx-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 600;
    background: var(--mx-brand-soft);
    color: var(--mx-brand-dark);
}

.mx-tag-accent {
    background: var(--mx-accent-soft);
    color: var(--mx-accent-dark);
}

.mx-tag-danger {
    background: #FEECEC;
    color: #DC2626;
}

.mx-tag-success {
    background: #E7F8F1;
    color: #047857;
}

/* ---------- 表单 ---------- */
.mx-input,
.mx-select {
    width: 100%;
    height: 44px;
    padding: 0 14px;
    border: 1px solid var(--mx-line);
    border-radius: var(--mx-radius-sm);
    background: #fff;
    font-size: 14px;
    color: var(--mx-ink-2);
    transition: var(--mx-transition);
}

.mx-input:focus,
.mx-select:focus {
    outline: none;
    border-color: var(--mx-brand);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}

/* ---------- 滚动条美化 ---------- */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #C7D4E6;
    border-radius: 8px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--mx-brand);
}

/* ---------- 响应式 ---------- */
@media (max-width: 768px) {
    .mx-container {
        padding: 0 14px;
    }

    .mx-section {
        margin: 22px 0;
    }

    .mx-section-title {
        font-size: 18px;
    }
}