body{
    margin:0;
    background:#0f0f13;
    color:#f1f5f9;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
    padding:24px
}
.top{
    max-width:1500px;
    margin:0 auto 24px;
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:end
}
h1{
    margin:0;
    font-size:2rem
}
.create{background:#14141a;
    border:1px solid #2d2d3d;
    border-radius:12px;
    padding:12px;display:flex;
    gap:8px;
    flex-wrap:wrap
}
input,select,button{
    padding:9px;
    border-radius:8px;
    border:1px solid #2d2d3d;
    background:#1e1e26;
    color:#f8fafc
}
button{
    cursor:pointer;
    background:#4f46e5;
    font-weight:400
}


.grid{
    max-width:1500px;
    max-height:70vh;
    margin:0 auto;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(320px, 1fr));
    gap:18px;
    overflow-y:auto;
    padding-right:8px;
}

.card{
    background:#14141a;
    border:1px solid #2d2d3d;
    border-radius:14px;
    overflow:hidden;
    box-shadow:0 10px 30px rgba(0,0,0,.3);
    max-height:330px;
}

.preview{
    height:150px;
    background:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    overflow:hidden;
}

.preview img{
    width:100%;
    height:100%;
    object-fit:cover
}
.info{
    padding:14px;
    text-align:left
}
.info{
    padding:12px 14px;
    text-align:left;
}
.info h2,
.info h3{
    margin:0 0 6px 0;
    font-size:1.15rem;
    line-height:1.2;
}
.meta{
    color:#94a3b8;
    font-size:.95rem;
}
.meta{
    color:#94a3b8;
    font-size:.85rem
}
a{
    color:#fff;
    text-decoration:none
}