.ctpb-button { display: block; margin: 20px 0; font-family: inherit; }
.ctpb-message { margin: 10px 0; font-size: 1.2em; text-align: center; }
.ctpb-horizontal-bar { width: 100%; height: 10px; background: #eee; margin: 10px 0; border-radius: 5px; overflow: hidden; }
.ctpb-horizontal-fill { height: 100%; width: 0; background: #0073aa; }
.ctpb-circle { position: relative; width: 100px; height: 100px; border-radius: 50%; background: #eee; overflow: hidden; }
.ctpb-circle-fill { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border-radius: 50%; clip: rect(0, 100px, 100px, 50px); background: transparent; border: 10px solid #0073aa; transform: rotate(0deg); transform-origin: center center; }


/* Transparent overlay for stage */
.ctpb-stage-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
    background: transparent;
    z-index: 999;
}

/* SVG Circular progress styles */
.ctpb-svg-wrap {
    position: relative;
    display: block;
    margin: 10px auto;
}
.ctpb-svg-wrap svg {
    transform: rotate(-90deg);
    overflow: visible;
}
.ctpb-svg-wrap .ctpb-counter {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    font-size: 1.2em;
}

/* Segmented progress bar */
.mybar.segmented.horizontal { display: flex; margin-bottom: 10px; }
.mybar.segmented.horizontal .segment { flex: 1; text-align: center; background: #eee; padding: 5px; }
.mybar.segmented.horizontal .segment.active { /* background set inline via JS */ }


/* Full-container overlay covering entire sequence container */
.ctp-container-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    z-index: 1000;
    pointer-events: auto;
    cursor: pointer;
}