/* Reusable password-field component. Neutral palette that reads on dark and
   light hosts. Scoped under .pwfield. */
.pwfield { margin-top: 12px; font-size: 13px; }
.pwfield-actions { display: flex; justify-content: flex-end; margin-bottom: 8px; }
.pwfield-generate {
  background: rgba(96,165,250,0.12); color: #60a5fa; border: 1px solid rgba(96,165,250,0.35);
  border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.pwfield-generate:hover { background: rgba(96,165,250,0.2); }
.pwfield-meter { margin-bottom: 12px; }
.pwfield-meter-label { font-size: 12px; font-weight: 600; margin-bottom: 4px; }
.pwfield-meter-bar { height: 6px; border-radius: 999px; background: rgba(148,163,184,0.25); overflow: hidden; }
.pwfield-meter-fill { height: 100%; width: 0; border-radius: 999px; transition: width .2s ease, background .2s ease; background: #f59e0b; }
.pwfield-meter-fill[data-tier="blocked"] { background: #ef4444; }
.pwfield-meter-fill[data-tier="very-weak"], .pwfield-meter-fill[data-tier="weak"] { background: #ef4444; }
.pwfield-meter-fill[data-tier="fair"] { background: #f59e0b; }
.pwfield-meter-fill[data-tier="good"] { background: #eab308; }
.pwfield-meter-fill[data-tier="strong"], .pwfield-meter-fill[data-tier="very-strong"] { background: #22c55e; }
.pwfield-meter.is-blocked .pwfield-meter-label { color: #ef4444; }
.pwfield-meter-feedback { font-size: 11px; color: #94a3b8; margin-top: 4px; }
.pwfield-reqs h4 { font-size: 12px; font-weight: 600; margin-bottom: 8px; color: #94a3b8; }
.pwfield-reqs ul { list-style: none; margin: 0; padding: 0; }
.pwfield-reqs li { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; color: #94a3b8; }
.pwfield-req-icon { display: inline-flex; width: 16px; justify-content: center; font-weight: 700; }
.pwfield-reqs li.is-met { color: #22c55e; }
.pwfield-reqs li.is-unmet { color: #ef4444; }
.pwfield-reqs li.is-checking { color: #94a3b8; }
.pwfield-reqs li.is-neutral { color: #94a3b8; }

/* Light-theme contrast overrides (app root gets html[data-theme="light"]).
   Dark defaults above are unchanged; these just darken muted text so it
   reads on the profile page's white card. */
html[data-theme="light"] .pwfield-meter-feedback { color: #64748b; }
html[data-theme="light"] .pwfield-reqs h4 { color: #64748b; }
html[data-theme="light"] .pwfield-reqs li { color: #64748b; }
html[data-theme="light"] .pwfield-reqs li.is-checking { color: #64748b; }
html[data-theme="light"] .pwfield-reqs li.is-neutral { color: #64748b; }