﻿

.zx-module-intro {
    /* ---- 主题色：改这里 ---- */
    --zx-accent: #409eff;
    --zx-accent-soft: #ecf5ff;
    /* ---- 文字 ---- */
    --zx-text: #303133;
    --zx-text-sub: #5e6d82;
    --zx-text-light: #909399;
    /* ---- 线条与底色 ---- */
    --zx-line: #ebeef5;
    --zx-line-soft: #f2f4f8;
    --zx-bg-soft: #f8fafc;
    /* ---- 圆角与间距 ---- */
    --zx-radius: 10px;
    --zx-radius-sm: 6px;
    max-width: 900px;
    color: var(--zx-text);
    font-size: 14px;
    line-height: 1.85;
    word-break: break-word;
    -webkit-font-smoothing: antialiased;

    p {
        padding-left: 20px;
    }
}

    .zx-module-intro > h2 {
        position: relative;
        margin: 25px 0 12px;
        padding-left: 13px;
        font-size: 19px;
        font-weight: 600;
        line-height: 1.4;
        color: var(--zx-text);
    }

        .zx-module-intro > h2::before {
            content: "";
            position: absolute;
            left: 0;
            top: 50%;
            width: 4px;
            height: 17px;
            margin-top: -8px;
            border-radius: 2px;
            background: var(--zx-accent);
        }

        .zx-module-intro > h2:first-child {
            margin-top: 4px;
        }

    .zx-module-intro > h3 {
        margin: 22px 0 8px;
        margin-top: 0;
        padding-left:20px;
        font-size: 15px;
        font-weight: 600;
        line-height: 1.5;
        color: var(--zx-text);
    }


    .zx-module-intro p {
        margin: 8px 0;
        color: var(--zx-text-sub);
    }

    .zx-module-intro strong {
        font-weight: 600;
        color: var(--zx-text);
    }

    /* 适用环节这类只有一行的说明，弱化一点，不抢正文 */
    .zx-module-intro > h3 + p {
        color: var(--zx-text-light);
    }


    .zx-module-intro ol.zx-flow {
        margin: 8px 0 4px;
        padding: 0;
        padding-left:20px;
        list-style: none;
        counter-reset: zx-flow;
    }

        .zx-module-intro ol.zx-flow > li {
            position: relative;
            padding: 1px 0 1px 30px;
            color: var(--zx-text-sub);
            counter-increment: zx-flow;
        }

            .zx-module-intro ol.zx-flow > li::before {
                content: counter(zx-flow);
                position: absolute;
                left: 0;
                top: 8px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: var(--zx-accent-soft);
                color: var(--zx-accent);
                font-size: 12px;
                font-weight: 600;
                line-height: 20px;
                text-align: center;
            }

        /* 多人协作的流程（如「现场工作人员」）用空心圆区分 */
        .zx-module-intro ol.zx-flow.zx-alt > li::before {
            background: transparent;
            border: 1px solid var(--zx-accent);
        }


    .zx-module-intro ol.zx-feat {
        margin: 12px 0 0;
        padding: 0;
        padding-left:20px;
        list-style: none;
        counter-reset: zx-feat;
        display: grid;
        gap: 6px;
    }

        .zx-module-intro ol.zx-feat > li {
            position: relative;
            margin: 0;
            padding: 4px 18px 4px 30px;
            border: 0px solid var(--zx-line);
            border-radius: var(--zx-radius);
            color: var(--zx-text-sub);
            counter-increment: zx-feat;
            transition: border-color 0.2s, box-shadow 0.2s;
        }


            .zx-module-intro ol.zx-feat > li::before {
                content: counter(zx-feat);
                position: absolute;
                left: 0px;
                top: 8px;
                width: 20px;
                height: 20px;
                border-radius: 50%;
                background: var(--zx-accent-soft);
                color: #409eff;
                font-size: 13px;
                font-weight: 600;
                line-height: 20px;
                text-align: center;
            }

            .zx-module-intro ol.zx-feat > li > strong {
                display: block;
                margin-bottom: 2px;
                font-size: 15px;
                color: var(--zx-text);
            }

    /* ==========================================================================
   表格（如签到墙的「三种签到方式都支持」）
   ========================================================================== */

    .zx-module-intro table {
        width: 100%;
        margin: 12px 0;
        border-collapse: separate;
        border-spacing: 0;
        border: 1px solid var(--zx-line);
        border-radius: var(--zx-radius);
        overflow: hidden;
        font-size: 14px;
    }

    .zx-module-intro thead th {
        padding: 11px 16px;
        background: var(--zx-accent-soft);
        color: var(--zx-text);
        font-weight: 600;
        text-align: left;
        white-space: nowrap;
    }

    .zx-module-intro tbody td {
        padding: 11px 16px;
        color: var(--zx-text-sub);
        border-top: 1px solid var(--zx-line-soft);
    }

    .zx-module-intro tbody tr:nth-child(even) td {
        background: var(--zx-bg-soft);
    }

    /* ==========================================================================
   截图区（大屏效果 / 手机端效果）
   ========================================================================== */

    .zx-module-intro .zx-shot {
        margin: 12px 0;
    }

        .zx-module-intro .zx-shot img {
            display: block;
            width: 100%;
            height: auto;
            border: 1px solid var(--zx-line);
            border-radius: var(--zx-radius);
        }

        .zx-module-intro .zx-shot figcaption {
            margin-top: 8px;
            font-size: 13px;
            color: var(--zx-text-light);
            text-align: center;
        }



@media (max-width: 640px) {
    .zx-module-intro {
        font-size: 13.5px;
    }

        .zx-module-intro > h2 {
            margin: 12px 0 6px;
            margin-top: 20px;
            font-size: 17px;
        }

        .zx-module-intro ol.zx-feat > li {
            padding: 12px 14px 12px 48px;
        }

            .zx-module-intro ol.zx-feat > li::before {
                left: 13px;
                width: 24px;
                height: 24px;
                line-height: 24px;
            }

        .zx-module-intro table {
            display: block;
            overflow-x: auto;
        }
}
