.school-list {
  display: grid;
  gap: 10px;
  padding: 14px !important;
}

.school-list-row {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(250px, auto);
  align-items: center;
  gap: 16px;
  padding: 13px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 15px;
  background: linear-gradient(120deg, #fff, #f8fffc);
}

.school-list-title,
.school-list-primary p,
.credential-account-head {
  display: flex;
  align-items: center;
  gap: 9px;
}

.school-list-title h3 {
  margin: 0;
  font-size: 14px;
}

.school-list-primary p {
  flex-wrap: wrap;
  margin: 5px 0 0;
  color: #64748b;
  font-size: 10px;
}

.school-list-primary p b {
  color: #047857;
}

.school-list-facts {
  display: flex;
  align-items: center;
  gap: 6px;
}

.school-list-facts span {
  min-width: 64px;
  padding: 7px 9px;
  border-radius: 10px;
  background: #f1f5f9;
  text-align: center;
}

.school-list-facts small,
.school-list-facts b {
  display: block;
}

.school-list-facts small {
  color: #94a3b8;
  font-size: 7px;
  text-transform: uppercase;
}

.school-list-facts b {
  margin-top: 2px;
  font-size: 13px;
}

.school-list-actions {
  justify-content: flex-end;
}

#foundationModal .modal-card:has(.credential-preview) {
  width: min(100%, 760px);
}

.credential-title {
  margin: -23px -23px 18px;
  padding: 22px 58px 20px 23px;
  color: #fff;
  background: linear-gradient(125deg, #064e3b, #059669 62%, #14b8a6);
}

.credential-title span {
  color: #a7f3d0;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .14em;
}

.credential-title h2 {
  margin: 5px 0 3px !important;
}

.credential-title p {
  margin: 0;
  color: #ecfdf5 !important;
}

.credential-notice,
.login-guide {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid #a7f3d0;
  border-radius: 13px;
  color: #065f46;
  background: #ecfdf5;
  font-size: 11px;
  line-height: 1.55;
}

.credential-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.credential-grid > div {
  min-width: 0;
  padding: 10px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  background: #f8fafc;
}

.credential-grid small,
.credential-grid b {
  display: block;
}

.credential-grid small {
  color: #94a3b8;
  font-size: 7px;
  font-weight: 900;
}

.credential-grid b {
  margin-top: 4px;
  overflow-wrap: anywhere;
  font-size: 11px;
}

.login-guide {
  border-color: #bae6fd;
  color: #0c4a6e;
  background: #f0f9ff;
}

.login-guide ol {
  margin: 7px 0 10px;
  padding-left: 20px;
}

.credential-account-list {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.credential-account {
  padding: 13px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
}

.credential-account-head {
  justify-content: space-between;
}

.credential-account-head b,
.credential-account-head small {
  display: block;
}

.credential-account-head small {
  margin-top: 3px;
  color: #64748b;
  font-size: 9px;
}

.credential-password {
  display: grid;
  gap: 4px;
  margin: 10px 0;
  padding: 9px 11px;
  border-radius: 10px;
  color: #64748b;
  background: #f8fafc;
  font-size: 9px;
}

.credential-password small {
  color: #94a3b8;
  font-size: 7px;
  font-weight: 900;
}

.credential-password.one-time {
  color: #065f46;
  background: #ecfdf5;
}

.credential-password code {
  color: #064e3b;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 16px;
  font-weight: 900;
  letter-spacing: .04em;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .school-list-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .school-list-actions {
    grid-column: 1 / -1;
    justify-content: flex-start;
  }
}

@media (max-width: 600px) {
  .school-list {
    padding: 9px !important;
  }

  .school-list-row {
    grid-template-columns: 1fr;
    gap: 10px;
    padding: 12px;
  }

  .school-list-facts,
  .school-list-actions {
    grid-column: auto;
  }

  .school-list-facts span {
    flex: 1;
  }

  .school-list-actions {
    justify-content: stretch;
  }

  .school-list-actions button {
    flex: 1 1 calc(50% - 6px);
  }

  #foundationModal .modal-card:has(.credential-preview) {
    max-height: 92dvh;
  }

  .credential-title {
    margin: -21px -16px 15px;
    padding: 18px 52px 17px 16px;
  }

  .credential-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}