.v5-login-password-form {
  overflow-x: hidden;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 116, 82, .28) transparent;
}

.v5-login-password-form::-webkit-scrollbar,
.v5-demo-login-list::-webkit-scrollbar { width: 6px; }
.v5-login-password-form::-webkit-scrollbar-thumb,
.v5-demo-login-list::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(91, 116, 82, .28); }

.v5-demo-login-directory {
  display: grid;
  gap: 9px;
  padding: 12px;
  border: 1px solid rgba(83, 110, 78, .22);
  border-radius: 18px;
  background:
    linear-gradient(rgba(78, 106, 74, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(78, 106, 74, .045) 1px, transparent 1px),
    linear-gradient(145deg, rgba(251, 252, 246, .96), rgba(233, 240, 227, .92));
  background-size: 14px 14px, 14px 14px, auto;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .82), 0 12px 32px rgba(48, 70, 48, .09);
}

.v5-demo-login-directory > header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 12px;
}

.v5-demo-login-directory > header > span { display: grid; gap: 3px; }
.v5-demo-login-directory > header small { color: #6e826b; font-family: var(--font-mono); font-size: 7px; letter-spacing: .16em; }
.v5-demo-login-directory > header b { color: #263027; font-family: var(--font-serif); font-size: 16px; font-weight: 500; }
.v5-demo-login-directory > header em { color: #899487; font-size: 8px; font-style: normal; white-space: nowrap; }

.v5-demo-login-search {
  min-height: 38px;
  display: grid;
  grid-template-columns: 16px minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  padding: 0 11px;
  border: 1px solid rgba(85, 110, 81, .18);
  border-radius: 11px;
  background: rgba(255, 255, 252, .78);
}

.v5-demo-login-search svg { width: 15px; height: 15px; color: #738272; }
.v5-demo-login-search input { min-width: 0; width: 100%; padding: 0; border: 0; outline: 0; background: transparent; color: #263027; font: inherit; font-size: 10px; }

.v5-demo-login-list {
  max-height: 174px;
  display: grid;
  gap: 5px;
  overflow-y: auto;
  padding-right: 3px;
  scrollbar-width: thin;
  scrollbar-color: rgba(91, 116, 82, .28) transparent;
}

.v5-demo-login-list > button {
  min-width: 0;
  min-height: 50px;
  display: grid;
  grid-template-columns: 32px minmax(120px, 1fr) minmax(76px, .65fr) minmax(110px, .9fr);
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border: 1px solid rgba(83, 107, 80, .15);
  border-radius: 12px;
  background: rgba(255, 255, 252, .82);
  color: #263027;
  cursor: pointer;
  text-align: left;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.v5-demo-login-list > button:hover,
.v5-demo-login-list > button.active {
  border-color: rgba(62, 97, 60, .42);
  background: #f2f7e8;
  box-shadow: 0 6px 16px rgba(48, 75, 49, .09);
}

.v5-demo-login-list > button > i {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  color: #fff;
  font-family: var(--font-serif);
  font-size: 13px;
  font-style: normal;
}

.v5-demo-login-list > button > span { min-width: 0; display: grid; gap: 3px; }
.v5-demo-login-list > button > span b { overflow: hidden; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.v5-demo-login-list > button > span small { overflow: hidden; color: #8c948b; font-size: 7px; text-overflow: ellipsis; white-space: nowrap; }
.v5-demo-login-list code { min-width: 0; display: grid; gap: 3px; overflow: hidden; color: #3f6042; font-family: var(--font-mono); font-size: 8px; font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.v5-demo-login-list code small { color: #9aa199; font-size: 6px; font-weight: 500; letter-spacing: .12em; }
.v5-demo-login-directory > p { margin: 8px 0; color: #8b938a; font-size: 10px; text-align: center; }

@media (max-width: 760px) {
  .v5-login-password-form { max-height: none; overflow: visible; padding-right: 0; }
  .v5-demo-login-directory { padding: 11px; border-radius: 16px; }
  .v5-demo-login-list { max-height: 236px; }
  .v5-demo-login-list > button {
    min-height: 78px;
    grid-template-columns: 38px minmax(72px, .72fr) minmax(140px, 1.28fr);
    grid-template-areas: "avatar person person" "avatar login password";
    align-items: center;
    gap: 7px 10px;
    padding: 10px 12px;
  }
  .v5-demo-login-list > button > i { grid-area: avatar; }
  .v5-demo-login-list > button > span { grid-area: person; }
  .v5-demo-login-list code:nth-of-type(1) { grid-area: login; }
  .v5-demo-login-list code:nth-of-type(2) { grid-area: password; }
  .v5-demo-login-list > button > span b { font-size: 12px; line-height: 1.2; }
  .v5-demo-login-list > button > span small { font-size: 8px; line-height: 1.25; }
  .v5-demo-login-list code {
    align-self: start;
    gap: 2px;
    overflow: visible;
    font-size: 10px;
    line-height: 1.25;
  }
  .v5-demo-login-list code small { font-size: 7px; line-height: 1.2; }
}

@media (max-width: 430px) {
  .v5-demo-login-directory > header em { display: none; }
  .v5-demo-login-list > button {
    min-height: 104px;
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas: "avatar person" "login login" "password password";
    gap: 7px 9px;
    padding: 10px;
  }
  .v5-demo-login-list code { width: 100%; padding-left: 45px; }
}

@media (max-width: 350px) {
  .v5-demo-login-directory { padding: 8px; }
  .v5-demo-login-list > button { min-height: 106px; }
  .v5-demo-login-list code { padding-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .v5-demo-login-list > button { transition: none; }
}