/* Plank Challenge Timer */

#statusBadge {
    background-color: #6c757d;
    color: white;
    transition: all 0.3s ease;
    letter-spacing: 2px;
    text-transform: uppercase;
}

#statusBadge.hold { background-color: #fd7e14; }
#statusBadge.rest { background-color: #0dcaf0; color: #000; }
#statusBadge.ready { background-color: #ffc107; color: #000; }
#statusBadge.completed { background-color: #198754; }

/* Main Visual */
.plank-visual {
    position: relative;
    width: 220px;
    height: 220px;
    margin: 0 auto;
}

.plank-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.ring-bg {
    stroke: #dee2e6;
}

[data-bs-theme="dark"] .ring-bg {
    stroke: #495057;
}

.ring-progress {
    stroke: #fd7e14;
    stroke-dasharray: 565.48;
    stroke-dashoffset: 565.48;
    transition: stroke-dashoffset 0.3s linear, stroke 0.3s ease;
}

.plank-visual.rest .ring-progress {
    stroke: #0dcaf0;
}

.plank-visual.completed .ring-progress {
    stroke: #198754;
}

/* Content */
.plank-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.plank-countdown {
    display: block;
    font-size: 4rem;
    font-weight: 700;
    color: #fd7e14;
    line-height: 1;
    transition: color 0.3s ease;
}

.plank-visual.rest .plank-countdown {
    color: #0dcaf0;
}

.plank-visual.completed .plank-countdown {
    color: #198754;
    font-size: 3rem;
}

[data-bs-theme="dark"] .plank-countdown {
    filter: brightness(1.2);
}

.plank-hint {
    display: block;
    font-size: 0.9rem;
    color: var(--bs-secondary-color);
    margin-top: 5px;
}

/* Set Dots */
.set-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #dee2e6;
    transition: all 0.3s ease;
    display: none;
}

.set-dot.visible {
    display: block;
}

[data-bs-theme="dark"] .set-dot {
    background: #495057;
}

.set-dot.active {
    background: #fd7e14;
    transform: scale(1.2);
    box-shadow: 0 0 10px rgba(253, 126, 20, 0.5);
}

.set-dot.done {
    background: #198754;
}

/* Motivation Text */
#motivationText {
    color: var(--bs-body-color);
    min-height: 30px;
    transition: color 0.3s ease;
}

.plank-visual.hold ~ #motivationText {
    color: #fd7e14;
}

/* Buttons */
#startBtn { transition: all 0.3s ease; }
#startBtn.btn-warning { color: #000; }
#resetBtn:hover:not(:disabled) { transform: rotate(-180deg); }

#settingsChevron { transition: transform 0.3s ease; }
[aria-expanded="true"] #settingsChevron { transform: rotate(180deg); }
#settingsCollapse .form-control:disabled,
#settingsCollapse .form-select:disabled { opacity: 0.5; }