/* 分销裂变推广页面样式 */

/* 分销裂变解决方案概述 */
.distribution-solution-overview {
    padding: 64px 0;
    background: linear-gradient(180deg, #f8fcfe 0%, #E6FCFF 100%);
}

.distribution-solution-overview .solution-header .title {
    color: #052633;
    margin-bottom: 0;
}

.distribution-solution-overview .solution-header .subtitle {
    color: #475569;
    line-height: 1.6;
}

/* 裂变关系图 - 简化为金字塔结构 */
.solution-diagram {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    padding: 32px 0;
}

.diagram-center {
    display: flex;
    justify-content: center;
}

.center-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 20px 32px;
    background: linear-gradient(135deg, #0B9ED9 0%, #09C 100%);
    border-radius: 16px;
    box-shadow: 0 8px 30px rgba(11, 158, 217, 0.3);
}

.center-node svg {
    width: 48px;
    height: 48px;
}

.center-node .node-label {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
}

.diagram-level-1,
.diagram-level-2,
.diagram-level-3 {
    display: flex;
    justify-content: center;
    gap: 16px;
}

.level-node {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 2px 8px rgba(5, 38, 51, 0.1);
}

.level-node svg {
    width: 32px;
    height: 32px;
}

.level-node .node-label {
    color: #052633;
    font-size: 12px;
    font-weight: 500;
}

.level-node .node-rate {
    color: #F53B3E;
    font-size: 10px;
    font-weight: 600;
}

.level-node.small svg {
    width: 24px;
    height: 24px;
}

.level-node.mini {
    padding: 8px 12px;
    background: #f8fcfe;
}

.level-node.mini .node-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #052633;
}

.level-node.mini .node-label {
    font-size: 10px;
    color: #64748B;
}

.diagram-caption {
    color: #475569;
    font-size: 14px;
    line-height: 1.6;
    text-align: center;
    max-width: 600px;
    margin-top: 24px;
}

/* 数据价值卡片 - 复用inventory-erp样式 */
.value-card {
    text-align: center;
    background: #fff;
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(11, 158, 217, 0.08);
    transition: all 0.3s ease;
    align-items: center !important;
}

.value-card:hover {
    box-shadow: 0 8px 30px rgba(11, 158, 217, 0.15);
    transform: translateY(-4px);
}

.value-number {
    font-size: 48px;
    font-weight: 700;
    color: #0B9ED9;
    line-height: 1;
    text-align: center;
}

.value-label {
    font-size: 16px;
    font-weight: 600;
    color: #052633;
    margin-top: 8px;
    text-align: center;
}

.value-desc {
    font-size: 14px;
    color: #475569;
    margin-top: 12px;
    line-height: 1.5;
    text-align: left;
    width: 100%;
}

/* 核心痛点卡片间距 */
.floor-wrap-box .floor-box .grid-cols-4.personal-grid-cols-4 {
    gap: 24px;
}

/* floor-4的tit和tit2样式补充 */
.floor-wrap-box .floor-box .floor-4 .card-item .card-list .tit {
    font-size: 24px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.floor-wrap-box .floor-box .floor-4 .card-item .card-list .tit2 {
    color: var(--text-secondary);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 32px;
}

/* 移动端适配 */
@media (max-width: 768px) {
    .distribution-solution-overview {
        padding: 32px 16px;
    }

    .distribution-solution-overview .solution-header .title {
        font-size: 24px;
    }

    .distribution-solution-overview .solution-header .subtitle {
        font-size: 14px;
    }

    .solution-diagram {
        gap: 16px;
        padding: 16px;
    }

    .center-node {
        padding: 16px 24px;
    }

    .center-node svg {
        width: 36px;
        height: 36px;
    }

    .center-node .node-label {
        font-size: 12px;
    }

    .diagram-level-1,
    .diagram-level-2,
    .diagram-level-3 {
        gap: 8px;
    }

    .level-node {
        padding: 8px 12px;
    }

    .level-node svg {
        width: 24px;
        height: 24px;
    }

    .level-node .node-label {
        font-size: 10px;
    }

    .level-node.small svg {
        width: 18px;
        height: 18px;
    }

    .level-node.mini {
        padding: 6px 8px;
    }

    .level-node.mini .node-dot {
        width: 8px;
        height: 8px;
    }

    .diagram-caption {
        font-size: 12px;
        padding: 0 16px;
    }

    .value-card {
        padding: 16px;
    }

    .value-number {
        font-size: 32px;
    }

    .value-label {
        font-size: 14px;
    }

    .value-desc {
        font-size: 12px;
    }

    .grid-cols-4.personal-grid-cols-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    /* floor-4 移动端适配 */
    .floor-wrap-box .floor-box .floor-4 .card-item {
        flex-direction: column;
        padding: 20px 16px;
    }

    .floor-wrap-box .floor-box .floor-4 .card-item .img-box {
        width: 100%;
        padding: 0;
        margin-bottom: 16px;
    }

    .floor-wrap-box .floor-box .floor-4 .card-item .img-box img {
        width: 100%;
        height: auto;
    }

    .floor-wrap-box .floor-box .floor-4 .card-item .card-list {
        padding: 0;
    }

    .floor-wrap-box .floor-box .floor-4 .card-item .card-list .tit {
        font-size: 18px;
    }

    .floor-wrap-box .floor-box .floor-4 .card-item .card-list .tit2 {
        font-size: 14px;
        margin-bottom: 16px;
    }

    .floor-wrap-box .floor-box .floor-4 .card-item .card-list .card {
        padding: 12px;
        margin-bottom: 12px;
    }

    .floor-wrap-box .floor-box .floor-4 .card-item .card-list .card .title-box img {
        width: 24px;
        height: 24px;
    }

    .floor-wrap-box .floor-box .floor-4 .card-item .card-list .card .title-box span {
        font-size: 14px;
    }

    .floor-wrap-box .floor-box .floor-4 .card-item .card-list .card .desc {
        font-size: 12px;
    }
}

/* 动画 - 遵循prefers-reduced-motion */
@media (prefers-reduced-motion: no-preference) {
    .level-node {
        animation: fadeInUp 0.5s ease-out backwards;
    }

    .diagram-level-1 .level-node:nth-child(1) { animation-delay: 0.1s; }
    .diagram-level-1 .level-node:nth-child(2) { animation-delay: 0.2s; }
    .diagram-level-1 .level-node:nth-child(3) { animation-delay: 0.3s; }

    .diagram-level-2 .level-node:nth-child(1) { animation-delay: 0.4s; }
    .diagram-level-2 .level-node:nth-child(2) { animation-delay: 0.45s; }
    .diagram-level-2 .level-node:nth-child(3) { animation-delay: 0.5s; }
    .diagram-level-2 .level-node:nth-child(4) { animation-delay: 0.55s; }
    .diagram-level-2 .level-node:nth-child(5) { animation-delay: 0.6s; }
    .diagram-level-2 .level-node:nth-child(6) { animation-delay: 0.65s; }

    .diagram-level-3 .level-node { animation-delay: 0.7s; }

    @keyframes fadeInUp {
        from {
            opacity: 0;
            transform: translateY(20px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .level-node,
    .value-card {
        animation: none;
        transition: none;
    }
}