.step-container {
    min-height: 100vh;
    background-color: #FFFFFF;
    display: flex;
    flex-direction: column;
    border-top: none;
    margin-top: -1px; /* 向上微移以盖住 native 导航栏底部的细线 */
    position: relative;
    z-index: 10;
}

.header-area {
    padding: 20rpx 40rpx 30rpx;
    background-color: #FFFFFF;
    border: none;

    .main-title {
        font-size: 38rpx; // Further reduced for a more refined look
        font-weight: 600;
        color: #1A1A1A;
        margin-bottom: 16rpx;
    }

    .sub-title {
        font-size: 28rpx;
        color: #888888;
        line-height: 1.6;
    }
}

.content-area {
    padding: 0 40rpx;
}

.footer-area {
    padding: 20rpx 40rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 20rpx; /* 显著减小间距，使按钮上移 */
    margin-bottom: calc(env(safe-area-inset-bottom) + 20rpx);

    .btn-next {
        width: 100%;
        height: 88rpx; // Reduced from 96rpx for a sleeker look matching smaller font
        line-height: 88rpx; // Reduced from 96rpx
        background-color: $brand-primary;
        color: #FFFFFF;
        font-size: 32rpx; // Reduced from 34rpx
        font-weight: 500;
        border-radius: 44rpx; // Pill shape adjusted to new height
        margin-bottom: 30rpx;

        &:active {
            opacity: 0.8;
        }

        &::after {
            border: none;
        }
    }

    .btn-skip {
        font-size: 28rpx; // Reduced from 30rpx
        color: #666666;
        padding: 10rpx 40rpx;

        &:active {
            color: $brand-primary;
        }
    }
}