body{
  background:#0b1220;
  color:white;
  font-family:Inter, sans-serif;
  margin:0;
}

/* HEADER */
.header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:20px;
}

.header .right{
  display:flex;
  gap:10px;
  align-items:center;
}

input{
  padding:10px;
  border-radius:10px;
  border:none;
  background:#111827;
  color:white;
}

/* FILTERS */
.filters{
  padding:10px 20px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.filters button{
  background:#111827;
  border:1px solid rgba(255,255,255,.1);
  padding:8px 12px;
  border-radius:20px;
  color:white;
}

/* CARD */
.card{
  margin:15px 20px;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(
    180deg,
    rgba(96,165,250,.35),
    rgba(15,23,42,.95)
  );
  border:1px solid rgba(255,255,255,.15);
  box-shadow:0 20px 50px rgba(0,0,0,.5);
  position:relative;
  cursor:pointer;
}

/* TOP BAR */
.card-header{
  padding:15px 20px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}

/* CHIPS */
.chips{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

.chip{
  font-size:12px;
  padding:4px 10px;
  border-radius:20px;
  background:rgba(255,255,255,.15);
}

/* BODY */
.card-body{
  padding:20px;
  display:none;
}

.card.open .card-body{
  display:block;
}

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

button{
  padding:8px 12px;
  border-radius:10px;
  border:none;
  cursor:pointer;
}

button.primary{
  background:#4f46e5;
  color:white;
}

/* PAID STAMP */
.paid{
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%) rotate(-12deg);
  font-size:40px;
  border:4px solid red;
  color:red;
  padding:10px 20px;
  opacity:.5;
}