/* Seiten-Anordnung konto: nur Layout, Komponenten kommen aus app.css. */
.kt-head { display: flex; align-items: center; gap: var(--s5); margin-bottom: var(--s6); }
.kt-who { min-width: 0; display: flex; flex-direction: column; gap: var(--s2); }
.kt-who h1 { overflow-wrap: anywhere; }
.kt-meta { display: flex; flex-wrap: wrap; gap: var(--s2) var(--s5); color: var(--text-2); font-size: var(--fs-ui); }
.kt-meta .ic { color: var(--text-3); }
@media (max-width: 520px) {
  .kt-head { gap: var(--s4); margin-bottom: var(--s5); }
  .kt-head .av.xl { width: 60px; height: 60px; font-size: 21px; }
  .kt-who h1 { font-size: 24px; }
  .kt-meta { flex-direction: column; gap: var(--s1); }
}
.kt-col { display: flex; flex-direction: column; gap: var(--s6); min-width: 0; }
.kt-col > section > .sec-title { margin: 0 0 var(--s3); }
.kt-note { margin: var(--s4) 0 0; }
.kt-dev .t { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
.kt-upload { padding: var(--s4); border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: var(--s3); }
.kt-upload .msg:empty { display: none; }
#dev-msg:not(:empty) { margin-top: var(--s3); }
.kt-out { display: flex; justify-content: flex-start; }
@media (min-width: 1100px) { .kt-grid { gap: var(--s6); } }

/* Passwortstaerke als ruhige Leiste plus Wort */
.pw-meter { display: flex; align-items: center; gap: var(--s3); margin-top: calc(var(--s2) * -1); font-size: var(--fs-xs); color: var(--text-3); }
.pw-bars { display: inline-flex; gap: 4px; flex: none; }
.pw-bars i { width: 28px; height: 4px; border-radius: 2px; background: var(--surface-3); transition: background-color 180ms ease; }
.pw-meter[data-level="1"] .pw-bars i:nth-child(-n+1) { background: var(--bad); }
.pw-meter[data-level="2"] .pw-bars i:nth-child(-n+2) { background: var(--warn); }
.pw-meter[data-level="3"] .pw-bars i:nth-child(-n+3) { background: var(--ok); }
.pw-meter[data-level="4"] .pw-bars i { background: var(--ok); }
.pw-meter[data-level="1"] .pw-word { color: var(--bad); }

/* Kennzahlen immer 2 x 2, damit "36:55 von 42:00" nicht umbricht */
.kt-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Passwortzeile: Knopf rutscht am Handy unter den Text */
@media (max-width: 520px) {
  .kt-pw { flex-wrap: wrap; }
  .kt-pw .main-col { flex: 1 1 calc(100% - 36px - var(--s3)); }
  .kt-pw .btn { margin-left: calc(36px + var(--s3)); }
  .kt-since { display: none; }
}
.kt-more { display: flex; align-items: center; justify-content: center; gap: var(--s2); width: 100%; height: var(--ctl); border: 0; border-top: 1px solid var(--line); background: none; color: var(--text-2); font: 600 var(--fs-sm)/1 var(--sans); cursor: pointer; }
.kt-more:hover { background: var(--surface-2); color: var(--ink); }