body{margin:0;font-family:sans-serif;background:#1a1a1a;color:#ddd}.app{display:flex;justify-content:center;align-items:center;min-height:100vh}.box{background:#222;padding:16px;width:300px;border-radius:4px}h1{font-size:18px;text-align:center;color:#66c;margin-bottom:12px}input{width:100%;padding:8px;background:#333;color:#fff;border:none;border-radius:3px;margin-bottom:10px}.bar{display:flex;align-items:center;gap:8px;margin-bottom:12px}.fill{height:6px;flex:1;border-radius:2px}.weak{background:#e57373}.okay{background:#ffd54f}.strong{background:#81c784}ul{font-size:12px;margin:10px 0;padding-left:16px}button{padding:8px;width:100%;background:#66c;color:#fff;border:none;border-radius:3px}