.password-policy-feedback { margin-top:8px; font-size:12px; color:var(--setup-muted, #64748b); }
.password-policy-rules { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:5px 12px; margin:8px 0; padding:0; list-style:none; }
.password-policy-rules li::before { content:"○"; margin-right:6px; }
.password-policy-rules li.is-valid { color:var(--status-success-ink); }
.password-policy-rules li.is-valid::before { content:"✓"; }
/* The meter and its label are hidden until the first keystroke, so they used to
   appear mid-entry and push everything below them down: the confirm-password text
   and the terms checkbox click both landed on whatever had moved into their place,
   and the form had to be filled in twice. They keep their space from the start. */
.password-policy-feedback:not(.is-measuring) .password-policy-meter { visibility:hidden; }
.password-policy-feedback:not(.is-measuring) .password-policy-strength { visibility:hidden; }
.password-policy-meter { height:4px; overflow:hidden; border-radius:999px; background:var(--surface-chip); }
.password-policy-meter::after { content:""; display:block; width:var(--password-strength,0); height:100%; transition:width .2s; background:linear-gradient(90deg,#ef4444,#f59e0b,#34d399); }
.password-policy-strength { display:block; min-height:18px; margin-top:5px; }
.password-policy-control { position:relative; }
.password-policy-control > input { padding-right:52px !important; }
.password-policy-reveal { position:absolute; top:50%; right:8px; width:38px; height:38px; transform:translateY(-50%); border:0; border-radius:10px; background:transparent; color:inherit; cursor:pointer; }
.password-policy-reveal:hover,.password-policy-reveal:focus-visible { outline:none; background:var(--surface-chip); }
.password-policy-reveal.is-visible span { opacity:.55; text-decoration:line-through; }
@media(max-width:560px){.password-policy-rules{grid-template-columns:1fr}}