#bl-library{

    max-width:1200px;

    margin:auto;

}

.bl-toolbar{

    display:flex;

    gap:20px;

    margin-bottom:25px;

}

#bl-search{

    flex:1;

    padding:12px;

    font-size:16px;

}

#bl-sort{

    padding:12px;

}

#bl-results{

    display:grid;

    grid-template-columns:repeat(auto-fill,minmax(320px,1fr));

    gap:25px;

}

.bl-card{

    background:#fff;

    border:1px solid #ddd;

    border-radius:10px;

    padding:20px;

    box-shadow:0 2px 8px rgba(0,0,0,.08);

}

.bl-card h3{

    margin-top:0;

}

.bl-card button{

    margin-top:10px;

    cursor:pointer;

}

#bl-pagination{

    margin-top:30px;

    text-align:center;

}

#bl-pagination button{

    margin:3px;

}

#bl-modal{

display:none;

position:fixed;

left:0;
top:0;

width:100%;
height:100%;

background:rgba(0,0,0,.7);

z-index:9999;

overflow:auto;

}

.bl-modal-content{

background:white;

width:min(900px,95%);

margin:50px auto;

padding:30px;

border-radius:10px;

position:relative;

}

#bl-close{

position:absolute;

right:20px;

top:15px;

font-size:28px;

cursor:pointer;

}

.bl-table{

width:100%;

border-collapse:collapse;

margin-top:20px;

}

.bl-table th{

width:180px;

text-align:left;

background:#f5f5f5;

padding:8px;

}

.bl-table td{

padding:8px;

border-bottom:1px solid #eee;

}