/* Forgot-password brand panel — darker, more subdued */
.panel-brand {
    background: linear-gradient(155deg, #081f0e 0%, #0f6b30 50%, #0a4e22 100%);
}

/* ── Step panels (hidden by default) ── */
.step-panel {
    display: none;
}
.step-panel.active {
    display: block;
}

/* ── OTP grid ── */
.otp-group {
    display: flex;
    gap: 10px;
    justify-content: center;
}

/* ── Countdown ── */
#countdownWrap {
    text-align: center;
    margin-top: 8px;
    font-size: 0.82rem;
    color: var(--clr-muted);
}
#countdownWrap .resend-link {
    color: var(--clr-primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    display: none;
}
#countdownWrap .resend-link.visible {
    display: inline;
}
#countdownWrap .timer {
    font-weight: 600;
    color: var(--clr-dark);
}

/* ── Success screen ── */
.success-icon-ring {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--clr-primary-light);
    border: 2px solid var(--clr-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.success-icon-ring svg {
    color: var(--clr-primary);
}

/* Animate steps */
.step-panel.active {
    animation: slideUp 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(18px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}