form { max-width: 500px;  }
label { display:block; margin:14px 0 6px; }
.input-wrap { position: relative; }
input {
    width: 100%; padding: 10px 40px 10px 10px;
    border: 1px solid #ccc; border-radius: 8px;
    background:#f9f9f9; color:#000;
}
input:focus { outline: none; border-color: #007BFF; background:#fff; }
.toggle-visibility {
    position:absolute; right:8px; top:50%; transform:translateY(-50%);
    border:0; background:transparent; padding:6px; cursor:pointer;
}
.toggle-visibility svg {
    stroke: #001F3F;   /* navy blue */
    fill: none;        /* keep inside transparent */
}

.toggle-visibility:hover svg,
.toggle-visibility:focus svg {
  stroke: #004080;   /* lighter navy on hover/focus */
}
.hint { margin:6px 0 0; min-height:20px; }
.strength-wrap { height:8px; background:#eee; border-radius:999px; overflow:hidden; margin-top:8px; }
.strength-bar { height:100%; width:0%; transition:width .25s ease; }
.weak { background:#e74c3c; } .fair { background:#f39c12; }
.good { background:#27ae60; } .strong { background:deeppink }
button[disabled] { opacity:.6; cursor:not-allowed; }

/* Let emoji/symbols keep their own color */
.hint.ok .icon { color: #27ae60; }   /* green tick */
.hint.err .icon { color: #e74c3c; }  /* red cross */