/* Passwort-Generator: Längenregler, Passwortliste, Stärkebalken, Gruppen-Markierungen. */
.tl-pw-len { display: flex; gap: 12px; align-items: center; }
.tl-pw-range { flex: 1; min-width: 0; height: 24px; margin: 0; accent-color: hsl(var(--tl-hue) 80% 50%); cursor: pointer; }
.tl-pw-num { flex: none; width: 92px; text-align: center; }
.tl-pw-hint { font-size: 12px; color: var(--ink-3); }

.tl-pw-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.tl-pw-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 8px 10px 14px; background: var(--tl-field); border: 1px solid var(--line); border-radius: 12px; transition: border-color var(--transition), box-shadow var(--transition); }
.tl-pw-item.is-sel { border-color: hsl(var(--tl-hue) 70% 55% / .6); box-shadow: 0 0 0 3px hsl(var(--tl-hue) 90% 55% / .08); }
.tl-pw-idx { min-width: 1.4em; font: 600 12px/1 var(--font-mono); color: var(--ink-3); }
.tl-pw-val { min-width: 0; font: 500 15px/1.45 var(--font-mono); letter-spacing: .03em; color: var(--ink); overflow-wrap: anywhere; word-break: break-all; }
.tl-pw-list--one .tl-pw-item { padding: 14px 10px 14px 16px; }
.tl-pw-list--one .tl-pw-idx { display: none; }
.tl-pw-list--one .tl-pw-item { grid-template-columns: minmax(0, 1fr) auto; }
.tl-pw-list--one .tl-pw-val { font-size: clamp(17px, 2.3vw, 21px); }
.tl-pw-val .c-d { color: hsl(var(--tl-hue) 70% 42%); }
.tl-pw-val .c-s { color: #c2410c; }
[data-theme="dark"] .tl-pw-val .c-d { color: hsl(var(--tl-hue) 90% 74%); }
[data-theme="dark"] .tl-pw-val .c-s { color: #fdba74; }
.tl-pw-act { display: flex; gap: 2px; align-items: center; }
.tl-pw-use[aria-pressed="true"] { color: hsl(var(--tl-hue) 75% 40%); background: hsl(var(--tl-hue) 90% 55% / .1); }
[data-theme="dark"] .tl-pw-use[aria-pressed="true"] { color: hsl(var(--tl-hue) 90% 75%); }

.tl-pw-strength { display: grid; gap: 8px; }
.tl-pw-strength__head { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: baseline; justify-content: space-between; }
.tl-pw-scale { font-size: 12px; color: var(--ink-3); }
.tl-pw-badge { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.tl-pw-badge--weak { color: var(--tl-err); }
.tl-pw-badge--good { color: hsl(var(--tl-hue) 70% 45%); }
.tl-pw-badge--strong { color: var(--tl-ok); }
[data-theme="dark"] .tl-pw-badge--good { color: hsl(var(--tl-hue) 90% 74%); }
.tl-pw-meter { height: 10px; border-radius: 999px; background: var(--bg-sunken); overflow: hidden; }
.tl-pw-meter__fill { height: 100%; width: 0; border-radius: inherit; background: var(--tl-err); transition: width .25s ease, background-color .25s ease; }
.tl-pw-meter[data-level="good"] .tl-pw-meter__fill { background: hsl(var(--tl-hue) 75% 55%); }
.tl-pw-meter[data-level="strong"] .tl-pw-meter__fill { background: var(--tl-ok); }

.tl-pw-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-pw-tag { padding: 4px 10px; font-size: 12.5px; font-weight: 500; color: var(--ink-2); background: var(--bg-sunken); border: 1px solid var(--line); border-radius: 999px; }

@media (max-width: 420px) {
  .tl-pw-num { width: 76px; }
  .tl-pw-item { padding-left: 10px; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .tl-pw-meter__fill, .tl-pw-item { transition: none; }
}
.tl-pw-out { display: grid; gap: 12px; }
.tl-pw-out:empty { display: none; }