.progress-btn { position: relative; overflow: hidden; border: none; }
.progress-btn .progress-fill {
    position: absolute; top: 0; left: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.15); width: 0%;
    transition: width 0.1s linear; z-index: 1;
}
body.dark-mode .progress-btn .progress-fill { background: rgba(255, 255, 255, 0.2); }
.progress-btn span { position: relative; z-index: 2; pointer-events: none; }

/* Correlation meter: red on the left (-1), green on the right (+1) */
.phase-meter {
    position: relative; height: 12px; border-radius: 6px;
    background: linear-gradient(to right, #dc3545 0%, #ffc107 50%, #198754 100%);
    opacity: 0.85;
}
.phase-meter-zero { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 1px; background: rgba(128, 128, 128, 0.9); }
.phase-meter-pointer {
    position: absolute; left: 50%; top: -5px; width: 6px; height: 22px; margin-left: -3px;
    border-radius: 3px; background: #111111; border: 1px solid #ffffff;
    transition: left 0.25s ease;
}
body.dark-mode .phase-meter-pointer { background: #ffffff; border-color: #111111; }