/* 1. 轮播主外层容器 */
    .carousel-wrapper {
        position: relative;
        max-width: 1200px; /* 轮播图区域的最大宽度，可根据设计稿调整 */
        margin: 40px auto;
        padding: 0 50px;   /* 留出左右导航按钮的空间 */
        box-sizing: border-box;
    }

    /* 2. 视口容器（超出部分隐藏） */
    .carousel-viewport {
        overflow: hidden;
        width: 100%;
    }

    /* 3. 跑马灯轨道 */
    .carousel-track {
        display: flex;
        gap: 20px; /* 对应 JS 中的 CARD_GAP */
        transition: transform 0.7s ease-in-out;
        will-change: transform;
    }

    /* 无过渡类（用于无缝边界衔接） */
    .carousel-track.no-transition {
        transition: none !important;
    }

    /* 4. 单张证书卡片样式 */
    .cert-card {
        flex: 0 0 100px; /* 对应 JS 中的 CARD_WIDTH，必须固定物理宽度 */
        width: 100px;
        height: 140px;   /* 根据您的证书比例设置高度 */
        background: #fff;
        border: 1px solid #eee;
        border-radius: 4px;
        box-shadow: 0 2px 8px rgba(0,0,0,0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        box-sizing: border-box;
        overflow: hidden;
    }

    .cert-card img {
        max-width: 90%;
        max-height: 90%;
        object-fit: contain;
    }

    /* 5. 左右导航按钮 */
    .carousel-nav {
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        width: 40px;
        height: 40px;
        background: rgba(0,0,0,0.5);
        color: #fff;
        border: none;
        border-radius: 50%;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 10;
        transition: background 0.3s;
    }
    .carousel-nav:hover { background: rgba(0,0,0,0.8); }
    .carousel-nav.prev { left: 0; }
    .carousel-nav.next { right: 0; }
    .carousel-nav svg { width: 20px; height: 20px; }

    /* 6. 暂停提示图标 */
    .pause-indicator {
        position: absolute;
        top: -30px;
        right: 50px;
        display: none;
        align-items: center;
        gap: 5px;
        font-size: 12px;
        color: #999;
        letter-spacing: 1px;
    }
    .pause-indicator.visible { display: flex; }
    .pause-indicator svg { width: 14px; height: 14px; }

    /* 7. 底部小圆点指示器 */
    .carousel-dots {
        display: flex;
        justify-content: center;
        gap: 8px;
        margin-top: 20px;
    }
    .carousel-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        border: none;
        background: #ccc;
        cursor: pointer;
        padding: 0;
        transition: background 0.3s;
    }
    .carousel-dot.active {
        background: #333; /* 激活时圆点的颜色 */
        width: 20px;
        border-radius: 5px;
    }

    /* 8. 自动播放底部进度条 */
    .carousel-progress {
        width: 100%;
        max-width: 200px;
        height: 3px;
        background: #eee;
        margin: 15px auto 0;
        border-radius: 2px;
        overflow: hidden;
    }
    .carousel-progress-bar {
        width: 0%;
        height: 100%;
        background: #007bff; /* 进度条填充颜色 */
        transition: width 0.03s linear;
    }