.container{
  max-width:1300px;
  margin:auto;
}



/* HERO */
#content{
  margin-bottom:30px;
}

#head{
  text-align:center;
  padding:45px 20px;
  border-radius:18px;
  background:
  linear-gradient(
    219deg,
    #FB0E76 0%,
    #910694 100%
  );
  color:#fff;
}

.headers h1{
	color: white;
  font-size:46px;
  margin-bottom:10px;
  font-weight:700;
}

.headers p{
  font-size:17px;
  opacity:.95;
}



/* MAIN */
.main{
  background: #f9f9f9 !important;
  border-radius:20px;
  padding:24px;
     border: 1px solid #f3c6cf !important;
}



/* TOP BAR */
.top-bar{
  display:flex;
  gap:14px;
  margin-bottom:20px;
}

.top-bar input{
  flex:1;
  height:58px;
      border: 1px solid #cd6c7f !important;
  border-radius:14px !important;
  padding:0 18px;
  font-size:15px;
  outline:none;
}

.top-bar button{
  min-width:180px;
  border:none;
  border-radius:14px;
  color:#fff;
  cursor:pointer;
  font-weight:600;
  font-size:15px;
  background:
  linear-gradient(
    219deg,
    #FB0E76 0%,
    #910694 100%
  );
}



/* STATUS */
.status-bar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
  font-size:14px;
  color:#555;
}



/* GRID */
.image-grid{
  display:grid;
  grid-template-columns:
  repeat(auto-fill,minmax(240px,1fr));
  gap:20px;
}



/* CARD */
.image-card{
  background:#fff;
  border:1px solid #eee;
  border-radius:18px;
  overflow:hidden;
  transition:.2s;
}

.image-card:hover{
  transform:translateY(-4px);
  box-shadow:
  0 10px 30px rgba(0,0,0,.08);
}



/* IMAGE */
.image-preview{
  width:100%;
  height:220px;
  background:#f5f5f5;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

.image-preview img{
  width:100%;
  height:100%;
  object-fit:contain;
}



/* INFO */
.image-info{
  padding:16px;
}

.image-name{
  font-size:14px;
  font-weight:600;
  margin-bottom:8px;
  word-break:break-word;
}

.image-meta{
  font-size:12px;
  color:#777;
  margin-bottom:14px;
}



/* BUTTONS */
.card-actions{
  display:flex;
  gap:10px;
}

.card-actions button{
	padding:10px !important;
  flex:1;
  height:42px;
  border:none;
  border-radius:10px;
  cursor:pointer;
  color:#fff;
  font-size:12px;
  font-weight:600;
  background:
  linear-gradient(
    219deg,
    #FB0E76 0%,
    #910694 100%
  );
}



/* EMPTY */
.empty-state{
  text-align:center;
  padding:80px 20px;
  color:#888;
  font-size:16px;
}



/* LOADER */
.loader{
  width:55px;
  height:55px;
  border:5px solid #eee;
  border-top:
  5px solid #FB0E76;
  border-radius:50%;
  animation:spin .8s linear infinite;
  margin:40px auto;
}

@keyframes spin{
  100%{
    transform:rotate(360deg);
  }
}



/* MOBILE */
@media(max-width:768px){

  .top-bar{
    flex-direction:column;
  }

  .top-bar button{
    width:100%;
    height:56px;
  }

}