Password Strength Meter

Build a password field with a live strength meter as a single React component. As the user types, you score the password from 0 to 4 and reflect that score three ways: how many meter bars fill, what color they turn, and the text label below. The whole picture is derived from one number, so there is nothing to keep in sync by hand.

Task

The starter App.tsx renders an empty password input, four empty bars, and the label "Too weak". Make it live:

1. Control the input. Track the password with useState('') and wire the input's value and onChange.
2. Score it. Derive a score (0..4) by counting how many checks pass: length is at least 8, has a lowercase AND an uppercase letter, has a digit, has a symbol (a non-alphanumeric character).
3. Reflect it three ways. Add s{score} to the meter class (that picks the fill color), add the on class to the first score bars, and show the label for the score: Too weak, Weak, Fair, Good, Strong.

Examples

• Empty field scores 0: no bars filled, label "Too weak".
• abcdefgh scores 1 (length only): one red bar, "Weak".
• Abcdefg1 scores 3 (length, mixed case, digit): three blue bars, "Good".
• Abcdefg1! scores 4: four green bars, "Strong".

Notes

• One number, three effects. Do not track the bar count, the color, and the label separately — derive all three from score.
• The color lives in CSS. A s{score} class on the meter selects the fill color (.meter.s3 .bar.on), so your component only computes the number.
• Score is derived, not stored. Recompute score from password on each render; keeping it in its own state would let the two drift apart.
• Styling (dark theme, input, bars) is already in styles.css; focus on the state and the scoring.