/* =========================================================
   Passwort Generator – Styles (Basis: assets/css/tool-ui.css)
   ========================================================= */
.pg-main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
.pg-main .tu-card__head { flex-wrap: wrap; margin-bottom: 0; }
.pg-modes span { min-width: 92px; text-align: center; }

/* Ergebnis */
.pg-result { display: flex; align-items: stretch; gap: 12px; }
/* Immer eine Zeile – zu lange Passwörter werden waagerecht gescrollt statt umbrochen */
.pg-out {
  flex: 1; min-width: 0; display: block; min-height: 76px; padding: 16px 20px; border-radius: 16px; cursor: copy;
  font-family: var(--mono); font-size: clamp(18px, 2.1vw, 26px); font-weight: 600; letter-spacing: .03em; line-height: 40px; color: var(--ink);
  white-space: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; scrollbar-color: rgba(15,19,48,.25) transparent;
  background: #f7f8fc; border: 1.5px solid rgba(15,19,48,.1); transition: border-color .2s, background .2s;
}
.pg-out::-webkit-scrollbar { height: 6px; }
.pg-out::-webkit-scrollbar-thumb { border-radius: 99px; background: rgba(15,19,48,.25); }
.pg-out:hover { border-color: var(--blue); background: #fff; }
.pg-out.is-err { font-family: Inter, sans-serif; font-size: 15px; color: var(--err); cursor: default; white-space: normal; }
.pg-out .pg-d { color: #3b5bdb; }
.pg-out .pg-s, .pg-list .pg-s { color: #c2410c; }
.pg-list .pg-d { color: #3b5bdb; }
.pg-sp { display: inline-block; width: .5em; border-bottom: 2px dotted rgba(15,19,48,.25); }
.pg-resultactions { display: flex; flex-direction: column; gap: 8px; }
.pg-resultactions .tu-btn { justify-content: center; }

/* Stärke */
.pg-strength { display: grid; grid-template-columns: auto auto minmax(0, 1fr); align-items: center; gap: 6px 16px; --c: #b7bfd8; }
.pg-strength[data-level="0"] { --c: var(--err); } .pg-strength[data-level="1"] { --c: #e8763a; } .pg-strength[data-level="2"] { --c: #e2b33c; }
.pg-strength[data-level="3"] { --c: #2fae7a; } .pg-strength[data-level="4"] { --c: #0f8f5f; }
.pg-meter { display: grid; grid-template-columns: repeat(5, 34px); gap: 4px; }
.pg-meter i { height: 8px; border-radius: 99px; background: rgba(15,19,48,.08); transition: background .3s; }
.pg-strength[data-level="0"] .pg-meter i:nth-child(-n+1), .pg-strength[data-level="1"] .pg-meter i:nth-child(-n+2),
.pg-strength[data-level="2"] .pg-meter i:nth-child(-n+3), .pg-strength[data-level="3"] .pg-meter i:nth-child(-n+4),
.pg-strength[data-level="4"] .pg-meter i { background: var(--c); }
.pg-strength__text { display: flex; align-items: baseline; gap: 10px; }
.pg-strength__text strong { color: var(--c); font-size: 15px; }
.pg-strength__text span { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pg-crack { font-size: 13px; color: var(--muted); }
.pg-crack strong { color: var(--ink); }

/* Optionen */
.pg-opts { display: grid; gap: 16px; padding-top: 18px; border-top: 1px solid rgba(15,19,48,.07); }
.pg-opts[hidden] { display: none; }
.pg-lenrow { display: grid; grid-template-columns: 70px minmax(0, 1fr) 84px; align-items: center; gap: 14px; }
.pg-lenrow input[type="range"] { width: 100%; accent-color: var(--blue); height: 24px; cursor: pointer; }
.pg-lenrow .tu-input { text-align: center; font-variant-numeric: tabular-nums; }
.pg-sets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.pg-set { position: relative; cursor: pointer; }
.pg-set input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.pg-set span {
  display: grid; gap: 2px; padding: 12px 14px; border-radius: 14px; font-size: 12.5px; color: var(--muted);
  background: rgba(15,19,48,.035); border: 1.5px solid transparent; transition: background .2s, border-color .2s, color .2s;
}
.pg-set b { font-family: var(--mono); font-size: 17px; color: var(--muted); transition: color .2s; }
.pg-set input:checked + span { color: var(--ink); background: rgba(91,140,255,.1); border-color: var(--blue); }
.pg-set input:checked + span b { color: var(--blue); }
.pg-set input:focus-visible + span { outline: 2px solid #8fa8ff; outline-offset: 2px; }
.pg-switches { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.pg-switches code, .pg-more code { font-family: var(--mono); font-size: .9em; color: var(--violet); }
.pg-switches small { color: var(--muted); }
.pg-inline { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.pg-more .tu-grid { margin-top: 12px; }

/* Mehrere */
.pg-multi { display: grid; gap: 12px; justify-items: start; }
.pg-list { width: 100%; margin: 0; padding: 0; list-style: none; counter-reset: pw; display: grid; gap: 4px; }
.pg-list[hidden] { display: none; }
.pg-list li { counter-increment: pw; display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 10px; }
.pg-list li:nth-child(odd) { background: rgba(15,19,48,.03); }
.pg-list li::before { content: counter(pw) "."; font-size: 12px; color: var(--muted); }
.pg-list code { font-family: var(--mono); font-size: 14.5px; color: var(--ink); overflow-wrap: anywhere; }
.pg-mini { padding: 5px 11px; border-radius: 8px; font-size: 12.5px; font-weight: 600; color: var(--muted); background: rgba(15,19,48,.05); }
.pg-mini:hover { color: var(--ink); }

/* Prüfen */
.pg-check { margin-top: 18px; display: grid; gap: 14px; }
.pg-check .tu-card__head { margin-bottom: 0; }
.pg-local { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: #0f7a52; }
.pg-local .i { width: 15px; height: 15px; }
.pg-checkrow { display: flex; gap: 10px; }
.pg-checkrow .tu-input { flex: 1; }
.pg-checkres { display: grid; gap: 14px; }
.pg-checkres[hidden] { display: none; }

@media (max-width: 760px) {
  .pg-sets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pg-strength { grid-template-columns: auto minmax(0, 1fr); }
  .pg-crack { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .pg-result { flex-direction: column; }
  .pg-resultactions { flex-direction: row; }
  .pg-resultactions .tu-btn { flex: 1; }
  .pg-lenrow { grid-template-columns: minmax(0, 1fr) 76px; }
  .pg-lenrow .tu-label { grid-column: 1 / -1; }
  .pg-meter { grid-template-columns: repeat(5, 24px); }
}