.strength-label display: flex; justify-content: space-between; font-size: 13px; font-weight: 600; margin-bottom: 8px; color: #4a4e69;
<div class="check-group"> <label><input type="checkbox" id="uppercase" checked> A-Z</label> <label><input type="checkbox" id="lowercase" checked> a-z</label> <label><input type="checkbox" id="numbers" checked> 0-9</label> <label><input type="checkbox" id="symbols" checked> !@#$%&*</label> </div>
/* Password display area */ .password-area padding: 28px 28px 16px 28px; insta generate password
.strength-fill width: 0%; height: 100%; border-radius: 12px; transition: width 0.3s ease, background 0.2s;
input[type="range"]:focus outline: none; .strength-label display: flex
<div class="controls"> <div class="slider-container"> <div class="slider-header"> <span>📏 Length</span> <span id="lengthValue" style="background:#f0f2f6; padding:2px 12px; border-radius:20px;">16</span> </div> <input type="range" id="lengthSlider" min="6" max="32" value="16"> </div>
.insta-header h1 color: white; font-size: 28px; font-weight: 600; letter-spacing: -0.3px; display: flex; align-items: center; justify-content: center; gap: 12px; input type="checkbox" id="uppercase" checked>
.slider-container margin-bottom: 20px;