.projects-section {

  margin-top: 28px;

}



.projects-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 20px;

  margin-bottom: 18px;

}



.projects-header h2 {

  margin: 0;

}



.projects-header p {

  margin: 5px 0 0;

  color: #737684;

}



#createProjectButton {

  padding: 10px 15px;

  border: 0;

  border-radius: 10px;

  background: #6d5dfc;

  color: white;

  font-weight: 700;

  cursor: pointer;

}



.projects-grid {

  display: grid;

  grid-template-columns:

    repeat(3, minmax(0, 1fr));

  gap: 16px;

}



.project-card {

  padding: 16px;

  border: 1px solid #e3e4ec;

  border-radius: 14px;

  background: #fff;

}



.project-card-heading {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 10px;

}



.project-card-heading h3 {

  margin: 0;

}



.project-count {

  color: #6d5dfc;

  font-size: 12px;

  font-weight: 700;

}



.project-description {

  min-height: 38px;

  color: #747784;

  font-size: 13px;

}



.project-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 7px;

}



.project-actions button,

.project-generation-button {

  padding: 7px 9px;

  border: 1px solid #dddde7;

  border-radius: 8px;

  background: #fafafe;

  color: #383a45;

  font: inherit;

  font-size: 12px;

  cursor: pointer;

  text-decoration: none;

}



.project-actions .danger {

  color: #b42a3c;

}



.projects-empty,

.project-viewer-empty {

  grid-column: 1 / -1;

  padding: 35px;

  color: #747784;

  text-align: center;

}



.project-viewer-modal[hidden] {

  display: none;

}



.project-viewer-modal {

  position: fixed;

  inset: 0;

  z-index: 3000;

  display: grid;

  place-items: center;

  padding: 20px;

}



.project-viewer-backdrop {

  position: absolute;

  inset: 0;

  background: rgba(14,15,20,.65);

}



.project-viewer-panel {

  position: relative;

  z-index: 1;

  width: min(900px, 100%);

  max-height: 85vh;

  overflow-y: auto;

  padding: 20px;

  border-radius: 18px;

  background: #fff;

}



.project-viewer-panel > header {

  display: flex;

  justify-content: space-between;

  align-items: center;

}



.project-viewer-panel > header button {

  width: 38px;

  height: 38px;

  border: 0;

  border-radius: 9px;

  background: #eeeef4;

  font-size: 23px;

  cursor: pointer;

}



.project-viewer-grid {

  display: grid;

  gap: 12px;

  margin-top: 18px;

}



.project-generation-card {

  display: flex;

  justify-content: space-between;

  gap: 15px;

  padding: 13px;

  border: 1px solid #e5e6ed;

  border-radius: 10px;

}



.project-generation-info {

  display: grid;

  gap: 3px;

}



.project-generation-info span {

  color: #757785;

  font-size: 12px;

}



@media (max-width: 850px) {

  .projects-grid {

    grid-template-columns:

      repeat(2, minmax(0,1fr));

  }

}



@media (max-width: 600px) {

  .projects-grid {

    grid-template-columns: 1fr;

  }



  .projects-header {

    align-items: stretch;

    flex-direction: column;

  }



  #createProjectButton {

    width: 100%;

  }

}




.project-collections {

  margin: 20px 0 28px;

  padding: 16px;

  border: 1px solid #e5e6ed;

  border-radius: 14px;

  background: #fafafe;

}



.project-collections-header {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

}



.project-collections-header h3 {

  margin: 0;

}



#createCollectionButton {

  padding: 8px 12px;

  border: 0;

  border-radius: 8px;

  background: #6d5dfc;

  color: #fff;

  font-weight: 700;

  cursor: pointer;

}



.project-collections-grid {

  display: grid;

  grid-template-columns:

    repeat(2, minmax(0, 1fr));

  gap: 10px;

  margin-top: 14px;

}



.collection-card {

  padding: 12px;

  border: 1px solid #e1e2e9;

  border-radius: 10px;

  background: #fff;

}



.collection-card-heading {

  display: flex;

  justify-content: space-between;

  gap: 10px;

}



.collection-card-heading span {

  color: #747784;

  font-size: 12px;

}



.collection-actions {

  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 12px;

}



.collection-actions button {

  padding: 6px 8px;

  border: 1px solid #dddde7;

  border-radius: 7px;

  background: #fafafe;

  cursor: pointer;

  font-size: 11px;

}



.collection-empty {

  padding: 20px;

  color: #747784;

  text-align: center;

}



.collection-generation-viewer {

  margin-top: 18px;

}



.collection-generation-grid {

  display: grid;

  gap: 8px;

}



.collection-generation-card {

  display: flex;

  justify-content: space-between;

  align-items: center;

  gap: 12px;

  padding: 10px;

  border: 1px solid #e3e4eb;

  border-radius: 8px;

  background: #fff;

}



.collection-generation-card a {

  color: #5848dc;

  font-size: 12px;

  font-weight: 700;

}



@media (max-width: 650px) {

  .project-collections-grid {

    grid-template-columns: 1fr;

  }

}