.pwcheck-wrap { max-width: 520px; padding: 10px; border: 1px solid #e5e7eb; border-radius: 12px; background: #fafafa; text-align:left; margin:0; }
.pwcheck-label { display:block; margin-bottom:6px; font-weight:600; }
.pwcheck-input { width:100%; padding:10px; border:1px solid #999; border-radius:8px; box-sizing:border-box; }
.pwcheck-msg { margin-top:8px; font-weight:600; }
.pwcheck-msg[data-score="0"] { color:#7f1d1d; }
.pwcheck-msg[data-score="1"] { color:#9a3412; }
.pwcheck-msg[data-score="2"] { color:#854d0e; }
.pwcheck-msg[data-score="3"] { color:#166534; }
.pwcheck-msg[data-score="4"] { color:#065f46; }

.pwcheck-bar { margin-top:8px; width:100%; height:10px; background:#e5e7eb; border-radius:999px; position:relative; overflow:hidden; }
.pwcheck-bar-fill { height:100%; width:0%; border-radius:999px; transition:width .25s ease; }
.pw-s0 .pwcheck-bar-fill { background:#b91c1c; }
.pw-s1 .pwcheck-bar-fill { background:#f59e0b; }
.pw-s2 .pwcheck-bar-fill { background:#d97706; }
.pw-s3 .pwcheck-bar-fill { background:#16a34a; }
.pw-s4 .pwcheck-bar-fill { background:#0d9488; }

.has-tip { position:relative; }
.has-tip::after {
  content: attr(data-tip);
  position:absolute; left:50%; transform:translateX(-50%);
  bottom:125%; background:#111; color:#fff; padding:6px 8px; border-radius:6px;
  font-size:.85em; line-height:1.2; white-space:normal; min-width:160px; max-width:280px;
  opacity:0; pointer-events:none; transition:opacity .15s ease;
  box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.has-tip::before {
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  bottom:115%; border:6px solid transparent; border-top-color:#111; opacity:0; transition:opacity .15s ease;
}
.has-tip:hover::after, .has-tip:hover::before { opacity:1; }

.pwcheck-time { margin-top:6px; font-size:.95em; }
.pwcheck-toggle { display:block; margin-top:12px; user-select:none; }
.pwcheck-hint { margin-top:6px; font-size:.95em; }
.pwcheck-notes { margin-top:10px; font-size:.9em; color:#374151; }