.background-library {

  grid-column: 1 / -1;

  margin-top: 8px;

  padding: 18px;

  border: 1px solid var(--border);

  border-radius: 16px;

  background: rgba(255, 255, 255, 0.55);

}



.background-library-header {

  display: flex;

  align-items: flex-start;

  justify-content: space-between;

  gap: 14px;

  margin-bottom: 15px;

}



.background-library-title {

  margin: 0;

  font-size: 16px;

  font-weight: 800;

}



.background-library-description {

  margin: 5px 0 0;

  color: var(--muted);

  font-size: 13px;

  line-height: 1.45;

}



.background-filter-list {

  display: flex;

  gap: 8px;

  margin-bottom: 15px;

  overflow-x: auto;

  padding-bottom: 5px;

  scrollbar-width: thin;

}



.background-filter-button {

  flex: 0 0 auto;

  padding: 8px 13px;

  border: 1px solid var(--border);

  border-radius: 999px;

  background: white;

  color: var(--text);

  font-size: 12px;

  font-weight: 700;

  cursor: pointer;

  transition: 0.2s ease;

}



.background-filter-button:hover {

  border-color: var(--primary);

  color: var(--primary);

}



.background-filter-button.active {

  border-color: var(--primary);

  background: var(--primary);

  color: white;

}



.background-preset-grid {

  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 12px;

}



.background-preset-card {

  position: relative;

  overflow: hidden;

  min-width: 0;

  padding: 0;

  border: 2px solid transparent;

  border-radius: 13px;

  background: white;

  box-shadow: 0 5px 15px rgba(20, 20, 40, 0.07);

  cursor: pointer;

  text-align: left;

  transition:

    transform 0.2s ease,

    border-color 0.2s ease,

    box-shadow 0.2s ease;

}



.background-preset-card:hover {

  transform: translateY(-2px);

  box-shadow: 0 9px 22px rgba(20, 20, 40, 0.12);

}



.background-preset-card.selected {

  border-color: var(--primary);

  box-shadow: 0 0 0 3px rgba(109, 93, 252, 0.13);

}



.background-preset-preview {

  position: relative;

  height: 86px;

  overflow: hidden;

}



.background-preset-preview::before {

  position: absolute;

  left: 50%;

  bottom: 14px;

  width: 46px;

  height: 25px;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.88);

  box-shadow:

    0 9px 19px rgba(0, 0, 0, 0.18),

    inset 0 -5px 8px rgba(0, 0, 0, 0.09);

  content: "";

  transform: translateX(-50%);

}



.background-preset-preview::after {

  position: absolute;

  left: 50%;

  bottom: 36px;

  width: 24px;

  height: 30px;

  border-radius: 7px 7px 5px 5px;

  background: linear-gradient(

    145deg,

    rgba(255, 255, 255, 0.98),

    rgba(210, 210, 220, 0.88)

  );

  box-shadow: 0 6px 13px rgba(0, 0, 0, 0.2);

  content: "";

  transform: translateX(-50%);

}



.background-preset-info {

  padding: 10px 11px 12px;

}



.background-preset-name {

  display: block;

  overflow: hidden;

  color: var(--text);

  font-size: 12px;

  font-weight: 800;

  text-overflow: ellipsis;

  white-space: nowrap;

}



.background-preset-category {

  display: block;

  margin-top: 3px;

  color: var(--muted);

  font-size: 10px;

  text-transform: capitalize;

}



.background-selected-indicator {

  position: absolute;

  top: 7px;

  right: 7px;

  display: none;

  width: 22px;

  height: 22px;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  background: var(--primary);

  color: white;

  font-size: 12px;

  font-weight: 900;

  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);

}



.background-preset-card.selected .background-selected-indicator {

  display: flex;

}



.background-library-empty {

  display: none;

  padding: 24px 10px;

  color: var(--muted);

  text-align: center;

  font-size: 13px;

}



@media (max-width: 1100px) {

  .background-preset-grid {

    grid-template-columns: repeat(3, minmax(0, 1fr));

  }

}



@media (max-width: 700px) {

  .background-library {

    padding: 14px;

  }



  .background-preset-grid {

    grid-template-columns: repeat(2, minmax(0, 1fr));

  }



  .background-library-header {

    display: block;

  }

}



@media (max-width: 420px) {

  .background-preset-grid {

    grid-template-columns: 1fr 1fr;

    gap: 9px;

  }



  .background-preset-preview {

    height: 74px;

  }

}




.background-library-tools {

  display: grid;

  grid-template-columns: minmax(160px, 1fr) auto auto;

  gap: 9px;

  margin-bottom: 13px;

}



.background-search-input {

  width: 100%;

  height: 40px;

  padding: 0 13px;

  border: 1px solid var(--border);

  border-radius: 10px;

  background: white;

  color: var(--text);

  font: inherit;

  font-size: 13px;

  outline: none;

}



.background-search-input:focus {

  border-color: var(--primary);

  box-shadow: 0 0 0 3px rgba(109, 93, 252, 0.1);

}



.background-quick-filter {

  height: 40px;

  padding: 0 13px;

  border: 1px solid var(--border);

  border-radius: 10px;

  background: white;

  color: var(--text);

  font-size: 12px;

  font-weight: 800;

  cursor: pointer;

}



.background-quick-filter:hover {

  border-color: var(--primary);

  color: var(--primary);

}



.background-quick-filter.active {

  border-color: var(--primary);

  background: var(--primary);

  color: white;

}



.background-favorite-button {

  position: absolute;

  top: 7px;

  left: 7px;

  z-index: 3;

  display: flex;

  width: 27px;

  height: 27px;

  align-items: center;

  justify-content: center;

  padding: 0;

  border: 0;

  border-radius: 50%;

  background: rgba(255, 255, 255, 0.92);

  color: #5f6070;

  font-size: 17px;

  cursor: pointer;

  box-shadow: 0 4px 11px rgba(0, 0, 0, 0.16);

}



.background-favorite-button:hover,

.background-favorite-button.favorite {

  color: #e34e75;

}



.background-preset-card.is-recent::after {

  position: absolute;

  right: 7px;

  bottom: 51px;

  padding: 3px 7px;

  border-radius: 999px;

  background: rgba(20, 20, 30, 0.74);

  color: white;

  content: "Recent";

  font-size: 8px;

  font-weight: 800;

  letter-spacing: 0.2px;

}



@media (max-width: 700px) {

  .background-library-tools {

    grid-template-columns: 1fr 1fr;

  }



  .background-search-input {

    grid-column: 1 / -1;

  }

}