body{color:#fff;background:linear-gradient(90deg,#0f172a,#1e293b);margin:0;font-family:Arial,sans-serif}.container{max-width:1000px;margin:auto;padding:20px}h1,h3{text-align:center}p{text-align:center;border-radius:8px;margin-top:10px;padding:10px}input{border:none;border-radius:10px;outline:none;width:300px;margin:20px auto;padding:12px;font-size:16px;display:block}.grid{grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px;display:grid}.card{cursor:pointer;background-color:#1e293b;border-radius:12px;max-width:200px;margin:0 auto;transition:transform .3s;position:relative;overflow:hidden}.card-image img{object-fit:cover;width:100%;height:260px;display:block}.card:after{content:"";pointer-events:none;opacity:.8;background:linear-gradient(#0000,#000000e6);transition:all .3s;position:absolute;inset:0}.card-info{color:#fff;z-index:2;position:absolute;bottom:10px;left:10px;right:10px}.card-btn{z-index:3;cursor:pointer;color:#fff;opacity:0;background-color:#22c55e;border:none;border-radius:6px;padding:8px 12px;transition:all .3s;position:absolute;bottom:60px;left:50%;transform:translate(-50%)}.delete-btn{background-color:#ef4444}.card:hover{z-index:10;transform:scale(1.08)}.card:hover .card-btn,.card:hover:after{opacity:1}.card{box-shadow:0 4px 10px #0000004d}.card:hover{box-shadow:0 10px 25px #0009}