sj-miniprogram/pages/profile/profile.scss

.form-list {
    margin-top: 10rpx;
}

.form-item {
    margin-bottom: 30rpx; // Reduced from 46rpx

    .label {
        display: block;
        font-size: 28rpx;
        font-weight: 500;
        color: #333333; // Darker color as requested
        margin-bottom: 20rpx; // Increased slightly for breathing room
    }

    .input-box {
        border-bottom: 1rpx solid #E5E5E5;
        padding-bottom: 12rpx; // Reduced from 16rpx
        transition: border-color 0.3s;

        &:focus-within {
            border-bottom-color: $brand-primary;
        }

        input {
            font-size: 32rpx; // Slightly reduced input text size
            color: #1A1A1A;
            font-weight: 500;
            height: 44rpx; // Reduced height
            line-height: 44rpx;
        }
    }

    .gender-switch {
        display: flex;
        position: relative;
        background-color: #F6F8FA;
        border-radius: 16rpx;
        padding: 6rpx;
        height: 76rpx;
        box-sizing: border-box;

        .g-slider {
            position: absolute;
            top: 6rpx;
            bottom: 6rpx;
            width: calc(50% - 6rpx);
            background-color: #EBF3FF; // Lighter blue to match the theme gracefully
            border-radius: 12rpx;
            box-shadow: 0 4rpx 10rpx rgba(31, 108, 255, 0.1); // Soft glowing shadow
            border: 2rpx solid rgba(31, 108, 255, 0.15); // Subtle border outline
            box-sizing: border-box;
            transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
            z-index: 1;

            &.left {
                transform: translateX(0);
            }

            &.right {
                transform: translateX(100%);
            }

            &.none {
                opacity: 0;
            }
        }

        .g-item {
            flex: 1;
            position: relative;
            z-index: 2;
            line-height: 64rpx;
            text-align: center;
            color: #888888;
            font-size: 28rpx;
            transition: all 0.3s;

            &.active {
                color: $brand-primary; // Refined to brand color for better contrast with light blue bg
                font-weight: 600;
            }
        }
    }
}

.avatar-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1rpx solid #E5E5E5;
    padding-bottom: 30rpx; // Reduced
    margin-bottom: 30rpx; // Reduced

    .label {
        margin-bottom: 0;
        font-size: 30rpx; // Reduced
        font-weight: 600;
        color: #1A1A1A;
    }

    .right-content {
        display: flex;
        align-items: center;

        .hint-text {
            font-size: 24rpx; // Reduced
            color: #FFA500; // Orange color
            margin-right: 20rpx; // Reduced
        }

        .avatar-img {
            width: 88rpx; // Reduced from 100rpx
            height: 88rpx;
            border-radius: 50%;
            background-color: #F8F9FA;
            border: 2rpx solid #F0F2F5;
        }

        .arrow {
            margin-left: 16rpx;
            width: 14rpx;
            height: 14rpx;
            border-right: 3rpx solid #CCCCCC;
            border-top: 3rpx solid #CCCCCC;
            transform: rotate(45deg);
        }
    }
}

.ph-style {
    color: #CCCCCC;
    font-size: 30rpx;
    font-weight: normal;
}