.draw-top{

    height:90px;

    display:flex;
    justify-content:space-between;
    align-items:center;

    padding:0 20px;

    background:
    linear-gradient( to bottom, #e6c2fb, #903cf4 );

    border-bottom:
    1px solid #8b00ff;
}

.draw-logo{

    display:flex;
    align-items:center;
    gap:15px;
}

.draw-logo img{

    width:64px;
    height:64px;
}

.draw-top button{

    padding:10px 18px;

    border:none;

    border-radius:12px;

    cursor:pointer;

    background:
    linear-gradient( to bottom, #deb8f9, #5222ff );
}

.toolbar{

    display:flex;
    flex-wrap:wrap;
    gap:10px;

    padding:10px;

    background:
    linear-gradient( to bottom, #d792ff, #7400ff );

    border-bottom:
    1px solid #8b00ff;
}

.toolbar button{

    padding:10px 14px;

    border:none;

    border-radius:8px;

    cursor:pointer;
}

.workspace{

    height:
    calc(100vh - 150px);

    background:
    linear-gradient(
        to bottom,
        #dfefff,
        #bdd8f5
    );

    padding:20px;
}

#canvas{

    width:100%;
    height:100%;

    background:white;

    border-radius:12px;

    box-shadow:
    0 6px 18px rgba(0,0,0,.15);
}