.register-box {
    max-width: 500px;
}

.tip {
    display: block;
    font-size: 12px;
    color: #999;
    margin-top: 4px;
}

input:invalid {
    border-color: #ff4444;
}

input:invalid + .tip {
    color: #ff4444;
}

input:valid + .tip {
    color: #4CAF50;
}

.password-strength {
    height: 4px;
    margin-top: 5px;
    background: #ddd;
    border-radius: 2px;
}

.password-strength-meter {
    height: 100%;
    width: 0;
    background: #ff4444;
    border-radius: 2px;
    transition: all 0.3s;
}

.password-strength-meter.weak {
    width: 33.33%;
    background: #ff4444;
}

.password-strength-meter.medium {
    width: 66.66%;
    background: #ffa700;
}

.password-strength-meter.strong {
    width: 100%;
    background: #4CAF50;
}